/* _content/Sahelly/Components/Layout/AdminLayout.razor.rz.scp.css */
/* ===================================
   AdminLayout - Professional Dashboard Design
   Modern E-commerce Admin Interface
   =================================== */

/* Admin Wrapper */
.admin-wrapper[b-brjego2a5n] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

    /* RTL Support */
    .admin-wrapper.rtl[b-brjego2a5n] {
        direction: rtl;
    }

    /* Dark Theme */
    .admin-wrapper.dark-theme[b-brjego2a5n] {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --surface-color: #1e293b;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --border-color: #334155;
    }

/* Admin Sidebar */
.admin-sidebar[b-brjego2a5n] {
    width: 280px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rtl .admin-sidebar[b-brjego2a5n] {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border-color);
}

.admin-sidebar.collapsed[b-brjego2a5n] {
    width: 70px;
}

/* Sidebar Header */
.sidebar-header[b-brjego2a5n] {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 80px;
}

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

.logo-icon[b-brjego2a5n] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.logo-text[b-brjego2a5n] {
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -0.5px;
}

.sidebar-toggle[b-brjego2a5n] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .sidebar-toggle:hover[b-brjego2a5n] {
        background: var(--primary-light);
        color: var(--primary-color);
        transform: scale(1.05);
    }

    .sidebar-toggle:active[b-brjego2a5n] {
        transform: scale(0.95);
    }

/* Admin Info */
.admin-info[b-brjego2a5n] {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

    .admin-info.collapsed[b-brjego2a5n] {
        padding: 16px;
        justify-content: center;
    }

.admin-avatar[b-brjego2a5n] {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    position: relative;
    flex-shrink: 0;
}

.online-indicator[b-brjego2a5n] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #10b981;
    border: 3px solid var(--surface-color);
    border-radius: 50%;
}

.admin-details h4[b-brjego2a5n] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-details p[b-brjego2a5n] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Sidebar Footer */
.sidebar-footer[b-brjego2a5n] {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.footer-stats[b-brjego2a5n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

    .stat-item i[b-brjego2a5n] {
        font-size: 16px;
        color: var(--primary-color);
    }

.logout-btn[b-brjego2a5n] {
    width: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--danger-light);
    color: var(--danger-color);
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .logout-btn:hover[b-brjego2a5n] {
        background: var(--danger-color);
        color: white;
        transform: translateY(-1px);
    }

/* Main Content Area */
.admin-main[b-brjego2a5n] {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

.rtl .admin-main[b-brjego2a5n] {
    margin-left: 0;
    margin-right: 280px;
}

.admin-main.sidebar-collapsed[b-brjego2a5n] {
    margin-left: 70px;
}

.rtl .admin-main.sidebar-collapsed[b-brjego2a5n] {
    margin-left: 0;
    margin-right: 70px;
}

/* Top Bar */
.admin-topbar[b-brjego2a5n] {
    position: sticky;
    top: 0;
    height: 70px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 24px;
    z-index: 50;
    backdrop-filter: blur(10px);
}

.topbar-left[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mobile-menu-toggle[b-brjego2a5n] {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mobile-menu-toggle:hover[b-brjego2a5n] {
        background: var(--bg-tertiary);
    }

/* Breadcrumb */
.breadcrumb-nav[b-brjego2a5n] {
    display: flex;
    align-items: center;
}

.breadcrumb[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-item[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

    .breadcrumb-item a[b-brjego2a5n] {
        color: var(--text-secondary);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-brjego2a5n] {
            color: var(--primary-color);
        }

    .breadcrumb-item.active[b-brjego2a5n] {
        color: var(--text-primary);
        font-weight: 500;
    }

    .breadcrumb-item[b-brjego2a5n]::after {
        content: '/';
        margin-left: 8px;
        color: var(--text-tertiary);
    }

.rtl .breadcrumb-item[b-brjego2a5n]::after {
    margin-left: 0;
    margin-right: 8px;
}

.breadcrumb-item:last-child[b-brjego2a5n]::after {
    display: none;
}

/* Top Bar Right */
.topbar-right[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Search Container */
.search-container[b-brjego2a5n] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-brjego2a5n] {
    width: 300px;
    height: 40px;
    padding: 0 40px 0 16px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.rtl .search-input[b-brjego2a5n] {
    padding: 0 16px 0 40px;
}

.search-input:focus[b-brjego2a5n] {
    outline: none;
    border-color: var(--primary-color);
    background: var(--surface-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-btn[b-brjego2a5n] {
    position: absolute;
    right: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.rtl .search-btn[b-brjego2a5n] {
    right: auto;
    left: 4px;
}

.search-btn:hover[b-brjego2a5n] {
    background: var(--primary-light);
    color: var(--primary-color);
}

/* Quick Actions */
.quick-actions[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn[b-brjego2a5n] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .action-btn:hover[b-brjego2a5n] {
        background: var(--bg-tertiary);
        color: var(--primary-color);
    }

    .action-btn:active[b-brjego2a5n] {
        transform: scale(0.95);
    }

.lang-text[b-brjego2a5n] {
    font-weight: 600;
    font-size: 14px;
}

/* Notification Dropdown */
.notification-dropdown[b-brjego2a5n] {
    position: relative;
}

.notification-btn[b-brjego2a5n] {
    position: relative;
}

.notification-badge[b-brjego2a5n] {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--danger-color);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-b-brjego2a5n 2s infinite;
}

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

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

/* Dropdown Menu */
.dropdown-menu[b-brjego2a5n] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: slideDown-b-brjego2a5n 0.2s ease;
}

.rtl .dropdown-menu[b-brjego2a5n] {
    right: auto;
    left: 0;
}

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

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

.dropdown-header[b-brjego2a5n] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dropdown-header h5[b-brjego2a5n] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

.mark-all-read[b-brjego2a5n] {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mark-all-read:hover[b-brjego2a5n] {
        color: var(--primary-hover);
    }

/* Notifications List */
.notifications-list[b-brjego2a5n] {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item[b-brjego2a5n] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

    .notification-item:hover[b-brjego2a5n] {
        background: var(--bg-tertiary);
    }

    .notification-item.unread[b-brjego2a5n] {
        background: var(--primary-light);
    }

.notification-icon[b-brjego2a5n] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

    .notification-icon.order[b-brjego2a5n] {
        background: var(--info-light);
        color: var(--info-color);
    }

    .notification-icon.success[b-brjego2a5n] {
        background: var(--success-light);
        color: var(--success-color);
    }

    .notification-icon.warning[b-brjego2a5n] {
        background: var(--warning-light);
        color: var(--warning-color);
    }

    .notification-icon.error[b-brjego2a5n] {
        background: var(--danger-light);
        color: var(--danger-color);
    }

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

    .notification-content h6[b-brjego2a5n] {
        margin: 0 0 4px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .notification-content p[b-brjego2a5n] {
        margin: 0 0 4px;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.4;
    }

.notification-time[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.dropdown-footer[b-brjego2a5n] {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

    .dropdown-footer a[b-brjego2a5n] {
        color: var(--primary-color);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
    }

        .dropdown-footer a:hover[b-brjego2a5n] {
            color: var(--primary-hover);
        }

/* User Dropdown */
.user-dropdown[b-brjego2a5n] {
    position: relative;
}

.user-menu-btn[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .user-menu-btn:hover[b-brjego2a5n] {
        background: var(--bg-tertiary);
        border-color: var(--primary-color);
    }

.user-avatar-small[b-brjego2a5n] {
    width: 32px;
    height: 32px;
    background: var(--gradient-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.user-menu[b-brjego2a5n] {
    width: 280px;
}

.user-menu-header[b-brjego2a5n] {
    padding: 20px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-avatar-large[b-brjego2a5n] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
}

.user-info h5[b-brjego2a5n] {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.user-info p[b-brjego2a5n] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.menu-divider[b-brjego2a5n] {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.menu-item[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
}

    .menu-item:hover[b-brjego2a5n] {
        background: var(--bg-tertiary);
        color: var(--primary-color);
    }

    .menu-item.logout[b-brjego2a5n] {
        color: var(--danger-color);
    }

        .menu-item.logout:hover[b-brjego2a5n] {
            background: var(--danger-light);
        }

/* Content Area */
.admin-content[b-brjego2a5n] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.content-wrapper[b-brjego2a5n] {
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeInUp-b-brjego2a5n 0.3s ease;
}

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

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

/* Footer */
.admin-footer[b-brjego2a5n] {
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    margin-top: auto;
}

.footer-content[b-brjego2a5n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-left p[b-brjego2a5n] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.footer-right[b-brjego2a5n] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

    .footer-right a[b-brjego2a5n] {
        color: var(--primary-color);
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .footer-right a:hover[b-brjego2a5n] {
            color: var(--primary-hover);
        }

.version[b-brjego2a5n] {
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}

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

/* Mobile Sidebar Overlay */
.sidebar-overlay[b-brjego2a5n] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn-b-brjego2a5n 0.2s ease;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.admin-sidebar.show-mobile ~ .sidebar-overlay[b-brjego2a5n] {
    opacity: 1;
    pointer-events: auto;
}

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

    to {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .search-input[b-brjego2a5n] {
        width: 200px;
    }
}

@media (max-width: 992px) {
    /* Hide body scrolling when sidebar is open */
    body.sidebar-open[b-brjego2a5n] {
        overflow: hidden;
    }

    .admin-sidebar[b-brjego2a5n] {
        transform: translateX(-100%);
        position: fixed;
        z-index: 1001;
    }

    .rtl .admin-sidebar[b-brjego2a5n] {
        transform: translateX(100%);
    }

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

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

    .rtl .admin-main[b-brjego2a5n] {
        margin-right: 0;
    }

    .admin-main.sidebar-collapsed[b-brjego2a5n] {
        margin-left: 0;
    }

    .rtl .admin-main.sidebar-collapsed[b-brjego2a5n] {
        margin-right: 0;
    }

    .mobile-menu-toggle[b-brjego2a5n] {
        display: flex;
    }

    .sidebar-overlay[b-brjego2a5n] {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .admin-sidebar.show-mobile ~ .sidebar-overlay[b-brjego2a5n] {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-content[b-brjego2a5n] {
        padding: 16px;
    }

    /* Hide desktop-only elements on mobile */
    .sidebar-toggle[b-brjego2a5n] {
        display: none;
    }
}

@media (max-width: 768px) {
    .search-container[b-brjego2a5n] {
        display: none;
    }

    .breadcrumb-nav[b-brjego2a5n] {
        display: none;
    }

    .admin-topbar[b-brjego2a5n] {
        padding: 0 16px;
    }

    .quick-actions[b-brjego2a5n] {
        gap: 4px;
    }

    .dropdown-menu[b-brjego2a5n] {
        width: calc(100vw - 32px);
        left: 16px;
        right: 16px;
    }

    .footer-content[b-brjego2a5n] {
        flex-direction: column;
        text-align: center;
    }
}

/* Custom Scrollbar */
.notifications-list[b-brjego2a5n]::-webkit-scrollbar,
.admin-content[b-brjego2a5n]::-webkit-scrollbar {
    width: 6px;
}

.notifications-list[b-brjego2a5n]::-webkit-scrollbar-track,
.admin-content[b-brjego2a5n]::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-list[b-brjego2a5n]::-webkit-scrollbar-thumb,
.admin-content[b-brjego2a5n]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

    .notifications-list[b-brjego2a5n]::-webkit-scrollbar-thumb:hover,
    .admin-content[b-brjego2a5n]::-webkit-scrollbar-thumb:hover {
        background: var(--text-tertiary);
    }

/* Print Styles */
@media print {
    .admin-sidebar[b-brjego2a5n],
    .admin-topbar[b-brjego2a5n],
    .admin-footer[b-brjego2a5n],
    .quick-actions[b-brjego2a5n] {
        display: none;
    }

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

    .admin-content[b-brjego2a5n] {
        padding: 0;
    }
}
/* _content/Sahelly/Components/Layout/AdminNavMenu.razor.rz.scp.css */
/* ===================================
   AdminNavMenu - Professional Navigation Menu
   Modern Dashboard Sidebar Navigation
   =================================== */

/* Navigation Container */
.admin-nav-menu[b-8v3ctplf75] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

    /* Smooth Scrollbar */
    .admin-nav-menu[b-8v3ctplf75]::-webkit-scrollbar {
        width: 6px;
    }

    .admin-nav-menu[b-8v3ctplf75]::-webkit-scrollbar-track {
        background: transparent;
    }

    .admin-nav-menu[b-8v3ctplf75]::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
        transition: all 0.2s ease;
    }

        .admin-nav-menu[b-8v3ctplf75]::-webkit-scrollbar-thumb:hover {
            background: var(--text-tertiary);
        }

/* Navigation Section */
.nav-section[b-8v3ctplf75] {
    margin-bottom: 24px;
}

    .nav-section:last-child[b-8v3ctplf75] {
        margin-bottom: 0;
    }

/* Section Title */
.nav-section-title[b-8v3ctplf75] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    opacity: 0.7;
}

    .nav-section-title i[b-8v3ctplf75] {
        font-size: 14px;
        color: var(--primary-color);
        opacity: 0.8;
    }

/* Navigation List */
.nav-list[b-8v3ctplf75] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Navigation Item */
.nav-item[b-8v3ctplf75] {
    position: relative;
    margin-bottom: 4px;
}

/* Navigation Link */
.nav-link[b-8v3ctplf75] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin: 0 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    width: calc(100% - 16px);
    cursor: pointer;
}

    .nav-link[b-8v3ctplf75]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0;
        transition: all 0.3s ease;
    }

    .nav-link:hover[b-8v3ctplf75] {
        color: var(--primary-color);
        background: var(--primary-light);
        transform: translateX(2px);
    }

.rtl .nav-link:hover[b-8v3ctplf75] {
    transform: translateX(-2px);
}

.nav-link:hover[b-8v3ctplf75]::before {
    width: 4px;
    opacity: 1;
}

/* Active Navigation Item */
.nav-item.active .nav-link[b-8v3ctplf75] {
    color: var(--primary-color);
    background: var(--primary-light);
    font-weight: 600;
}

    .nav-item.active .nav-link[b-8v3ctplf75]::before {
        width: 4px;
        opacity: 1;
    }

/* Navigation Icons */
.nav-link i:first-child[b-8v3ctplf75] {
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

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

/* Navigation Badge */
.nav-badge[b-8v3ctplf75] {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    margin-left: auto;
    animation: fadeIn-b-8v3ctplf75 0.3s ease;
}

.rtl .nav-badge[b-8v3ctplf75] {
    margin-left: 0;
    margin-right: auto;
}

.nav-badge.danger[b-8v3ctplf75] {
    background: var(--danger-color);
    color: white;
}

.nav-badge.warning[b-8v3ctplf75] {
    background: var(--warning-color);
    color: white;
}

.nav-badge.info[b-8v3ctplf75] {
    background: var(--info-color);
    color: white;
}

.nav-badge.success[b-8v3ctplf75] {
    background: var(--success-color);
    color: white;
}

/* Submenu */
.nav-item.has-submenu .nav-link[b-8v3ctplf75] {
    padding-right: 12px;
}

.rtl .nav-item.has-submenu .nav-link[b-8v3ctplf75] {
    padding-right: 20px;
    padding-left: 12px;
}

.submenu-icon[b-8v3ctplf75] {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.rtl .submenu-icon[b-8v3ctplf75] {
    margin-left: 0;
    margin-right: auto;
}

.nav-item.expanded .submenu-icon[b-8v3ctplf75] {
    transform: rotate(180deg);
}

/* Submenu List */
.nav-submenu[b-8v3ctplf75] {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    overflow: hidden;
    animation: slideDown-b-8v3ctplf75 0.3s ease;
}

@keyframes slideDown-b-8v3ctplf75 {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 500px;
    }
}

/* Submenu Item */
.submenu-item[b-8v3ctplf75] {
    margin-bottom: 2px;
}

.submenu-link[b-8v3ctplf75] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 44px;
    margin: 0 8px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}

.rtl .submenu-link[b-8v3ctplf75] {
    padding: 10px 44px 10px 20px;
}

.submenu-link i[b-8v3ctplf75] {
    font-size: 8px;
    opacity: 0.5;
}

.submenu-link:hover[b-8v3ctplf75] {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    transform: translateX(2px);
}

.rtl .submenu-link:hover[b-8v3ctplf75] {
    transform: translateX(-2px);
}

.submenu-link.active[b-8v3ctplf75] {
    color: var(--primary-color);
    background: var(--primary-light);
    font-weight: 500;
}

    .submenu-link.active i[b-8v3ctplf75] {
        opacity: 1;
    }

/* Small Badge for Submenu */
.badge-small[b-8v3ctplf75] {
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    margin-left: auto;
}

.rtl .badge-small[b-8v3ctplf75] {
    margin-left: 0;
    margin-right: auto;
}

.badge-small.warning[b-8v3ctplf75] {
    background: var(--warning-light);
    color: var(--warning-dark);
}

/* Help Section */
.help-section[b-8v3ctplf75] {
    padding: 0 12px;
    margin-top: auto;
}

.help-card[b-8v3ctplf75] {
    background: var(--gradient-primary);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .help-card[b-8v3ctplf75]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(45deg);
    }

    .help-card i[b-8v3ctplf75] {
        font-size: 32px;
        margin-bottom: 12px;
        opacity: 0.9;
    }

    .help-card h6[b-8v3ctplf75] {
        margin: 0 0 8px;
        font-size: 14px;
        font-weight: 600;
    }

    .help-card p[b-8v3ctplf75] {
        margin: 0 0 16px;
        font-size: 12px;
        opacity: 0.9;
        line-height: 1.5;
    }

.help-btn[b-8v3ctplf75] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

    .help-btn:hover[b-8v3ctplf75] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
    }

/* Collapsed State */
.admin-nav-menu.collapsed[b-8v3ctplf75] {
    padding: 8px 0;
}

.collapsed .nav-section-title[b-8v3ctplf75] {
    display: none;
}

.collapsed .nav-link[b-8v3ctplf75] {
    padding: 12px;
    margin: 0 4px;
    justify-content: center;
    position: relative;
}

    .collapsed .nav-link:hover[b-8v3ctplf75] {
        transform: none;
    }

.collapsed .nav-text[b-8v3ctplf75],
.collapsed .nav-badge[b-8v3ctplf75],
.collapsed .submenu-icon[b-8v3ctplf75],
.collapsed .nav-submenu[b-8v3ctplf75],
.collapsed .help-section[b-8v3ctplf75] {
    display: none;
}

/* Tooltip for Collapsed State */
.collapsed .nav-link[b-8v3ctplf75]::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 100;
}

.rtl.collapsed .nav-link[b-8v3ctplf75]::after {
    left: auto;
    right: calc(100% + 12px);
}

.collapsed .nav-link:hover[b-8v3ctplf75]::after {
    opacity: 1;
}

/* Animations */
@keyframes fadeIn-b-8v3ctplf75 {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

/* Dark Theme Adjustments */
.dark-theme .nav-link[b-8v3ctplf75] {
    color: var(--text-secondary);
}

    .dark-theme .nav-link:hover[b-8v3ctplf75] {
        background: rgba(99, 102, 241, 0.1);
    }

.dark-theme .nav-item.active .nav-link[b-8v3ctplf75] {
    background: rgba(99, 102, 241, 0.2);
}

.dark-theme .submenu-link:hover[b-8v3ctplf75] {
    background: rgba(255, 255, 255, 0.05);
}

.dark-theme .submenu-link.active[b-8v3ctplf75] {
    background: rgba(99, 102, 241, 0.15);
}

.dark-theme .help-card[b-8v3ctplf75] {
    background: var(--gradient-cool);
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .admin-nav-menu[b-8v3ctplf75] {
        padding: 12px 0;
    }

    .nav-link[b-8v3ctplf75] {
        padding: 14px 20px;
        font-size: 15px;
    }

        .nav-link i:first-child[b-8v3ctplf75] {
            font-size: 20px;
        }

    .nav-section-title[b-8v3ctplf75] {
        font-size: 12px;
        padding: 12px 20px;
    }

    .submenu-link[b-8v3ctplf75] {
        padding: 12px 20px 12px 48px;
        font-size: 14px;
    }

    .rtl .submenu-link[b-8v3ctplf75] {
        padding: 12px 48px 12px 20px;
    }
}

/* Touch-friendly hover states */
@media (hover: none) {
    .nav-link:active[b-8v3ctplf75] {
        background: var(--primary-light);
        color: var(--primary-color);
    }

    .submenu-link:active[b-8v3ctplf75] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .nav-link[b-8v3ctplf75] {
        border: 1px solid transparent;
    }

        .nav-link:hover[b-8v3ctplf75],
        .nav-link:focus[b-8v3ctplf75] {
            border-color: var(--primary-color);
            outline: 2px solid var(--primary-color);
            outline-offset: -2px;
        }

    .nav-item.active .nav-link[b-8v3ctplf75] {
        border-color: var(--primary-color);
    }
}
/* _content/Sahelly/Components/Layout/AgentLayout.razor.rz.scp.css */
/* ============================================
   Agent Layout Styles - Premium Mobile Design
   ============================================ */

/* App Shell Container */
.app-shell[b-lmxiwftp71] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

/* Premium Header */
.premium-header[b-lmxiwftp71] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    padding: 0 var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

[data-theme="dark"] .premium-header[b-lmxiwftp71] {
    background: rgba(30, 41, 59, 0.95);
}

.header-inner[b-lmxiwftp71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Actions */
.header-action[b-lmxiwftp71] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    font-size: 1.25rem;
}

    .header-action:hover[b-lmxiwftp71] {
        background: var(--hover-background);
        color: var(--primary-color);
        transform: scale(1.05);
    }

    .header-action:active[b-lmxiwftp71] {
        transform: scale(0.95);
    }

/* Page Title */
.page-title[b-lmxiwftp71] {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 var(--spacing-md);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Notification Dropdown Styles */
.notification-dropdown[b-lmxiwftp71] {
    position: relative;
}

.notification-btn[b-lmxiwftp71] {
    position: relative;
}

    .notification-btn.active[b-lmxiwftp71] {
        color: var(--primary-color);
        background: var(--primary-light);
    }

/* Header Badge (Notification Count) */
.header-badge[b-lmxiwftp71] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--gradient-warm);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: var(--radius-full);
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    animation: badgePulse-b-lmxiwftp71 2s infinite;
}

@keyframes badgePulse-b-lmxiwftp71 {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* Notifications Menu */
.notifications-menu[b-lmxiwftp71] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transform-origin: top right;
    animation: dropdownSlide-b-lmxiwftp71 var(--transition-base) ease-out;
    z-index: var(--z-dropdown);
}

[data-theme="dark"] .notifications-menu[b-lmxiwftp71] {
    background: rgba(30, 41, 59, 0.98);
}

@keyframes dropdownSlide-b-lmxiwftp71 {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

/* Dropdown Header */
.dropdown-header[b-lmxiwftp71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

    .dropdown-header h5[b-lmxiwftp71] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.mark-all-read[b-lmxiwftp71] {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

    .mark-all-read:hover[b-lmxiwftp71] {
        background: var(--primary-light);
        transform: translateY(-1px);
    }

/* Notifications List */
.notifications-list[b-lmxiwftp71] {
    max-height: 400px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .notifications-list[b-lmxiwftp71]::-webkit-scrollbar {
        width: 4px;
    }

    .notifications-list[b-lmxiwftp71]::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: var(--radius-sm);
    }

/* Notification Item */
.notification-item[b-lmxiwftp71] {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

    .notification-item:hover[b-lmxiwftp71] {
        background: var(--hover-background);
    }

    .notification-item.unread[b-lmxiwftp71] {
        background: var(--bg-secondary);
    }

        .notification-item.unread[b-lmxiwftp71]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--gradient-primary);
        }

/* Notification Icon */
.notification-icon[b-lmxiwftp71] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

    .notification-icon.order[b-lmxiwftp71] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
        color: var(--primary-color);
    }

    .notification-icon.payment[b-lmxiwftp71] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
        color: var(--success-color);
    }

    .notification-icon.success[b-lmxiwftp71] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
        color: var(--success-color);
    }

    .notification-icon.warning[b-lmxiwftp71] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
        color: var(--warning-color);
    }

    .notification-icon.error[b-lmxiwftp71] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
        color: var(--danger-color);
    }

    .notification-icon.security[b-lmxiwftp71] {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%);
        color: #8b5cf6;
    }

    .notification-icon.info[b-lmxiwftp71] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.1) 100%);
        color: var(--info-color);
    }

/* Notification Content */
.notification-content[b-lmxiwftp71] {
    flex: 1;
    min-width: 0;
}

    .notification-content h6[b-lmxiwftp71] {
        margin: 0 0 var(--spacing-xs);
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
    }

    .notification-content p[b-lmxiwftp71] {
        margin: 0 0 var(--spacing-xs);
        font-size: 0.875rem;
        color: var(--text-secondary);
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.notification-time[b-lmxiwftp71] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* No Notifications */
.no-notifications[b-lmxiwftp71] {
    padding: var(--spacing-3xl) var(--spacing-xl);
    text-align: center;
    color: var(--text-muted);
}

    .no-notifications i[b-lmxiwftp71] {
        font-size: 3rem;
        margin-bottom: var(--spacing-md);
        opacity: 0.3;
    }

    .no-notifications p[b-lmxiwftp71] {
        margin: 0;
        font-size: 0.9375rem;
    }

/* Dropdown Footer */
.dropdown-footer[b-lmxiwftp71] {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    text-align: center;
}

    .dropdown-footer a[b-lmxiwftp71] {
        color: var(--primary-color);
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: all var(--transition-fast);
    }

        .dropdown-footer a:hover[b-lmxiwftp71] {
            text-decoration: underline;
        }

/* Sidebar Backdrop */
.sidebar-backdrop[b-lmxiwftp71] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

    .sidebar-backdrop.active[b-lmxiwftp71] {
        opacity: 1;
        visibility: visible;
    }

/* Main Content */
.main-content[b-lmxiwftp71] {
    flex: 1;
    padding-top: 60px;
    padding-bottom: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.content-area[b-lmxiwftp71] {
    padding: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

/* Premium Tab Bar */
.premium-tabbar[b-lmxiwftp71] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
    border-top: 1px solid var(--border-color);
    z-index: 100;
    padding-bottom: var(--safe-area-inset-bottom);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .premium-tabbar[b-lmxiwftp71] {
    background: rgba(30, 41, 59, 0.95);
}

.tabbar-inner[b-lmxiwftp71] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 64px;
    position: relative;
}

/* Tab Items */
.tab-item[b-lmxiwftp71] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    height: 100%;
    color: var(--text-tertiary);
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
    padding: var(--spacing-sm);
}

    .tab-item:active[b-lmxiwftp71] {
        transform: scale(0.95);
    }

    .tab-item.active[b-lmxiwftp71] {
        color: var(--primary-color);
    }

        .tab-item.active[b-lmxiwftp71]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 30%;
            right: 30%;
            height: 2px;
            background: var(--gradient-primary);
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }

.tab-icon[b-lmxiwftp71] {
    font-size: 1.25rem;
    transition: transform var(--transition-fast);
}

.tab-item.active .tab-icon[b-lmxiwftp71] {
    transform: translateY(-2px);
}

.tab-label[b-lmxiwftp71] {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Tab Notification Badge */
.tab-notification[b-lmxiwftp71] {
    position: absolute;
    top: 8px;
    right: calc(50% - 20px);
    background: var(--gradient-warm);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: var(--radius-full);
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

/* Center Tab Button */
.tab-center[b-lmxiwftp71] {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 3px solid var(--bg-primary);
}

    .tab-center:hover[b-lmxiwftp71] {
        transform: translateX(-50%) scale(1.1);
        box-shadow: var(--glow-primary), var(--shadow-xl);
    }

    .tab-center:active[b-lmxiwftp71] {
        transform: translateX(-50%) scale(0.95);
    }

/* Hidden Tracking Elements */
.tracking-widget-hidden[b-lmxiwftp71],
.connection-status-hidden[b-lmxiwftp71],
.permission-request[b-lmxiwftp71] {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 576px) {
    .notifications-menu[b-lmxiwftp71] {
        width: calc(100vw - 16px);
        right: 8px;
    }

    .notification-content h6[b-lmxiwftp71] {
        font-size: 0.875rem;
    }

    .notification-content p[b-lmxiwftp71] {
        font-size: 0.8125rem;
    }
}

@media (min-width: 768px) {
    .premium-header[b-lmxiwftp71] {
        height: 70px;
    }

    .page-title[b-lmxiwftp71] {
        font-size: 1.5rem;
    }

    .main-content[b-lmxiwftp71] {
        padding-top: 70px;
        padding-bottom: 90px;
    }

    .premium-tabbar[b-lmxiwftp71] {
        height: 80px;
    }

    .tabbar-inner[b-lmxiwftp71] {
        height: 80px;
        max-width: 600px;
        margin: 0 auto;
    }

    .tab-icon[b-lmxiwftp71] {
        font-size: 1.5rem;
    }

    .tab-label[b-lmxiwftp71] {
        font-size: 0.875rem;
    }

    .tab-center[b-lmxiwftp71] {
        width: 64px;
        height: 64px;
        top: -25px;
    }
}

/* Print Styles */
@media print {
    .premium-header[b-lmxiwftp71],
    .premium-tabbar[b-lmxiwftp71],
    .sidebar-backdrop[b-lmxiwftp71],
    .notification-dropdown[b-lmxiwftp71] {
        display: none !important;
    }

    .main-content[b-lmxiwftp71] {
        padding: 0;
    }
}

/* Accessibility */
.header-action:focus-visible[b-lmxiwftp71],
.notification-item:focus-visible[b-lmxiwftp71],
.tab-item:focus-visible[b-lmxiwftp71] {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .notification-dropdown[b-lmxiwftp71],
    .notifications-menu[b-lmxiwftp71],
    .notification-item[b-lmxiwftp71],
    .tab-item[b-lmxiwftp71],
    .tab-center[b-lmxiwftp71] {
        animation: none !important;
        transition: none !important;
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .notification-item.unread[b-lmxiwftp71] {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .notification-item:hover[b-lmxiwftp71] {
    background: rgba(255, 255, 255, 0.08);
}

/* RTL Support */
[dir="rtl"] .notification-item.unread[b-lmxiwftp71]::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .notification-time[b-lmxiwftp71] {
    flex-direction: row-reverse;
}

[dir="rtl"] .dropdown-header[b-lmxiwftp71] {
    flex-direction: row-reverse;
}

[dir="rtl"] .notification-item[b-lmxiwftp71] {
    flex-direction: row-reverse;
}

[dir="rtl"] .tab-notification[b-lmxiwftp71] {
    right: auto;
    left: calc(50% - 20px);
}
/* _content/Sahelly/Components/Layout/AgentNavMenu.razor.rz.scp.css */
/* Premium Sidebar Styles */
.premium-sidebar[b-n153ydslyg] {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: var(--surface-color);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .premium-sidebar.active[b-n153ydslyg] {
        transform: translateX(-300px);
    }

/* Sidebar Header */
.sidebar-header[b-n153ydslyg] {
    padding: calc(env(safe-area-inset-top) + 24px) 24px 24px;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

    .sidebar-header[b-n153ydslyg]::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
        animation: shimmer-b-n153ydslyg 3s infinite;
    }

@keyframes shimmer-b-n153ydslyg {
    0% {
        transform: rotate(0deg);
    }

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

.user-profile[b-n153ydslyg] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-avatar[b-n153ydslyg] {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-base);
}

    .user-avatar:hover[b-n153ydslyg] {
        transform: scale(1.05);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    }

.user-details[b-n153ydslyg] {
    flex: 1;
    color: white;
}

.user-name[b-n153ydslyg] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.user-role[b-n153ydslyg] {
    font-size: 14px;
    opacity: 0.9;
}

/* Sidebar Navigation */
.sidebar-nav[b-n153ydslyg] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 0;
    -webkit-overflow-scrolling: touch;
}

.nav-group[b-n153ydslyg] {
    margin-bottom: 24px;
    padding: 0 16px;
}

.nav-group-title[b-n153ydslyg] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding: 0 8px;
}

.nav-item[b-n153ydslyg] {
    margin-bottom: 4px;
}

.nav-link[b-n153ydslyg] {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    background: transparent;
}

    .nav-link[b-n153ydslyg]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .nav-link:hover[b-n153ydslyg] {
        background: var(--hover-background);
    }

    .nav-link:active[b-n153ydslyg] {
        transform: scale(0.98);
    }

    .nav-link.active[b-n153ydslyg] {
        background: var(--gradient-primary);
        color: white;
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
    }

        .nav-link.active[b-n153ydslyg]::before {
            opacity: 1;
        }

    .nav-link.logout[b-n153ydslyg] {
        color: var(--danger-color);
    }

        .nav-link.logout:hover[b-n153ydslyg] {
            background: var(--danger-light);
        }

.nav-icon[b-n153ydslyg] {
    width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: relative;
    z-index: 1;
}

.nav-text[b-n153ydslyg] {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.nav-badge[b-n153ydslyg] {
    background: var(--gradient-accent);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    position: relative;
    z-index: 1;
}

.nav-link.active .nav-badge[b-n153ydslyg] {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

/* Responsive */
@media (max-width: 320px) {
    .premium-sidebar[b-n153ydslyg] {
        width: 280px;
        right: -280px;
    }

        .premium-sidebar.active[b-n153ydslyg] {
            transform: translateX(-280px);
        }
}
/* _content/Sahelly/Components/Layout/MainLayout.razor.rz.scp.css */
/* ===================================
   MainLayout - Modern Mobile-First Design
   Professional E-commerce UI/UX
   =================================== */

/* Root Layout */
.app-wrapper[b-rj5k10k1li] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--background-color);
    transition: background-color 0.3s ease;
}

/* Mobile Header - Clean & Minimal */
.mobile-header[b-rj5k10k1li] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.mobile-header-content[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 16px;
}

/* Logo Section */
.mobile-logo[b-rj5k10k1li] {
    flex: 1;
}

.logo-link[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
}

.logo-icon[b-rj5k10k1li] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text[b-rj5k10k1li] {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile Actions */
.mobile-actions[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-icon[b-rj5k10k1li] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .action-icon:active[b-rj5k10k1li] {
        transform: scale(0.95);
        background: var(--bg-tertiary);
    }

    .action-icon i[b-rj5k10k1li] {
        font-size: 20px;
    }

/* Notification Icon */
.notification-icon[b-rj5k10k1li] {
    position: relative;
}

.notification-dot[b-rj5k10k1li] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--surface-color);
}

/* Mini Avatar */
.mini-avatar[b-rj5k10k1li] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

/* Main Content */
.main-content[b-rj5k10k1li] {
    flex: 1;
    padding-top: 56px;
    padding-bottom: 60px;
    min-height: calc(100vh - 116px);
}

.content-container[b-rj5k10k1li] {
    width: 100%;
    padding: 16px;
}

/* Mobile Bottom Navigation - Modern Tab Bar */
.mobile-bottom-nav[b-rj5k10k1li] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item[b-rj5k10k1li] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 0;
    color: var(--text-tertiary);
    text-decoration: none;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
}

    .nav-item i[b-rj5k10k1li] {
        font-size: 22px;
        transition: transform 0.2s ease;
    }

    .nav-item span[b-rj5k10k1li] {
        font-size: 11px;
        font-weight: 500;
    }

    .nav-item.active[b-rj5k10k1li] {
        color: var(--primary-color);
    }

        .nav-item.active i[b-rj5k10k1li] {
            transform: translateY(-2px);
        }

    .nav-item:active i[b-rj5k10k1li] {
        transform: scale(0.9);
    }

/* Cart Count Badge */
.cart-count[b-rj5k10k1li] {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(14px);
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bottom Sheet - Modern Implementation */
.bottom-sheet[b-rj5k10k1li] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1100;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

    .bottom-sheet.show[b-rj5k10k1li] {
        transform: translateY(0);
    }

.sheet-content[b-rj5k10k1li] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 90vh;
}

.sheet-header[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

    .sheet-header h3[b-rj5k10k1li] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
    }

.sheet-close[b-rj5k10k1li] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .sheet-close:active[b-rj5k10k1li] {
        transform: scale(0.9);
    }

.sheet-body[b-rj5k10k1li] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* Search Sheet Specific */
.mobile-search-box[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    padding: 0 16px;
    margin-bottom: 24px;
}

    .mobile-search-box i[b-rj5k10k1li] {
        color: var(--text-tertiary);
        font-size: 18px;
    }

    .mobile-search-box input[b-rj5k10k1li] {
        flex: 1;
        background: transparent;
        border: none;
        padding: 16px 0;
        font-size: 16px;
        color: var(--text-primary);
        outline: none;
    }

        .mobile-search-box input[b-rj5k10k1li]::placeholder {
            color: var(--text-tertiary);
        }

/* Recent Searches */
.recent-searches[b-rj5k10k1li] {
    margin-bottom: 32px;
}

    .recent-searches h4[b-rj5k10k1li] {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 12px 0;
    }

.search-tags[b-rj5k10k1li] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-tag[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .search-tag:active[b-rj5k10k1li] {
        background: var(--primary-light);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .search-tag i[b-rj5k10k1li] {
        font-size: 12px;
    }

/* Popular Categories */
.popular-categories h4[b-rj5k10k1li] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.category-grid[b-rj5k10k1li] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.category-item[b-rj5k10k1li] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .category-item:active[b-rj5k10k1li] {
        transform: scale(0.95);
        background: var(--primary-light);
        border-color: var(--primary-color);
    }

    .category-item i[b-rj5k10k1li] {
        font-size: 24px;
        color: var(--primary-color);
    }

    .category-item span[b-rj5k10k1li] {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

/* Notification Sheet */
.notification-sheet[b-rj5k10k1li] {
    max-height: 80vh;
}

.notification-actions[b-rj5k10k1li] {
    margin-bottom: 16px;
}

.mark-all-btn[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--primary-light);
    border: none;
    border-radius: 12px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mark-all-btn:active[b-rj5k10k1li] {
        transform: scale(0.95);
    }

.notifications-list[b-rj5k10k1li] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-card[b-rj5k10k1li] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .notification-card.unread[b-rj5k10k1li] {
        background: var(--surface-color);
        border: 1px solid var(--primary-light);
    }

    .notification-card:active[b-rj5k10k1li] {
        transform: scale(0.98);
    }

.notification-icon-wrapper[b-rj5k10k1li] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: 12px;
    flex-shrink: 0;
}

    .notification-icon-wrapper i[b-rj5k10k1li] {
        font-size: 20px;
        color: var(--primary-color);
    }

.notification-content[b-rj5k10k1li] {
    flex: 1;
}

    .notification-content h4[b-rj5k10k1li] {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .notification-content p[b-rj5k10k1li] {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.5;
    }

.notification-time[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-tertiary);
}

    .notification-time i[b-rj5k10k1li] {
        font-size: 10px;
    }

.unread-indicator[b-rj5k10k1li] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
}

.empty-notifications[b-rj5k10k1li] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

    .empty-notifications i[b-rj5k10k1li] {
        font-size: 64px;
        color: var(--text-tertiary);
        opacity: 0.3;
        margin-bottom: 16px;
    }

    .empty-notifications p[b-rj5k10k1li] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

/* User Sheet */
.user-sheet[b-rj5k10k1li] {
    max-height: 85vh;
}

.user-info-card[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
}

.user-avatar-large[b-rj5k10k1li] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 700;
}

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

    .user-details h4[b-rj5k10k1li] {
        margin: 0 0 4px 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .user-details p[b-rj5k10k1li] {
        margin: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

.edit-profile-btn[b-rj5k10k1li] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-color);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
}

/* Quick Stats */
.quick-stats[b-rj5k10k1li] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.stat-item[b-rj5k10k1li] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 16px;
}

    .stat-item i[b-rj5k10k1li] {
        font-size: 24px;
        color: var(--primary-color);
        margin-bottom: 4px;
    }

.stat-value[b-rj5k10k1li] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label[b-rj5k10k1li] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* User Menu Items */
.user-menu-items[b-rj5k10k1li] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.user-menu-item[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    .user-menu-item:active[b-rj5k10k1li] {
        background: var(--bg-tertiary);
        transform: scale(0.98);
    }

    .user-menu-item i:first-child[b-rj5k10k1li] {
        width: 20px;
        font-size: 18px;
        color: var(--text-secondary);
    }

    .user-menu-item span[b-rj5k10k1li] {
        flex: 1;
        font-size: 16px;
        font-weight: 500;
    }

    .user-menu-item i:last-child[b-rj5k10k1li] {
        font-size: 14px;
        color: var(--text-tertiary);
    }

/* Settings Section */
.settings-section[b-rj5k10k1li] {
    margin-bottom: 24px;
}

.setting-item[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

    .setting-item:last-child[b-rj5k10k1li] {
        border-bottom: none;
    }

.setting-info[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .setting-info i[b-rj5k10k1li] {
        font-size: 18px;
        color: var(--text-secondary);
    }

    .setting-info span[b-rj5k10k1li] {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
    }

/* Toggle Switch */
.toggle-switch[b-rj5k10k1li] {
    position: relative;
    width: 48px;
    height: 28px;
}

    .toggle-switch input[b-rj5k10k1li] {
        display: none;
    }

.toggle-slider[b-rj5k10k1li] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-tertiary);
    border-radius: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .toggle-slider[b-rj5k10k1li]::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

.toggle-switch input:checked + .toggle-slider[b-rj5k10k1li] {
    background: var(--primary-color);
}

    .toggle-switch input:checked + .toggle-slider[b-rj5k10k1li]::before {
        transform: translateX(20px);
    }

/* Language Button */
.language-btn[b-rj5k10k1li] {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .language-btn:active[b-rj5k10k1li] {
        background: var(--primary-light);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

/* Logout Button */
.logout-btn[b-rj5k10k1li] {
    width: 100%;
    padding: 16px;
    background: var(--danger-light);
    border: none;
    border-radius: 12px;
    color: var(--danger-color);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .logout-btn:active[b-rj5k10k1li] {
        transform: scale(0.98);
    }

/* Menu Sheet */
.menu-sheet .sheet-content.full-height[b-rj5k10k1li] {
    max-height: 85vh;
}

.menu-body[b-rj5k10k1li] {
    padding: 0;
}

/* Desktop Styles - Hidden on Mobile */
.desktop-header[b-rj5k10k1li],
.desktop-dropdown[b-rj5k10k1li] {
    display: none;
}

/* Desktop Dropdown Menu Base Styles */
.dropdown-menu[b-rj5k10k1li] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    display: none;
}

    .dropdown-menu[style*="display: block"][b-rj5k10k1li] {
        opacity: 1;
        transform: translateY(0);
    }

/* Notification Dropdown */
.notification-dropdown[b-rj5k10k1li] {
    position: relative;
}

/* Desktop User Dropdown */
.user-dropdown[b-rj5k10k1li] {
    position: relative;
}

/* User Menu Dropdown */
.dropdown-menu.user-menu[b-rj5k10k1li] {
    width: 280px;
    padding: 0;
    overflow: hidden;
}

.user-menu-header[b-rj5k10k1li] {
    padding: 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
}

    .user-menu-header .user-avatar-large[b-rj5k10k1li] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .user-menu-header .user-info[b-rj5k10k1li] {
        flex: 1;
        min-width: 0;
    }

        .user-menu-header .user-info h5[b-rj5k10k1li] {
            margin: 0 0 4px 0;
            font-size: 16px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-menu-header .user-info p[b-rj5k10k1li] {
            margin: 0;
            font-size: 13px;
            opacity: 0.9;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.menu-divider[b-rj5k10k1li] {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.dropdown-menu .menu-item[b-rj5k10k1li] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: inherit;
    cursor: pointer;
}

    .dropdown-menu .menu-item:hover[b-rj5k10k1li] {
        background: var(--bg-tertiary);
        color: var(--primary-color);
    }

    .dropdown-menu .menu-item i[b-rj5k10k1li] {
        width: 20px;
        text-align: center;
        font-size: 16px;
    }

    .dropdown-menu .menu-item.logout[b-rj5k10k1li] {
        color: #ef4444;
    }

        .dropdown-menu .menu-item.logout:hover[b-rj5k10k1li] {
            background: #fee2e2;
        }

/* Notifications Menu Dropdown */
.dropdown-menu.notifications-menu[b-rj5k10k1li] {
    width: 380px;
    max-height: 480px;
    display: flex;
    flex-direction: column;
}

.dropdown-header[b-rj5k10k1li] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dropdown-header h5[b-rj5k10k1li] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

.mark-all-read[b-rj5k10k1li] {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

    .mark-all-read:hover[b-rj5k10k1li] {
        opacity: 0.8;
    }

.notifications-menu .notifications-list[b-rj5k10k1li] {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
}

.notification-item[b-rj5k10k1li] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

    .notification-item:hover[b-rj5k10k1li] {
        background: var(--bg-tertiary);
    }

    .notification-item.unread[b-rj5k10k1li] {
        background: #f0f9ff;
    }

.notification-icon[b-rj5k10k1li] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

    .notification-icon.order[b-rj5k10k1li] {
        background: #dbeafe;
        color: #3b82f6;
    }

    .notification-icon.payment[b-rj5k10k1li] {
        background: #d1fae5;
        color: #10b981;
    }

    .notification-icon.success[b-rj5k10k1li] {
        background: #d1fae5;
        color: #10b981;
    }

    .notification-icon.warning[b-rj5k10k1li] {
        background: #fed7aa;
        color: #f97316;
    }

    .notification-icon.error[b-rj5k10k1li] {
        background: #fee2e2;
        color: #ef4444;
    }

    .notification-icon.security[b-rj5k10k1li] {
        background: #e9d5ff;
        color: #a855f7;
    }

    .notification-icon.info[b-rj5k10k1li] {
        background: #e0e7ff;
        color: #6366f1;
    }

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

    .notification-item .notification-content h6[b-rj5k10k1li] {
        margin: 0 0 4px 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
    }

    .notification-item .notification-content p[b-rj5k10k1li] {
        margin: 0 0 8px 0;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.notification-item .notification-time[b-rj5k10k1li] {
    font-size: 11px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.no-notifications[b-rj5k10k1li] {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary);
}

    .no-notifications i[b-rj5k10k1li] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.3;
    }

    .no-notifications p[b-rj5k10k1li] {
        margin: 0;
        font-size: 14px;
    }

.dropdown-footer[b-rj5k10k1li] {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

    .dropdown-footer a[b-rj5k10k1li] {
        color: var(--primary-color);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
    }

        .dropdown-footer a:hover[b-rj5k10k1li] {
            text-decoration: underline;
        }

/* Dropdown Overlay */
.dropdown-overlay[b-rj5k10k1li] {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}

/* Tablet and Desktop Styles */
@media (min-width: 768px) {
    /* Hide Mobile Elements */
    .mobile-header[b-rj5k10k1li],
    .mobile-bottom-nav[b-rj5k10k1li],
    .bottom-sheet[b-rj5k10k1li] {
        display: none;
    }

    /* Show Desktop Header */
    .desktop-header[b-rj5k10k1li] {
        display: block;
        position: sticky;
        top: 0;
        background: var(--surface-color);
        border-bottom: 1px solid var(--border-color);
        z-index: 1000;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .desktop-header-container[b-rj5k10k1li] {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 24px;
        height: 72px;
        display: flex;
        align-items: center;
        gap: 32px;
    }

    /* Desktop Brand */
    .desktop-brand[b-rj5k10k1li] {
        display: flex;
        align-items: center;
    }

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

    .brand-logo[b-rj5k10k1li] {
        width: 32px;
        height: 32px;
    }

    .brand-name[b-rj5k10k1li] {
        font-size: 24px;
        font-weight: 800;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Desktop Search */
    .desktop-search[b-rj5k10k1li] {
        flex: 1;
        max-width: 600px;
        margin: 0 auto;
    }

    .search-container[b-rj5k10k1li] {
        display: flex;
        align-items: center;
        background: var(--bg-tertiary);
        border: 2px solid transparent;
        border-radius: 40px;
        padding: 4px 4px 4px 20px;
        transition: all 0.3s ease;
    }

        .search-container:focus-within[b-rj5k10k1li] {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }

    .search-icon[b-rj5k10k1li] {
        color: var(--text-tertiary);
        margin-right: 12px;
    }

    .search-container input[b-rj5k10k1li] {
        flex: 1;
        background: transparent;
        border: none;
        font-size: 16px;
        color: var(--text-primary);
        outline: none;
    }

    .search-button[b-rj5k10k1li] {
        padding: 10px 24px;
        background: var(--primary-color);
        border: none;
        border-radius: 32px;
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .search-button:hover[b-rj5k10k1li] {
            background: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

    /* Desktop Actions */
    .desktop-actions[b-rj5k10k1li] {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .desktop-action-btn[b-rj5k10k1li] {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 12px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

        .desktop-action-btn:hover[b-rj5k10k1li] {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .desktop-action-btn.active[b-rj5k10k1li] {
            background: var(--bg-tertiary);
            color: var(--primary-color);
        }

        .desktop-action-btn i[b-rj5k10k1li] {
            font-size: 20px;
        }

    .lang-text[b-rj5k10k1li] {
        font-weight: 600;
        font-size: 16px;
    }

    .desktop-notification-badge[b-rj5k10k1li] {
        position: absolute;
        top: 6px;
        right: 6px;
        background: #ef4444;
        color: white;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Desktop User Menu */
    .user-menu-trigger[b-rj5k10k1li] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px;
        background: transparent;
        border: none;
        border-radius: 40px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .user-menu-trigger:hover[b-rj5k10k1li] {
            background: var(--bg-tertiary);
        }

        .user-menu-trigger.active[b-rj5k10k1li] {
            background: var(--bg-tertiary);
        }

    .user-avatar[b-rj5k10k1li] {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 16px;
    }

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

    .user-menu-trigger i[b-rj5k10k1li] {
        font-size: 12px;
        color: var(--text-tertiary);
        transition: transform 0.2s ease;
    }

    .user-menu-trigger.active i[b-rj5k10k1li] {
        transform: rotate(180deg);
    }

    /* Desktop Login Button */
    .desktop-login-btn[b-rj5k10k1li] {
        padding: 10px 24px;
        background: var(--primary-color);
        border-radius: 32px;
        color: white;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .desktop-login-btn:hover[b-rj5k10k1li] {
            background: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

    /* Main Content Adjustments */
    .main-content[b-rj5k10k1li] {
        padding-top: 0;
        padding-bottom: 0;
        min-height: calc(100vh - 72px);
    }

    .content-container[b-rj5k10k1li] {
        max-width: 1400px;
        margin: 0 auto;
        padding: 32px 24px;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .desktop-header-container[b-rj5k10k1li] {
        padding: 0 48px;
    }

    .content-container[b-rj5k10k1li] {
        padding: 48px;
    }
}

/* Dark Theme Adjustments */
.dark-theme[b-rj5k10k1li] {
    --surface-color: #1e293b;
    --background-color: #0f172a;
    --bg-tertiary: #334155;
    --border-color: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
}

    .dark-theme .mobile-header[b-rj5k10k1li],
    .dark-theme .desktop-header[b-rj5k10k1li] {
        background: rgba(30, 41, 59, 0.95);
    }

    .dark-theme .bottom-sheet[b-rj5k10k1li] {
        background: #1e293b;
    }

    .dark-theme .dropdown-menu[b-rj5k10k1li] {
        background: #1e293b;
        border-color: #334155;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .dark-theme .menu-divider[b-rj5k10k1li] {
        background: #334155;
    }

    .dark-theme .dropdown-menu .menu-item:hover[b-rj5k10k1li] {
        background: #334155;
    }

    .dark-theme .dropdown-menu .menu-item.logout:hover[b-rj5k10k1li] {
        background: rgba(239, 68, 68, 0.1);
    }

    .dark-theme .notification-item.unread[b-rj5k10k1li] {
        background: rgba(96, 165, 250, 0.1);
    }

    .dark-theme .notification-icon[b-rj5k10k1li] {
        opacity: 0.9;
    }

    .dark-theme .notification-card.unread[b-rj5k10k1li] {
        background: #0f172a;
        border-color: rgba(99, 102, 241, 0.3);
    }

/* RTL Support */
.rtl[b-rj5k10k1li] {
    direction: rtl;
}

    .rtl .mobile-header-content[b-rj5k10k1li],
    .rtl .desktop-header-container[b-rj5k10k1li] {
        direction: rtl;
    }

    .rtl .dropdown-menu[b-rj5k10k1li] {
        right: auto;
        left: 0;
    }

    .rtl .notification-dot[b-rj5k10k1li] {
        right: auto;
        left: 8px;
    }

    .rtl .cart-count[b-rj5k10k1li] {
        right: auto;
        left: 50%;
        transform: translateX(-14px);
    }

    .rtl .user-menu-item i:last-child[b-rj5k10k1li] {
        transform: rotate(180deg);
    }

    .rtl .edit-profile-btn[b-rj5k10k1li] {
        right: auto;
        left: 16px;
    }

    .rtl .unread-indicator[b-rj5k10k1li] {
        right: auto;
        left: 16px;
    }

    .rtl .notification-icon[b-rj5k10k1li] {
        order: 1;
    }

    .rtl .notification-content[b-rj5k10k1li] {
        text-align: right;
    }

    .rtl .notification-time[b-rj5k10k1li] {
        flex-direction: row-reverse;
    }

    .rtl .dropdown-menu .menu-item[b-rj5k10k1li] {
        flex-direction: row-reverse;
        text-align: right;
    }

    .rtl .dropdown-header[b-rj5k10k1li] {
        flex-direction: row-reverse;
    }

/* Accessibility */
.action-icon:focus-visible[b-rj5k10k1li],
.sheet-close:focus-visible[b-rj5k10k1li],
.nav-item:focus-visible[b-rj5k10k1li] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Performance Optimizations */
.bottom-sheet[b-rj5k10k1li] {
    will-change: transform;
}

.notification-card[b-rj5k10k1li],
.user-menu-item[b-rj5k10k1li],
.category-item[b-rj5k10k1li] {
    -webkit-tap-highlight-color: transparent;
}

/* Animations */
@keyframes fadeIn-b-rj5k10k1li {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

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

.dropdown-menu[style*="display: block"][b-rj5k10k1li] {
    animation: dropdownFadeIn-b-rj5k10k1li 0.2s ease forwards;
}

/* Loading States */
.loading[b-rj5k10k1li] {
    opacity: 0.6;
    pointer-events: none;
}

    .loading[b-rj5k10k1li]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid var(--primary-color);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin-b-rj5k10k1li 0.8s linear infinite;
    }

@keyframes spin-b-rj5k10k1li {
    to {
        transform: rotate(360deg);
    }
}
/* Cart Button Styles */
.desktop-action-btn.cart-btn[b-rj5k10k1li] {
    position: relative;
}

.desktop-cart-badge[b-rj5k10k1li] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.desktop-action-btn.cart-btn:hover .desktop-cart-badge[b-rj5k10k1li] {
    transform: scale(1.1);
}
/* _content/Sahelly/Components/Layout/MerchantLayout.razor.rz.scp.css */
/* ===================================
   AdminLayout - Professional Dashboard Design
   Modern E-commerce Admin Interface
   =================================== */

/* Admin Wrapper */
.admin-wrapper[b-kks2yy5wzu] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

    /* RTL Support */
    .admin-wrapper.rtl[b-kks2yy5wzu] {
        direction: rtl;
    }

    /* Dark Theme */
    .admin-wrapper.dark-theme[b-kks2yy5wzu] {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --surface-color: #1e293b;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --border-color: #334155;
    }

/* Admin Sidebar */
.admin-sidebar[b-kks2yy5wzu] {
    width: 280px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rtl .admin-sidebar[b-kks2yy5wzu] {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border-color);
}

.admin-sidebar.collapsed[b-kks2yy5wzu] {
    width: 70px;
}

/* Sidebar Header */
.sidebar-header[b-kks2yy5wzu] {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 80px;
}

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

.logo-icon[b-kks2yy5wzu] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.logo-text[b-kks2yy5wzu] {
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -0.5px;
}

.sidebar-toggle[b-kks2yy5wzu] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .sidebar-toggle:hover[b-kks2yy5wzu] {
        background: var(--primary-light);
        color: var(--primary-color);
        transform: scale(1.05);
    }

    .sidebar-toggle:active[b-kks2yy5wzu] {
        transform: scale(0.95);
    }

/* Admin Info */
.admin-info[b-kks2yy5wzu] {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

    .admin-info.collapsed[b-kks2yy5wzu] {
        padding: 16px;
        justify-content: center;
    }

.admin-avatar[b-kks2yy5wzu] {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    position: relative;
    flex-shrink: 0;
}

.online-indicator[b-kks2yy5wzu] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #10b981;
    border: 3px solid var(--surface-color);
    border-radius: 50%;
}

.admin-details h4[b-kks2yy5wzu] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-details p[b-kks2yy5wzu] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Sidebar Footer */
.sidebar-footer[b-kks2yy5wzu] {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.footer-stats[b-kks2yy5wzu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

    .stat-item i[b-kks2yy5wzu] {
        font-size: 16px;
        color: var(--primary-color);
    }

.logout-btn[b-kks2yy5wzu] {
    width: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--danger-light);
    color: var(--danger-color);
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .logout-btn:hover[b-kks2yy5wzu] {
        background: var(--danger-color);
        color: white;
        transform: translateY(-1px);
    }

/* Main Content Area */
.admin-main[b-kks2yy5wzu] {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

.rtl .admin-main[b-kks2yy5wzu] {
    margin-left: 0;
    margin-right: 280px;
}

.admin-main.sidebar-collapsed[b-kks2yy5wzu] {
    margin-left: 70px;
}

.rtl .admin-main.sidebar-collapsed[b-kks2yy5wzu] {
    margin-left: 0;
    margin-right: 70px;
}

/* Top Bar */
.admin-topbar[b-kks2yy5wzu] {
    position: sticky;
    top: 0;
    height: 70px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 24px;
    z-index: 50;
    backdrop-filter: blur(10px);
}

.topbar-left[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mobile-menu-toggle[b-kks2yy5wzu] {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mobile-menu-toggle:hover[b-kks2yy5wzu] {
        background: var(--bg-tertiary);
    }

/* Breadcrumb */
.breadcrumb-nav[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
}

.breadcrumb[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-item[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

    .breadcrumb-item a[b-kks2yy5wzu] {
        color: var(--text-secondary);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-kks2yy5wzu] {
            color: var(--primary-color);
        }

    .breadcrumb-item.active[b-kks2yy5wzu] {
        color: var(--text-primary);
        font-weight: 500;
    }

    .breadcrumb-item[b-kks2yy5wzu]::after {
        content: '/';
        margin-left: 8px;
        color: var(--text-tertiary);
    }

.rtl .breadcrumb-item[b-kks2yy5wzu]::after {
    margin-left: 0;
    margin-right: 8px;
}

.breadcrumb-item:last-child[b-kks2yy5wzu]::after {
    display: none;
}

/* Top Bar Right */
.topbar-right[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Search Container */
.search-container[b-kks2yy5wzu] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-kks2yy5wzu] {
    width: 300px;
    height: 40px;
    padding: 0 40px 0 16px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.rtl .search-input[b-kks2yy5wzu] {
    padding: 0 16px 0 40px;
}

.search-input:focus[b-kks2yy5wzu] {
    outline: none;
    border-color: var(--primary-color);
    background: var(--surface-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-btn[b-kks2yy5wzu] {
    position: absolute;
    right: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.rtl .search-btn[b-kks2yy5wzu] {
    right: auto;
    left: 4px;
}

.search-btn:hover[b-kks2yy5wzu] {
    background: var(--primary-light);
    color: var(--primary-color);
}

/* Quick Actions */
.quick-actions[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn[b-kks2yy5wzu] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .action-btn:hover[b-kks2yy5wzu] {
        background: var(--bg-tertiary);
        color: var(--primary-color);
    }

    .action-btn:active[b-kks2yy5wzu] {
        transform: scale(0.95);
    }

.lang-text[b-kks2yy5wzu] {
    font-weight: 600;
    font-size: 14px;
}

/* Notification Dropdown */
.notification-dropdown[b-kks2yy5wzu] {
    position: relative;
}

.notification-btn[b-kks2yy5wzu] {
    position: relative;
}

.notification-badge[b-kks2yy5wzu] {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--danger-color);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-b-kks2yy5wzu 2s infinite;
}

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

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

/* Dropdown Menu */
.dropdown-menu[b-kks2yy5wzu] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: slideDown-b-kks2yy5wzu 0.2s ease;
}

.rtl .dropdown-menu[b-kks2yy5wzu] {
    right: auto;
    left: 0;
}

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

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

.dropdown-header[b-kks2yy5wzu] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dropdown-header h5[b-kks2yy5wzu] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

.mark-all-read[b-kks2yy5wzu] {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mark-all-read:hover[b-kks2yy5wzu] {
        color: var(--primary-hover);
    }

/* Notifications List */
.notifications-list[b-kks2yy5wzu] {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item[b-kks2yy5wzu] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

    .notification-item:hover[b-kks2yy5wzu] {
        background: var(--bg-tertiary);
    }

    .notification-item.unread[b-kks2yy5wzu] {
        background: var(--primary-light);
    }

.notification-icon[b-kks2yy5wzu] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

    .notification-icon.order[b-kks2yy5wzu] {
        background: var(--info-light);
        color: var(--info-color);
    }

    .notification-icon.success[b-kks2yy5wzu] {
        background: var(--success-light);
        color: var(--success-color);
    }

    .notification-icon.warning[b-kks2yy5wzu] {
        background: var(--warning-light);
        color: var(--warning-color);
    }

    .notification-icon.error[b-kks2yy5wzu] {
        background: var(--danger-light);
        color: var(--danger-color);
    }

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

    .notification-content h6[b-kks2yy5wzu] {
        margin: 0 0 4px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .notification-content p[b-kks2yy5wzu] {
        margin: 0 0 4px;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.4;
    }

.notification-time[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.dropdown-footer[b-kks2yy5wzu] {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

    .dropdown-footer a[b-kks2yy5wzu] {
        color: var(--primary-color);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
    }

        .dropdown-footer a:hover[b-kks2yy5wzu] {
            color: var(--primary-hover);
        }

/* User Dropdown */
.user-dropdown[b-kks2yy5wzu] {
    position: relative;
}

.user-menu-btn[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .user-menu-btn:hover[b-kks2yy5wzu] {
        background: var(--bg-tertiary);
        border-color: var(--primary-color);
    }

.user-avatar-small[b-kks2yy5wzu] {
    width: 32px;
    height: 32px;
    background: var(--gradient-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.user-menu[b-kks2yy5wzu] {
    width: 280px;
}

.user-menu-header[b-kks2yy5wzu] {
    padding: 20px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-avatar-large[b-kks2yy5wzu] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
}

.user-info h5[b-kks2yy5wzu] {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.user-info p[b-kks2yy5wzu] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.menu-divider[b-kks2yy5wzu] {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.menu-item[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
}

    .menu-item:hover[b-kks2yy5wzu] {
        background: var(--bg-tertiary);
        color: var(--primary-color);
    }

    .menu-item.logout[b-kks2yy5wzu] {
        color: var(--danger-color);
    }

        .menu-item.logout:hover[b-kks2yy5wzu] {
            background: var(--danger-light);
        }

/* Content Area */
.admin-content[b-kks2yy5wzu] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.content-wrapper[b-kks2yy5wzu] {
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeInUp-b-kks2yy5wzu 0.3s ease;
}

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

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

/* Footer */
.admin-footer[b-kks2yy5wzu] {
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    margin-top: auto;
}

.footer-content[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-left p[b-kks2yy5wzu] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.footer-right[b-kks2yy5wzu] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

    .footer-right a[b-kks2yy5wzu] {
        color: var(--primary-color);
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .footer-right a:hover[b-kks2yy5wzu] {
            color: var(--primary-hover);
        }

.version[b-kks2yy5wzu] {
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}

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

/* Mobile Sidebar Overlay */
.sidebar-overlay[b-kks2yy5wzu] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn-b-kks2yy5wzu 0.2s ease;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.admin-sidebar.show-mobile ~ .sidebar-overlay[b-kks2yy5wzu] {
    opacity: 1;
    pointer-events: auto;
}

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

    to {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .search-input[b-kks2yy5wzu] {
        width: 200px;
    }
}

@media (max-width: 992px) {
    /* Hide body scrolling when sidebar is open */
    body.sidebar-open[b-kks2yy5wzu] {
        overflow: hidden;
    }

    .admin-sidebar[b-kks2yy5wzu] {
        transform: translateX(-100%);
        position: fixed;
        z-index: 1001;
    }

    .rtl .admin-sidebar[b-kks2yy5wzu] {
        transform: translateX(100%);
    }

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

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

    .rtl .admin-main[b-kks2yy5wzu] {
        margin-right: 0;
    }

    .admin-main.sidebar-collapsed[b-kks2yy5wzu] {
        margin-left: 0;
    }

    .rtl .admin-main.sidebar-collapsed[b-kks2yy5wzu] {
        margin-right: 0;
    }

    .mobile-menu-toggle[b-kks2yy5wzu] {
        display: flex;
    }

    .sidebar-overlay[b-kks2yy5wzu] {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .admin-sidebar.show-mobile ~ .sidebar-overlay[b-kks2yy5wzu] {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-content[b-kks2yy5wzu] {
        padding: 16px;
    }

    /* Hide desktop-only elements on mobile */
    .sidebar-toggle[b-kks2yy5wzu] {
        display: none;
    }
}

@media (max-width: 768px) {
    .search-container[b-kks2yy5wzu] {
        display: none;
    }

    .breadcrumb-nav[b-kks2yy5wzu] {
        display: none;
    }

    .admin-topbar[b-kks2yy5wzu] {
        padding: 0 16px;
    }

    .quick-actions[b-kks2yy5wzu] {
        gap: 4px;
    }

    .dropdown-menu[b-kks2yy5wzu] {
        width: calc(100vw - 32px);
        left: 16px;
        right: 16px;
    }

    .footer-content[b-kks2yy5wzu] {
        flex-direction: column;
        text-align: center;
    }
}

/* Custom Scrollbar */
.notifications-list[b-kks2yy5wzu]::-webkit-scrollbar,
.admin-content[b-kks2yy5wzu]::-webkit-scrollbar {
    width: 6px;
}

.notifications-list[b-kks2yy5wzu]::-webkit-scrollbar-track,
.admin-content[b-kks2yy5wzu]::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-list[b-kks2yy5wzu]::-webkit-scrollbar-thumb,
.admin-content[b-kks2yy5wzu]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

    .notifications-list[b-kks2yy5wzu]::-webkit-scrollbar-thumb:hover,
    .admin-content[b-kks2yy5wzu]::-webkit-scrollbar-thumb:hover {
        background: var(--text-tertiary);
    }

/* Print Styles */
@media print {
    .admin-sidebar[b-kks2yy5wzu],
    .admin-topbar[b-kks2yy5wzu],
    .admin-footer[b-kks2yy5wzu],
    .quick-actions[b-kks2yy5wzu] {
        display: none;
    }

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

    .admin-content[b-kks2yy5wzu] {
        padding: 0;
    }
}
/* _content/Sahelly/Components/Layout/MerchantNavMenu.razor.rz.scp.css */
/* ===================================
   AdminNavMenu - Professional Navigation Menu
   Modern Dashboard Sidebar Navigation
   =================================== */

/* Navigation Container */
.admin-nav-menu[b-g1413bet2i] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

    /* Smooth Scrollbar */
    .admin-nav-menu[b-g1413bet2i]::-webkit-scrollbar {
        width: 6px;
    }

    .admin-nav-menu[b-g1413bet2i]::-webkit-scrollbar-track {
        background: transparent;
    }

    .admin-nav-menu[b-g1413bet2i]::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
        transition: all 0.2s ease;
    }

        .admin-nav-menu[b-g1413bet2i]::-webkit-scrollbar-thumb:hover {
            background: var(--text-tertiary);
        }

/* Navigation Section */
.nav-section[b-g1413bet2i] {
    margin-bottom: 24px;
}

    .nav-section:last-child[b-g1413bet2i] {
        margin-bottom: 0;
    }

/* Section Title */
.nav-section-title[b-g1413bet2i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    opacity: 0.7;
}

    .nav-section-title i[b-g1413bet2i] {
        font-size: 14px;
        color: var(--primary-color);
        opacity: 0.8;
    }

/* Navigation List */
.nav-list[b-g1413bet2i] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Navigation Item */
.nav-item[b-g1413bet2i] {
    position: relative;
    margin-bottom: 4px;
}

/* Navigation Link */
.nav-link[b-g1413bet2i] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin: 0 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    width: calc(100% - 16px);
    cursor: pointer;
}

    .nav-link[b-g1413bet2i]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0;
        transition: all 0.3s ease;
    }

    .nav-link:hover[b-g1413bet2i] {
        color: var(--primary-color);
        background: var(--primary-light);
        transform: translateX(2px);
    }

.rtl .nav-link:hover[b-g1413bet2i] {
    transform: translateX(-2px);
}

.nav-link:hover[b-g1413bet2i]::before {
    width: 4px;
    opacity: 1;
}

/* Active Navigation Item */
.nav-item.active .nav-link[b-g1413bet2i] {
    color: var(--primary-color);
    background: var(--primary-light);
    font-weight: 600;
}

    .nav-item.active .nav-link[b-g1413bet2i]::before {
        width: 4px;
        opacity: 1;
    }

/* Navigation Icons */
.nav-link i:first-child[b-g1413bet2i] {
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

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

/* Navigation Badge */
.nav-badge[b-g1413bet2i] {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    margin-left: auto;
    animation: fadeIn-b-g1413bet2i 0.3s ease;
}

.rtl .nav-badge[b-g1413bet2i] {
    margin-left: 0;
    margin-right: auto;
}

.nav-badge.danger[b-g1413bet2i] {
    background: var(--danger-color);
    color: white;
}

.nav-badge.warning[b-g1413bet2i] {
    background: var(--warning-color);
    color: white;
}

.nav-badge.info[b-g1413bet2i] {
    background: var(--info-color);
    color: white;
}

.nav-badge.success[b-g1413bet2i] {
    background: var(--success-color);
    color: white;
}

/* Submenu */
.nav-item.has-submenu .nav-link[b-g1413bet2i] {
    padding-right: 12px;
}

.rtl .nav-item.has-submenu .nav-link[b-g1413bet2i] {
    padding-right: 20px;
    padding-left: 12px;
}

.submenu-icon[b-g1413bet2i] {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.rtl .submenu-icon[b-g1413bet2i] {
    margin-left: 0;
    margin-right: auto;
}

.nav-item.expanded .submenu-icon[b-g1413bet2i] {
    transform: rotate(180deg);
}

/* Submenu List */
.nav-submenu[b-g1413bet2i] {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    overflow: hidden;
    animation: slideDown-b-g1413bet2i 0.3s ease;
}

@keyframes slideDown-b-g1413bet2i {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 500px;
    }
}

/* Submenu Item */
.submenu-item[b-g1413bet2i] {
    margin-bottom: 2px;
}

.submenu-link[b-g1413bet2i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 44px;
    margin: 0 8px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}

.rtl .submenu-link[b-g1413bet2i] {
    padding: 10px 44px 10px 20px;
}

.submenu-link i[b-g1413bet2i] {
    font-size: 8px;
    opacity: 0.5;
}

.submenu-link:hover[b-g1413bet2i] {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    transform: translateX(2px);
}

.rtl .submenu-link:hover[b-g1413bet2i] {
    transform: translateX(-2px);
}

.submenu-link.active[b-g1413bet2i] {
    color: var(--primary-color);
    background: var(--primary-light);
    font-weight: 500;
}

    .submenu-link.active i[b-g1413bet2i] {
        opacity: 1;
    }

/* Small Badge for Submenu */
.badge-small[b-g1413bet2i] {
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    margin-left: auto;
}

.rtl .badge-small[b-g1413bet2i] {
    margin-left: 0;
    margin-right: auto;
}

.badge-small.warning[b-g1413bet2i] {
    background: var(--warning-light);
    color: var(--warning-dark);
}

/* Help Section */
.help-section[b-g1413bet2i] {
    padding: 0 12px;
    margin-top: auto;
}

.help-card[b-g1413bet2i] {
    background: var(--gradient-primary);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .help-card[b-g1413bet2i]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(45deg);
    }

    .help-card i[b-g1413bet2i] {
        font-size: 32px;
        margin-bottom: 12px;
        opacity: 0.9;
    }

    .help-card h6[b-g1413bet2i] {
        margin: 0 0 8px;
        font-size: 14px;
        font-weight: 600;
    }

    .help-card p[b-g1413bet2i] {
        margin: 0 0 16px;
        font-size: 12px;
        opacity: 0.9;
        line-height: 1.5;
    }

.help-btn[b-g1413bet2i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

    .help-btn:hover[b-g1413bet2i] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
    }

/* Collapsed State */
.admin-nav-menu.collapsed[b-g1413bet2i] {
    padding: 8px 0;
}

.collapsed .nav-section-title[b-g1413bet2i] {
    display: none;
}

.collapsed .nav-link[b-g1413bet2i] {
    padding: 12px;
    margin: 0 4px;
    justify-content: center;
    position: relative;
}

    .collapsed .nav-link:hover[b-g1413bet2i] {
        transform: none;
    }

.collapsed .nav-text[b-g1413bet2i],
.collapsed .nav-badge[b-g1413bet2i],
.collapsed .submenu-icon[b-g1413bet2i],
.collapsed .nav-submenu[b-g1413bet2i],
.collapsed .help-section[b-g1413bet2i] {
    display: none;
}

/* Tooltip for Collapsed State */
.collapsed .nav-link[b-g1413bet2i]::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 100;
}

.rtl.collapsed .nav-link[b-g1413bet2i]::after {
    left: auto;
    right: calc(100% + 12px);
}

.collapsed .nav-link:hover[b-g1413bet2i]::after {
    opacity: 1;
}

/* Animations */
@keyframes fadeIn-b-g1413bet2i {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

/* Dark Theme Adjustments */
.dark-theme .nav-link[b-g1413bet2i] {
    color: var(--text-secondary);
}

    .dark-theme .nav-link:hover[b-g1413bet2i] {
        background: rgba(99, 102, 241, 0.1);
    }

.dark-theme .nav-item.active .nav-link[b-g1413bet2i] {
    background: rgba(99, 102, 241, 0.2);
}

.dark-theme .submenu-link:hover[b-g1413bet2i] {
    background: rgba(255, 255, 255, 0.05);
}

.dark-theme .submenu-link.active[b-g1413bet2i] {
    background: rgba(99, 102, 241, 0.15);
}

.dark-theme .help-card[b-g1413bet2i] {
    background: var(--gradient-cool);
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .admin-nav-menu[b-g1413bet2i] {
        padding: 12px 0;
    }

    .nav-link[b-g1413bet2i] {
        padding: 14px 20px;
        font-size: 15px;
    }

        .nav-link i:first-child[b-g1413bet2i] {
            font-size: 20px;
        }

    .nav-section-title[b-g1413bet2i] {
        font-size: 12px;
        padding: 12px 20px;
    }

    .submenu-link[b-g1413bet2i] {
        padding: 12px 20px 12px 48px;
        font-size: 14px;
    }

    .rtl .submenu-link[b-g1413bet2i] {
        padding: 12px 48px 12px 20px;
    }
}

/* Touch-friendly hover states */
@media (hover: none) {
    .nav-link:active[b-g1413bet2i] {
        background: var(--primary-light);
        color: var(--primary-color);
    }

    .submenu-link:active[b-g1413bet2i] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .nav-link[b-g1413bet2i] {
        border: 1px solid transparent;
    }

        .nav-link:hover[b-g1413bet2i],
        .nav-link:focus[b-g1413bet2i] {
            border-color: var(--primary-color);
            outline: 2px solid var(--primary-color);
            outline-offset: -2px;
        }

    .nav-item.active .nav-link[b-g1413bet2i] {
        border-color: var(--primary-color);
    }
}
/* _content/Sahelly/Components/Layout/NavMenu.razor.rz.scp.css */
/* ===================================
   NavMenu - Modern Mobile-First Navigation
   Professional E-commerce Menu Design
   =================================== */

/* Navigation Container */
.nav-menu[b-znsmmyf8xr] {
    width: 100%;
    height: 100%;
}

/* Mobile Navigation */
.mobile-nav[b-znsmmyf8xr] {
    padding: 20px 0;
}

/* Mobile Menu Section */
.mobile-menu-section[b-znsmmyf8xr] {
    margin-bottom: 32px;
}

    .mobile-menu-section:last-child[b-znsmmyf8xr] {
        margin-bottom: 0;
    }

/* Section Title */
.section-title[b-znsmmyf8xr] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin: 0 20px 16px 20px;
}

    .section-title i[b-znsmmyf8xr] {
        font-size: 16px;
        color: var(--primary-color);
    }

/* Menu Grid - Tile Layout */
.menu-grid[b-znsmmyf8xr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 20px;
}

.menu-tile[b-znsmmyf8xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

    .menu-tile[b-znsmmyf8xr]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .menu-tile:active[b-znsmmyf8xr] {
        transform: scale(0.95);
    }

        .menu-tile:active[b-znsmmyf8xr]::before {
            opacity: 0.1;
        }

    .menu-tile i[b-znsmmyf8xr] {
        font-size: 28px;
        color: var(--primary-color);
        z-index: 1;
    }

    .menu-tile span[b-znsmmyf8xr] {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        text-align: center;
        z-index: 1;
    }

/* Menu List - Linear Layout */
.menu-list[b-znsmmyf8xr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
}

.menu-list-item[b-znsmmyf8xr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .menu-list-item:active[b-znsmmyf8xr] {
        background: var(--bg-tertiary);
        transform: scale(0.98);
    }

    .menu-list-item i:first-child[b-znsmmyf8xr] {
        width: 20px;
        font-size: 18px;
        color: var(--text-secondary);
    }

    .menu-list-item span[b-znsmmyf8xr] {
        flex: 1;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .menu-list-item i:last-child[b-znsmmyf8xr] {
        font-size: 14px;
        color: var(--text-tertiary);
    }

    /* Sub Items */
    .menu-list-item.sub-item[b-znsmmyf8xr] {
        padding-left: 48px;
        background: var(--bg-tertiary);
        border: none;
    }

.rtl .menu-list-item.sub-item[b-znsmmyf8xr] {
    padding-left: 16px;
    padding-right: 48px;
}

/* Badge */
.menu-list-item .badge[b-znsmmyf8xr] {
    padding: 2px 8px;
    background: var(--danger-color);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 8px;
}

.rtl .menu-list-item .badge[b-znsmmyf8xr] {
    margin-left: 8px;
    margin-right: auto;
}

/* Expandable Sections */
.section-header[b-znsmmyf8xr] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .section-header:active[b-znsmmyf8xr] {
        background: var(--bg-tertiary);
    }

.header-content[b-znsmmyf8xr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .header-content i[b-znsmmyf8xr] {
        font-size: 18px;
        color: var(--primary-color);
    }

    .header-content span[b-znsmmyf8xr] {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

.section-header > i[b-znsmmyf8xr] {
    font-size: 14px;
    color: var(--text-tertiary);
    transition: transform 0.3s ease;
}

    .section-header > i.expanded[b-znsmmyf8xr] {
        transform: rotate(180deg);
    }

.section-content[b-znsmmyf8xr] {
    animation: slideDown-b-znsmmyf8xr 0.3s ease;
}

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

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

/* Login Prompt */
.login-prompt[b-znsmmyf8xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

    .login-prompt i[b-znsmmyf8xr] {
        font-size: 64px;
        color: var(--text-tertiary);
        opacity: 0.3;
        margin-bottom: 16px;
    }

    .login-prompt p[b-znsmmyf8xr] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0 0 24px 0;
    }

.login-btn[b-znsmmyf8xr],
.register-btn[b-znsmmyf8xr] {
    width: 100%;
    max-width: 280px;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-btn[b-znsmmyf8xr] {
    background: var(--primary-color);
    color: white;
    margin-bottom: 12px;
}

    .login-btn:active[b-znsmmyf8xr] {
        transform: scale(0.98);
    }

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

    .register-btn:active[b-znsmmyf8xr] {
        background: var(--primary-light);
        transform: scale(0.98);
    }

/* Desktop Navigation */
.desktop-nav[b-znsmmyf8xr] {
    display: none;
}

.desktop-sidebar[b-znsmmyf8xr] {
    width: 280px;
    height: 100%;
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 24px 0;
}

.rtl .desktop-sidebar[b-znsmmyf8xr] {
    border-right: none;
    border-left: 1px solid var(--border-color);
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .mobile-nav[b-znsmmyf8xr] {
        display: none;
    }

    .desktop-nav[b-znsmmyf8xr] {
        display: block;
    }

    /* Desktop menu styles here */
}

/* Dark Theme */
.dark-theme .menu-tile[b-znsmmyf8xr] {
    background: #1e293b;
    border-color: #334155;
}

    .dark-theme .menu-tile:active[b-znsmmyf8xr] {
        background: #334155;
    }

.dark-theme .menu-list-item[b-znsmmyf8xr] {
    border-color: #334155;
}

    .dark-theme .menu-list-item:active[b-znsmmyf8xr] {
        background: #334155;
    }

    .dark-theme .menu-list-item.sub-item[b-znsmmyf8xr] {
        background: #1e293b;
    }

.dark-theme .section-header:active[b-znsmmyf8xr] {
    background: #334155;
}

/* RTL Support */
.rtl .menu-list-item[b-znsmmyf8xr] {
    direction: rtl;
}

    .rtl .menu-list-item i:last-child[b-znsmmyf8xr] {
        transform: rotate(180deg);
    }

.rtl .section-header[b-znsmmyf8xr] {
    direction: rtl;
}

/* Animations */
@keyframes fadeIn-b-znsmmyf8xr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

/* Loading State */
.menu-loading[b-znsmmyf8xr] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

    .menu-loading[b-znsmmyf8xr]::after {
        content: '';
        width: 32px;
        height: 32px;
        border: 3px solid var(--border-color);
        border-top-color: var(--primary-color);
        border-radius: 50%;
        animation: spin-b-znsmmyf8xr 0.8s linear infinite;
    }

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

/* Accessibility */
.menu-tile:focus-visible[b-znsmmyf8xr],
.menu-list-item:focus-visible[b-znsmmyf8xr],
.section-header:focus-visible[b-znsmmyf8xr] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Performance */
.menu-tile[b-znsmmyf8xr],
.menu-list-item[b-znsmmyf8xr] {
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}

/* Hover Effects for Desktop */
@media (hover: hover) {
    .menu-tile:hover[b-znsmmyf8xr] {
        background: var(--primary-light);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    }

        .menu-tile:hover i[b-znsmmyf8xr] {
            transform: scale(1.1);
        }

    .menu-list-item:hover[b-znsmmyf8xr] {
        background: var(--bg-tertiary);
        border-color: var(--primary-color);
    }
}

/* Custom Scrollbar for Desktop */
@media (min-width: 768px) {
    .desktop-sidebar[b-znsmmyf8xr]::-webkit-scrollbar {
        width: 6px;
    }

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

    .desktop-sidebar[b-znsmmyf8xr]::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
    }

        .desktop-sidebar[b-znsmmyf8xr]::-webkit-scrollbar-thumb:hover {
            background: var(--text-tertiary);
        }
}
/* _content/Sahelly/Components/Pages/Admin/ActivityLog.razor.rz.scp.css */
/* Activity Log Page Container */
.activity-log-page[b-ytb8ox4ylv] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .activity-log-page[b-ytb8ox4ylv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .activity-log-page > *[b-ytb8ox4ylv] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-ytb8ox4ylv] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-ytb8ox4ylv] {
    flex: 1;
}

.header-actions[b-ytb8ox4ylv] {
    display: flex;
    gap: 12px;
}

.breadcrumb[b-ytb8ox4ylv] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-ytb8ox4ylv] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-ytb8ox4ylv] {
        color: #667eea;
    }

.breadcrumb-separator[b-ytb8ox4ylv] {
    color: #d1d5db;
}

.breadcrumb-current[b-ytb8ox4ylv] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-ytb8ox4ylv] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-ytb8ox4ylv] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Header Buttons */
.btn-gradient[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient:hover[b-ytb8ox4ylv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-export[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-export:hover[b-ytb8ox4ylv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-icon[b-ytb8ox4ylv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-text[b-ytb8ox4ylv] {
    background: transparent;
    border: none;
    color: #667eea;
    padding: 8px 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    border-radius: 8px;
}

    .btn-text:hover[b-ytb8ox4ylv] {
        background: rgba(102, 126, 234, 0.1);
        transform: translateY(-1px);
    }

/* Filters Card */
.filters-card[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.filters-header[b-ytb8ox4ylv] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.filters-title[b-ytb8ox4ylv] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
}

.filters-content[b-ytb8ox4ylv] {
    padding: 24px;
}

.filters-grid[b-ytb8ox4ylv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.filter-group[b-ytb8ox4ylv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-group label[b-ytb8ox4ylv] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

    .filter-group input[b-ytb8ox4ylv],
    .filter-group select[b-ytb8ox4ylv] {
        width: 100%;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .filter-group input:focus[b-ytb8ox4ylv],
        .filter-group select:focus[b-ytb8ox4ylv] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.date-range-input[b-ytb8ox4ylv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-separator[b-ytb8ox4ylv] {
    font-weight: 600;
    color: #6b7280;
}

.filters-actions[b-ytb8ox4ylv] {
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover[b-ytb8ox4ylv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Statistics Grid */
.stats-grid[b-ytb8ox4ylv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-ytb8ox4ylv]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-ytb8ox4ylv] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-ytb8ox4ylv]::before {
            opacity: 1;
        }

.stat-icon[b-ytb8ox4ylv] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

    .stat-icon.active[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        box-shadow: 0 8px 16px rgba(59, 201, 104, 0.3);
    }

    .stat-icon.users[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        box-shadow: 0 8px 16px rgba(240, 147, 251, 0.3);
    }

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

    .stat-content h4[b-ytb8ox4ylv] {
        font-size: 32px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

    .stat-content p[b-ytb8ox4ylv] {
        font-size: 15px;
        color: #6b7280;
        margin: 5px 0 0 0;
        font-weight: 500;
    }

/* Activity Table */
.table-container[b-ytb8ox4ylv] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.activity-table[b-ytb8ox4ylv] {
    width: 100%;
    border-collapse: collapse;
}

    .activity-table th[b-ytb8ox4ylv] {
        padding: 18px 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .activity-table td[b-ytb8ox4ylv] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
        vertical-align: middle;
    }

    .activity-table tbody tr[b-ytb8ox4ylv] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .activity-table tbody tr:hover[b-ytb8ox4ylv] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .activity-table tbody tr:last-child td[b-ytb8ox4ylv] {
            border-bottom: none;
        }

/* Table Cell Styling */
.datetime-cell[b-ytb8ox4ylv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .datetime-cell .date[b-ytb8ox4ylv] {
        font-weight: 600;
        color: #4b5563;
    }

    .datetime-cell .time[b-ytb8ox4ylv] {
        font-size: 13px;
        color: #6b7280;
    }

.user-cell[b-ytb8ox4ylv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-ytb8ox4ylv] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.role-badge[b-ytb8ox4ylv] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .role-badge.owner[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #4c1d95;
    }

    .role-badge.admin[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #be185d;
    }

    .role-badge.supervisor[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.2) 100%);
        color: #0284c7;
    }

    .role-badge.merchant[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
    }

    .role-badge.agent[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(250, 112, 154, 0.2) 0%, rgba(254, 225, 64, 0.2) 100%);
        color: #b45309;
    }

    .role-badge.customer[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(48, 207, 208, 0.2) 0%, rgba(51, 8, 103, 0.2) 100%);
        color: #4f46e5;
    }

.action-badge[b-ytb8ox4ylv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

    .action-badge.success[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
    }

    .action-badge.info[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.2) 100%);
        color: #0284c7;
    }

    .action-badge.primary[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #4c1d95;
    }

    .action-badge.warning[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(250, 112, 154, 0.2) 0%, rgba(254, 225, 64, 0.2) 100%);
        color: #b45309;
    }

    .action-badge.danger[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #be185d;
    }

    .action-badge.default[b-ytb8ox4ylv] {
        background: rgba(203, 213, 225, 0.3);
        color: #475569;
    }

.entity-info[b-ytb8ox4ylv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .entity-info .entity-id[b-ytb8ox4ylv] {
        font-size: 12px;
        color: #6b7280;
    }

.ip-address[b-ytb8ox4ylv] {
    font-family: monospace;
    color: #475569;
    font-size: 14px;
}

.btn-icon[b-ytb8ox4ylv] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-icon:hover[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

/* Mobile Cards */
.mobile-cards[b-ytb8ox4ylv] {
    display: none;
}

.activity-card[b-ytb8ox4ylv] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

    .activity-card:hover[b-ytb8ox4ylv] {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

.card-header[b-ytb8ox4ylv] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.user-info[b-ytb8ox4ylv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .user-info h4[b-ytb8ox4ylv] {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 5px 0;
    }

.timestamp[b-ytb8ox4ylv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

    .timestamp .date[b-ytb8ox4ylv] {
        font-weight: 600;
        color: #4b5563;
    }

    .timestamp .time[b-ytb8ox4ylv] {
        font-size: 13px;
        color: #6b7280;
    }

.card-body[b-ytb8ox4ylv] {
    padding: 16px;
}

.info-row[b-ytb8ox4ylv] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .info-row .label[b-ytb8ox4ylv] {
        font-weight: 600;
        color: #4b5563;
        min-width: 80px;
    }

.card-footer[b-ytb8ox4ylv] {
    padding: 12px 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
}

/* Loading Animation */
.loading-container[b-ytb8ox4ylv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    gap: 20px;
}

.spinner-border[b-ytb8ox4ylv] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-ytb8ox4ylv 0.8s linear infinite;
}

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

.loading-container p[b-ytb8ox4ylv] {
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
}

/* Empty State */
.empty-state[b-ytb8ox4ylv] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-ytb8ox4ylv] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-ytb8ox4ylv] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-ytb8ox4ylv] {
        font-size: 18px;
        color: #6b7280;
        max-width: 500px;
        margin: 0 auto;
    }

/* Pagination */
.pagination-container[b-ytb8ox4ylv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pagination-info[b-ytb8ox4ylv] {
    font-size: 14px;
    color: #4c1d95;
    font-weight: 600;
}

.pagination[b-ytb8ox4ylv] {
    display: flex;
    gap: 6px;
}

.page-btn[b-ytb8ox4ylv] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Modal Styling */
.modal-backdrop[b-ytb8ox4ylv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-ytb8ox4ylv 0.2s ease-out;
}

.modal-dialog[b-ytb8ox4ylv] {
    width: 100%;
    max-width: 700px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-ytb8ox4ylv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-ytb8ox4ylv] {
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .modal-header h3[b-ytb8ox4ylv] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

.btn-close[b-ytb8ox4ylv] {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

    .btn-close:hover[b-ytb8ox4ylv] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-ytb8ox4ylv] {
    padding: 30px;
    overflow-y: auto;
}

.details-grid[b-ytb8ox4ylv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-item[b-ytb8ox4ylv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .detail-item.full-width[b-ytb8ox4ylv] {
        grid-column: span 2;
    }

    .detail-item label[b-ytb8ox4ylv] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

    .detail-item span[b-ytb8ox4ylv] {
        font-size: 15px;
        color: #1f2937;
        word-break: break-word;
    }

.user-agent[b-ytb8ox4ylv] {
    font-family: monospace;
    font-size: 13px;
    background: rgba(102, 126, 234, 0.05);
    padding: 8px;
    border-radius: 8px;
    max-height: 80px;
    overflow-y: auto;
}

.additional-data[b-ytb8ox4ylv] {
    font-family: monospace;
    font-size: 13px;
    background: rgba(102, 126, 234, 0.05);
    padding: 16px;
    border-radius: 12px;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    color: #334155;
    white-space: pre-wrap;
}

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

    to {
        opacity: 1;
    }
}

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

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

/* Unauthorized Access */
.unauthorized[b-ytb8ox4ylv] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 50px auto;
}

    .unauthorized i[b-ytb8ox4ylv] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized h3[b-ytb8ox4ylv] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized p[b-ytb8ox4ylv] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

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

    .stats-grid[b-ytb8ox4ylv] {
        grid-template-columns: repeat(3, 1fr);
    }

    .details-grid[b-ytb8ox4ylv] {
        grid-template-columns: 1fr;
    }

        .details-grid .detail-item.full-width[b-ytb8ox4ylv] {
            grid-column: 1;
        }
}

@media (max-width: 992px) {
    .filters-grid[b-ytb8ox4ylv] {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .activity-log-page[b-ytb8ox4ylv] {
        padding: 16px;
    }

    .page-header[b-ytb8ox4ylv] {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

    .header-actions[b-ytb8ox4ylv] {
        justify-content: flex-end;
    }

    .page-title[b-ytb8ox4ylv] {
        font-size: 28px;
    }

    .page-subtitle[b-ytb8ox4ylv] {
        font-size: 16px;
    }

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

    .desktop-only[b-ytb8ox4ylv] {
        display: none !important;
    }

    .mobile-only[b-ytb8ox4ylv] {
        display: block;
    }

    .mobile-cards[b-ytb8ox4ylv] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pagination-container[b-ytb8ox4ylv] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .pagination-info[b-ytb8ox4ylv] {
        text-align: center;
    }

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

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

    .date-range-input[b-ytb8ox4ylv] {
        flex-direction: column;
        gap: 10px;
    }

        .date-range-input .date-separator[b-ytb8ox4ylv] {
            align-self: center;
        }

    .modal-dialog[b-ytb8ox4ylv] {
        width: 90%;
        max-height: 80vh;
    }

    .modal-header[b-ytb8ox4ylv] {
        padding: 16px 20px;
    }

    .modal-body[b-ytb8ox4ylv] {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .header-actions[b-ytb8ox4ylv] {
        flex-direction: column;
        gap: 8px;
    }

    .btn span[b-ytb8ox4ylv] {
        display: none;
    }

    .btn-icon[b-ytb8ox4ylv] {
        padding: 10px;
        width: 100%;
        justify-content: center;
    }

    .stat-card[b-ytb8ox4ylv] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .stat-content h4[b-ytb8ox4ylv] {
        font-size: 24px;
    }

    .empty-state i[b-ytb8ox4ylv] {
        font-size: 60px;
    }

    .empty-state h3[b-ytb8ox4ylv] {
        font-size: 22px;
    }

    .empty-state p[b-ytb8ox4ylv] {
        font-size: 16px;
    }

    .page-btn[b-ytb8ox4ylv] {
        min-width: 36px;
        padding: 8px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .activity-log-page[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .activity-log-page[b-ytb8ox4ylv]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-ytb8ox4ylv],
[data-theme="dark"] .filters-card[b-ytb8ox4ylv],
[data-theme="dark"] .table-container[b-ytb8ox4ylv],
[data-theme="dark"] .pagination-container[b-ytb8ox4ylv],
[data-theme="dark"] .empty-state[b-ytb8ox4ylv],
[data-theme="dark"] .stat-card[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .activity-table th[b-ytb8ox4ylv] {
    color: #a78bfa;
    border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .activity-table td[b-ytb8ox4ylv] {
    background: #1e293b;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .page-title[b-ytb8ox4ylv],
[data-theme="dark"] .stat-content h4[b-ytb8ox4ylv],
[data-theme="dark"] .empty-state i[b-ytb8ox4ylv],
[data-theme="dark"] .modal-header h3[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-link[b-ytb8ox4ylv],
[data-theme="dark"] .filter-group label[b-ytb8ox4ylv],
[data-theme="dark"] .stat-content p[b-ytb8ox4ylv],
[data-theme="dark"] .detail-item label[b-ytb8ox4ylv] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-current[b-ytb8ox4ylv],
[data-theme="dark"] .filters-title[b-ytb8ox4ylv],
[data-theme="dark"] .pagination-info[b-ytb8ox4ylv] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-ytb8ox4ylv],
[data-theme="dark"] .empty-state p[b-ytb8ox4ylv] {
    color: #9ca3af;
}

[data-theme="dark"] .filter-group input[b-ytb8ox4ylv],
[data-theme="dark"] .filter-group select[b-ytb8ox4ylv] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-group input:focus[b-ytb8ox4ylv],
    [data-theme="dark"] .filter-group select:focus[b-ytb8ox4ylv] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .btn-text[b-ytb8ox4ylv] {
    color: #a78bfa;
}

    [data-theme="dark"] .btn-text:hover[b-ytb8ox4ylv] {
        background: rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .page-btn[b-ytb8ox4ylv] {
    background: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .page-btn.active[b-ytb8ox4ylv],
    [data-theme="dark"] .page-btn:hover:not(:disabled)[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .datetime-cell .date[b-ytb8ox4ylv] {
    color: #e2e8f0;
}

[data-theme="dark"] .datetime-cell .time[b-ytb8ox4ylv],
[data-theme="dark"] .entity-info .entity-id[b-ytb8ox4ylv] {
    color: #9ca3af;
}

[data-theme="dark"] .ip-address[b-ytb8ox4ylv] {
    color: #9ca3af;
}

[data-theme="dark"] .user-info h4[b-ytb8ox4ylv] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-icon[b-ytb8ox4ylv] {
    background: rgba(71, 85, 105, 0.5);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-icon:hover[b-ytb8ox4ylv] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .activity-card[b-ytb8ox4ylv] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .card-header[b-ytb8ox4ylv] {
    background: rgba(71, 85, 105, 0.3);
    border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .info-row .label[b-ytb8ox4ylv] {
    color: #9ca3af;
}

[data-theme="dark"] .card-footer[b-ytb8ox4ylv] {
    border-top: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .modal-dialog[b-ytb8ox4ylv] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-header[b-ytb8ox4ylv] {
    background: rgba(71, 85, 105, 0.3);
    border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .btn-close[b-ytb8ox4ylv] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-ytb8ox4ylv] {
        background: rgba(71, 85, 105, 0.5);
        color: #e2e8f0;
    }

[data-theme="dark"] .detail-item span[b-ytb8ox4ylv] {
    color: #e2e8f0;
}

[data-theme="dark"] .user-agent[b-ytb8ox4ylv],
[data-theme="dark"] .additional-data[b-ytb8ox4ylv] {
    background: rgba(71, 85, 105, 0.3);
    color: #cbd5e1;
}

/* Print Styles */
@media print {
    .activity-log-page[b-ytb8ox4ylv] {
        background: white !important;
        padding: 0 !important;
    }

    .page-header[b-ytb8ox4ylv],
    .filters-card[b-ytb8ox4ylv],
    .pagination-container[b-ytb8ox4ylv],
    .btn-icon[b-ytb8ox4ylv],
    .header-actions[b-ytb8ox4ylv] {
        display: none !important;
    }

    .table-container[b-ytb8ox4ylv] {
        box-shadow: none !important;
        margin: 0 !important;
    }

    .activity-table th[b-ytb8ox4ylv] {
        background: #f3f4f6 !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .activity-table td[b-ytb8ox4ylv] {
        background: white !important;
    }

    .role-badge[b-ytb8ox4ylv],
    .action-badge[b-ytb8ox4ylv] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AddEditCategory.razor.rz.scp.css */

/* ===================================
   Add/Edit Category Page - Modern Professional CSS
   تصميم حديث احترافي لصفحة إضافة/تعديل الفئات
   =================================== */

/* Page Container */
.add-edit-category-page[b-7vx05l0nfd] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .add-edit-category-page[b-7vx05l0nfd]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .add-edit-category-page > *[b-7vx05l0nfd] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-7vx05l0nfd] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-7vx05l0nfd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-7vx05l0nfd] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-7vx05l0nfd] {
        color: #667eea;
    }

.breadcrumb-separator[b-7vx05l0nfd] {
    color: #d1d5db;
}

.breadcrumb-current[b-7vx05l0nfd] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-7vx05l0nfd] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-7vx05l0nfd] {
        font-size: 32px;
    }

.page-subtitle[b-7vx05l0nfd] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Form Container */
.form-container[b-7vx05l0nfd] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading Container */
.loading-container[b-7vx05l0nfd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.loading-spinner[b-7vx05l0nfd] {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 16px;
}

    .loading-spinner i[b-7vx05l0nfd] {
        animation: spin-b-7vx05l0nfd 1s linear infinite;
    }

.loading-text[b-7vx05l0nfd] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Form Grid Layout */
.form-grid[b-7vx05l0nfd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-column[b-7vx05l0nfd] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Form Cards */
.form-card[b-7vx05l0nfd] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .form-card:hover[b-7vx05l0nfd] {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    }

    .form-card.collapsed .form-card-body[b-7vx05l0nfd] {
        display: none;
    }

.form-card-header[b-7vx05l0nfd] {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.form-card.collapsed .form-card-header[b-7vx05l0nfd] {
    cursor: pointer;
    border-bottom: none;
}

.form-card-title[b-7vx05l0nfd] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4c1d95;
}

    .form-card-title i[b-7vx05l0nfd] {
        color: #667eea;
        font-size: 20px;
    }

.optional-badge[b-7vx05l0nfd] {
    font-size: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    margin-left: 8px;
}

.toggle-icon[b-7vx05l0nfd] {
    color: #9ca3af;
    transition: transform 0.3s;
}

.form-card-body[b-7vx05l0nfd] {
    padding: 24px;
}

/* Form Groups */
.form-group[b-7vx05l0nfd] {
    margin-bottom: 24px;
}

    .form-group:last-child[b-7vx05l0nfd] {
        margin-bottom: 0;
    }

.form-label[b-7vx05l0nfd] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 8px;
}

    .form-label.required[b-7vx05l0nfd]::after {
        content: ' *';
        color: #ef4444;
    }

.input-wrapper[b-7vx05l0nfd] {
    position: relative;
}

.form-control[b-7vx05l0nfd] {
    width: 100%;
    padding: 12px 16px;
    padding-right: 44px;
    font-size: 15px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    color: #1f2937;
}

    .form-control:hover[b-7vx05l0nfd] {
        background: rgba(102, 126, 234, 0.08);
    }

    .form-control:focus[b-7vx05l0nfd] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control[b-7vx05l0nfd]::placeholder {
        color: #9ca3af;
    }

    .form-control.is-invalid[b-7vx05l0nfd] {
        border-color: #ef4444;
    }

        .form-control.is-invalid:focus[b-7vx05l0nfd] {
            border-color: #ef4444;
            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
        }

select.form-control[b-7vx05l0nfd] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239333ea'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
}

textarea.form-control[b-7vx05l0nfd] {
    resize: vertical;
    min-height: 100px;
}

.input-icon[b-7vx05l0nfd] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9333ea;
    font-size: 18px;
    pointer-events: none;
}

.form-text[b-7vx05l0nfd] {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
    display: block;
}

.validation-message[b-7vx05l0nfd] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .validation-message[b-7vx05l0nfd]::before {
        content: '⚠';
        font-size: 16px;
    }

/* Image Upload Container */
.image-upload-container[b-7vx05l0nfd] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

    .image-upload-container.uploading[b-7vx05l0nfd] {
        opacity: 0.7;
        pointer-events: none;
    }

.image-placeholder[b-7vx05l0nfd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

    .image-placeholder:hover[b-7vx05l0nfd] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-color: #667eea;
        transform: translateY(-2px);
    }

    .image-placeholder i[b-7vx05l0nfd] {
        font-size: 48px;
        color: #667eea;
        margin-bottom: 16px;
    }

    .image-placeholder p[b-7vx05l0nfd] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin: 0 0 8px 0;
    }

.file-info[b-7vx05l0nfd] {
    font-size: 13px;
    color: #6b7280;
    display: block;
    margin-bottom: 4px;
}

.file-formats[b-7vx05l0nfd] {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.file-input[b-7vx05l0nfd] {
    display: none;
}

/* Image Preview */
.image-preview[b-7vx05l0nfd] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f4f6;
}

    .image-preview img[b-7vx05l0nfd] {
        width: 100%;
        height: 300px;
        object-fit: contain;
        display: block;
    }

.image-overlay[b-7vx05l0nfd] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 16px;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}

.image-preview:hover .image-overlay[b-7vx05l0nfd] {
    opacity: 1;
}

.btn-icon[b-7vx05l0nfd] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: white;
    font-size: 16px;
}

.change-image[b-7vx05l0nfd] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .change-image:hover[b-7vx05l0nfd] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

.remove-image[b-7vx05l0nfd] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

    .remove-image:hover[b-7vx05l0nfd] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

/* Upload Progress */
.upload-progress[b-7vx05l0nfd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
}

.progress-spinner[b-7vx05l0nfd] {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 16px;
}

/* Form Switch */
.form-switch-wrapper[b-7vx05l0nfd] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.form-switch[b-7vx05l0nfd] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch-input[b-7vx05l0nfd] {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-label[b-7vx05l0nfd] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.switch-slider[b-7vx05l0nfd] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e5e7eb;
    transition: all 0.4s;
    border-radius: 34px;
}

    .switch-slider[b-7vx05l0nfd]:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background: white;
        transition: all 0.4s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.switch-input:checked + .switch-label .switch-slider[b-7vx05l0nfd] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .switch-input:checked + .switch-label .switch-slider[b-7vx05l0nfd]:before {
        transform: translateX(24px);
    }

.switch-content[b-7vx05l0nfd] {
    flex: 1;
}

.switch-title[b-7vx05l0nfd] {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    display: block;
    margin-bottom: 4px;
}

.switch-description[b-7vx05l0nfd] {
    font-size: 13px;
    color: #6b7280;
    display: block;
}

/* Form Actions */
.form-actions[b-7vx05l0nfd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.actions-left[b-7vx05l0nfd],
.actions-right[b-7vx05l0nfd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Buttons */
.btn[b-7vx05l0nfd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

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

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

    .btn:hover[b-7vx05l0nfd]::before {
        width: 100px;
        height: 100px;
    }

.btn-primary[b-7vx05l0nfd] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-7vx05l0nfd] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-7vx05l0nfd] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover:not(:disabled)[b-7vx05l0nfd] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

.btn-outline-secondary[b-7vx05l0nfd] {
    background: transparent;
    border: 2px solid #d1d5db;
    color: #6b7280;
}

    .btn-outline-secondary:hover:not(:disabled)[b-7vx05l0nfd] {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        border-color: transparent;
        transform: translateY(-2px);
    }

/* Alert Messages */
.alert[b-7vx05l0nfd] {
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.alert-danger[b-7vx05l0nfd] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Unauthorized Container */
.unauthorized-container[b-7vx05l0nfd] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.unauthorized-content[b-7vx05l0nfd] {
    text-align: center;
    padding: 48px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

    .unauthorized-content i[b-7vx05l0nfd] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-7vx05l0nfd] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-7vx05l0nfd] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 32px;
    }

/* Animations */
@keyframes spin-b-7vx05l0nfd {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .add-edit-category-page[b-7vx05l0nfd] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .add-edit-category-page[b-7vx05l0nfd]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-7vx05l0nfd],
[data-theme="dark"] .form-card[b-7vx05l0nfd],
[data-theme="dark"] .form-actions[b-7vx05l0nfd],
[data-theme="dark"] .loading-container[b-7vx05l0nfd],
[data-theme="dark"] .unauthorized-content[b-7vx05l0nfd] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-card-header[b-7vx05l0nfd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .page-title[b-7vx05l0nfd],
[data-theme="dark"] .form-card-title[b-7vx05l0nfd] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-link[b-7vx05l0nfd] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-7vx05l0nfd] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-7vx05l0nfd],
[data-theme="dark"] .form-label[b-7vx05l0nfd] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-7vx05l0nfd],
[data-theme="dark"] .form-text[b-7vx05l0nfd],
[data-theme="dark"] .file-info[b-7vx05l0nfd] {
    color: #9ca3af;
}

[data-theme="dark"] .form-control[b-7vx05l0nfd] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:hover[b-7vx05l0nfd] {
        background: rgba(71, 85, 105, 0.4);
    }

    [data-theme="dark"] .form-control:focus[b-7vx05l0nfd] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

    [data-theme="dark"] .form-control[b-7vx05l0nfd]::placeholder {
        color: #64748b;
    }

[data-theme="dark"] .input-icon[b-7vx05l0nfd] {
    color: #a78bfa;
}

[data-theme="dark"] .image-placeholder[b-7vx05l0nfd] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.3);
}

    [data-theme="dark"] .image-placeholder:hover[b-7vx05l0nfd] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        border-color: #a78bfa;
    }

    [data-theme="dark"] .image-placeholder i[b-7vx05l0nfd] {
        color: #a78bfa;
    }

    [data-theme="dark"] .image-placeholder p[b-7vx05l0nfd] {
        color: #e2e8f0;
    }

[data-theme="dark"] .switch-slider[b-7vx05l0nfd] {
    background: #475569;
}

[data-theme="dark"] .switch-title[b-7vx05l0nfd] {
    color: #e2e8f0;
}

[data-theme="dark"] .switch-description[b-7vx05l0nfd] {
    color: #9ca3af;
}

[data-theme="dark"] .loading-spinner[b-7vx05l0nfd] {
    color: #a78bfa;
}

[data-theme="dark"] .loading-text[b-7vx05l0nfd] {
    color: #9ca3af;
}

[data-theme="dark"] .optional-badge[b-7vx05l0nfd] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    color: #a78bfa;
}

[data-theme="dark"] .btn-outline-secondary[b-7vx05l0nfd] {
    border-color: #475569;
    color: #9ca3af;
}

    [data-theme="dark"] .btn-outline-secondary:hover:not(:disabled)[b-7vx05l0nfd] {
        background: linear-gradient(135deg, #475569 0%, #334155 100%);
        color: #e2e8f0;
    }

[data-theme="dark"] .unauthorized-content i[b-7vx05l0nfd] {
    color: #f87171;
}

[data-theme="dark"] .unauthorized-content h3[b-7vx05l0nfd] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content p[b-7vx05l0nfd] {
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .form-grid[b-7vx05l0nfd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .add-edit-category-page[b-7vx05l0nfd] {
        padding: 16px;
    }

    .page-header[b-7vx05l0nfd] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-7vx05l0nfd] {
        font-size: 28px;
    }

    .page-subtitle[b-7vx05l0nfd] {
        font-size: 16px;
    }

    .form-card-header[b-7vx05l0nfd] {
        padding: 16px 20px;
    }

    .form-card-body[b-7vx05l0nfd] {
        padding: 20px;
    }

    .form-actions[b-7vx05l0nfd] {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .actions-left[b-7vx05l0nfd],
    .actions-right[b-7vx05l0nfd] {
        width: 100%;
        justify-content: center;
    }

    .btn[b-7vx05l0nfd] {
        width: 100%;
    }

    .image-preview img[b-7vx05l0nfd] {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .page-title[b-7vx05l0nfd] {
        font-size: 24px;
    }

    .breadcrumb[b-7vx05l0nfd] {
        font-size: 12px;
    }

    .form-card-title[b-7vx05l0nfd] {
        font-size: 16px;
    }

    .btn[b-7vx05l0nfd] {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .add-edit-category-page[b-7vx05l0nfd] {
        background: white !important;
    }

    .form-actions[b-7vx05l0nfd],
    .image-overlay[b-7vx05l0nfd],
    .btn-icon[b-7vx05l0nfd] {
        display: none !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-7vx05l0nfd] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AddMerchant.razor.rz.scp.css */
/* ===================================
   Add Merchant - Professional Form Styles
   Modern E-commerce Admin Interface
   =================================== */

/* Page Container */
.add-merchant-page[b-2lc1u9khj9] {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn-b-2lc1u9khj9 0.5s ease-out;
}

/* Page Header */
.page-header[b-2lc1u9khj9] {
    margin-bottom: 32px;
}

/* Breadcrumb */
.breadcrumb[b-2lc1u9khj9] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-link[b-2lc1u9khj9] {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

    .breadcrumb-link:hover[b-2lc1u9khj9] {
        color: var(--primary-color);
    }

.breadcrumb-separator[b-2lc1u9khj9] {
    color: var(--text-tertiary);
}

.breadcrumb-current[b-2lc1u9khj9] {
    color: var(--text-primary);
    font-weight: 500;
}

.page-title[b-2lc1u9khj9] {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-subtitle[b-2lc1u9khj9] {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

/* Form Container */
.form-container[b-2lc1u9khj9] {
    background: var(--surface-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Progress Indicator */
.form-progress[b-2lc1u9khj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.progress-step[b-2lc1u9khj9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .progress-step.active .step-number[b-2lc1u9khj9] {
        background: var(--primary-color);
        color: white;
        box-shadow: 0 0 0 4px var(--primary-light);
    }

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

.step-title[b-2lc1u9khj9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.progress-step.active .step-title[b-2lc1u9khj9] {
    color: var(--primary-color);
}

.progress-line[b-2lc1u9khj9] {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    margin: 0 16px;
    transition: background 0.3s ease;
}

    .progress-line.active[b-2lc1u9khj9] {
        background: var(--primary-color);
    }

/* Form Steps */
.form-step[b-2lc1u9khj9] {
    display: none;
    padding: 32px;
}

    .form-step.active[b-2lc1u9khj9] {
        display: block;
        animation: fadeInUp-b-2lc1u9khj9 0.3s ease;
    }

@keyframes fadeInUp-b-2lc1u9khj9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Form Section */
.form-section[b-2lc1u9khj9] {
    margin-bottom: 32px;
}

.section-title[b-2lc1u9khj9] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 24px 0;
}

    .section-title i[b-2lc1u9khj9] {
        color: var(--primary-color);
    }

/* Form Grid */
.form-grid[b-2lc1u9khj9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.form-group[b-2lc1u9khj9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-2lc1u9khj9] {
        grid-column: 1 / -1;
    }

    .form-group label[b-2lc1u9khj9] {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 14px;
    }

.required[b-2lc1u9khj9] {
    color: var(--danger-color);
}

/* Input Groups */
.input-group[b-2lc1u9khj9] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-2lc1u9khj9] {
    position: absolute;
    right: 16px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.rtl .input-icon[b-2lc1u9khj9] {
    right: auto;
    left: 16px;
}

.form-control[b-2lc1u9khj9] {
    width: 100%;
    padding: 12px 48px 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    background: var(--bg-secondary);
    transition: all 0.3s ease;
}

.rtl .form-control[b-2lc1u9khj9] {
    padding: 12px 16px 12px 48px;
}

.form-control:focus[b-2lc1u9khj9] {
    outline: none;
    border-color: var(--primary-color);
    background: var(--surface-color);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.input-toggle[b-2lc1u9khj9] {
    position: absolute;
    left: 16px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
}

.rtl .input-toggle[b-2lc1u9khj9] {
    left: auto;
    right: 16px;
}

.input-toggle:hover[b-2lc1u9khj9] {
    color: var(--primary-color);
}

/* Textarea */
.textarea-group[b-2lc1u9khj9] {
    position: relative;
}

    .textarea-group textarea[b-2lc1u9khj9] {
        resize: vertical;
        min-height: 100px;
    }

.char-counter[b-2lc1u9khj9] {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.rtl .char-counter[b-2lc1u9khj9] {
    left: auto;
    right: 16px;
}

/* Form Hint */
.form-hint[b-2lc1u9khj9] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Validation Messages */
.validation-message[b-2lc1u9khj9] {
    font-size: 13px;
    color: var(--danger-color);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* Image Upload */
.image-upload-container[b-2lc1u9khj9] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.image-preview[b-2lc1u9khj9] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
}

    .image-preview img[b-2lc1u9khj9] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.empty-image[b-2lc1u9khj9] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

    .empty-image i[b-2lc1u9khj9] {
        font-size: 48px;
        margin-bottom: 8px;
    }

    .empty-image p[b-2lc1u9khj9] {
        font-size: 12px;
        margin: 0;
    }

.remove-image[b-2lc1u9khj9] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rtl .remove-image[b-2lc1u9khj9] {
    left: auto;
    right: 8px;
}

.remove-image:hover[b-2lc1u9khj9] {
    background: var(--danger-color);
}

.upload-button[b-2lc1u9khj9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .upload-button:hover[b-2lc1u9khj9] {
        background: var(--primary-color);
        color: white;
    }

/* ID Upload */
.id-upload-container[b-2lc1u9khj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

    .id-upload-container:hover[b-2lc1u9khj9] {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

.id-preview[b-2lc1u9khj9] {
    width: 100%;
    padding: 16px;
    position: relative;
}

    .id-preview img[b-2lc1u9khj9] {
        width: 100%;
        max-height: 200px;
        object-fit: contain;
        border-radius: 8px;
    }

.remove-btn[b-2lc1u9khj9] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rtl .remove-btn[b-2lc1u9khj9] {
    left: auto;
    right: 8px;
}

.remove-btn:hover[b-2lc1u9khj9] {
    background: var(--danger-hover);
}

.id-upload-btn[b-2lc1u9khj9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .id-upload-btn:hover[b-2lc1u9khj9] {
        color: var(--primary-color);
    }

    .id-upload-btn i[b-2lc1u9khj9] {
        font-size: 48px;
    }

/* Map Container */
.map-container[b-2lc1u9khj9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.map-preview[b-2lc1u9khj9],
.map-placeholder[b-2lc1u9khj9] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: var(--text-secondary);
}

    .map-preview i[b-2lc1u9khj9],
    .map-placeholder i[b-2lc1u9khj9] {
        font-size: 48px;
        color: var(--primary-color);
        margin-bottom: 12px;
        display: block;
    }

    .map-preview p[b-2lc1u9khj9],
    .map-placeholder p[b-2lc1u9khj9] {
        margin: 0 0 8px 0;
        font-weight: 600;
    }

    .map-preview small[b-2lc1u9khj9] {
        color: var(--text-tertiary);
    }

/* Password Strength */
.password-strength[b-2lc1u9khj9] {
    margin-top: 8px;
}

.strength-bar[b-2lc1u9khj9] {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.strength-fill[b-2lc1u9khj9] {
    height: 100%;
    transition: all 0.3s ease;
}

    .strength-fill.weak[b-2lc1u9khj9] {
        background: var(--danger-color);
    }

    .strength-fill.fair[b-2lc1u9khj9] {
        background: var(--warning-color);
    }

    .strength-fill.good[b-2lc1u9khj9] {
        background: var(--info-color);
    }

    .strength-fill.strong[b-2lc1u9khj9] {
        background: var(--success-color);
    }

.strength-text[b-2lc1u9khj9] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Username Availability */
.text-success[b-2lc1u9khj9] {
    color: var(--success-color);
}

.text-danger[b-2lc1u9khj9] {
    color: var(--danger-color);
}

.small[b-2lc1u9khj9] {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Form Actions */
.form-actions[b-2lc1u9khj9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.actions-right[b-2lc1u9khj9] {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn[b-2lc1u9khj9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn:disabled[b-2lc1u9khj9] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-2lc1u9khj9] {
    background: var(--primary-color);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-2lc1u9khj9] {
        background: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-secondary[b-2lc1u9khj9] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

    .btn-secondary:hover:not(:disabled)[b-2lc1u9khj9] {
        background: var(--border-color);
    }

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

    .btn-outline-primary:hover:not(:disabled)[b-2lc1u9khj9] {
        background: var(--primary-light);
    }

.btn-success[b-2lc1u9khj9] {
    background: var(--success-color);
    color: white;
}

    .btn-success:hover:not(:disabled)[b-2lc1u9khj9] {
        background: var(--success-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

/* Alert Overlay */
.alert-overlay[b-2lc1u9khj9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-2lc1u9khj9 0.3s ease;
}

.alert[b-2lc1u9khj9] {
    background: var(--surface-color);
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    padding: 24px;
    box-shadow: var(--shadow-2xl);
    position: relative;
    animation: slideIn-b-2lc1u9khj9 0.3s ease;
}

.alert-danger[b-2lc1u9khj9] {
    border: 2px solid var(--danger-color);
}

.alert-close[b-2lc1u9khj9] {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.rtl .alert-close[b-2lc1u9khj9] {
    left: auto;
    right: 16px;
}

.alert-close:hover[b-2lc1u9khj9] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.alert-icon[b-2lc1u9khj9] {
    font-size: 48px;
    color: var(--danger-color);
    margin-bottom: 16px;
    display: block;
    text-align: center;
}

.alert-content h4[b-2lc1u9khj9] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
}

.alert-content p[b-2lc1u9khj9] {
    margin: 0;
    color: var(--text-secondary);
}

/* Access Denied */
.access-denied[b-2lc1u9khj9] {
    text-align: center;
    padding: 80px 20px;
}

    .access-denied i[b-2lc1u9khj9] {
        font-size: 80px;
        color: var(--text-tertiary);
        margin-bottom: 24px;
        display: block;
    }

    .access-denied h3[b-2lc1u9khj9] {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 12px 0;
        color: var(--text-primary);
    }

    .access-denied p[b-2lc1u9khj9] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0 0 32px 0;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .add-merchant-page[b-2lc1u9khj9] {
        padding: 16px;
    }

    .form-container[b-2lc1u9khj9] {
        border-radius: 12px;
    }

    .form-progress[b-2lc1u9khj9] {
        padding: 24px 16px;
        overflow-x: auto;
    }

    .progress-step[b-2lc1u9khj9] {
        min-width: 80px;
    }

    .step-title[b-2lc1u9khj9] {
        font-size: 12px;
    }

    .form-step[b-2lc1u9khj9] {
        padding: 24px 16px;
    }

    .form-grid[b-2lc1u9khj9] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .image-upload-container[b-2lc1u9khj9] {
        flex-direction: column;
        align-items: center;
    }

    .form-actions[b-2lc1u9khj9] {
        flex-direction: column;
        gap: 16px;
        padding: 20px 16px;
    }

    .actions-right[b-2lc1u9khj9] {
        width: 100%;
        justify-content: center;
    }

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

/* Dark Theme Support */
.dark-theme .form-container[b-2lc1u9khj9] {
    background: var(--bg-secondary);
}

.dark-theme .form-control[b-2lc1u9khj9] {
    background: var(--bg-primary);
}

    .dark-theme .form-control:focus[b-2lc1u9khj9] {
        background: var(--bg-secondary);
    }

.dark-theme .alert[b-2lc1u9khj9] {
    background: var(--bg-secondary);
}

/* Animations */
@keyframes fadeIn-b-2lc1u9khj9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-2lc1u9khj9 {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }

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

/* Print Styles */
@media print {
    .form-progress[b-2lc1u9khj9],
    .form-actions[b-2lc1u9khj9],
    .upload-button[b-2lc1u9khj9],
    .id-upload-btn[b-2lc1u9khj9],
    .remove-image[b-2lc1u9khj9],
    .remove-btn[b-2lc1u9khj9] {
        display: none !important;
    }

    .form-step[b-2lc1u9khj9] {
        display: block !important;
        page-break-inside: avoid;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AddUsers.razor.rz.scp.css */
/* AddUsers.razor.css - Modern Professional Add User Page 
   Following design patterns from Users.razor.css */

/* Page Container */
.container-fluid[b-pv1hiupnol] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
    padding: 24px;
}

/* Breadcrumb Styling */
.breadcrumb[b-pv1hiupnol] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    padding: 0;
    background-color: transparent;
}

.breadcrumb-item a[b-pv1hiupnol] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item a:hover[b-pv1hiupnol] {
        color: #667eea;
    }

.breadcrumb-item.active[b-pv1hiupnol] {
    color: #4c1d95;
    font-weight: 600;
}

/* Header Styling */
h2[b-pv1hiupnol] {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 8px;
}

/* Card Styling */
.card[b-pv1hiupnol] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .card:hover[b-pv1hiupnol] {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
    }

.card-header[b-pv1hiupnol] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .card-header h5[b-pv1hiupnol] {
        margin: 0;
        font-weight: 700;
        color: #4c1d95;
        font-size: 18px;
    }

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

        .card-header.bg-primary h5[b-pv1hiupnol] {
            color: white;
        }

.card-body[b-pv1hiupnol] {
    padding: 24px;
}

/* User Type Selection */
.form-check.card[b-pv1hiupnol] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

    .form-check.card:hover[b-pv1hiupnol] {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .form-check.card.border-primary[b-pv1hiupnol] {
        border-color: #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
    }

/* Form Styling */
.form-label[b-pv1hiupnol] {
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-pv1hiupnol], .form-select[b-pv1hiupnol] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-pv1hiupnol], .form-select:focus[b-pv1hiupnol] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control:disabled[b-pv1hiupnol], .form-select:disabled[b-pv1hiupnol] {
        background: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.7;
    }

.input-group[b-pv1hiupnol] {
    position: relative;
}

.input-group-text[b-pv1hiupnol] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: none;
    color: #667eea;
}

.input-group .form-control[b-pv1hiupnol] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-text[b-pv1hiupnol] {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Form Check */
.form-check-input[b-pv1hiupnol] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: #667eea;
}

.form-check-label[b-pv1hiupnol] {
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Validation Styling */
.validation-message[b-pv1hiupnol] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

/* Buttons */
.btn[b-pv1hiupnol] {
    border-radius: 12px;
    font-weight: 600;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-pv1hiupnol] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
}

    .btn-primary:hover[b-pv1hiupnol] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-pv1hiupnol] {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    color: #1e293b;
    border: none;
}

    .btn-secondary:hover[b-pv1hiupnol] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(148, 163, 184, 0.3);
    }

.btn-outline-secondary[b-pv1hiupnol] {
    background: transparent;
    border: 2px solid #94a3b8;
    color: #64748b;
}

    .btn-outline-secondary:hover[b-pv1hiupnol] {
        background: rgba(148, 163, 184, 0.1);
        color: #1e293b;
    }

.btn-sm[b-pv1hiupnol] {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-danger[b-pv1hiupnol] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
}

    .btn-danger:hover[b-pv1hiupnol] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

.btn-info[b-pv1hiupnol] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
}

    .btn-info:hover[b-pv1hiupnol] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Unauthorized Section */
.text-center[b-pv1hiupnol] {
    text-align: center;
}

.text-muted[b-pv1hiupnol] {
    color: #64748b;
}

.mx-auto[b-pv1hiupnol] {
    margin-left: auto;
    margin-right: auto;
}

/* Spinner */
.spinner-border[b-pv1hiupnol] {
    border: 3px solid transparent;
    border-radius: 50%;
    animation: spin-b-pv1hiupnol 0.8s linear infinite;
}

.spinner-border-sm[b-pv1hiupnol] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.text-success[b-pv1hiupnol] {
    color: #10b981 !important;
}

.text-danger[b-pv1hiupnol] {
    color: #ef4444 !important;
}

/* File Upload Preview */
.img-thumbnail[b-pv1hiupnol] {
    border-radius: 12px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    transition: all 0.3s;
}

    .img-thumbnail:hover[b-pv1hiupnol] {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .container-fluid[b-pv1hiupnol] {
        padding: 16px;
    }

    .card[b-pv1hiupnol] {
        border-radius: 16px;
    }

    .card-header[b-pv1hiupnol],
    .card-body[b-pv1hiupnol] {
        padding: 16px;
    }

    h2[b-pv1hiupnol] {
        font-size: 24px;
    }

    .btn[b-pv1hiupnol] {
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .row.g-3[b-pv1hiupnol] {
        gap: 12px;
    }

    .form-check.card[b-pv1hiupnol] {
        margin-bottom: 12px;
    }

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

    .d-flex.justify-content-end.gap-2[b-pv1hiupnol] {
        flex-direction: column;
        gap: 10px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .container-fluid[b-pv1hiupnol] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .card[b-pv1hiupnol] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .card-header[b-pv1hiupnol] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

    [data-theme="dark"] .card-header h5[b-pv1hiupnol] {
        color: #e2e8f0;
    }

[data-theme="dark"] .form-label[b-pv1hiupnol] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-pv1hiupnol],
[data-theme="dark"] .form-select[b-pv1hiupnol] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-pv1hiupnol],
    [data-theme="dark"] .form-select:focus[b-pv1hiupnol] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .form-check.card[b-pv1hiupnol] {
    background: rgba(30, 41, 59, 0.9);
}

    [data-theme="dark"] .form-check.card.border-primary[b-pv1hiupnol] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .breadcrumb-item a[b-pv1hiupnol] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item a:hover[b-pv1hiupnol] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-item.active[b-pv1hiupnol] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-secondary[b-pv1hiupnol] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .btn-outline-secondary[b-pv1hiupnol] {
    border: 2px solid #475569;
    color: #9ca3af;
}

    [data-theme="dark"] .btn-outline-secondary:hover[b-pv1hiupnol] {
        background: rgba(71, 85, 105, 0.3);
        color: #e2e8f0;
    }

[data-theme="dark"] .form-control:disabled[b-pv1hiupnol],
[data-theme="dark"] .form-select:disabled[b-pv1hiupnol] {
    background: #334155;
    color: #64748b;
}

/* Animations */
@keyframes spin-b-pv1hiupnol {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Sahelly/Components/Pages/Admin/AdminAllOrders.razor.rz.scp.css */
/* AdminAllOrders Page - Modern Professional Design */

/* Page Container with Background */
.all-orders-container[b-injbzm0acc] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .all-orders-container[b-injbzm0acc]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .all-orders-container > *[b-injbzm0acc] {
        position: relative;
        z-index: 1;
    }

/* Page Header with Statistics */
.page-header[b-injbzm0acc] {
    margin-bottom: 40px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
}

.header-content[b-injbzm0acc] {
    flex: 1;
}

.page-header h1[b-injbzm0acc] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb[b-injbzm0acc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 14px;
}

    .breadcrumb a[b-injbzm0acc] {
        color: #6b7280;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb a:hover[b-injbzm0acc] {
            color: #667eea;
        }

    .breadcrumb span:last-child[b-injbzm0acc] {
        color: #4c1d95;
        font-weight: 600;
    }

.header-stats[b-injbzm0acc] {
    display: flex;
    gap: 16px;
}

.stat-card[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.7) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px 24px;
    min-width: 140px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

    .stat-card:hover[b-injbzm0acc] {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    }

.stat-value[b-injbzm0acc] {
    font-size: 24px;
    font-weight: 700;
    display: block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-injbzm0acc] {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
    display: block;
    font-weight: 500;
}

/* Filters Section */
.filters-section[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.search-box[b-injbzm0acc] {
    flex: 1;
    min-width: 250px;
    position: relative;
}

    .search-box i[b-injbzm0acc] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
    }

    .search-box input[b-injbzm0acc] {
        width: 100%;
        padding: 12px 16px 12px 40px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .search-box input:focus[b-injbzm0acc] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .search-box input[b-injbzm0acc]::placeholder {
            color: #9ca3af;
        }

.filter-controls[b-injbzm0acc] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-select[b-injbzm0acc],
.filter-date[b-injbzm0acc] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    min-width: 150px;
}

    .filter-select:focus[b-injbzm0acc],
    .filter-date:focus[b-injbzm0acc] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-refresh[b-injbzm0acc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-refresh:hover[b-injbzm0acc] {
        transform: translateY(-2px) rotate(45deg);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Orders List Styling */
.orders-list[b-injbzm0acc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.order-card[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

    .order-card:hover[b-injbzm0acc] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
        border-color: #667eea;
    }

.order-header[b-injbzm0acc] {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.05);
}

.order-info h4[b-injbzm0acc] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #4c1d95;
}

.order-date[b-injbzm0acc] {
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.order-badges[b-injbzm0acc] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

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

.status-pending[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-processing[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.status-shipped[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(56, 189, 248, 0.1) 100%);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.status-delivered[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-cancelled[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-returned[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.status-default[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(156, 163, 175, 0.1) 100%);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Payment Method Badges */
.payment-badge[b-injbzm0acc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.method-cash[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.method-card[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(56, 189, 248, 0.1) 100%);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.method-installment[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.method-default[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(156, 163, 175, 0.1) 100%);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Order Content Styling */
.order-content[b-injbzm0acc] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.merchant-info[b-injbzm0acc],
.customer-info[b-injbzm0acc],
.agents-info[b-injbzm0acc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .merchant-info i[b-injbzm0acc],
    .customer-info i[b-injbzm0acc],
    .agents-info i[b-injbzm0acc] {
        width: 36px;
        height: 36px;
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .merchant-info div[b-injbzm0acc],
    .customer-info div[b-injbzm0acc],
    .agents-info div[b-injbzm0acc] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .merchant-info div strong[b-injbzm0acc],
        .customer-info div strong[b-injbzm0acc],
        .agents-info div strong[b-injbzm0acc] {
            font-weight: 600;
            color: #1f2937;
            font-size: 15px;
        }

        .merchant-info div span[b-injbzm0acc],
        .customer-info div span[b-injbzm0acc],
        .agents-info div span[b-injbzm0acc] {
            font-size: 13px;
            color: #6b7280;
        }

.order-summary[b-injbzm0acc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.items-count[b-injbzm0acc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .items-count i[b-injbzm0acc] {
        color: #667eea;
    }

.order-total[b-injbzm0acc] {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .order-total span[b-injbzm0acc] {
        color: #6b7280;
    }

    .order-total strong[b-injbzm0acc] {
        font-weight: 700;
        color: #4c1d95;
    }

/* Order Footer */
.order-footer[b-injbzm0acc] {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(102, 126, 234, 0.03);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.payment-status[b-injbzm0acc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Payment Status Styles */
.payment-pending[b-injbzm0acc],
.payment-partial[b-injbzm0acc],
.payment-completed[b-injbzm0acc],
.payment-failed[b-injbzm0acc],
.payment-refunded[b-injbzm0acc],
.payment-default[b-injbzm0acc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.payment-pending[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.payment-partial[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.payment-completed[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.payment-failed[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.payment-refunded[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.payment-default[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(156, 163, 175, 0.1) 100%);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.paid-amount[b-injbzm0acc] {
    font-size: 12px;
    color: #059669;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.05);
    padding: 4px 8px;
    border-radius: 10px;
}

.btn-view-details[b-injbzm0acc] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-view-details:hover[b-injbzm0acc] {
        transform: translateX(3px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Empty State */
.empty-state[b-injbzm0acc] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-injbzm0acc] {
        font-size: 64px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-injbzm0acc] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-injbzm0acc] {
        font-size: 16px;
        color: #6b7280;
        max-width: 500px;
        margin: 0 auto;
    }

/* Pagination */
.pagination-container[b-injbzm0acc] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.btn-page[b-injbzm0acc] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: #4c1d95;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-page:hover:not(:disabled)[b-injbzm0acc] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-page.active[b-injbzm0acc] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Loading Container */
.loading-container[b-injbzm0acc] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.spinner-border[b-injbzm0acc] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-injbzm0acc 0.8s linear infinite;
}

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

/* Unauthorized Content */
.unauthorized-content[b-injbzm0acc] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
    margin-top: 60px;
}

    .unauthorized-content i[b-injbzm0acc] {
        color: #ef4444;
        margin-bottom: 16px;
    }

    .unauthorized-content h3[b-injbzm0acc] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-injbzm0acc] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .unauthorized-content .btn[b-injbzm0acc] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .unauthorized-content .btn:hover[b-injbzm0acc] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

/* Dark Theme Support */
[data-theme="dark"] .all-orders-container[b-injbzm0acc] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .all-orders-container[b-injbzm0acc]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-injbzm0acc],
[data-theme="dark"] .filters-section[b-injbzm0acc],
[data-theme="dark"] .order-card[b-injbzm0acc],
[data-theme="dark"] .empty-state[b-injbzm0acc],
[data-theme="dark"] .unauthorized-content[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .stat-card[b-injbzm0acc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-value[b-injbzm0acc] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-header h1[b-injbzm0acc] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .stat-label[b-injbzm0acc],
[data-theme="dark"] .breadcrumb a[b-injbzm0acc],
[data-theme="dark"] .order-date[b-injbzm0acc],
[data-theme="dark"] .merchant-info div span[b-injbzm0acc],
[data-theme="dark"] .customer-info div span[b-injbzm0acc],
[data-theme="dark"] .agents-info div span[b-injbzm0acc],
[data-theme="dark"] .items-count[b-injbzm0acc],
[data-theme="dark"] .order-total span[b-injbzm0acc] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb span:last-child[b-injbzm0acc],
[data-theme="dark"] .merchant-info div strong[b-injbzm0acc],
[data-theme="dark"] .customer-info div strong[b-injbzm0acc],
[data-theme="dark"] .agents-info div strong[b-injbzm0acc],
[data-theme="dark"] .order-total strong[b-injbzm0acc],
[data-theme="dark"] .empty-state h3[b-injbzm0acc],
[data-theme="dark"] .unauthorized-content h3[b-injbzm0acc] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-injbzm0acc],
[data-theme="dark"] .unauthorized-content p[b-injbzm0acc] {
    color: #9ca3af;
}

[data-theme="dark"] .search-box input[b-injbzm0acc],
[data-theme="dark"] .filter-select[b-injbzm0acc],
[data-theme="dark"] .filter-date[b-injbzm0acc] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-injbzm0acc],
    [data-theme="dark"] .filter-select:focus[b-injbzm0acc],
    [data-theme="dark"] .filter-date:focus[b-injbzm0acc] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

    [data-theme="dark"] .search-box input[b-injbzm0acc]::placeholder {
        color: #6b7280;
    }

[data-theme="dark"] .order-info h4[b-injbzm0acc] {
    color: #e2e8f0;
}

[data-theme="dark"] .order-header[b-injbzm0acc] {
    background: rgba(71, 85, 105, 0.3);
    border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .order-footer[b-injbzm0acc] {
    background: rgba(71, 85, 105, 0.2);
    border-top: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .order-summary[b-injbzm0acc] {
    border-top: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .btn-page[b-injbzm0acc] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-info i[b-injbzm0acc],
[data-theme="dark"] .customer-info i[b-injbzm0acc],
[data-theme="dark"] .agents-info i[b-injbzm0acc] {
    background: rgba(71, 85, 105, 0.4);
    color: #a78bfa;
}

[data-theme="dark"] .empty-state i[b-injbzm0acc] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .page-header[b-injbzm0acc] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-stats[b-injbzm0acc] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .all-orders-container[b-injbzm0acc] {
        padding: 16px;
    }

    .page-header[b-injbzm0acc] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .header-stats[b-injbzm0acc] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .filters-section[b-injbzm0acc] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .filter-controls[b-injbzm0acc] {
        flex-direction: column;
    }

    .orders-list[b-injbzm0acc] {
        grid-template-columns: 1fr;
    }

    .order-header[b-injbzm0acc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .order-badges[b-injbzm0acc] {
        align-self: flex-start;
    }

    .order-footer[b-injbzm0acc] {
        flex-direction: column;
        gap: 12px;
    }

    .payment-status[b-injbzm0acc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-view-details[b-injbzm0acc] {
        align-self: flex-end;
    }

    .stat-card[b-injbzm0acc] {
        padding: 12px;
        min-width: auto;
    }

    .stat-value[b-injbzm0acc] {
        font-size: 20px;
    }

    .stat-label[b-injbzm0acc] {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .header-stats[b-injbzm0acc] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .page-header h1[b-injbzm0acc] {
        font-size: 24px;
    }

    .breadcrumb[b-injbzm0acc] {
        font-size: 12px;
    }

    .stat-card[b-injbzm0acc] {
        padding: 10px;
    }

    .stat-value[b-injbzm0acc] {
        font-size: 18px;
    }

    .stat-label[b-injbzm0acc] {
        font-size: 11px;
    }
}

/* Print Styles */
@media print {
    .all-orders-container[b-injbzm0acc] {
        background: white !important;
    }

    .page-header[b-injbzm0acc] {
        box-shadow: none;
        background: white !important;
        border: 1px solid #e2e8f0;
    }

    .filters-section[b-injbzm0acc],
    .pagination-container[b-injbzm0acc],
    .btn-view-details[b-injbzm0acc],
    .btn-refresh[b-injbzm0acc] {
        display: none !important;
    }

    .orders-list[b-injbzm0acc] {
        grid-template-columns: 1fr !important;
    }

    .order-card[b-injbzm0acc] {
        box-shadow: none;
        border: 1px solid #e2e8f0;
        page-break-inside: avoid;
    }

    .stat-card[b-injbzm0acc] {
        background: white !important;
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }

    .stat-value[b-injbzm0acc] {
        color: #1f2937 !important;
        -webkit-text-fill-color: #1f2937 !important;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AdminRoles.razor.rz.scp.css */
/* Roles Page Styles */
.roles-page[b-c59xa3k8la] {
    padding: 24px;
    background: var(--bg-secondary);
    min-height: 100vh;
    animation: fadeIn-b-c59xa3k8la 0.3s ease-out;
}

/* Page Header */
.page-header[b-c59xa3k8la] {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.header-content[b-c59xa3k8la] {
    flex: 1;
    min-width: 0;
}

.breadcrumb[b-c59xa3k8la] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-link[b-c59xa3k8la] {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-fast);
}

    .breadcrumb-link:hover[b-c59xa3k8la] {
        color: var(--primary-color);
    }

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

.breadcrumb-current[b-c59xa3k8la] {
    color: var(--text-primary);
    font-weight: 500;
}

.page-title[b-c59xa3k8la] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.page-subtitle[b-c59xa3k8la] {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.header-actions[b-c59xa3k8la] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Statistics Grid */
.stats-grid[b-c59xa3k8la] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-c59xa3k8la] {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-c59xa3k8la]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: var(--gradient-primary);
        opacity: 0.1;
        border-radius: 50%;
        transform: translate(30px, -30px);
    }

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

.stat-icon[b-c59xa3k8la] {
    width: 64px;
    height: 64px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

    .stat-icon i[b-c59xa3k8la] {
        font-size: 28px;
        color: white;
    }

.stat-content[b-c59xa3k8la] {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

    .stat-content h3[b-c59xa3k8la] {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
        line-height: 1;
    }

    .stat-content p[b-c59xa3k8la] {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 4px 0 0 0;
    }

/* Content Container */
.content-container[b-c59xa3k8la] {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Loading State */
.loading-container[b-c59xa3k8la] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 32px;
    gap: 24px;
}

    .loading-container p[b-c59xa3k8la] {
        color: var(--text-secondary);
        font-size: 16px;
        margin: 0;
    }

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

/* Roles Section */
.roles-section[b-c59xa3k8la] {
    padding: 32px;
    border-bottom: 1px solid var(--border-color);
}

.section-header[b-c59xa3k8la] {
    margin-bottom: 24px;
}

    .section-header h2[b-c59xa3k8la] {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 8px 0;
    }

    .section-header p[b-c59xa3k8la] {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0;
    }

/* Roles Grid */
.roles-grid[b-c59xa3k8la] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.role-card[b-c59xa3k8la] {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

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

    .role-card.active[b-c59xa3k8la] {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

.role-header[b-c59xa3k8la] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.role-icon[b-c59xa3k8la] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .role-icon i[b-c59xa3k8la] {
        font-size: 24px;
        color: white;
    }

.role-info[b-c59xa3k8la] {
    flex: 1;
    min-width: 0;
}

    .role-info h3[b-c59xa3k8la] {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 4px 0;
    }

.role-description[b-c59xa3k8la] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.role-stats[b-c59xa3k8la] {
    display: flex;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.stat-item[b-c59xa3k8la] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value[b-c59xa3k8la] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-label[b-c59xa3k8la] {
    font-size: 12px;
    color: var(--text-secondary);
}

.role-actions[b-c59xa3k8la] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.role-card:hover .role-actions[b-c59xa3k8la] {
    opacity: 1;
}

/* Permissions Section */
.permissions-section[b-c59xa3k8la] {
    padding: 32px;
}

.permissions-container[b-c59xa3k8la] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Permission Category */
.permission-category[b-c59xa3k8la] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.category-header[b-c59xa3k8la] {
    padding: 20px 24px;
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition-fast);
}

    .category-header:hover[b-c59xa3k8la] {
        background: var(--hover-background);
    }

.category-info[b-c59xa3k8la] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .category-info i[b-c59xa3k8la] {
        font-size: 20px;
        color: var(--primary-color);
    }

    .category-info h4[b-c59xa3k8la] {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

.permission-count[b-c59xa3k8la] {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
}

.category-permissions[b-c59xa3k8la] {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Permission Item */
.permission-item[b-c59xa3k8la] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

    .permission-item:hover[b-c59xa3k8la] {
        background: var(--hover-background);
    }

.permission-label[b-c59xa3k8la] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    cursor: pointer;
}

.permission-checkbox[b-c59xa3k8la] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

    .permission-checkbox:disabled[b-c59xa3k8la] {
        cursor: not-allowed;
        opacity: 0.5;
    }

.permission-info[b-c59xa3k8la] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.permission-name[b-c59xa3k8la] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.permission-description[b-c59xa3k8la] {
    font-size: 12px;
    color: var(--text-secondary);
}

.badge[b-c59xa3k8la] {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-warning[b-c59xa3k8la] {
    background: var(--warning-light);
    color: var(--warning-color);
}

/* Permissions Actions */
.permissions-actions[b-c59xa3k8la] {
    padding: 24px 32px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Role Users Section */
.role-users-section[b-c59xa3k8la] {
    margin-top: 24px;
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

    .role-users-section .section-header[b-c59xa3k8la] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

/* Table Styles */
.table-container[b-c59xa3k8la] {
    overflow-x: auto;
    margin: -8px;
    padding: 8px;
}

.data-table[b-c59xa3k8la] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-c59xa3k8la] {
        text-align: right;
        padding: 16px;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-secondary);
        background: var(--bg-secondary);
        border-bottom: 2px solid var(--border-color);
        white-space: nowrap;
    }

    .data-table td[b-c59xa3k8la] {
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
    }

    .data-table tr:hover td[b-c59xa3k8la] {
        background: var(--hover-background);
    }

/* User Info */
.user-info[b-c59xa3k8la] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-c59xa3k8la] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

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

.user-details h4[b-c59xa3k8la] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.user-details p[b-c59xa3k8la] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Contact Info */
.contact-info[b-c59xa3k8la] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-item[b-c59xa3k8la] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

    .contact-item i[b-c59xa3k8la] {
        color: var(--text-tertiary);
        width: 16px;
    }

/* Status Badge */
.status-badge[b-c59xa3k8la] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
}

    .status-badge i[b-c59xa3k8la] {
        font-size: 8px;
    }

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

    .status-badge.inactive[b-c59xa3k8la] {
        background: var(--danger-light);
        color: var(--danger-color);
    }

/* Date Info */
.date-info[b-c59xa3k8la] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Action Buttons */
.action-buttons[b-c59xa3k8la] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-c59xa3k8la] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

    .btn-icon:hover[b-c59xa3k8la] {
        background: var(--primary-light);
        color: var(--primary-color);
        transform: translateY(-2px);
    }

    .btn-icon.danger:hover[b-c59xa3k8la] {
        background: var(--danger-light);
        color: var(--danger-color);
    }

/* Mobile Cards */
.mobile-cards[b-c59xa3k8la] {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.user-card[b-c59xa3k8la] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-header[b-c59xa3k8la] {
    padding: 16px;
    background: var(--bg-tertiary);
}

.card-body[b-c59xa3k8la] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item[b-c59xa3k8la] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

    .info-item i[b-c59xa3k8la] {
        width: 20px;
        color: var(--text-tertiary);
    }

.card-actions[b-c59xa3k8la] {
    padding: 16px;
    background: var(--bg-tertiary);
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--border-color);
}

/* Buttons */
.btn[b-c59xa3k8la] {
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

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

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

    .btn-primary:hover:not(:disabled)[b-c59xa3k8la] {
        transform: translateY(-2px);
        box-shadow: var(--glow-primary), var(--shadow-xl);
    }

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

    .btn-secondary:hover:not(:disabled)[b-c59xa3k8la] {
        background: var(--hover-background);
        transform: translateY(-1px);
    }

.btn-danger[b-c59xa3k8la] {
    background: var(--danger-color);
    color: white;
}

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

.btn-sm[b-c59xa3k8la] {
    padding: 8px 16px;
    font-size: 13px;
}

/* Unauthorized */
.unauthorized-container[b-c59xa3k8la] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.unauthorized-content[b-c59xa3k8la] {
    text-align: center;
    max-width: 400px;
}

    .unauthorized-content i[b-c59xa3k8la] {
        font-size: 80px;
        color: var(--text-tertiary);
        margin-bottom: 24px;
        display: block;
    }

    .unauthorized-content h3[b-c59xa3k8la] {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 12px 0;
        color: var(--text-primary);
    }

    .unauthorized-content p[b-c59xa3k8la] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0 0 32px 0;
    }

/* Spinner */
.spinner-border-sm[b-c59xa3k8la] {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.me-2[b-c59xa3k8la] {
    margin-right: 8px;
}

/* RTL Support */
html[dir="rtl"] .breadcrumb-link i[b-c59xa3k8la] {
    margin-left: 6px;
    margin-right: 0;
}

html[dir="rtl"] .data-table th[b-c59xa3k8la],
html[dir="rtl"] .data-table td[b-c59xa3k8la] {
    text-align: left;
}

html[dir="rtl"] .role-actions[b-c59xa3k8la] {
    right: auto;
    left: 16px;
}

html[dir="rtl"] .me-2[b-c59xa3k8la] {
    margin-right: 0;
    margin-left: 8px;
}

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

@media (max-width: 768px) {
    .roles-page[b-c59xa3k8la] {
        padding: 16px;
    }

    .page-header[b-c59xa3k8la] {
        padding: 20px;
        flex-direction: column;
    }

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

    .stats-grid[b-c59xa3k8la] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card[b-c59xa3k8la] {
        padding: 16px;
    }

    .stat-icon[b-c59xa3k8la] {
        width: 48px;
        height: 48px;
    }

        .stat-icon i[b-c59xa3k8la] {
            font-size: 20px;
        }

    .stat-content h3[b-c59xa3k8la] {
        font-size: 1.5rem;
    }

    .roles-grid[b-c59xa3k8la] {
        grid-template-columns: 1fr;
    }

    .desktop-only[b-c59xa3k8la] {
        display: none;
    }

    .mobile-only[b-c59xa3k8la] {
        display: block;
    }

    .mobile-cards[b-c59xa3k8la] {
        display: flex;
    }

    .permissions-section[b-c59xa3k8la] {
        padding: 20px;
    }

    .category-header[b-c59xa3k8la] {
        padding: 16px;
    }

    .category-permissions[b-c59xa3k8la] {
        padding: 12px 16px;
    }

    .permissions-actions[b-c59xa3k8la] {
        padding: 16px;
        flex-direction: column;
    }

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

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

    .page-title[b-c59xa3k8la] {
        font-size: 1.5rem;
    }

    .breadcrumb[b-c59xa3k8la] {
        font-size: 12px;
    }
}

/* Dark Theme */
[data-theme="dark"] .roles-page[b-c59xa3k8la] {
    background: var(--bg-primary);
}

[data-theme="dark"] .role-card[b-c59xa3k8la] {
    background: var(--bg-primary);
}

[data-theme="dark"] .permission-category[b-c59xa3k8la] {
    background: var(--bg-primary);
}

[data-theme="dark"] .category-header[b-c59xa3k8la] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .permission-item[b-c59xa3k8la] {
    background: var(--bg-secondary);
}

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

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

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

    to {
        transform: rotate(360deg);
    }
}

/* Print Styles */
@media print {
    .header-actions[b-c59xa3k8la],
    .role-actions[b-c59xa3k8la],
    .permissions-actions[b-c59xa3k8la],
    .card-actions[b-c59xa3k8la],
    .action-buttons[b-c59xa3k8la] {
        display: none !important;
    }

    .roles-page[b-c59xa3k8la] {
        background: white;
    }

    .page-header[b-c59xa3k8la],
    .content-container[b-c59xa3k8la],
    .role-users-section[b-c59xa3k8la] {
        box-shadow: none;
        break-inside: avoid;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AdminSettings.razor.rz.scp.css */

/* ===================================
   System Settings - Professional Styles
   Modern E-commerce Admin Interface
   نظام إعدادات متطور للوحة تحكم التجارة الإلكترونية
   =================================== */

/* Settings Page Container */
.settings-container[b-y04m8ga8mi] {
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn-b-y04m8ga8mi 0.5s ease-out;
}

/* Page Header */
.page-header[b-y04m8ga8mi] {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
}

.header-content[b-y04m8ga8mi] {
    flex: 1;
}

.page-title[b-y04m8ga8mi] {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-y04m8ga8mi] {
        font-size: 28px;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Breadcrumb */
.breadcrumb[b-y04m8ga8mi] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.breadcrumb-item[b-y04m8ga8mi] {
    display: flex;
    align-items: center;
    color: var(--text-tertiary);
}

    .breadcrumb-item a[b-y04m8ga8mi] {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-y04m8ga8mi] {
            color: var(--primary-color);
        }

    .breadcrumb-item:not(:first-child)[b-y04m8ga8mi]::before {
        content: '/';
        margin-right: 12px;
        color: var(--text-tertiary);
    }

html[dir="rtl"] .breadcrumb-item:not(:first-child)[b-y04m8ga8mi]::before {
    margin-right: 0;
    margin-left: 12px;
}

.breadcrumb-item.active[b-y04m8ga8mi] {
    color: var(--text-primary);
    font-weight: 500;
}

/* Loading States */
.loading-spinner[b-y04m8ga8mi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 48px;
}

.spinner-border[b-y04m8ga8mi] {
    width: 48px;
    height: 48px;
    border-width: 4px;
    color: var(--primary-color);
}

/* Settings Tabs */
.settings-tabs[b-y04m8ga8mi] {
    background: var(--surface-color);
    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-bottom: none;
    overflow: hidden;
}

.nav-tabs[b-y04m8ga8mi] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

    .nav-tabs[b-y04m8ga8mi]::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.nav-item[b-y04m8ga8mi] {
    flex-shrink: 0;
}

.nav-link[b-y04m8ga8mi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .nav-link i[b-y04m8ga8mi] {
        font-size: 16px;
        transition: transform 0.2s ease;
    }

    .nav-link:hover[b-y04m8ga8mi] {
        color: var(--primary-color);
        background: var(--hover-background);
    }

        .nav-link:hover i[b-y04m8ga8mi] {
            transform: translateY(-2px);
        }

    .nav-link.active[b-y04m8ga8mi] {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
        background: var(--primary-light);
    }

/* Tab Content */
.tab-content[b-y04m8ga8mi] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Settings Section */
.settings-section[b-y04m8ga8mi] {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Settings Cards */
.settings-card[b-y04m8ga8mi] {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

    .settings-card:hover[b-y04m8ga8mi] {
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
        border-color: var(--primary-light);
    }

    .settings-card h3.card-title[b-y04m8ga8mi] {
        padding: 20px 24px;
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-color);
        background: var(--surface-color);
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .settings-card h3.card-title i[b-y04m8ga8mi] {
            color: var(--primary-color);
            font-size: 20px;
        }

/* Settings Grid */
.settings-grid[b-y04m8ga8mi] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px;
}

/* Form Elements */
.form-group[b-y04m8ga8mi] {
    margin-bottom: 0;
}

    .form-group label[b-y04m8ga8mi] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-primary);
    }

.form-control[b-y04m8ga8mi] {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    .form-control:focus[b-y04m8ga8mi] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px var(--primary-light);
        background: var(--surface-color);
    }

    .form-control:disabled[b-y04m8ga8mi] {
        opacity: 0.6;
        cursor: not-allowed;
    }

select.form-control[b-y04m8ga8mi] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    padding-right: 40px;
}

html[dir="rtl"] select.form-control[b-y04m8ga8mi] {
    background-position: left 12px center;
    padding-right: 16px;
    padding-left: 40px;
}

/* Form Check */
.form-check[b-y04m8ga8mi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    cursor: pointer;
    padding: 12px 0;
}

.form-check-input[b-y04m8ga8mi] {
    width: 24px;
    height: 24px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    position: relative;
    margin: 0;
}

    .form-check-input:checked[b-y04m8ga8mi] {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

        .form-check-input:checked[b-y04m8ga8mi]::before {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            font-weight: bold;
        }

.form-check-label[b-y04m8ga8mi] {
    font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
}

/* Theme Selector */
.theme-selector[b-y04m8ga8mi] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.theme-option[b-y04m8ga8mi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

    .theme-option i[b-y04m8ga8mi] {
        font-size: 24px;
        color: var(--text-secondary);
        transition: all 0.2s ease;
    }

    .theme-option span[b-y04m8ga8mi] {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-secondary);
    }

    .theme-option:hover[b-y04m8ga8mi] {
        background: var(--primary-light);
        border-color: var(--primary-color);
        transform: translateY(-4px);
    }

        .theme-option:hover i[b-y04m8ga8mi],
        .theme-option:hover span[b-y04m8ga8mi] {
            color: var(--primary-color);
        }

    .theme-option.active[b-y04m8ga8mi] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        box-shadow: var(--shadow-md);
    }

        .theme-option.active i[b-y04m8ga8mi],
        .theme-option.active span[b-y04m8ga8mi] {
            color: white;
        }

/* Save Button Section */
.settings-actions[b-y04m8ga8mi] {
    padding: 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-y04m8ga8mi] {
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.spinner-border-sm[b-y04m8ga8mi] {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.me-2[b-y04m8ga8mi] {
    margin-right: 8px;
}

html[dir="rtl"] .me-2[b-y04m8ga8mi] {
    margin-right: 0;
    margin-left: 8px;
}

/* Alert Styles */
.alert[b-y04m8ga8mi] {
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 15px;
}

.alert-danger[b-y04m8ga8mi] {
    background: var(--danger-light);
    color: var(--danger-dark);
    border: 1px solid var(--danger-color);
}

.alert i[b-y04m8ga8mi] {
    font-size: 20px;
}

/* RTL Support */
html[dir="rtl"] .settings-container[b-y04m8ga8mi] {
    font-family: var(--font-arabic);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .settings-grid[b-y04m8ga8mi] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .settings-container[b-y04m8ga8mi] {
        padding: 16px;
    }

    .page-header[b-y04m8ga8mi] {
        flex-direction: column;
        align-items: flex-start;
    }

    .settings-section[b-y04m8ga8mi] {
        padding: 16px;
    }

    .nav-link[b-y04m8ga8mi] {
        padding: 12px 16px;
        font-size: 14px;
    }

    .theme-selector[b-y04m8ga8mi] {
        flex-direction: column;
    }

    .theme-option[b-y04m8ga8mi] {
        flex-direction: row;
    }

    .settings-actions[b-y04m8ga8mi] {
        flex-direction: column;
    }

    .btn-primary[b-y04m8ga8mi] {
        width: 100%;
    }
}

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

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

/* Dark Theme Support */
[data-theme="dark"] .settings-container[b-y04m8ga8mi] {
    background: var(--bg-primary);
}

[data-theme="dark"] .settings-card[b-y04m8ga8mi] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .form-control[b-y04m8ga8mi] {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-check-input[b-y04m8ga8mi] {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .theme-option[b-y04m8ga8mi] {
    background: var(--bg-tertiary);
}

    [data-theme="dark"] .theme-option.active[b-y04m8ga8mi] {
        background: var(--primary-color);
    }
/* _content/Sahelly/Components/Pages/Admin/AdminSupport.razor.rz.scp.css */

/* ===================================
   Admin Support Page - Professional Design
   ����� ���� ����� ����� �����
   =================================== */

/* Page Container - Modern E-Commerce Style */
.admin-support-page[b-5hlcbl6w5o] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-support-page[b-5hlcbl6w5o]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-support-page > *[b-5hlcbl6w5o] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Modern Style */
.page-header[b-5hlcbl6w5o] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.breadcrumb[b-5hlcbl6w5o] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-5hlcbl6w5o] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-5hlcbl6w5o] {
        color: #667eea;
    }

.breadcrumb-separator[b-5hlcbl6w5o] {
    color: #d1d5db;
}

.breadcrumb-current[b-5hlcbl6w5o] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-5hlcbl6w5o] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-5hlcbl6w5o] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Statistics Section - Gradient Cards */
.statistics-section[b-5hlcbl6w5o] {
    margin-bottom: 32px;
}

.stat-cards[b-5hlcbl6w5o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.stat-card[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-5hlcbl6w5o]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-5hlcbl6w5o] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-5hlcbl6w5o]::before {
            opacity: 1;
        }

    .stat-card i[b-5hlcbl6w5o] {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: white;
        position: relative;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .stat-card.total i[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-card.open i[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .stat-card.in-progress i[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .stat-card.resolved i[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-card.satisfaction i[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

    .stat-card.response-time i[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

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

    .stat-content h3[b-5hlcbl6w5o] {
        font-size: 32px;
        font-weight: 800;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-content p[b-5hlcbl6w5o] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Support Container */
.support-container[b-5hlcbl6w5o] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Filters Section - Modern Card Style */
.filters-section[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.filters-header[b-5hlcbl6w5o] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.section-title[b-5hlcbl6w5o] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
}

.filter-controls[b-5hlcbl6w5o] {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.filter-item[b-5hlcbl6w5o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-item label[b-5hlcbl6w5o] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

    .filter-item select[b-5hlcbl6w5o],
    .filter-item input[b-5hlcbl6w5o] {
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
        color: var(--text-primary);
    }

        .filter-item select:focus[b-5hlcbl6w5o],
        .filter-item input:focus[b-5hlcbl6w5o] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.search-box[b-5hlcbl6w5o] {
    grid-column: span 2;
}

    .search-box .input-group[b-5hlcbl6w5o] {
        display: flex;
        gap: 8px;
    }

        .search-box .input-group input[b-5hlcbl6w5o] {
            flex: 1;
        }

        .search-box .input-group button[b-5hlcbl6w5o] {
            padding: 12px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
        }

            .search-box .input-group button:hover[b-5hlcbl6w5o] {
                transform: translateY(-2px);
                box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
            }

/* Staff Status Section */
.staff-status-section[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.staff-list[b-5hlcbl6w5o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.staff-card[b-5hlcbl6w5o] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
    border: 2px solid transparent;
}

    .staff-card.available[b-5hlcbl6w5o] {
        border-color: rgba(59, 201, 104, 0.3);
        background: rgba(59, 201, 104, 0.05);
    }

    .staff-card.busy[b-5hlcbl6w5o] {
        border-color: rgba(216, 140, 20, 0.3);
        background: rgba(216, 140, 20, 0.05);
    }

    .staff-card:hover[b-5hlcbl6w5o] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

.staff-avatar[b-5hlcbl6w5o] {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .staff-avatar img[b-5hlcbl6w5o] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.status-indicator[b-5hlcbl6w5o] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.staff-card.available .status-indicator[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.staff-card.busy .status-indicator[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.staff-info h4[b-5hlcbl6w5o] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #1f2937;
}

.staff-info p[b-5hlcbl6w5o] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Tickets Section */
.tickets-section[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-header[b-5hlcbl6w5o] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.actions[b-5hlcbl6w5o] {
    display: flex;
    gap: 12px;
}

/* Modern Gradient Buttons */
.btn-gradient-primary[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-gradient-primary:hover[b-5hlcbl6w5o] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-outline-primary[b-5hlcbl6w5o] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-outline-primary:hover[b-5hlcbl6w5o] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-1px);
    }

.btn-outline-secondary[b-5hlcbl6w5o] {
    background: transparent;
    color: #6b7280;
    border: 2px solid rgba(107, 114, 128, 0.3);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 14px;
}

    .btn-outline-secondary:hover[b-5hlcbl6w5o] {
        background: rgba(107, 114, 128, 0.1);
        border-color: #6b7280;
    }

/* Loading State */
.loading-container[b-5hlcbl6w5o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #6b7280;
}

.spinner[b-5hlcbl6w5o] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-5hlcbl6w5o 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* Tickets Table */
.tickets-table[b-5hlcbl6w5o] {
    padding: 24px;
}

.table[b-5hlcbl6w5o] {
    width: 100%;
    border-collapse: collapse;
}

    .table th[b-5hlcbl6w5o] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
        background: transparent;
    }

html[dir="ltr"] .table th[b-5hlcbl6w5o] {
    text-align: left;
}

.table td[b-5hlcbl6w5o] {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
    vertical-align: middle;
}

.table tbody tr[b-5hlcbl6w5o] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .table tbody tr:hover[b-5hlcbl6w5o] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        transform: scale(1.01);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .table tbody tr.selected[b-5hlcbl6w5o] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-left: 4px solid #667eea;
    }

.ticket-number[b-5hlcbl6w5o] {
    font-weight: 700;
    color: #667eea;
    font-size: 14px;
}

.ticket-subject[b-5hlcbl6w5o] {
    font-weight: 600;
    color: #1f2937;
    max-width: 300px;
}

.response-count[b-5hlcbl6w5o] {
    font-size: 12px;
    color: #9333ea;
    font-weight: 500;
    margin-left: 8px;
}

.user-details[b-5hlcbl6w5o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name[b-5hlcbl6w5o] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.user-role[b-5hlcbl6w5o] {
    font-size: 12px;
    color: #9333ea;
    font-weight: 500;
}

/* Status and Priority Badges */
.status-badge[b-5hlcbl6w5o], .priority-badge[b-5hlcbl6w5o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.status-open[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(74, 163, 194, 0.2) 0%, rgba(41, 104, 178, 0.2) 100%);
        color: #2968b2;
        border: 1px solid rgba(74, 163, 194, 0.3);
    }

    .status-badge.status-progress[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(216, 140, 20, 0.2) 0%, rgba(197, 59, 59, 0.2) 100%);
        color: #c53b3b;
        border: 1px solid rgba(216, 140, 20, 0.3);
    }

    .status-badge.status-waiting[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .status-badge.status-resolved[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(59, 201, 104, 0.2) 0%, rgba(50, 209, 183, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(59, 201, 104, 0.3);
    }

    .status-badge.status-closed[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(75, 85, 99, 0.2) 100%);
        color: #4b5563;
        border: 1px solid rgba(107, 114, 128, 0.3);
    }

    .priority-badge.priority-low[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .priority-badge.priority-normal[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
        color: #1d4ed8;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .priority-badge.priority-high[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .priority-badge.priority-urgent[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(234, 88, 12, 0.2) 100%);
        color: #ea580c;
        border: 1px solid rgba(249, 115, 22, 0.3);
    }

    .priority-badge.priority-critical[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

.assigned-to[b-5hlcbl6w5o] {
    font-weight: 500;
    color: #1f2937;
}

.unassigned[b-5hlcbl6w5o] {
    color: #9ca3af;
    font-style: italic;
}

.date[b-5hlcbl6w5o] {
    color: #6b7280;
    font-size: 13px;
}

.actions[b-5hlcbl6w5o] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.btn-sm.btn-icon[b-5hlcbl6w5o] {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s;
}

    .btn-sm.btn-icon.btn-primary[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
        border: none;
    }

        .btn-sm.btn-icon.btn-primary:hover[b-5hlcbl6w5o] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(90, 108, 179, 0.3);
        }

    .btn-sm.btn-icon.btn-success[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
        border: none;
    }

        .btn-sm.btn-icon.btn-success:hover[b-5hlcbl6w5o] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 201, 104, 0.3);
        }

    .btn-sm.btn-icon.btn-warning[b-5hlcbl6w5o] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
        color: white;
        border: none;
    }

        .btn-sm.btn-icon.btn-warning:hover[b-5hlcbl6w5o] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(216, 140, 20, 0.3);
        }

/* Pagination */
.pagination[b-5hlcbl6w5o] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .pagination .btn-sm[b-5hlcbl6w5o] {
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(102, 126, 234, 0.1);
        border: none;
        border-radius: 10px;
        color: #4c1d95;
        font-weight: 600;
        transition: all 0.3s;
    }

        .pagination .btn-sm:hover:not(:disabled)[b-5hlcbl6w5o] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .pagination .btn-sm:disabled[b-5hlcbl6w5o] {
            opacity: 0.4;
            cursor: not-allowed;
        }

.page-info[b-5hlcbl6w5o] {
    margin: 0 16px;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 600;
}

/* Empty State */
.empty-state[b-5hlcbl6w5o] {
    text-align: center;
    padding: 80px 20px;
    color: #6b7280;
}

    .empty-state i[b-5hlcbl6w5o] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-5hlcbl6w5o] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-5hlcbl6w5o] {
        font-size: 16px;
        color: #6b7280;
    }

/* Modal Styles - Modern Design */
.modal-overlay[b-5hlcbl6w5o] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-5hlcbl6w5o 0.3s ease;
}

.modal-container[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 600px;
    width: calc(100% - 32px);
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-5hlcbl6w5o 0.3s ease;
}

    .modal-container.large[b-5hlcbl6w5o] {
        max-width: 900px;
    }

.modal-header[b-5hlcbl6w5o] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h2[b-5hlcbl6w5o] {
        font-size: 20px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

.close-btn[b-5hlcbl6w5o] {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #6b7280;
    transition: all 0.3s;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-btn:hover[b-5hlcbl6w5o] {
        color: #4c1d95;
        background: rgba(102, 126, 234, 0.1);
        transform: rotate(90deg);
    }

.modal-body[b-5hlcbl6w5o] {
    padding: 30px;
}

.modal-footer[b-5hlcbl6w5o] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(248, 250, 252, 0.5);
}

/* Ticket Details Grid */
.ticket-detail-grid[b-5hlcbl6w5o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.detail-section[b-5hlcbl6w5o] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .detail-section h3[b-5hlcbl6w5o] {
        font-size: 16px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.detail-item[b-5hlcbl6w5o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

    .detail-item:last-child[b-5hlcbl6w5o] {
        margin-bottom: 0;
    }

    .detail-item label[b-5hlcbl6w5o] {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-item span[b-5hlcbl6w5o],
    .detail-item p[b-5hlcbl6w5o] {
        font-size: 14px;
        color: #1f2937;
        font-weight: 500;
        margin: 0;
    }

    .detail-item select[b-5hlcbl6w5o] {
        padding: 8px 12px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 8px;
        transition: all 0.3s;
        font-size: 14px;
    }

        .detail-item select:focus[b-5hlcbl6w5o] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.rating-stars[b-5hlcbl6w5o] {
    display: flex;
    gap: 4px;
    color: #f59e0b;
    font-size: 16px;
}

.attachments-list[b-5hlcbl6w5o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-link[b-5hlcbl6w5o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}

    .attachment-link:hover[b-5hlcbl6w5o] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateX(4px);
    }

/* Internal Notes Section */
.internal-notes-section[b-5hlcbl6w5o] {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid rgba(102, 126, 234, 0.1);
}

    .internal-notes-section h3[b-5hlcbl6w5o] {
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 16px;
    }

.notes-list[b-5hlcbl6w5o] {
    margin-bottom: 24px;
}

.note-item[b-5hlcbl6w5o] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #667eea;
}

.note-header[b-5hlcbl6w5o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.note-author[b-5hlcbl6w5o] {
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
}

.note-date[b-5hlcbl6w5o] {
    font-size: 12px;
    color: #6b7280;
}

.note-content[b-5hlcbl6w5o] {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
    margin: 0;
}

.add-note textarea[b-5hlcbl6w5o] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
}

    .add-note textarea:focus[b-5hlcbl6w5o] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Chat Window - Modern Design */
.chat-window[b-5hlcbl6w5o] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 400px;
    height: 600px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    animation: slideUpFull-b-5hlcbl6w5o 0.3s ease;
}

.chat-header[b-5hlcbl6w5o] {
    padding: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.chat-info h3[b-5hlcbl6w5o] {
    font-size: 16px;
    font-weight: 700;
    color: #4c1d95;
    margin: 0 0 4px 0;
}

.chat-ticket-number[b-5hlcbl6w5o] {
    font-size: 12px;
    color: #667eea;
    font-weight: 600;
    margin-right: 8px;
}

.chat-user[b-5hlcbl6w5o] {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.chat-actions[b-5hlcbl6w5o] {
    display: flex;
    gap: 8px;
}

.close-chat[b-5hlcbl6w5o] {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .close-chat:hover[b-5hlcbl6w5o] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.ticket-info-panel[b-5hlcbl6w5o] {
    padding: 16px 20px;
    background: rgba(102, 126, 234, 0.05);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-item[b-5hlcbl6w5o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .info-item label[b-5hlcbl6w5o] {
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-item span[b-5hlcbl6w5o] {
        font-size: 13px;
        font-weight: 500;
    }

.chat-messages[b-5hlcbl6w5o] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message[b-5hlcbl6w5o] {
    max-width: 80%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .message.user[b-5hlcbl6w5o] {
        align-self: flex-end;
        align-items: flex-end;
    }

    .message.support[b-5hlcbl6w5o] {
        align-self: flex-start;
        align-items: flex-start;
    }

.message-header[b-5hlcbl6w5o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
}

.sender-name[b-5hlcbl6w5o] {
    font-weight: 600;
}

.message-time[b-5hlcbl6w5o] {
    opacity: 0.7;
}

.message-content[b-5hlcbl6w5o] {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}

.message.user .message-content[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.support .message-content[b-5hlcbl6w5o] {
    background: rgba(102, 126, 234, 0.1);
    color: #1f2937;
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.no-messages[b-5hlcbl6w5o] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-style: italic;
}

.typing-indicator[b-5hlcbl6w5o] {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    max-width: 60px;
    align-self: flex-start;
}

    .typing-indicator span[b-5hlcbl6w5o] {
        width: 6px;
        height: 6px;
        background: #667eea;
        border-radius: 50%;
        animation: typing-b-5hlcbl6w5o 1.4s infinite ease-in-out;
    }

        .typing-indicator span:nth-child(2)[b-5hlcbl6w5o] {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3)[b-5hlcbl6w5o] {
            animation-delay: 0.4s;
        }

@keyframes typing-b-5hlcbl6w5o {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.quick-responses[b-5hlcbl6w5o] {
    padding: 12px 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick-response-btn[b-5hlcbl6w5o] {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    color: #667eea;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
}

    .quick-response-btn:hover[b-5hlcbl6w5o] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-1px);
    }

.chat-input[b-5hlcbl6w5o] {
    padding: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    gap: 8px;
    align-items: center;
}

.message-input[b-5hlcbl6w5o] {
    flex: 1;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s;
}

    .message-input:focus[b-5hlcbl6w5o] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.send-button[b-5hlcbl6w5o] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s;
}

    .send-button:hover:not(:disabled)[b-5hlcbl6w5o] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .send-button:disabled[b-5hlcbl6w5o] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Form Styles */
.ticket-form[b-5hlcbl6w5o] {
    padding: 0;
}

.form-group[b-5hlcbl6w5o] {
    margin-bottom: 20px;
}

    .form-group label[b-5hlcbl6w5o] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
    }

.required[b-5hlcbl6w5o] {
    color: #ef4444;
}

.form-control[b-5hlcbl6w5o] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: var(--text-primary);
}

    .form-control:focus[b-5hlcbl6w5o] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

textarea.form-control[b-5hlcbl6w5o] {
    resize: vertical;
    min-height: 100px;
}

.search-results[b-5hlcbl6w5o] {
    background: white;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-result-item[b-5hlcbl6w5o] {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .search-result-item:hover[b-5hlcbl6w5o] {
        background: rgba(102, 126, 234, 0.05);
    }

    .search-result-item:last-child[b-5hlcbl6w5o] {
        border-bottom: none;
    }

.customer-name[b-5hlcbl6w5o] {
    font-weight: 600;
    color: #1f2937;
    display: block;
    font-size: 14px;
}

.customer-email[b-5hlcbl6w5o] {
    font-size: 12px;
    color: #6b7280;
    display: block;
    margin-top: 2px;
}

.selected-customer[b-5hlcbl6w5o] {
    margin-top: 8px;
    padding: 12px 16px;
    background: rgba(59, 201, 104, 0.1);
    border: 1px solid rgba(59, 201, 104, 0.3);
    border-radius: 8px;
    color: #059669;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.form-actions[b-5hlcbl6w5o] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.spinner-border[b-5hlcbl6w5o] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Unauthorized Container */
.unauthorized-container[b-5hlcbl6w5o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px 20px;
}

    .unauthorized-container i[b-5hlcbl6w5o] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-container h2[b-5hlcbl6w5o] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-container p[b-5hlcbl6w5o] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Dark Theme Support */
[data-theme="dark"] .admin-support-page[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-support-page[b-5hlcbl6w5o]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-5hlcbl6w5o],
[data-theme="dark"] .filters-section[b-5hlcbl6w5o],
[data-theme="dark"] .staff-status-section[b-5hlcbl6w5o],
[data-theme="dark"] .tickets-section[b-5hlcbl6w5o],
[data-theme="dark"] .stat-card[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .filters-header[b-5hlcbl6w5o],
[data-theme="dark"] .section-header[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.2) 0%, rgba(51, 65, 85, 0.2) 100%);
}

[data-theme="dark"] .filter-item input[b-5hlcbl6w5o],
[data-theme="dark"] .filter-item select[b-5hlcbl6w5o],
[data-theme="dark"] .form-control[b-5hlcbl6w5o] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-item input:focus[b-5hlcbl6w5o],
    [data-theme="dark"] .filter-item select:focus[b-5hlcbl6w5o],
    [data-theme="dark"] .form-control:focus[b-5hlcbl6w5o] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .section-title[b-5hlcbl6w5o],
[data-theme="dark"] .page-title[b-5hlcbl6w5o] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-5hlcbl6w5o],
[data-theme="dark"] .stat-content p[b-5hlcbl6w5o] {
    color: #9ca3af;
}

[data-theme="dark"] .table th[b-5hlcbl6w5o] {
    color: #a78bfa;
}

[data-theme="dark"] .table td[b-5hlcbl6w5o] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .table tbody tr:hover[b-5hlcbl6w5o] {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.1) 0%, rgba(196, 181, 253, 0.1) 100%);
}

[data-theme="dark"] .modal-container[b-5hlcbl6w5o],
[data-theme="dark"] .chat-window[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-header[b-5hlcbl6w5o],
[data-theme="dark"] .chat-header[b-5hlcbl6w5o] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.2) 0%, rgba(51, 65, 85, 0.2) 100%);
}

[data-theme="dark"] .detail-section[b-5hlcbl6w5o] {
    background: rgba(71, 85, 105, 0.2);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .note-item[b-5hlcbl6w5o] {
    background: rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .message.support .message-content[b-5hlcbl6w5o] {
    background: rgba(129, 140, 248, 0.2);
    border: 1px solid rgba(129, 140, 248, 0.3);
    color: #e2e8f0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stat-cards[b-5hlcbl6w5o] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-controls[b-5hlcbl6w5o] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-support-page[b-5hlcbl6w5o] {
        padding: 16px;
    }

    .page-header[b-5hlcbl6w5o] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-5hlcbl6w5o] {
        font-size: 28px;
    }

    .page-subtitle[b-5hlcbl6w5o] {
        font-size: 16px;
    }

    .stat-cards[b-5hlcbl6w5o] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-5hlcbl6w5o] {
        padding: 20px;
    }

        .stat-card i[b-5hlcbl6w5o] {
            width: 50px;
            height: 50px;
            font-size: 22px;
        }

        .stat-card .stat-content h3[b-5hlcbl6w5o] {
            font-size: 24px;
        }

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

    .search-box[b-5hlcbl6w5o] {
        grid-column: span 1;
    }

    .staff-list[b-5hlcbl6w5o] {
        grid-template-columns: 1fr;
    }

    .section-header[b-5hlcbl6w5o] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

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

    .table[b-5hlcbl6w5o] {
        font-size: 14px;
    }

        .table th[b-5hlcbl6w5o],
        .table td[b-5hlcbl6w5o] {
            padding: 12px 8px;
        }

    .modal-container[b-5hlcbl6w5o] {
        width: calc(100% - 16px);
        margin: 8px;
    }

    .modal-header[b-5hlcbl6w5o],
    .modal-body[b-5hlcbl6w5o],
    .modal-footer[b-5hlcbl6w5o] {
        padding: 20px;
    }

    .ticket-detail-grid[b-5hlcbl6w5o] {
        grid-template-columns: 1fr;
    }

    .chat-window[b-5hlcbl6w5o] {
        width: calc(100% - 16px);
        height: calc(100% - 32px);
        right: 8px;
        bottom: 8px;
        top: 8px;
        left: 8px;
    }

    .ticket-info-panel[b-5hlcbl6w5o] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-title[b-5hlcbl6w5o] {
        font-size: 24px;
    }

    .breadcrumb[b-5hlcbl6w5o] {
        font-size: 12px;
    }

    .stat-card[b-5hlcbl6w5o] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .form-actions[b-5hlcbl6w5o] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-5hlcbl6w5o] {
            width: 100%;
        }
}

/* Animations */
@keyframes fadeIn-b-5hlcbl6w5o {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

@keyframes slideUpFull-b-5hlcbl6w5o {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Print Styles */
@media print {
    .admin-support-page[b-5hlcbl6w5o] {
        background: white !important;
    }

    .actions[b-5hlcbl6w5o],
    .filters-section[b-5hlcbl6w5o],
    .pagination[b-5hlcbl6w5o],
    .btn[b-5hlcbl6w5o],
    .modal-overlay[b-5hlcbl6w5o],
    .chat-window[b-5hlcbl6w5o] {
        display: none !important;
    }

    .table[b-5hlcbl6w5o] {
        font-size: 12px;
    }

        .table th[b-5hlcbl6w5o] {
            background: #f3f4f6 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

    .status-badge[b-5hlcbl6w5o],
    .priority-badge[b-5hlcbl6w5o] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Focus States for Accessibility */
*:focus[b-5hlcbl6w5o] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-5hlcbl6w5o],
.btn:focus[b-5hlcbl6w5o] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-5hlcbl6w5o],
select:focus[b-5hlcbl6w5o],
textarea:focus[b-5hlcbl6w5o] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-5hlcbl6w5o],
    .btn-outline-primary[b-5hlcbl6w5o],
    .status-badge[b-5hlcbl6w5o],
    .priority-badge[b-5hlcbl6w5o] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-5hlcbl6w5o] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AdminViewOrder.razor.rz.scp.css */
/* MerchantViewOrder - Professional Modern Design
   متجانس مع التصميم العام للنظام
   ================================================== */

/* Container and Page Layout */
.order-details-container[b-2fzb8r58cj] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .order-details-container[b-2fzb8r58cj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .order-details-container > *[b-2fzb8r58cj] {
        position: relative;
        z-index: 1;
    }

.order-content[b-2fzb8r58cj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Order Header */
.order-header[b-2fzb8r58cj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-left[b-2fzb8r58cj] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-back[b-2fzb8r58cj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-back:hover[b-2fzb8r58cj] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.header-info h1[b-2fzb8r58cj] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.breadcrumb[b-2fzb8r58cj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .breadcrumb a[b-2fzb8r58cj] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
    }

        .breadcrumb a:hover[b-2fzb8r58cj] {
            color: #667eea;
        }

.header-actions[b-2fzb8r58cj] {
    display: flex;
    gap: 12px;
}

.btn-action[b-2fzb8r58cj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    color: white;
}

    .btn-action.print[b-2fzb8r58cj] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    }

        .btn-action.print:hover[b-2fzb8r58cj] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
        }

    .btn-action.share[b-2fzb8r58cj] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
    }

        .btn-action.share:hover[b-2fzb8r58cj] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
        }

    .btn-action.edit[b-2fzb8r58cj] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    }

        .btn-action.edit:hover[b-2fzb8r58cj] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
        }

/* Status Card */
.status-card[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-header[b-2fzb8r58cj] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.status-info[b-2fzb8r58cj], .payment-info[b-2fzb8r58cj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-label[b-2fzb8r58cj], .payment-label[b-2fzb8r58cj] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.status-badge[b-2fzb8r58cj], .payment-badge[b-2fzb8r58cj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
}

.status-pending[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-processing[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.status-shipped[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.2) 100%);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-delivered[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-cancelled[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-returned[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Payment Status */
.payment-pending[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.payment-partial[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.payment-completed[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.payment-failed[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.payment-refunded[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.status-actions[b-2fzb8r58cj] {
    display: flex;
    gap: 12px;
}

.btn-status[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-status:hover[b-2fzb8r58cj] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Information Sections */
.info-section[b-2fzb8r58cj], .items-section[b-2fzb8r58cj], .payment-section[b-2fzb8r58cj],
.installment-section[b-2fzb8r58cj], .agents-section[b-2fzb8r58cj], .timeline-section[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

    .info-section:hover[b-2fzb8r58cj], .items-section:hover[b-2fzb8r58cj], .payment-section:hover[b-2fzb8r58cj],
    .installment-section:hover[b-2fzb8r58cj], .agents-section:hover[b-2fzb8r58cj], .timeline-section:hover[b-2fzb8r58cj] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

.section-header[b-2fzb8r58cj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .section-header h3[b-2fzb8r58cj] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4c1d95;
    }

        .section-header h3 i[b-2fzb8r58cj] {
            color: #667eea;
        }

.info-grid[b-2fzb8r58cj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item[b-2fzb8r58cj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .info-item label[b-2fzb8r58cj] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

.info-value[b-2fzb8r58cj] {
    font-size: 16px;
    font-weight: 500;
}

    .info-value a[b-2fzb8r58cj] {
        color: #667eea;
        text-decoration: none;
        transition: all 0.2s;
    }

        .info-value a:hover[b-2fzb8r58cj] {
            color: #4f46e5;
            text-decoration: underline;
        }

.customer-link[b-2fzb8r58cj], .phone-link[b-2fzb8r58cj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Order Items */
.items-count[b-2fzb8r58cj] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.items-table[b-2fzb8r58cj] {
    margin-top: 20px;
}

.table[b-2fzb8r58cj] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th[b-2fzb8r58cj] {
        background: rgba(102, 126, 234, 0.05);
        padding: 12px 16px;
        text-align: right;
        font-weight: 600;
        color: #4c1d95;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .table td[b-2fzb8r58cj] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: background 0.2s;
        vertical-align: middle;
    }

    .table tr:hover td[b-2fzb8r58cj] {
        background: rgba(102, 126, 234, 0.05);
    }

    .table tr:last-child td[b-2fzb8r58cj] {
        border-bottom: none;
    }

.product-info[b-2fzb8r58cj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-2fzb8r58cj] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.discount-amount[b-2fzb8r58cj] {
    color: #ef4444;
}

.total-price[b-2fzb8r58cj] {
    font-weight: 700;
    color: #4c1d95;
}

/* Mobile Items Cards */
.items-mobile[b-2fzb8r58cj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-card[b-2fzb8r58cj] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.item-header[b-2fzb8r58cj] {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.item-image[b-2fzb8r58cj] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.item-details[b-2fzb8r58cj] {
    flex: 1;
}

    .item-details h4[b-2fzb8r58cj] {
        font-size: 16px;
        margin: 0 0 4px 0;
    }

.sku[b-2fzb8r58cj] {
    font-size: 12px;
    color: #6b7280;
}

.item-pricing[b-2fzb8r58cj] {
    padding: 16px;
}

.price-row[b-2fzb8r58cj] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

    .price-row.discount[b-2fzb8r58cj] {
        color: #ef4444;
    }

    .price-row.total[b-2fzb8r58cj] {
        font-weight: 700;
        border-top: 1px dashed rgba(0, 0, 0, 0.1);
        margin-top: 8px;
        padding-top: 12px;
        font-size: 16px;
    }

/* Payment Summary */
.payment-summary[b-2fzb8r58cj] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.summary-row[b-2fzb8r58cj] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
}

    .summary-row.discount[b-2fzb8r58cj] {
        color: #ef4444;
    }

    .summary-row.total[b-2fzb8r58cj] {
        font-size: 20px;
        font-weight: 700;
        border-top: 2px solid rgba(102, 126, 234, 0.1);
        margin-top: 8px;
        padding-top: 12px;
    }

    .summary-row.paid[b-2fzb8r58cj] {
        color: #10b981;
        font-weight: 600;
    }

    .summary-row.remaining[b-2fzb8r58cj] {
        color: #f59e0b;
        font-weight: 600;
    }

.payment-method[b-2fzb8r58cj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .payment-method label[b-2fzb8r58cj] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

.method-badge[b-2fzb8r58cj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    width: fit-content;
    color: white;
}

.method-cash[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.method-card[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.method-installment[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.method-vodafone[b-2fzb8r58cj], .method-etisalat[b-2fzb8r58cj], .method-orange[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.method-paypal[b-2fzb8r58cj], .method-stripe[b-2fzb8r58cj], .method-default[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
}

/* Installment Plan */
.plan-status[b-2fzb8r58cj] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.plan-active[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
}

.plan-completed[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
}

.plan-defaulted[b-2fzb8r58cj], .plan-cancelled[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
}

.plan-onhold[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
}

.installments-schedule[b-2fzb8r58cj] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .installments-schedule h4[b-2fzb8r58cj] {
        font-size: 18px;
        margin-bottom: 16px;
        color: #4c1d95;
    }

.schedule-progress[b-2fzb8r58cj] {
    margin-bottom: 16px;
}

.progress[b-2fzb8r58cj] {
    height: 16px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar[b-2fzb8r58cj] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    transition: width 0.3s;
}

.progress-text[b-2fzb8r58cj] {
    font-size: 14px;
    color: #6b7280;
}

.amount-progress[b-2fzb8r58cj] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.guarantor-info[b-2fzb8r58cj] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .guarantor-info h4[b-2fzb8r58cj] {
        font-size: 18px;
        margin-bottom: 16px;
        color: #4c1d95;
    }

/* Agents Section */
.agents-grid[b-2fzb8r58cj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.agent-card[b-2fzb8r58cj] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

    .agent-card:hover[b-2fzb8r58cj] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

    .agent-card.single[b-2fzb8r58cj] {
        grid-column: 1 / -1;
        max-width: 400px;
    }

.agent-avatar[b-2fzb8r58cj] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

    .agent-avatar img[b-2fzb8r58cj] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.agent-info[b-2fzb8r58cj] {
    flex: 1;
}

    .agent-info h5[b-2fzb8r58cj] {
        font-size: 16px;
        margin: 0 0 4px 0;
        font-weight: 600;
    }

.agent-phone[b-2fzb8r58cj], .agent-commission[b-2fzb8r58cj] {
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* Timeline Section */
.timeline[b-2fzb8r58cj] {
    position: relative;
    padding-right: 24px;
}

    .timeline[b-2fzb8r58cj]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 9px;
        height: 100%;
        width: 2px;
        background: rgba(102, 126, 234, 0.2);
    }

.timeline-item[b-2fzb8r58cj] {
    position: relative;
    padding-bottom: 24px;
    padding-right: 36px;
}

.timeline-icon[b-2fzb8r58cj] {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    box-shadow: 0 0 0 4px white;
}

    .timeline-icon.created[b-2fzb8r58cj] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .timeline-icon.delivered[b-2fzb8r58cj] {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    }

.timeline-content[b-2fzb8r58cj] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

    .timeline-content h5[b-2fzb8r58cj] {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .timeline-content p[b-2fzb8r58cj] {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #6b7280;
    }

    .timeline-content small[b-2fzb8r58cj] {
        font-size: 12px;
        color: #6b7280;
        display: block;
    }

/* Action Buttons */
.action-buttons[b-2fzb8r58cj] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.btn-action.cancel[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
}

    .btn-action.cancel:hover[b-2fzb8r58cj] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(239, 68, 68, 0.3);
    }

.btn-action.return[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

    .btn-action.return:hover[b-2fzb8r58cj] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(245, 158, 11, 0.3);
    }

.btn-action.installments[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2);
}

    .btn-action.installments:hover[b-2fzb8r58cj] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(139, 92, 246, 0.3);
    }

.btn-action.invoice[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

    .btn-action.invoice:hover[b-2fzb8r58cj] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
    }

/* Not Found / Loading / Unauthorized */
.loading-container[b-2fzb8r58cj], .not-found-container[b-2fzb8r58cj], .unauthorized-content[b-2fzb8r58cj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    text-align: center;
    min-height: 60vh;
}

    .not-found-container i[b-2fzb8r58cj], .unauthorized-content i[b-2fzb8r58cj] {
        font-size: 64px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .not-found-container h3[b-2fzb8r58cj], .unauthorized-content h3[b-2fzb8r58cj] {
        font-size: 24px;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .not-found-container p[b-2fzb8r58cj], .unauthorized-content p[b-2fzb8r58cj] {
        color: #6b7280;
        max-width: 500px;
        margin-bottom: 24px;
    }

/* Responsive Design */
@media (max-width: 991px) {
    .order-header[b-2fzb8r58cj] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .status-card[b-2fzb8r58cj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .status-header[b-2fzb8r58cj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .order-details-container[b-2fzb8r58cj] {
        padding: 16px;
    }

    .order-header[b-2fzb8r58cj], .status-card[b-2fzb8r58cj], .info-section[b-2fzb8r58cj],
    .items-section[b-2fzb8r58cj], .payment-section[b-2fzb8r58cj], .installment-section[b-2fzb8r58cj],
    .agents-section[b-2fzb8r58cj], .timeline-section[b-2fzb8r58cj] {
        padding: 16px;
    }

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

    .agents-grid[b-2fzb8r58cj] {
        grid-template-columns: 1fr;
    }

    .header-info h1[b-2fzb8r58cj] {
        font-size: 24px;
    }

    .section-header h3[b-2fzb8r58cj] {
        font-size: 18px;
    }

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

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

    .timeline[b-2fzb8r58cj] {
        padding-right: 20px;
    }

        .timeline[b-2fzb8r58cj]::before {
            right: 7px;
        }

    .timeline-item[b-2fzb8r58cj] {
        padding-right: 28px;
    }

    .timeline-icon[b-2fzb8r58cj] {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }

    .summary-row.total[b-2fzb8r58cj] {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .header-actions[b-2fzb8r58cj] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-action[b-2fzb8r58cj] {
        padding: 10px;
    }
}

/* Print Styles */
@media print {
    .order-details-container[b-2fzb8r58cj] {
        padding: 0;
        background: white !important;
    }

        .order-details-container[b-2fzb8r58cj]::before {
            display: none;
        }

    .order-header[b-2fzb8r58cj], .status-card[b-2fzb8r58cj], .info-section[b-2fzb8r58cj],
    .items-section[b-2fzb8r58cj], .payment-section[b-2fzb8r58cj], .installment-section[b-2fzb8r58cj],
    .agents-section[b-2fzb8r58cj], .timeline-section[b-2fzb8r58cj] {
        box-shadow: none;
        margin-bottom: 20px;
        page-break-inside: avoid;
        border: 1px solid #e2e8f0;
        background: white !important;
    }

    .btn-back[b-2fzb8r58cj], .header-actions[b-2fzb8r58cj], .status-actions[b-2fzb8r58cj], .action-buttons[b-2fzb8r58cj] {
        display: none !important;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .order-details-container[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .order-details-container[b-2fzb8r58cj]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .order-header[b-2fzb8r58cj],
[data-theme="dark"] .status-card[b-2fzb8r58cj],
[data-theme="dark"] .info-section[b-2fzb8r58cj],
[data-theme="dark"] .items-section[b-2fzb8r58cj],
[data-theme="dark"] .payment-section[b-2fzb8r58cj],
[data-theme="dark"] .installment-section[b-2fzb8r58cj],
[data-theme="dark"] .agents-section[b-2fzb8r58cj],
[data-theme="dark"] .timeline-section[b-2fzb8r58cj] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .header-info h1[b-2fzb8r58cj] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb a[b-2fzb8r58cj],
[data-theme="dark"] .breadcrumb[b-2fzb8r58cj] {
    color: #94a3b8;
}

    [data-theme="dark"] .breadcrumb a:hover[b-2fzb8r58cj] {
        color: #a78bfa;
    }

[data-theme="dark"] .section-header h3[b-2fzb8r58cj] {
    color: #e2e8f0;
}

    [data-theme="dark"] .section-header h3 i[b-2fzb8r58cj] {
        color: #a78bfa;
    }

[data-theme="dark"] .info-item label[b-2fzb8r58cj],
[data-theme="dark"] .status-label[b-2fzb8r58cj],
[data-theme="dark"] .payment-label[b-2fzb8r58cj],
[data-theme="dark"] .progress-text[b-2fzb8r58cj],
[data-theme="dark"] .agent-phone[b-2fzb8r58cj],
[data-theme="dark"] .agent-commission[b-2fzb8r58cj] {
    color: #94a3b8;
}

[data-theme="dark"] .info-value[b-2fzb8r58cj] {
    color: #e2e8f0;
}

    [data-theme="dark"] .info-value a[b-2fzb8r58cj] {
        color: #a78bfa;
    }

        [data-theme="dark"] .info-value a:hover[b-2fzb8r58cj] {
            color: #c084fc;
        }

[data-theme="dark"] .table th[b-2fzb8r58cj] {
    background: rgba(102, 126, 234, 0.1);
    color: #e2e8f0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .table td[b-2fzb8r58cj] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme="dark"] .table tr:hover td[b-2fzb8r58cj] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .item-card[b-2fzb8r58cj],
[data-theme="dark"] .agent-card[b-2fzb8r58cj],
[data-theme="dark"] .timeline-content[b-2fzb8r58cj] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .payment-summary[b-2fzb8r58cj] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .btn-back[b-2fzb8r58cj] {
    background: rgba(102, 126, 234, 0.2);
    color: #a78bfa;
}

[data-theme="dark"] .not-found-container i[b-2fzb8r58cj],
[data-theme="dark"] .unauthorized-content i[b-2fzb8r58cj] {
    color: #94a3b8;
}

[data-theme="dark"] .not-found-container h3[b-2fzb8r58cj],
[data-theme="dark"] .unauthorized-content h3[b-2fzb8r58cj] {
    color: #e2e8f0;
}

[data-theme="dark"] .not-found-container p[b-2fzb8r58cj],
[data-theme="dark"] .unauthorized-content p[b-2fzb8r58cj] {
    color: #94a3b8;
}

[data-theme="dark"] .timeline[b-2fzb8r58cj]::before {
    background: rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .timeline-icon[b-2fzb8r58cj] {
    box-shadow: 0 0 0 4px rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .installments-schedule h4[b-2fzb8r58cj],
[data-theme="dark"] .guarantor-info h4[b-2fzb8r58cj] {
    color: #e2e8f0;
}
/* Add this to your CSS file */
.status-dropdown-container[b-2fzb8r58cj] {
    position: relative;
    display: inline-block;
}

.status-dropdown[b-2fzb8r58cj] {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    background-color: white;
    min-width: 160px;
    font-size: 0.9rem;
    cursor: pointer;
}

    .status-dropdown:focus[b-2fzb8r58cj] {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .status-dropdown option[b-2fzb8r58cj] {
        padding: 8px;
    }
/* _content/Sahelly/Components/Pages/Admin/AllAgents.razor.rz.scp.css */

/* ===================================
   AllAgents Page - Professional Admin Panel CSS
   Modern styling inspired by Users.razor.css
   =================================== */

/* Button Gradient Styles */
.btn-gradient-primary[b-opg8aqlanv] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-opg8aqlanv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-opg8aqlanv] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-opg8aqlanv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-opg8aqlanv] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-opg8aqlanv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-warning[b-opg8aqlanv] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-gradient-warning:hover[b-opg8aqlanv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-gradient-danger[b-opg8aqlanv] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-opg8aqlanv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

.btn-gradient-ghost[b-opg8aqlanv] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-gradient-ghost:hover[b-opg8aqlanv] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-1px);
    }

/* Button Variations */
.btn-ghost[b-opg8aqlanv] {
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 8px 12px;
    transition: all 0.2s;
}

    .btn-ghost:hover[b-opg8aqlanv] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

.btn-icon[b-opg8aqlanv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Page Container */
.admin-agents-page[b-opg8aqlanv] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-agents-page[b-opg8aqlanv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-agents-page > *[b-opg8aqlanv] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-opg8aqlanv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-content[b-opg8aqlanv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.breadcrumb-modern[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

.breadcrumb-item[b-opg8aqlanv] {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

    .breadcrumb-item:hover[b-opg8aqlanv] {
        color: #4c1d95;
    }

.separator[b-opg8aqlanv] {
    color: #d1d5db;
}

.breadcrumb-current[b-opg8aqlanv] {
    font-weight: 600;
    color: #4c1d95;
}

.header-title-section[b-opg8aqlanv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title-modern[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    color: #1e293b;
}

.title-icon[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: white;
    font-size: 24px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-opg8aqlanv] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.header-actions[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Statistics Section */
.statistics-section[b-opg8aqlanv] {
    margin-bottom: 32px;
}

.stats-grid[b-opg8aqlanv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.stat-card[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .stat-card:hover[b-opg8aqlanv] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

.stat-icon[b-opg8aqlanv] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.stat-card.total .stat-icon[b-opg8aqlanv] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
}

.stat-card.active .stat-icon[b-opg8aqlanv] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
}

.stat-card.commission .stat-icon[b-opg8aqlanv] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
}

.stat-card.salary .stat-icon[b-opg8aqlanv] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
}

.stat-content[b-opg8aqlanv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .stat-content h3[b-opg8aqlanv] {
        font-size: 28px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-content p[b-opg8aqlanv] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Search & Filter Section */
.search-filter-section[b-opg8aqlanv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    justify-content: space-between;
    align-items: center;
}

.search-container[b-opg8aqlanv] {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-icon[b-opg8aqlanv] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9333ea;
}

.search-input[b-opg8aqlanv] {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

    .search-input:focus[b-opg8aqlanv] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-opg8aqlanv]::placeholder {
        color: #9ca3af;
    }

.clear-search[b-opg8aqlanv] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

    .clear-search:hover[b-opg8aqlanv] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

.filter-controls[b-opg8aqlanv] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-select[b-opg8aqlanv] {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    transition: all 0.3s;
    min-width: 150px;
    font-size: 15px;
    color: #4c1d95;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236366f1' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) 50%;
    padding-right: 32px;
    cursor: pointer;
}

    .filter-select:focus[b-opg8aqlanv] {
        outline: none;
        border-color: #667eea;
        background-color: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.refresh-btn[b-opg8aqlanv] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .refresh-btn:hover[b-opg8aqlanv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    }

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

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

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

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

/* Loading, Error, and Empty States */
.loading-container[b-opg8aqlanv],
.error-container[b-opg8aqlanv],
.empty-state[b-opg8aqlanv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.spinner-container[b-opg8aqlanv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.spinner[b-opg8aqlanv] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-left-color: #667eea;
    border-radius: 50%;
    animation: spin-b-opg8aqlanv 1s linear infinite;
}

.loading-text[b-opg8aqlanv] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 600;
}

.error-icon[b-opg8aqlanv],
.empty-icon[b-opg8aqlanv] {
    font-size: 64px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-icon[b-opg8aqlanv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-container h3[b-opg8aqlanv],
.empty-state h3[b-opg8aqlanv] {
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 16px;
}

.error-container p[b-opg8aqlanv],
.empty-state p[b-opg8aqlanv] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
}

/* Agents Content */
.agents-content[b-opg8aqlanv] {
    margin-bottom: 32px;
}

/* Desktop Table */
.desktop-table-container[b-opg8aqlanv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.agents-table[b-opg8aqlanv] {
    width: 100%;
    border-collapse: collapse;
}

    .agents-table thead tr[b-opg8aqlanv] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        backdrop-filter: blur(4px);
    }

    .agents-table th[b-opg8aqlanv] {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #4c1d95;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

    .agents-table td[b-opg8aqlanv] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .agents-table tbody tr[b-opg8aqlanv] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .agents-table tbody tr:hover[b-opg8aqlanv] {
            background: rgba(102, 126, 234, 0.05);
        }

.agent-info[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.agent-avatar[b-opg8aqlanv] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid white;
}

.agent-avatar-placeholder[b-opg8aqlanv] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.agent-details[b-opg8aqlanv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-name[b-opg8aqlanv] {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}

.agent-email[b-opg8aqlanv] {
    font-size: 13px;
    color: #9333ea;
}

.agent-phone[b-opg8aqlanv] {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.merchant-info[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s;
    padding: 6px 10px;
    border-radius: 8px;
}

    .merchant-info:hover[b-opg8aqlanv] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

.no-merchant[b-opg8aqlanv] {
    font-style: italic;
    color: #9ca3af;
    font-size: 14px;
}

.agent-type[b-opg8aqlanv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .agent-type.commission[b-opg8aqlanv] {
        background: rgba(67, 56, 202, 0.1);
        color: #4338ca;
    }

    .agent-type.salary[b-opg8aqlanv] {
        background: rgba(219, 39, 119, 0.1);
        color: #db2777;
    }

    .agent-type.partner[b-opg8aqlanv] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

.type-details[b-opg8aqlanv] {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}

.wallet-info[b-opg8aqlanv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wallet-balance[b-opg8aqlanv] {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}

.wallet-available[b-opg8aqlanv] {
    font-size: 12px;
    color: #6b7280;
}

.location-btn[b-opg8aqlanv] {
    padding: 6px 12px;
    background: rgba(67, 56, 202, 0.1);
    color: #4338ca;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

    .location-btn:hover[b-opg8aqlanv] {
        background: rgba(67, 56, 202, 0.2);
        transform: translateY(-2px);
    }

.location-disabled[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    border-radius: 8px;
    font-size: 13px;
}

.status-badge[b-opg8aqlanv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.active[b-opg8aqlanv] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .status-badge.inactive[b-opg8aqlanv] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.action-buttons[b-opg8aqlanv] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-opg8aqlanv] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-view[b-opg8aqlanv] {
    background: rgba(67, 56, 202, 0.1);
    color: #4338ca;
}

    .btn-view:hover[b-opg8aqlanv] {
        background: #4338ca;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(67, 56, 202, 0.3);
    }

.btn-performance[b-opg8aqlanv] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

    .btn-performance:hover[b-opg8aqlanv] {
        background: #10b981;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
    }

.btn-deactivate[b-opg8aqlanv] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

    .btn-deactivate:hover[b-opg8aqlanv] {
        background: #ef4444;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
    }

.btn-activate[b-opg8aqlanv] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

    .btn-activate:hover[b-opg8aqlanv] {
        background: #f59e0b;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
    }

.btn-wallet[b-opg8aqlanv] {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}

    .btn-wallet:hover[b-opg8aqlanv] {
        background: #4f46e5;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
    }

/* Inactive row styling */
.inactive-row[b-opg8aqlanv] {
    background: rgba(243, 244, 246, 0.5);
}

    .inactive-row:hover[b-opg8aqlanv] {
        background: rgba(243, 244, 246, 0.8);
    }

/* Mobile Cards */
.mobile-cards-container[b-opg8aqlanv] {
    display: none;
    flex-direction: column;
    gap: 20px;
}

.agent-card[b-opg8aqlanv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .agent-card:hover[b-opg8aqlanv] {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }

.card-header[b-opg8aqlanv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.agent-info-mobile[b-opg8aqlanv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar-mobile[b-opg8aqlanv] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.agent-avatar-placeholder-mobile[b-opg8aqlanv] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.agent-name-mobile[b-opg8aqlanv] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.merchant-name-mobile[b-opg8aqlanv] {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge-mobile[b-opg8aqlanv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

    .status-badge-mobile.active[b-opg8aqlanv] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
        box-shadow: 0 4px 8px rgba(59, 201, 104, 0.3);
    }

    .status-badge-mobile.inactive[b-opg8aqlanv] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
        box-shadow: 0 4px 8px rgba(208, 78, 95, 0.3);
    }

.card-body[b-opg8aqlanv] {
    padding: 16px;
}

.info-row[b-opg8aqlanv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .info-row:last-child[b-opg8aqlanv] {
        border-bottom: none;
    }

.info-label[b-opg8aqlanv] {
    color: #6b7280;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-value[b-opg8aqlanv] {
    font-weight: 500;
    color: #1e293b;
    font-size: 14px;
}

.phone-link[b-opg8aqlanv] {
    color: #4c1d95;
    text-decoration: none;
    transition: all 0.2s;
}

    .phone-link:hover[b-opg8aqlanv] {
        color: #667eea;
        text-decoration: underline;
    }

.location-btn.compact[b-opg8aqlanv] {
    padding: 4px 8px;
    font-size: 12px;
}

.card-actions[b-opg8aqlanv] {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.action-btn[b-opg8aqlanv] {
    flex: 1;
    padding: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #4c1d95;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
    margin: 0 4px;
}

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

.inactive-card[b-opg8aqlanv] {
    opacity: 0.8;
}

    .inactive-card .card-header[b-opg8aqlanv] {
        background: linear-gradient(135deg, rgba(243, 244, 246, 0.2) 0%, rgba(229, 231, 235, 0.2) 100%);
    }

/* Pagination */
.pagination-container[b-opg8aqlanv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pagination-info[b-opg8aqlanv] {
    font-size: 14px;
    color: #6b7280;
}

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

.pagination-btn[b-opg8aqlanv] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    background: rgba(255, 255, 255, 0.8);
    color: #4c1d95;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
}

    .pagination-btn:hover:not(:disabled)[b-opg8aqlanv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn.active[b-opg8aqlanv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

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

/* Unauthorized Container */
.unauthorized-container[b-opg8aqlanv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    max-width: 500px;
    margin: 100px auto;
}

.unauthorized-icon[b-opg8aqlanv] {
    font-size: 64px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark Theme Support */
[data-theme="dark"] .admin-agents-page[b-opg8aqlanv] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-agents-page[b-opg8aqlanv]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-opg8aqlanv],
[data-theme="dark"] .stat-card[b-opg8aqlanv],
[data-theme="dark"] .search-filter-section[b-opg8aqlanv],
[data-theme="dark"] .desktop-table-container[b-opg8aqlanv],
[data-theme="dark"] .agent-card[b-opg8aqlanv],
[data-theme="dark"] .pagination-container[b-opg8aqlanv],
[data-theme="dark"] .loading-container[b-opg8aqlanv],
[data-theme="dark"] .error-container[b-opg8aqlanv],
[data-theme="dark"] .empty-state[b-opg8aqlanv],
[data-theme="dark"] .unauthorized-container[b-opg8aqlanv] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .agents-table th[b-opg8aqlanv] {
    color: #e2e8f0;
}

[data-theme="dark"] .agents-table thead tr[b-opg8aqlanv] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .agents-table tbody tr:hover[b-opg8aqlanv] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .agent-name[b-opg8aqlanv],
[data-theme="dark"] .wallet-balance[b-opg8aqlanv],
[data-theme="dark"] .agent-name-mobile[b-opg8aqlanv],
[data-theme="dark"] .merchant-info[b-opg8aqlanv],
[data-theme="dark"] .info-value[b-opg8aqlanv] {
    color: #e2e8f0;
}

[data-theme="dark"] .agent-phone[b-opg8aqlanv],
[data-theme="dark"] .merchant-name-mobile[b-opg8aqlanv],
[data-theme="dark"] .wallet-available[b-opg8aqlanv],
[data-theme="dark"] .info-label[b-opg8aqlanv],
[data-theme="dark"] .pagination-info[b-opg8aqlanv] {
    color: #9ca3af;
}

[data-theme="dark"] .search-input[b-opg8aqlanv],
[data-theme="dark"] .filter-select[b-opg8aqlanv],
[data-theme="dark"] .pagination-btn[b-opg8aqlanv] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-opg8aqlanv],
    [data-theme="dark"] .filter-select:focus[b-opg8aqlanv] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .card-header[b-opg8aqlanv],
[data-theme="dark"] .card-actions[b-opg8aqlanv] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .action-btn[b-opg8aqlanv] {
    background: rgba(71, 85, 105, 0.4);
    color: #e2e8f0;
}

[data-theme="dark"] .breadcrumb-current[b-opg8aqlanv],
[data-theme="dark"] .page-title-modern[b-opg8aqlanv],
[data-theme="dark"] .unauthorized-container h2[b-opg8aqlanv] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle-enhanced[b-opg8aqlanv],
[data-theme="dark"] .breadcrumb-modern[b-opg8aqlanv],
[data-theme="dark"] .unauthorized-container p[b-opg8aqlanv] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-item[b-opg8aqlanv] {
    color: #818cf8;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-opg8aqlanv] {
        color: #a78bfa;
    }

[data-theme="dark"] .inactive-row[b-opg8aqlanv] {
    background: rgba(71, 85, 105, 0.2);
}

    [data-theme="dark"] .inactive-row:hover[b-opg8aqlanv] {
        background: rgba(71, 85, 105, 0.3);
    }

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

@media (max-width: 992px) {
    .page-header-enhanced[b-opg8aqlanv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-actions[b-opg8aqlanv] {
        width: 100%;
    }

    .desktop-table-container[b-opg8aqlanv] {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .admin-agents-page[b-opg8aqlanv] {
        padding: 16px;
    }

    .search-filter-section[b-opg8aqlanv] {
        flex-direction: column;
        align-items: stretch;
    }

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

    .filter-controls[b-opg8aqlanv] {
        width: 100%;
        justify-content: space-between;
    }

    .filter-select[b-opg8aqlanv] {
        flex: 1;
        min-width: 0;
    }

    .desktop-table-container[b-opg8aqlanv] {
        display: none;
    }

    .mobile-cards-container[b-opg8aqlanv] {
        display: flex;
    }

    .pagination-container[b-opg8aqlanv] {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-controls[b-opg8aqlanv] {
        width: 100%;
        justify-content: center;
    }

    .pagination-info[b-opg8aqlanv] {
        text-align: center;
    }
}

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

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

    .page-title-modern[b-opg8aqlanv] {
        font-size: 24px;
    }

    .page-subtitle-enhanced[b-opg8aqlanv] {
        font-size: 14px;
    }

    .breadcrumb-modern[b-opg8aqlanv] {
        font-size: 12px;
    }

    .action-btn[b-opg8aqlanv] {
        font-size: 12px;
        padding: 8px 4px;
    }

        .action-btn i[b-opg8aqlanv] {
            font-size: 14px;
        }
}

/* Print Styles */
@media print {
    .admin-agents-page[b-opg8aqlanv] {
        background: white;
        padding: 0;
    }

        .admin-agents-page[b-opg8aqlanv]::before {
            display: none;
        }

    .page-header-enhanced[b-opg8aqlanv] {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .header-actions[b-opg8aqlanv],
    .search-filter-section[b-opg8aqlanv],
    .mobile-cards-container[b-opg8aqlanv],
    .pagination-container[b-opg8aqlanv] {
        display: none !important;
    }

    .desktop-table-container[b-opg8aqlanv] {
        display: block !important;
        box-shadow: none;
        border: none;
    }

    .agents-table td[b-opg8aqlanv],
    .agents-table th[b-opg8aqlanv] {
        border: 1px solid #ddd;
    }

    .btn-icon[b-opg8aqlanv] {
        display: none;
    }
}

.orders-cell[b-opg8aqlanv] {
    text-align: center;
}

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

.order-count[b-opg8aqlanv] {
    font-weight: 600;
    color: var(--text-primary);
}

    .order-count i[b-opg8aqlanv] {
        margin-right: 0.25rem;
        color: var(--primary-color);
    }

.completed-orders[b-opg8aqlanv],
.installments-collected[b-opg8aqlanv] {
    font-size: 0.75rem;
}

.commission-info[b-opg8aqlanv] {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

    .commission-info i[b-opg8aqlanv] {
        margin-right: 0.25rem;
    }

@media (max-width: 768px) {
    .info-row .text-success[b-opg8aqlanv] {
        font-weight: 600;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AllCategories.razor.rz.scp.css */

/* ====================================
   Categories Admin Page - Modern Design
   Based on app.css design system and Users.razor.css styling
   ==================================== */

/* Page Container with Gradient Background */
.categories-admin[b-ft5e9rpaej] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .categories-admin[b-ft5e9rpaej]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .categories-admin > *[b-ft5e9rpaej] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Modern Style */
.page-header[b-ft5e9rpaej] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-content[b-ft5e9rpaej] {
    max-width: 600px;
}

.page-title[b-ft5e9rpaej] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-ft5e9rpaej] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-ft5e9rpaej] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search and Filter Section */
.search-filter-section[b-ft5e9rpaej] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.search-box[b-ft5e9rpaej] {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-icon[b-ft5e9rpaej] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9333ea;
}

.search-input[b-ft5e9rpaej] {
    width: 100%;
    padding: 12px 16px;
    padding-left: 40px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .search-input:focus[b-ft5e9rpaej] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-ft5e9rpaej]::placeholder {
        color: #9ca3af;
    }

.filter-group[b-ft5e9rpaej] {
    display: flex;
    gap: 12px;
}

.filter-select[b-ft5e9rpaej] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #4c1d95;
    cursor: pointer;
    min-width: 150px;
}

    .filter-select:focus[b-ft5e9rpaej] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Categories Container */
.categories-container[b-ft5e9rpaej] {
    position: relative;
    min-height: 300px;
}

/* View Toggle */
.view-toggle[b-ft5e9rpaej] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    width: fit-content;
    margin-bottom: 20px;
}

.toggle-btn[b-ft5e9rpaej] {
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

    .toggle-btn:hover[b-ft5e9rpaej] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .toggle-btn.active[b-ft5e9rpaej] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

/* Grid View */
.categories-grid[b-ft5e9rpaej] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.category-card[b-ft5e9rpaej] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

    .category-card:hover[b-ft5e9rpaej] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

.category-image[b-ft5e9rpaej] {
    height: 180px;
    position: relative;
    overflow: hidden;
}

    .category-image img[b-ft5e9rpaej] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }

.category-card:hover .category-image img[b-ft5e9rpaej] {
    transform: scale(1.1);
}

.image-placeholder[b-ft5e9rpaej] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    height: 100%;
    color: #667eea;
    font-size: 48px;
}

.category-badge[b-ft5e9rpaej] {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .category-badge.active[b-ft5e9rpaej] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .category-badge.inactive[b-ft5e9rpaej] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.category-content[b-ft5e9rpaej] {
    padding: 20px;
}

.category-name[b-ft5e9rpaej] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1f2937;
}

.category-name-en[b-ft5e9rpaej] {
    font-size: 14px;
    color: #9333ea;
    margin-bottom: 12px;
    font-weight: 500;
}

.category-parent[b-ft5e9rpaej] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 12px;
}

.category-stats[b-ft5e9rpaej] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.stat-item[b-ft5e9rpaej] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4b5563;
    background: rgba(102, 126, 234, 0.05);
    padding: 6px 10px;
    border-radius: 8px;
}

.category-actions[b-ft5e9rpaej] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(102, 126, 234, 0.05);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.action-btn[b-ft5e9rpaej] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.8);
    color: #4c1d95;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .action-btn:hover[b-ft5e9rpaej] {
        transform: translateY(-2px);
        background: #667eea;
        color: white;
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    }

    .action-btn.danger[b-ft5e9rpaej] {
        color: #dc2626;
    }

        .action-btn.danger:hover[b-ft5e9rpaej] {
            background: #ef4444;
            color: white;
            box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
        }

/* Table View */
.table-responsive[b-ft5e9rpaej] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.data-table[b-ft5e9rpaej] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-ft5e9rpaej] {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

        .data-table th.text-center[b-ft5e9rpaej] {
            text-align: center;
        }

    .data-table td[b-ft5e9rpaej] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .data-table tbody tr[b-ft5e9rpaej] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .data-table tbody tr:hover[b-ft5e9rpaej] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .data-table tbody tr.selected[b-ft5e9rpaej] {
            background: rgba(102, 126, 234, 0.1);
        }

        .data-table tbody tr:last-child td[b-ft5e9rpaej] {
            border-bottom: none;
        }

.text-center[b-ft5e9rpaej] {
    text-align: center;
}

.form-check-input[b-ft5e9rpaej] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
    border-radius: 4px;
}

.table-image[b-ft5e9rpaej] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

    .table-image img[b-ft5e9rpaej] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-placeholder-small[b-ft5e9rpaej] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 18px;
}

.category-info[b-ft5e9rpaej] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-name-primary[b-ft5e9rpaej] {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}

.category-name-secondary[b-ft5e9rpaej] {
    font-size: 13px;
    color: #9333ea;
    font-weight: 500;
}

.parent-category[b-ft5e9rpaej] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #4b5563;
}

.status-badge[b-ft5e9rpaej] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.active[b-ft5e9rpaej] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-ft5e9rpaej] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.badge[b-ft5e9rpaej] {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: inline-block;
}

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

.badge-info[b-ft5e9rpaej] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.text-success[b-ft5e9rpaej] {
    color: #10b981;
}

.text-muted[b-ft5e9rpaej] {
    color: #9ca3af;
}

.action-buttons[b-ft5e9rpaej] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

    .action-buttons .btn[b-ft5e9rpaej] {
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: none;
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .action-buttons .btn:hover[b-ft5e9rpaej] {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

    .action-buttons .btn-danger:hover[b-ft5e9rpaej] {
        background: #ef4444;
    }

/* Bulk Actions */
.bulk-actions[b-ft5e9rpaej] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-radius: 16px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(102, 126, 234, 0.3);
    animation: slideDown-b-ft5e9rpaej 0.3s ease;
}

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

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

.selected-count[b-ft5e9rpaej] {
    font-weight: 600;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

    .selected-count[b-ft5e9rpaej]::before {
        content: '\f058';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: #667eea;
    }

.bulk-buttons[b-ft5e9rpaej] {
    display: flex;
    gap: 10px;
}

.btn-sm[b-ft5e9rpaej] {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-outline-success[b-ft5e9rpaej] {
    border: 2px solid #10b981;
    color: #10b981;
    background: transparent;
    transition: all 0.3s;
}

    .btn-outline-success:hover[b-ft5e9rpaej] {
        background: #10b981;
        color: white;
        transform: translateY(-2px);
    }

.btn-outline-warning[b-ft5e9rpaej] {
    border: 2px solid #f59e0b;
    color: #f59e0b;
    background: transparent;
    transition: all 0.3s;
}

    .btn-outline-warning:hover[b-ft5e9rpaej] {
        background: #f59e0b;
        color: white;
        transform: translateY(-2px);
    }

.btn-outline-danger[b-ft5e9rpaej] {
    border: 2px solid #ef4444;
    color: #ef4444;
    background: transparent;
    transition: all 0.3s;
}

    .btn-outline-danger:hover[b-ft5e9rpaej] {
        background: #ef4444;
        color: white;
        transform: translateY(-2px);
    }

/* Loading, Error, Empty States */
.loading-container[b-ft5e9rpaej], .error-container[b-ft5e9rpaej], .empty-state[b-ft5e9rpaej] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.loading-spinner[b-ft5e9rpaej], .error-icon[b-ft5e9rpaej], .empty-icon[b-ft5e9rpaej] {
    font-size: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
}

.loading-text[b-ft5e9rpaej], .error-message[b-ft5e9rpaej], .empty-subtitle[b-ft5e9rpaej] {
    font-size: 16px;
    color: #6b7280;
    margin-top: 8px;
}

.error-title[b-ft5e9rpaej], .empty-title[b-ft5e9rpaej] {
    font-size: 24px;
    color: #4c1d95;
    margin-bottom: 8px;
}

/* Delete Modal */
.modal-backdrop[b-ft5e9rpaej] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
}

.modal-dialog[b-ft5e9rpaej] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    z-index: 1001;
    animation: zoomIn-b-ft5e9rpaej 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomIn-b-ft5e9rpaej {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-content[b-ft5e9rpaej] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-ft5e9rpaej] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.modal-title[b-ft5e9rpaej] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.close-btn[b-ft5e9rpaej] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #6b7280;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .close-btn:hover[b-ft5e9rpaej] {
        background: #f3f4f6;
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-ft5e9rpaej] {
    padding: 24px;
}

.delete-warning[b-ft5e9rpaej] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 12px;
    margin-bottom: 20px;
}

    .delete-warning i[b-ft5e9rpaej] {
        font-size: 24px;
        color: #ef4444;
    }

    .delete-warning p[b-ft5e9rpaej] {
        margin: 0;
        color: #7f1d1d;
        font-weight: 500;
    }

.delete-info[b-ft5e9rpaej] {
    padding: 16px;
    background: rgba(103, 232, 249, 0.1);
    border-radius: 12px;
}

    .delete-info p[b-ft5e9rpaej] {
        margin: 0 0 8px;
        font-size: 15px;
    }

.alert[b-ft5e9rpaej] {
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 14px;
}

.alert-warning[b-ft5e9rpaej] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-left: 4px solid #f59e0b;
}

.alert i[b-ft5e9rpaej] {
    font-size: 16px;
    color: #f59e0b;
}

.modal-footer[b-ft5e9rpaej] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(245, 245, 245, 0.5);
}

/* Button Styles */
.btn[b-ft5e9rpaej] {
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-gradient[b-ft5e9rpaej] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-gradient:hover[b-ft5e9rpaej] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-primary[b-ft5e9rpaej] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-ft5e9rpaej] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-ft5e9rpaej] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-ft5e9rpaej] {
        transform: translateY(-2px);
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    }

.btn-danger[b-ft5e9rpaej] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
}

    .btn-danger:hover[b-ft5e9rpaej] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(239, 68, 68, 0.3);
    }

.btn i[b-ft5e9rpaej] {
    font-size: 0.9em;
}

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

/* Unauthorized Container */
.unauthorized-container[b-ft5e9rpaej] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.unauthorized-content[b-ft5e9rpaej] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-ft5e9rpaej] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-ft5e9rpaej] {
        font-size: 28px;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-ft5e9rpaej] {
        color: #6b7280;
        margin-bottom: 32px;
        font-size: 16px;
    }

/* Dark Theme Support */
[data-theme="dark"] .categories-admin[b-ft5e9rpaej] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .categories-admin[b-ft5e9rpaej]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-ft5e9rpaej],
[data-theme="dark"] .search-filter-section[b-ft5e9rpaej],
[data-theme="dark"] .modal-content[b-ft5e9rpaej],
[data-theme="dark"] .table-responsive[b-ft5e9rpaej],
[data-theme="dark"] .loading-container[b-ft5e9rpaej],
[data-theme="dark"] .error-container[b-ft5e9rpaej],
[data-theme="dark"] .empty-state[b-ft5e9rpaej],
[data-theme="dark"] .unauthorized-content[b-ft5e9rpaej],
[data-theme="dark"] .category-card[b-ft5e9rpaej] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-title[b-ft5e9rpaej],
[data-theme="dark"] .modal-title[b-ft5e9rpaej],
[data-theme="dark"] .loading-spinner[b-ft5e9rpaej],
[data-theme="dark"] .error-icon[b-ft5e9rpaej],
[data-theme="dark"] .empty-icon[b-ft5e9rpaej] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .category-name[b-ft5e9rpaej],
[data-theme="dark"] .category-name-primary[b-ft5e9rpaej],
[data-theme="dark"] .error-title[b-ft5e9rpaej],
[data-theme="dark"] .empty-title[b-ft5e9rpaej],
[data-theme="dark"] .unauthorized-content h3[b-ft5e9rpaej] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-ft5e9rpaej],
[data-theme="dark"] .category-parent[b-ft5e9rpaej],
[data-theme="dark"] .stat-item[b-ft5e9rpaej],
[data-theme="dark"] .parent-category[b-ft5e9rpaej],
[data-theme="dark"] .loading-text[b-ft5e9rpaej],
[data-theme="dark"] .error-message[b-ft5e9rpaej],
[data-theme="dark"] .empty-subtitle[b-ft5e9rpaej],
[data-theme="dark"] .unauthorized-content p[b-ft5e9rpaej] {
    color: #94a3b8;
}

[data-theme="dark"] .search-input[b-ft5e9rpaej],
[data-theme="dark"] .filter-select[b-ft5e9rpaej] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-ft5e9rpaej],
    [data-theme="dark"] .filter-select:focus[b-ft5e9rpaej] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .search-icon[b-ft5e9rpaej] {
    color: #a78bfa;
}

[data-theme="dark"] .data-table td[b-ft5e9rpaej] {
    color: #e2e8f0;
}

[data-theme="dark"] .data-table th[b-ft5e9rpaej] {
    color: #a78bfa;
}

[data-theme="dark"] .toggle-btn[b-ft5e9rpaej] {
    color: #a78bfa;
}

    [data-theme="dark"] .toggle-btn:hover[b-ft5e9rpaej] {
        color: #c084fc;
        background: rgba(167, 139, 250, 0.1);
    }

    [data-theme="dark"] .toggle-btn.active[b-ft5e9rpaej] {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        color: #0f172a;
    }

[data-theme="dark"] .image-placeholder[b-ft5e9rpaej],
[data-theme="dark"] .image-placeholder-small[b-ft5e9rpaej] {
    background: rgba(71, 85, 105, 0.3);
    color: #a78bfa;
}

[data-theme="dark"] .action-btn[b-ft5e9rpaej] {
    background: rgba(71, 85, 105, 0.3);
    color: #a78bfa;
}

    [data-theme="dark"] .action-btn:hover[b-ft5e9rpaej] {
        background: #a78bfa;
        color: #0f172a;
    }

    [data-theme="dark"] .action-btn.danger[b-ft5e9rpaej] {
        color: #f87171;
    }

        [data-theme="dark"] .action-btn.danger:hover[b-ft5e9rpaej] {
            background: #ef4444;
            color: #0f172a;
        }

[data-theme="dark"] .action-buttons .btn[b-ft5e9rpaej] {
    background: rgba(71, 85, 105, 0.3);
    color: #a78bfa;
}

    [data-theme="dark"] .action-buttons .btn:hover[b-ft5e9rpaej] {
        background: #a78bfa;
        color: #0f172a;
    }

[data-theme="dark"] .action-buttons .btn-danger:hover[b-ft5e9rpaej] {
    background: #ef4444;
}

[data-theme="dark"] .modal-header[b-ft5e9rpaej],
[data-theme="dark"] .modal-footer[b-ft5e9rpaej] {
    background: rgba(51, 65, 85, 0.5);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .close-btn[b-ft5e9rpaej] {
    background: rgba(51, 65, 85, 0.8);
    color: #94a3b8;
}

    [data-theme="dark"] .close-btn:hover[b-ft5e9rpaej] {
        background: rgba(71, 85, 105, 0.8);
        color: #e2e8f0;
    }

[data-theme="dark"] .delete-warning[b-ft5e9rpaej] {
    background: rgba(239, 68, 68, 0.1);
}

    [data-theme="dark"] .delete-warning p[b-ft5e9rpaej] {
        color: #fca5a5;
    }

[data-theme="dark"] .delete-info[b-ft5e9rpaej] {
    background: rgba(56, 189, 248, 0.1);
}

[data-theme="dark"] .alert-warning[b-ft5e9rpaej] {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}

[data-theme="dark"] .bulk-actions[b-ft5e9rpaej] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(192, 132, 252, 0.15) 100%);
    border-color: rgba(167, 139, 250, 0.3);
}

[data-theme="dark"] .selected-count[b-ft5e9rpaej] {
    color: #e2e8f0;
}

    [data-theme="dark"] .selected-count[b-ft5e9rpaej]::before {
        color: #a78bfa;
    }

[data-theme="dark"] .btn-outline-success[b-ft5e9rpaej] {
    border-color: #34d399;
    color: #34d399;
}

    [data-theme="dark"] .btn-outline-success:hover[b-ft5e9rpaej] {
        background: #34d399;
        color: #0f172a;
    }

[data-theme="dark"] .btn-outline-warning[b-ft5e9rpaej] {
    border-color: #fbbf24;
    color: #fbbf24;
}

    [data-theme="dark"] .btn-outline-warning:hover[b-ft5e9rpaej] {
        background: #fbbf24;
        color: #0f172a;
    }

[data-theme="dark"] .btn-outline-danger[b-ft5e9rpaej] {
    border-color: #f87171;
    color: #f87171;
}

    [data-theme="dark"] .btn-outline-danger:hover[b-ft5e9rpaej] {
        background: #f87171;
        color: #0f172a;
    }

/* Responsive Design */
@media (max-width: 992px) {
    .categories-grid[b-ft5e9rpaej] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .categories-admin[b-ft5e9rpaej] {
        padding: 16px;
    }

    .page-header[b-ft5e9rpaej] {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .page-title[b-ft5e9rpaej] {
        font-size: 28px;
    }

    .search-filter-section[b-ft5e9rpaej] {
        flex-direction: column;
        padding: 16px;
    }

    .filter-group[b-ft5e9rpaej] {
        width: 100%;
        flex-wrap: wrap;
    }

    .filter-select[b-ft5e9rpaej] {
        flex: 1;
        min-width: 120px;
    }

    .categories-grid[b-ft5e9rpaej] {
        grid-template-columns: 1fr;
    }

    .bulk-actions[b-ft5e9rpaej] {
        flex-direction: column;
        gap: 16px;
    }

    .bulk-buttons[b-ft5e9rpaej] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-sm[b-ft5e9rpaej] {
        padding: 8px;
    }

    .modal-dialog[b-ft5e9rpaej] {
        width: 95%;
    }

    .category-actions[b-ft5e9rpaej] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-actions[b-ft5e9rpaej] {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

        .header-actions .btn[b-ft5e9rpaej] {
            flex: 1;
            font-size: 14px;
        }

            .header-actions .btn span[b-ft5e9rpaej] {
                display: none;
            }

    .bulk-buttons[b-ft5e9rpaej] {
        flex-wrap: wrap;
        gap: 8px;
    }

        .bulk-buttons button[b-ft5e9rpaej] {
            flex: 1;
            min-width: 0;
        }
}

/* Print Styles */
@media print {
    .categories-admin[b-ft5e9rpaej] {
        background: white !important;
    }

    .search-filter-section[b-ft5e9rpaej],
    .view-toggle[b-ft5e9rpaej],
    .bulk-actions[b-ft5e9rpaej],
    .category-actions[b-ft5e9rpaej],
    .action-buttons[b-ft5e9rpaej] {
        display: none !important;
    }

    .table-responsive[b-ft5e9rpaej] {
        box-shadow: none;
    }

    .data-table th[b-ft5e9rpaej] {
        color: black !important;
    }
}

/* Accessibility Focus State */
*:focus-visible[b-ft5e9rpaej] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}
/* _content/Sahelly/Components/Pages/Admin/AllCustomers.razor.rz.scp.css */
/* Admin Customers Page - Modern Professional Design */

/* Page Container */
.admin-customers-page[b-b4iat6xrpn] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-customers-page[b-b4iat6xrpn]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-customers-page > *[b-b4iat6xrpn] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-b4iat6xrpn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-b4iat6xrpn] {
    flex: 1;
}

.breadcrumb-modern[b-b4iat6xrpn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-item[b-b4iat6xrpn] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-b4iat6xrpn] {
        color: #667eea;
    }

.separator[b-b4iat6xrpn] {
    color: #d1d5db;
}

.breadcrumb-current[b-b4iat6xrpn] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-b4iat6xrpn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title-modern[b-b4iat6xrpn] {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.title-icon[b-b4iat6xrpn] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-size: 24px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.page-subtitle-enhanced[b-b4iat6xrpn] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
    padding-left: 64px;
}

.header-actions[b-b4iat6xrpn] {
    display: flex;
    gap: 16px;
}

/* Statistics Section */
.statistics-section[b-b4iat6xrpn] {
    margin-bottom: 32px;
}

.stats-grid[b-b4iat6xrpn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stat-card[b-b4iat6xrpn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-b4iat6xrpn]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-b4iat6xrpn] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-b4iat6xrpn]::before {
            opacity: 1;
        }

.stat-icon[b-b4iat6xrpn] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-card.total .stat-icon[b-b4iat6xrpn] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

.stat-card.active .stat-icon[b-b4iat6xrpn] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.stat-card.blocked .stat-icon[b-b4iat6xrpn] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
}

.stat-card.new .stat-icon[b-b4iat6xrpn] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

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

    .stat-content h3[b-b4iat6xrpn] {
        font-size: 32px;
        font-weight: 800;
        margin: 0 0 5px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-content p[b-b4iat6xrpn] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Search and Filter Section */
.search-filter-section[b-b4iat6xrpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.search-container[b-b4iat6xrpn] {
    position: relative;
    flex: 1;
    max-width: 500px;
}

.search-icon[b-b4iat6xrpn] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9333ea;
}

.search-input[b-b4iat6xrpn] {
    width: 100%;
    padding: 14px 20px 14px 46px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .search-input:focus[b-b4iat6xrpn] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-b4iat6xrpn]::placeholder {
        color: #9ca3af;
    }

.clear-search[b-b4iat6xrpn] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    padding: 5px;
    border-radius: 50%;
}

    .clear-search:hover[b-b4iat6xrpn] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

.filter-controls[b-b4iat6xrpn] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-select[b-b4iat6xrpn] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    min-width: 160px;
}

    .filter-select:focus[b-b4iat6xrpn] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.refresh-btn[b-b4iat6xrpn] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 12px;
    color: #667eea;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

    .refresh-btn:hover[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: rotate(180deg);
    }

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

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

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

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

/* Customers Content Area */
.customers-content[b-b4iat6xrpn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* REDESIGNED COMPACT TABLE */
.desktop-table-container[b-b4iat6xrpn] {
    overflow-x: auto;
    width: 100%;
}

.customers-table[b-b4iat6xrpn] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed; /* Important for column width control */
}

    .customers-table thead[b-b4iat6xrpn] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .customers-table th[b-b4iat6xrpn] {
        padding: 18px 12px;
        text-align: right;
        font-weight: 600;
        font-size: 13px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        white-space: nowrap;
    }

html[dir="ltr"] .customers-table th[b-b4iat6xrpn] {
    text-align: left;
}

.customers-table td[b-b4iat6xrpn] {
    padding: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
    transition: all 0.2s;
    vertical-align: top;
}

.customers-table tbody tr[b-b4iat6xrpn] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .customers-table tbody tr:hover[b-b4iat6xrpn] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        transform: scale(1.01);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .customers-table tbody tr.blocked-row td[b-b4iat6xrpn] {
        background: rgba(245, 87, 108, 0.05);
    }

    .customers-table tbody tr:last-child td[b-b4iat6xrpn] {
        border-bottom: none;
    }

/* COMPACT COLUMN WIDTHS */
.compact-customer-cell[b-b4iat6xrpn] {
    width: 28%; /* Customer info takes more space */
    min-width: 250px;
}

.compact-financial-cell[b-b4iat6xrpn] {
    width: 20%; /* Financial data */
    min-width: 160px;
}

.compact-details-cell[b-b4iat6xrpn] {
    width: 20%; /* Merchant/Agent details */
    min-width: 160px;
}

.compact-status-cell[b-b4iat6xrpn] {
    width: 18%; /* Status and date */
    min-width: 140px;
}

.compact-actions-cell[b-b4iat6xrpn] {
    width: 14%; /* Actions */
    min-width: 120px;
}

/* STACKED INFORMATION CELLS */
.compact-cell-content[b-b4iat6xrpn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compact-cell-primary[b-b4iat6xrpn] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    margin-bottom: 4px;
}

.compact-cell-secondary[b-b4iat6xrpn] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}

.compact-cell-badge[b-b4iat6xrpn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
}

/* Customer Info - Redesigned */
.compact-customer-info[b-b4iat6xrpn] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.compact-customer-avatar[b-b4iat6xrpn],
.compact-customer-avatar-placeholder[b-b4iat6xrpn] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
    flex-shrink: 0;
}

    .compact-customer-avatar img[b-b4iat6xrpn] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.compact-customer-details[b-b4iat6xrpn] {
    flex: 1;
    min-width: 0;
}

.compact-customer-name[b-b4iat6xrpn] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-customer-email[b-b4iat6xrpn] {
    font-size: 12px;
    color: #9333ea;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.compact-customer-phone[b-b4iat6xrpn] {
    font-size: 12px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.compact-customer-code[b-b4iat6xrpn] {
    font-size: 10px;
    color: #6b7280;
    font-weight: 500;
    padding: 2px 6px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
}

/* Financial Cell */
.compact-financial-item[b-b4iat6xrpn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.compact-financial-label[b-b4iat6xrpn] {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.compact-financial-value[b-b4iat6xrpn] {
    font-size: 13px;
    font-weight: 600;
}

.compact-purchases-value[b-b4iat6xrpn] {
    color: #10b981;
}

.compact-orders-value[b-b4iat6xrpn] {
    color: #4c1d95;
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
}

/* Details Cell (Merchant/Agent) */
.compact-detail-item[b-b4iat6xrpn] {
    margin-bottom: 8px;
}

.compact-detail-label[b-b4iat6xrpn] {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.compact-merchant-value[b-b4iat6xrpn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    color: #4c1d95;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .compact-merchant-value:hover[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

.compact-agent-value[b-b4iat6xrpn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(59, 201, 104, 0.1);
    border-radius: 12px;
    color: #059669;
    font-size: 11px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-no-value[b-b4iat6xrpn] {
    color: #9ca3af;
    font-size: 11px;
    font-style: italic;
}

/* Status Cell */
.compact-status-item[b-b4iat6xrpn] {
    margin-bottom: 8px;
}

.compact-status-badge[b-b4iat6xrpn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .compact-status-badge.active[b-b4iat6xrpn] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .compact-status-badge.blocked[b-b4iat6xrpn] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.compact-date-info[b-b4iat6xrpn] {
    margin-top: 6px;
}

.compact-date-label[b-b4iat6xrpn] {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.compact-date-value[b-b4iat6xrpn] {
    font-size: 12px;
    color: #4c1d95;
    font-weight: 500;
}

.compact-time-value[b-b4iat6xrpn] {
    font-size: 10px;
    color: #6b7280;
    margin-top: 1px;
}

/* Compact Actions */
.compact-action-buttons[b-b4iat6xrpn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compact-action-row[b-b4iat6xrpn] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.compact-action-btn[b-b4iat6xrpn] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .compact-action-btn:hover[b-b4iat6xrpn] {
        transform: translateY(-2px) scale(1.1);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    .compact-action-btn.view[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

    .compact-action-btn.edit[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .compact-action-btn.block[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .compact-action-btn.unblock[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .compact-action-btn.activity[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

/* Mobile Cards (unchanged) */
.mobile-cards-container[b-b4iat6xrpn] {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.customer-card[b-b4iat6xrpn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .customer-card.blocked-card[b-b4iat6xrpn] {
        border-left: 4px solid #ef4444;
    }

.card-header[b-b4iat6xrpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.customer-info-mobile[b-b4iat6xrpn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-avatar-mobile[b-b4iat6xrpn],
.customer-avatar-placeholder-mobile[b-b4iat6xrpn] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .customer-avatar-mobile img[b-b4iat6xrpn] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.customer-name-mobile[b-b4iat6xrpn] {
    font-weight: 600;
    color: #1f2937;
    font-size: 16px;
    margin: 0 0 4px 0;
}

.customer-code-mobile[b-b4iat6xrpn] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    padding: 2px 6px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
}

.status-badge-mobile[b-b4iat6xrpn] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

    .status-badge-mobile.active[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(67, 233, 123, 0.3);
    }

    .status-badge-mobile.blocked[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
    }

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

.info-row[b-b4iat6xrpn] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .info-row:last-child[b-b4iat6xrpn] {
        border-bottom: none;
    }

.info-label[b-b4iat6xrpn] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

    .info-label i[b-b4iat6xrpn] {
        color: #667eea;
        width: 16px;
    }

.info-value[b-b4iat6xrpn] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    text-align: left;
}

.sub-info[b-b4iat6xrpn] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
    margin-left: 4px;
}

.card-actions[b-b4iat6xrpn] {
    display: flex;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-action-btn[b-b4iat6xrpn] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    transition: all 0.3s;
}

    .mobile-action-btn:hover[b-b4iat6xrpn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }

    .mobile-action-btn.view[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

    .mobile-action-btn.edit[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .mobile-action-btn.block[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .mobile-action-btn.unblock[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .mobile-action-btn.activity[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

/* Loading Container */
.loading-container[b-b4iat6xrpn] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner-container[b-b4iat6xrpn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner[b-b4iat6xrpn] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-b4iat6xrpn 0.8s linear infinite;
}

.loading-text[b-b4iat6xrpn] {
    color: #4c1d95;
    font-weight: 600;
    font-size: 18px;
}

/* Error Container */
.error-container[b-b4iat6xrpn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon[b-b4iat6xrpn] {
    font-size: 60px;
    color: #ef4444;
    margin-bottom: 16px;
}

.error-container h3[b-b4iat6xrpn] {
    font-size: 24px;
    color: #1f2937;
    margin: 0;
}

.error-container p[b-b4iat6xrpn] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* Empty State */
.empty-state[b-b4iat6xrpn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-b4iat6xrpn] {
    font-size: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.empty-state h3[b-b4iat6xrpn] {
    font-size: 28px;
    color: #4c1d95;
    margin: 0;
}

.empty-state p[b-b4iat6xrpn] {
    font-size: 18px;
    color: #6b7280;
}

/* Pagination */
.pagination-container[b-b4iat6xrpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.pagination-info[b-b4iat6xrpn] {
    font-size: 14px;
    color: #4c1d95;
    font-weight: 600;
}

.pagination-controls[b-b4iat6xrpn] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.pagination-btn[b-b4iat6xrpn] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .pagination-btn:hover:not(:disabled)[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn.active[b-b4iat6xrpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Unauthorized Container */
.unauthorized-container[b-b4iat6xrpn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-height: 500px;
}

.unauthorized-icon[b-b4iat6xrpn] {
    font-size: 100px;
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.unauthorized-container h2[b-b4iat6xrpn] {
    font-size: 32px;
    color: #4c1d95;
    margin: 0;
}

.unauthorized-container p[b-b4iat6xrpn] {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* Button Styles */
.btn-gradient-primary[b-b4iat6xrpn] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-gradient-primary:hover[b-b4iat6xrpn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-b4iat6xrpn] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-gradient-secondary:hover[b-b4iat6xrpn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Responsive Design */
@media (max-width: 1400px) {
    .compact-customer-cell[b-b4iat6xrpn] {
        width: 30%;
        min-width: 240px;
    }

    .compact-financial-cell[b-b4iat6xrpn] {
        width: 18%;
        min-width: 140px;
    }

    .compact-details-cell[b-b4iat6xrpn] {
        width: 20%;
        min-width: 150px;
    }

    .compact-status-cell[b-b4iat6xrpn] {
        width: 18%;
        min-width: 130px;
    }

    .compact-actions-cell[b-b4iat6xrpn] {
        width: 14%;
        min-width: 110px;
    }
}

@media (max-width: 1200px) {
    .stats-grid[b-b4iat6xrpn] {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-filter-section[b-b4iat6xrpn] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container[b-b4iat6xrpn] {
        max-width: none;
    }

    .filter-controls[b-b4iat6xrpn] {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .filter-select[b-b4iat6xrpn] {
        flex: 1;
        min-width: 0;
    }

    .compact-customer-cell[b-b4iat6xrpn] {
        width: 32%;
        min-width: 220px;
    }

    .compact-financial-cell[b-b4iat6xrpn] {
        width: 17%;
        min-width: 130px;
    }
}

@media (max-width: 992px) {
    .page-header-enhanced[b-b4iat6xrpn] {
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-b4iat6xrpn] {
        width: 100%;
    }

    /* Switch to mobile cards view */
    .desktop-table-container[b-b4iat6xrpn] {
        display: none;
    }

    .mobile-cards-container[b-b4iat6xrpn] {
        display: flex;
    }
}

@media (max-width: 768px) {
    .admin-customers-page[b-b4iat6xrpn] {
        padding: 16px;
    }

    .page-title-modern[b-b4iat6xrpn] {
        font-size: 28px;
    }

    .page-subtitle-enhanced[b-b4iat6xrpn] {
        font-size: 16px;
        padding-left: 0;
    }

    .title-icon[b-b4iat6xrpn] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

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

    .stat-card[b-b4iat6xrpn] {
        padding: 20px;
    }

    .stat-icon[b-b4iat6xrpn] {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .stat-content h3[b-b4iat6xrpn] {
        font-size: 24px;
    }

    .filter-controls[b-b4iat6xrpn] {
        overflow-x: auto;
        padding-bottom: 8px;
    }

        .filter-controls[b-b4iat6xrpn]::-webkit-scrollbar {
            height: 4px;
        }

    .pagination-container[b-b4iat6xrpn] {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-b4iat6xrpn] {
        font-size: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

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

    .mobile-action-btn[b-b4iat6xrpn] {
        width: 100%;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .admin-customers-page[b-b4iat6xrpn] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-customers-page[b-b4iat6xrpn]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-b4iat6xrpn],
[data-theme="dark"] .stat-card[b-b4iat6xrpn],
[data-theme="dark"] .search-filter-section[b-b4iat6xrpn],
[data-theme="dark"] .customers-content[b-b4iat6xrpn],
[data-theme="dark"] .loading-container[b-b4iat6xrpn],
[data-theme="dark"] .error-container[b-b4iat6xrpn],
[data-theme="dark"] .empty-state[b-b4iat6xrpn],
[data-theme="dark"] .unauthorized-container[b-b4iat6xrpn],
[data-theme="dark"] .customer-card[b-b4iat6xrpn] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .customers-table th[b-b4iat6xrpn] {
    color: #a78bfa;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .customers-table td[b-b4iat6xrpn] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .customers-table tbody tr:hover[b-b4iat6xrpn] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .customers-table tbody tr.blocked-row td[b-b4iat6xrpn] {
    background: rgba(245, 87, 108, 0.1);
}

[data-theme="dark"] .compact-customer-name[b-b4iat6xrpn],
[data-theme="dark"] .customer-name-mobile[b-b4iat6xrpn],
[data-theme="dark"] .info-value[b-b4iat6xrpn],
[data-theme="dark"] .compact-cell-primary[b-b4iat6xrpn] {
    color: #e2e8f0;
}

[data-theme="dark"] .compact-customer-code[b-b4iat6xrpn],
[data-theme="dark"] .customer-code-mobile[b-b4iat6xrpn] {
    background: rgba(102, 126, 234, 0.2);
    color: #cbd5e1;
}

[data-theme="dark"] .search-input[b-b4iat6xrpn],
[data-theme="dark"] .filter-select[b-b4iat6xrpn] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-b4iat6xrpn],
    [data-theme="dark"] .filter-select:focus[b-b4iat6xrpn] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .refresh-btn[b-b4iat6xrpn] {
    background: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .breadcrumb-item[b-b4iat6xrpn] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-current[b-b4iat6xrpn] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle-enhanced[b-b4iat6xrpn] {
    color: #9ca3af;
}

[data-theme="dark"] .stat-content p[b-b4iat6xrpn],
[data-theme="dark"] .info-label[b-b4iat6xrpn],
[data-theme="dark"] .sub-info[b-b4iat6xrpn],
[data-theme="dark"] .compact-cell-secondary[b-b4iat6xrpn],
[data-theme="dark"] .compact-financial-label[b-b4iat6xrpn],
[data-theme="dark"] .compact-detail-label[b-b4iat6xrpn],
[data-theme="dark"] .compact-date-label[b-b4iat6xrpn] {
    color: #9ca3af;
}

[data-theme="dark"] .pagination-info[b-b4iat6xrpn] {
    color: #cbd5e1;
}

[data-theme="dark"] .pagination-btn[b-b4iat6xrpn] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .card-header[b-b4iat6xrpn],
[data-theme="dark"] .card-actions[b-b4iat6xrpn] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .info-row[b-b4iat6xrpn] {
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .unauthorized-container h2[b-b4iat6xrpn],
[data-theme="dark"] .empty-state h3[b-b4iat6xrpn],
[data-theme="dark"] .error-container h3[b-b4iat6xrpn] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-container p[b-b4iat6xrpn],
[data-theme="dark"] .empty-state p[b-b4iat6xrpn],
[data-theme="dark"] .error-container p[b-b4iat6xrpn] {
    color: #9ca3af;
}

/* RTL Support */
html[dir="rtl"] .breadcrumb-modern[b-b4iat6xrpn] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pagination-controls[b-b4iat6xrpn] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .compact-customer-info[b-b4iat6xrpn],
html[dir="rtl"] .customer-info-mobile[b-b4iat6xrpn] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .compact-action-buttons[b-b4iat6xrpn] {
    align-items: flex-start;
}

/* Print Styles */
@media print {
    .admin-customers-page[b-b4iat6xrpn] {
        background: white !important;
        padding: 0 !important;
    }

    .page-header-enhanced[b-b4iat6xrpn],
    .search-filter-section[b-b4iat6xrpn],
    .pagination-container[b-b4iat6xrpn],
    .compact-action-buttons[b-b4iat6xrpn],
    .card-actions[b-b4iat6xrpn] {
        display: none !important;
    }

    .customers-table[b-b4iat6xrpn] {
        border-collapse: collapse;
    }

        .customers-table th[b-b4iat6xrpn] {
            background-color: #f1f5f9 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

    .customer-card[b-b4iat6xrpn] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AllMerchants.razor.rz.scp.css */
/* ===================================
   Merchants Management Page - Professional Design
   ���� ����� ������ - ����� �������
   =================================== */

/* Modern Gradient Buttons - Merchant Theme */
.btn-gradient-primary[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-gradient-primary:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-warning[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-gradient-warning:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-gradient-danger[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Page Container */
.merchants-page[b-mccxmjnj0m] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .merchants-page[b-mccxmjnj0m]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .merchants-page > *[b-mccxmjnj0m] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-mccxmjnj0m] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.header-content[b-mccxmjnj0m] {
    flex: 1;
}

.breadcrumb[b-mccxmjnj0m] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-mccxmjnj0m] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-mccxmjnj0m] {
        color: #667eea;
    }

.breadcrumb-separator[b-mccxmjnj0m] {
    color: #d1d5db;
}

.breadcrumb-current[b-mccxmjnj0m] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-mccxmjnj0m] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-mccxmjnj0m] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-mccxmjnj0m] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-primary[b-mccxmjnj0m],
.btn-export[b-mccxmjnj0m] {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.btn-primary[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-export[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-export:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Statistics Grid */
.stats-grid[b-mccxmjnj0m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-mccxmjnj0m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-mccxmjnj0m]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-mccxmjnj0m] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-mccxmjnj0m]::before {
            opacity: 1;
        }

.stat-icon[b-mccxmjnj0m] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .stat-icon.merchants[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

    .stat-icon.active[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-icon.pending[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d88c14 0%, #f7b32b 100%);
    }

    .stat-icon.suspended[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

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

.stat-value[b-mccxmjnj0m] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-mccxmjnj0m] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Filters Section */
.filters-section[b-mccxmjnj0m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-box[b-mccxmjnj0m] {
    position: relative;
    margin-bottom: 20px;
}

    .search-box i[b-mccxmjnj0m] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 16px;
    }

.search-input[b-mccxmjnj0m] {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    font-weight: 500;
}

    .search-input:focus[b-mccxmjnj0m] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-mccxmjnj0m]::placeholder {
        color: #9ca3af;
    }

.filter-controls[b-mccxmjnj0m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: end;
}

.filter-select[b-mccxmjnj0m] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

    .filter-select:focus[b-mccxmjnj0m] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-filter[b-mccxmjnj0m] {
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

    .btn-filter:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-filter:last-child[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    }

        .btn-filter:last-child:hover[b-mccxmjnj0m] {
            box-shadow: 0 8px 15px rgba(107, 114, 128, 0.3);
        }

/* Bulk Actions */
.bulk-actions[b-mccxmjnj0m] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown-b-mccxmjnj0m 0.3s ease;
    backdrop-filter: blur(10px);
}

.bulk-info[b-mccxmjnj0m] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
    font-weight: 600;
    font-size: 16px;
}

    .bulk-info i[b-mccxmjnj0m] {
        color: #667eea;
        font-size: 20px;
    }

.bulk-buttons[b-mccxmjnj0m] {
    display: flex;
    gap: 10px;
}

.btn-bulk[b-mccxmjnj0m] {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-bulk.approve[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

    .btn-bulk.suspend[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
        color: white;
    }

    .btn-bulk.delete[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
    }

/* Empty State */
.empty-state[b-mccxmjnj0m] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-mccxmjnj0m] {
        font-size: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-state h3[b-mccxmjnj0m] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-mccxmjnj0m] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Table Container */
.table-container[b-mccxmjnj0m] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.merchants-table[b-mccxmjnj0m] {
    width: 100%;
    border-collapse: collapse;
}

    .merchants-table th[b-mccxmjnj0m] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .merchants-table td[b-mccxmjnj0m] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .merchants-table tbody tr[b-mccxmjnj0m] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .merchants-table tbody tr:hover[b-mccxmjnj0m] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .merchants-table tbody tr:last-child td[b-mccxmjnj0m] {
            border-bottom: none;
        }

/* Custom Checkbox */
input[type="checkbox"][b-mccxmjnj0m] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
    border-radius: 4px;
}

/* Merchant Info */
.merchant-info[b-mccxmjnj0m] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.merchant-avatar[b-mccxmjnj0m] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
}

    .merchant-avatar:hover[b-mccxmjnj0m] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

.merchant-name[b-mccxmjnj0m] {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
    margin: 0 0 2px 0;
}

.merchant-code[b-mccxmjnj0m] {
    font-size: 13px;
    color: #9333ea;
    font-weight: 500;
    margin: 0 0 2px 0;
}

.merchant-owner[b-mccxmjnj0m] {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

/* Contact Info */
.contact-info[b-mccxmjnj0m] {
    font-size: 14px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-item[b-mccxmjnj0m] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .contact-item i[b-mccxmjnj0m] {
        width: 16px;
        color: #9333ea;
        font-size: 14px;
    }

/* Plan Badge */
.plan-badge[b-mccxmjnj0m] {
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

    .plan-badge[b-mccxmjnj0m]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
    }

    .plan-badge:hover[b-mccxmjnj0m]::before {
        left: 100%;
    }

    .plan-badge.free[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        color: white;
    }

    .plan-badge.basic[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
    }

    .plan-badge.premium[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

    .plan-badge.enterprise[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
        color: white;
    }

/* Status Badge */
.status-badge[b-mccxmjnj0m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.active[b-mccxmjnj0m] {
        background: linear-gradient(135deg, rgba(59, 201, 104, 0.2) 0%, rgba(50, 209, 183, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(59, 201, 104, 0.3);
    }

    .status-badge.pending[b-mccxmjnj0m] {
        background: linear-gradient(135deg, rgba(216, 140, 20, 0.2) 0%, rgba(247, 179, 43, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(216, 140, 20, 0.3);
    }

    .status-badge.suspended[b-mccxmjnj0m],
    .status-badge.rejected[b-mccxmjnj0m] {
        background: linear-gradient(135deg, rgba(208, 78, 95, 0.2) 0%, rgba(205, 125, 219, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(208, 78, 95, 0.3);
    }

    .status-badge i[b-mccxmjnj0m] {
        font-size: 8px;
    }

/* Performance Quick */
.performance-quick[b-mccxmjnj0m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perf-item[b-mccxmjnj0m] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.perf-value[b-mccxmjnj0m] {
    font-weight: 700;
    color: #4c1d95;
    font-size: 16px;
}

.perf-label[b-mccxmjnj0m] {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 500;
}

/* Action Buttons */
.action-buttons[b-mccxmjnj0m] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-icon[b-mccxmjnj0m] {
    padding: 8px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

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

    .btn-icon:hover[b-mccxmjnj0m]::before {
        width: 100px;
        height: 100px;
    }

    .btn-icon.view[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
    }

    .btn-icon.edit[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

    .btn-icon.approve[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

    .btn-icon.suspend[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
        color: white;
    }

    .btn-icon.activate[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

    .btn-icon.delete[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
    }

/* Mobile Grid */
.merchants-grid[b-mccxmjnj0m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.merchant-card[b-mccxmjnj0m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

    .merchant-card[b-mccxmjnj0m]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
    }

    .merchant-card:hover[b-mccxmjnj0m] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .merchant-card.selected[b-mccxmjnj0m] {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
    }

.merchant-card-header[b-mccxmjnj0m] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    position: relative;
    z-index: 1;
}

.merchant-card-body[b-mccxmjnj0m] {
    padding: 24px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.merchant-avatar-large[b-mccxmjnj0m] {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    position: relative;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.status-indicator[b-mccxmjnj0m] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

    .status-indicator.active[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .status-indicator.pending[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d88c14 0%, #f7b32b 100%);
    }

    .status-indicator.suspended[b-mccxmjnj0m],
    .status-indicator.rejected[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

.merchant-title[b-mccxmjnj0m] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1f2937;
}

.merchant-subtitle[b-mccxmjnj0m] {
    font-size: 15px;
    color: #9333ea;
    margin-bottom: 16px;
    font-weight: 500;
}

.merchant-badges[b-mccxmjnj0m] {
    margin-bottom: 20px;
}

.merchant-details[b-mccxmjnj0m] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    text-align: left;
}

.detail-item[b-mccxmjnj0m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .detail-item:last-child[b-mccxmjnj0m] {
        border-bottom: none;
    }

.detail-label[b-mccxmjnj0m] {
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-mccxmjnj0m] {
    color: #1f2937;
    font-weight: 600;
}

    .detail-value.performance[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .detail-value.wallet[b-mccxmjnj0m] {
        color: #059669;
        font-weight: 700;
    }

.merchant-card-footer[b-mccxmjnj0m] {
    padding: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
}

.btn-card-action[b-mccxmjnj0m] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
}

    .btn-card-action.view[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
    }

    .btn-card-action.edit[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

    .btn-card-action.approve[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

    .btn-card-action.suspend[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
        color: white;
    }

    .btn-card-action.activate[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

    .btn-card-action.delete[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
    }

/* Pagination */
.pagination-container[b-mccxmjnj0m] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pagination-btn[b-mccxmjnj0m] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pagination-btn:hover:not(:disabled)[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn.active[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Loading State */
.loading-container[b-mccxmjnj0m] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 60px 20px;
}

.spinner[b-mccxmjnj0m] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-mccxmjnj0m 0.8s linear infinite;
    margin-bottom: 20px;
}

.loading-text[b-mccxmjnj0m] {
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
}

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

/* Modal Enhancements */
.modal.show[b-mccxmjnj0m] {
    display: flex;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

.modal-dialog[b-mccxmjnj0m] {
    max-width: 600px;
    animation: zoomIn-b-mccxmjnj0m 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 20px;
    width: calc(100% - 40px);
}

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

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

.modal-content[b-mccxmjnj0m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-header[b-mccxmjnj0m] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-mccxmjnj0m] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-body[b-mccxmjnj0m] {
    padding: 30px;
}

.modal-footer[b-mccxmjnj0m] {
    padding: 24px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
    border-radius: 0 0 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-close[b-mccxmjnj0m] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    transition: all 0.3s;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .btn-close:hover[b-mccxmjnj0m] {
        color: #4c1d95;
        background: rgba(102, 126, 234, 0.1);
        transform: rotate(90deg);
    }

/* Form Styles */
.form-grid[b-mccxmjnj0m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.form-group[b-mccxmjnj0m] {
    margin-bottom: 0;
}

.form-label[b-mccxmjnj0m] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-mccxmjnj0m] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    width: 100%;
}

    .form-control:focus[b-mccxmjnj0m] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

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

.form-actions[b-mccxmjnj0m] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Special Modal Buttons */
.btn-approve[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-approve:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-suspend[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-suspend:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-delete[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-delete:hover[b-mccxmjnj0m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Merchant Details in Modal */
.merchant-details-grid[b-mccxmjnj0m] {
    display: grid;
    gap: 30px;
}

.details-section[b-mccxmjnj0m] {
    background: rgba(102, 126, 234, 0.02);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.section-title[b-mccxmjnj0m] {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.1);
}

.info-grid[b-mccxmjnj0m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.info-item[b-mccxmjnj0m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .info-item label[b-mccxmjnj0m] {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-item span[b-mccxmjnj0m] {
        font-size: 15px;
        font-weight: 600;
        color: #1f2937;
    }

.performance-stats[b-mccxmjnj0m] {
    display: flex;
    gap: 20px;
}

.perf-stat[b-mccxmjnj0m] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.perf-icon[b-mccxmjnj0m] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

    .perf-icon.products[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

    .perf-icon.orders[b-mccxmjnj0m] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

.perf-content[b-mccxmjnj0m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wallet-balance[b-mccxmjnj0m] {
    color: #059669;
    font-weight: 700;
    font-size: 16px;
}

/* Unauthorized Container */
.unauthorized-container[b-mccxmjnj0m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 60px 20px;
}

    .unauthorized-container i[b-mccxmjnj0m] {
        font-size: 100px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-mccxmjnj0m] {
        font-size: 28px;
        color: #1f2937;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-container p[b-mccxmjnj0m] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

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

    .filter-controls[b-mccxmjnj0m] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .merchants-page[b-mccxmjnj0m] {
        padding: 16px;
    }

    .page-header[b-mccxmjnj0m] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        margin-bottom: 24px;
    }

    .header-actions[b-mccxmjnj0m] {
        width: 100%;
        justify-content: stretch;
        margin-top: 16px;
    }

        .header-actions .btn-primary[b-mccxmjnj0m],
        .header-actions .btn-export[b-mccxmjnj0m],
        .header-actions .btn[b-mccxmjnj0m] {
            flex: 1;
            font-size: 14px;
            padding: 10px 8px;
        }

            .header-actions .btn-primary span[b-mccxmjnj0m],
            .header-actions .btn-export span[b-mccxmjnj0m],
            .header-actions .btn span[b-mccxmjnj0m] {
                display: none;
            }

    .page-title[b-mccxmjnj0m] {
        font-size: 28px;
    }

    .page-subtitle[b-mccxmjnj0m] {
        font-size: 16px;
    }

    .stats-grid[b-mccxmjnj0m] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-mccxmjnj0m] {
        padding: 20px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .stat-icon[b-mccxmjnj0m] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-mccxmjnj0m] {
        font-size: 24px;
    }

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

    .bulk-actions[b-mccxmjnj0m] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px;
    }

    .bulk-buttons[b-mccxmjnj0m] {
        width: 100%;
        justify-content: center;
    }

    .desktop-only[b-mccxmjnj0m] {
        display: none !important;
    }

    .mobile-only[b-mccxmjnj0m] {
        display: block !important;
    }

    .merchants-grid[b-mccxmjnj0m] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .merchant-card-footer[b-mccxmjnj0m] {
        flex-direction: column;
    }

    .btn-card-action[b-mccxmjnj0m] {
        width: 100%;
    }

    .pagination-container[b-mccxmjnj0m] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

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

    .form-actions[b-mccxmjnj0m] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-mccxmjnj0m] {
            width: 100%;
        }

    .modal-dialog[b-mccxmjnj0m] {
        margin: 16px;
        max-width: calc(100% - 32px);
    }

    .modal-header[b-mccxmjnj0m] {
        padding: 20px;
    }

    .modal-body[b-mccxmjnj0m] {
        padding: 20px;
    }

    .modal-footer[b-mccxmjnj0m] {
        flex-direction: column;
        gap: 8px;
    }

        .modal-footer button[b-mccxmjnj0m] {
            width: 100%;
        }

    .performance-stats[b-mccxmjnj0m] {
        flex-direction: column;
    }

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

    .merchant-details-grid[b-mccxmjnj0m] {
        gap: 20px;
    }

    .details-section[b-mccxmjnj0m] {
        padding: 16px;
    }
}

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

    .breadcrumb[b-mccxmjnj0m] {
        font-size: 12px;
    }

    .merchant-card[b-mccxmjnj0m] {
        margin: 0 -8px;
    }

    .pagination-btn[b-mccxmjnj0m] {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 14px;
    }

    .merchant-avatar-large[b-mccxmjnj0m] {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .btn-bulk[b-mccxmjnj0m] {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .merchants-page[b-mccxmjnj0m] {
        background: white !important;
    }

    .header-actions[b-mccxmjnj0m],
    .filters-section[b-mccxmjnj0m],
    .pagination-container[b-mccxmjnj0m],
    .action-buttons[b-mccxmjnj0m],
    .bulk-actions[b-mccxmjnj0m],
    .btn-card-action[b-mccxmjnj0m] {
        display: none !important;
    }

    .merchants-table th[b-mccxmjnj0m] {
        background: #f3f4f6 !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .plan-badge[b-mccxmjnj0m],
    .status-badge[b-mccxmjnj0m] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .merchants-page[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .merchants-page[b-mccxmjnj0m]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-mccxmjnj0m],
[data-theme="dark"] .filters-section[b-mccxmjnj0m],
[data-theme="dark"] .table-container[b-mccxmjnj0m],
[data-theme="dark"] .merchant-card[b-mccxmjnj0m],
[data-theme="dark"] .pagination-container[b-mccxmjnj0m],
[data-theme="dark"] .stat-card[b-mccxmjnj0m] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .merchants-table th[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .merchants-table td[b-mccxmjnj0m] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .merchants-table tbody tr:hover[b-mccxmjnj0m] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .search-input[b-mccxmjnj0m],
[data-theme="dark"] .filter-select[b-mccxmjnj0m],
[data-theme="dark"] .form-control[b-mccxmjnj0m] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-mccxmjnj0m],
    [data-theme="dark"] .filter-select:focus[b-mccxmjnj0m],
    [data-theme="dark"] .form-control:focus[b-mccxmjnj0m] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .page-title[b-mccxmjnj0m],
[data-theme="dark"] .stat-value[b-mccxmjnj0m] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle[b-mccxmjnj0m],
[data-theme="dark"] .stat-label[b-mccxmjnj0m],
[data-theme="dark"] .detail-label[b-mccxmjnj0m],
[data-theme="dark"] .breadcrumb-link[b-mccxmjnj0m] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-current[b-mccxmjnj0m],
[data-theme="dark"] .form-label[b-mccxmjnj0m],
[data-theme="dark"] .section-title[b-mccxmjnj0m],
[data-theme="dark"] .merchant-name[b-mccxmjnj0m],
[data-theme="dark"] .merchant-title[b-mccxmjnj0m] {
    color: #e2e8f0;
}

[data-theme="dark"] .modal-content[b-mccxmjnj0m] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .details-section[b-mccxmjnj0m] {
    background: rgba(71, 85, 105, 0.2);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .merchant-card[b-mccxmjnj0m]::before {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    opacity: 0.05;
}

/* Focus States for Accessibility */
*:focus[b-mccxmjnj0m] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-mccxmjnj0m],
.btn:focus[b-mccxmjnj0m],
.btn-primary:focus[b-mccxmjnj0m],
.btn-export:focus[b-mccxmjnj0m],
.btn-filter:focus[b-mccxmjnj0m] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-mccxmjnj0m],
select:focus[b-mccxmjnj0m] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-mccxmjnj0m],
    .btn-gradient-secondary[b-mccxmjnj0m],
    .btn-gradient-success[b-mccxmjnj0m],
    .btn-gradient-warning[b-mccxmjnj0m],
    .btn-gradient-danger[b-mccxmjnj0m],
    .btn-primary[b-mccxmjnj0m],
    .btn-export[b-mccxmjnj0m],
    .btn-filter[b-mccxmjnj0m] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-mccxmjnj0m] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Animation Keyframes */
@keyframes slideDown-b-mccxmjnj0m {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Hidden classes for responsive design */
.desktop-only[b-mccxmjnj0m] {
    display: block;
}

.mobile-only[b-mccxmjnj0m] {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only[b-mccxmjnj0m] {
        display: none;
    }

    .mobile-only[b-mccxmjnj0m] {
        display: block;
    }
}
/* _content/Sahelly/Components/Pages/Admin/AMerchantProducts.razor.rz.scp.css */
/* AMerchantProducts Page - Professional Architecture */
.btn-gradient-primary[b-zub7h8015e] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-zub7h8015e] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-zub7h8015e] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-warning[b-zub7h8015e] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-gradient-warning:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-gradient-danger[b-zub7h8015e] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Admin Products Page Container */
.admin-products-page[b-zub7h8015e] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-products-page[b-zub7h8015e]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-products-page > *[b-zub7h8015e] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header-admin[b-zub7h8015e] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-zub7h8015e] {
    flex: 1;
}

.header-actions-admin[b-zub7h8015e] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.breadcrumb-admin[b-zub7h8015e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-link[b-zub7h8015e] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-zub7h8015e] {
        color: #667eea;
    }

.breadcrumb-separator[b-zub7h8015e] {
    color: #d1d5db;
}

.breadcrumb-current[b-zub7h8015e] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title-section[b-zub7h8015e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title-admin[b-zub7h8015e] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title-admin i[b-zub7h8015e] {
        font-size: 32px;
    }

.page-subtitle-admin[b-zub7h8015e] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Admin Buttons */
.btn-admin[b-zub7h8015e] {
    padding: 12px 20px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border: none;
}

    .btn-admin i[b-zub7h8015e] {
        font-size: 16px;
    }

.btn-secondary[b-zub7h8015e] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
}

    .btn-secondary:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(41, 104, 178, 0.3);
    }

.btn-export[b-zub7h8015e] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
}

    .btn-export:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(50, 209, 183, 0.3);
    }

.btn-filter[b-zub7h8015e] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-filter:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-clear[b-zub7h8015e] {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: white;
}

    .btn-clear:hover[b-zub7h8015e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(107, 114, 128, 0.3);
    }

/* Statistics Grid */
.stats-grid-admin[b-zub7h8015e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card-admin[b-zub7h8015e] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card-admin[b-zub7h8015e]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card-admin:hover[b-zub7h8015e] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card-admin:hover[b-zub7h8015e]::before {
            opacity: 1;
        }

.stat-icon-admin[b-zub7h8015e] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .stat-icon-admin.products[b-zub7h8015e] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon-admin.active[b-zub7h8015e] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-icon-admin.pending[b-zub7h8015e] {
        background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
    }

    .stat-icon-admin.merchants[b-zub7h8015e] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

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

.stat-value-admin[b-zub7h8015e] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label-admin[b-zub7h8015e] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Filters Section */
.filters-section-admin[b-zub7h8015e] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

    .search-box-admin i[b-zub7h8015e] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
    }

.search-input-admin[b-zub7h8015e] {
    width: 100%;
    padding: 14px 16px 14px 45px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.05);
    color: #1f2937;
    font-size: 16px;
    transition: all 0.3s;
}

    .search-input-admin:focus[b-zub7h8015e] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        background: white;
    }

    .search-input-admin[b-zub7h8015e]::placeholder {
        color: #9ca3af;
    }

.filter-controls-admin[b-zub7h8015e] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.filter-select-admin[b-zub7h8015e] {
    padding: 12px 16px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.05);
    color: #1f2937;
    font-size: 15px;
    min-width: 200px;
    transition: all 0.3s;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 45px;
    cursor: pointer;
}

    .filter-select-admin:focus[b-zub7h8015e] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        background-color: white;
    }

/* Products Table */
.table-container-admin[b-zub7h8015e] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.products-table-admin[b-zub7h8015e] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .products-table-admin thead th[b-zub7h8015e] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .products-table-admin tbody td[b-zub7h8015e] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
        vertical-align: middle;
    }

    .products-table-admin tbody tr[b-zub7h8015e] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .products-table-admin tbody tr:hover[b-zub7h8015e] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .products-table-admin tbody tr:last-child td[b-zub7h8015e] {
            border-bottom: none;
        }

/* Product Info */
.product-info-admin[b-zub7h8015e] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb-admin[b-zub7h8015e] {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #f3f4f6;
}

.product-name-admin[b-zub7h8015e] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #1f2937;
}

.product-name-en-admin[b-zub7h8015e] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Merchant Info */
.merchant-info-admin[b-zub7h8015e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.merchant-name[b-zub7h8015e] {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

.merchant-code[b-zub7h8015e] {
    font-size: 12px;
    color: #6b7280;
}

/* Price Info */
.price-info-admin[b-zub7h8015e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price[b-zub7h8015e] {
    font-weight: 700;
    font-size: 15px;
    color: #1f2937;
}

.sale-price[b-zub7h8015e] {
    font-size: 13px;
    color: #ef4444;
    font-weight: 600;
}

/* Stock Badge */
.stock-badge-admin[b-zub7h8015e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    min-width: 50px;
}

    .stock-badge-admin.in-stock[b-zub7h8015e] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .stock-badge-admin.low-stock[b-zub7h8015e] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .stock-badge-admin.out-of-stock[b-zub7h8015e] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

/* Status Badge */
.status-badge-admin[b-zub7h8015e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    min-width: 110px;
    justify-content: center;
}

    .status-badge-admin.active[b-zub7h8015e] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge-admin.inactive[b-zub7h8015e] {
        background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(107, 114, 128, 0.2) 100%);
        color: #4b5563;
        border: 1px solid rgba(156, 163, 175, 0.3);
    }

    .status-badge-admin.pending[b-zub7h8015e] {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(249, 115, 22, 0.3);
    }

    .status-badge-admin.rejected[b-zub7h8015e] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

/* Date Display */
.date-admin[b-zub7h8015e] {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

/* Action Buttons */
.action-buttons-admin[b-zub7h8015e] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-icon-admin[b-zub7h8015e] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

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

    .btn-icon-admin:hover[b-zub7h8015e]::before {
        width: 100px;
        height: 100px;
    }

    .btn-icon-admin.view[b-zub7h8015e] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
    }

        .btn-icon-admin.view:hover[b-zub7h8015e] {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(41, 104, 178, 0.3);
        }

    .btn-icon-admin.approve[b-zub7h8015e] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

        .btn-icon-admin.approve:hover[b-zub7h8015e] {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(50, 209, 183, 0.3);
        }

    .btn-icon-admin.reject[b-zub7h8015e] {
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        color: white;
    }

        .btn-icon-admin.reject:hover[b-zub7h8015e] {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
        }

/* Mobile Products Grid */
.products-grid-admin[b-zub7h8015e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.product-card-admin[b-zub7h8015e] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .product-card-admin:hover[b-zub7h8015e] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

.product-card-header-admin[b-zub7h8015e] {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.product-image-admin[b-zub7h8015e] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-header-admin .status-badge-admin[b-zub7h8015e] {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    padding: 6px 12px;
}

.product-card-body-admin[b-zub7h8015e] {
    padding: 20px;
}

.product-title-admin[b-zub7h8015e] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #1f2937;
}

.product-subtitle-admin[b-zub7h8015e] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

.product-details-admin[b-zub7h8015e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.detail-item-admin[b-zub7h8015e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.detail-label-admin[b-zub7h8015e] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.detail-value-admin[b-zub7h8015e] {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

.product-card-footer-admin[b-zub7h8015e] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-card-action-admin[b-zub7h8015e] {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
}

    .btn-card-action-admin.view[b-zub7h8015e] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
    }

        .btn-card-action-admin.view:hover[b-zub7h8015e] {
            box-shadow: 0 6px 12px rgba(41, 104, 178, 0.3);
        }

    .btn-card-action-admin.approve[b-zub7h8015e] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

        .btn-card-action-admin.approve:hover[b-zub7h8015e] {
            box-shadow: 0 6px 12px rgba(50, 209, 183, 0.3);
        }

    .btn-card-action-admin.reject[b-zub7h8015e] {
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        color: white;
    }

        .btn-card-action-admin.reject:hover[b-zub7h8015e] {
            box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
        }

/* Loading Container */
.loading-container-admin[b-zub7h8015e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.spinner-admin[b-zub7h8015e] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid rgba(102, 126, 234, 0.1);
    border-top-color: #667eea;
    animation: spin-b-zub7h8015e 1s infinite linear;
    margin-bottom: 20px;
}

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

.loading-text-admin[b-zub7h8015e] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Empty State */
.empty-state-admin[b-zub7h8015e] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .empty-state-admin i[b-zub7h8015e] {
        font-size: 80px;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-state-admin h3[b-zub7h8015e] {
        font-size: 24px;
        color: #1f2937;
        margin-bottom: 16px;
        font-weight: 700;
    }

    .empty-state-admin p[b-zub7h8015e] {
        font-size: 16px;
        color: #6b7280;
        max-width: 500px;
        margin: 0 auto;
    }

/* Pagination */
.pagination-container-admin[b-zub7h8015e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pagination-btn-admin[b-zub7h8015e] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-weight: 600;
    margin: 0 4px;
}

    .pagination-btn-admin:hover:not(:disabled)[b-zub7h8015e] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn-admin.active[b-zub7h8015e] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn-admin:disabled[b-zub7h8015e] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.pagination-info-admin[b-zub7h8015e] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Unauthorized Container */
.unauthorized-container-admin[b-zub7h8015e] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 600px;
    margin: 100px auto;
}

    .unauthorized-container-admin i[b-zub7h8015e] {
        font-size: 80px;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .unauthorized-container-admin h3[b-zub7h8015e] {
        font-size: 24px;
        color: #1f2937;
        margin-bottom: 16px;
        font-weight: 700;
    }

    .unauthorized-container-admin p[b-zub7h8015e] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-grid-admin[b-zub7h8015e] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .desktop-only[b-zub7h8015e] {
        display: none;
    }

    .mobile-only[b-zub7h8015e] {
        display: block;
    }
}

@media (min-width: 993px) {
    .desktop-only[b-zub7h8015e] {
        display: block;
    }

    .mobile-only[b-zub7h8015e] {
        display: none;
    }
}

@media (max-width: 768px) {
    .admin-products-page[b-zub7h8015e] {
        padding: 16px;
    }

    .page-header-admin[b-zub7h8015e] {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

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

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

    .filter-controls-admin[b-zub7h8015e] {
        flex-direction: column;
        align-items: stretch;
    }

        .filter-controls-admin button[b-zub7h8015e] {
            width: 100%;
        }

    .products-grid-admin[b-zub7h8015e] {
        grid-template-columns: 1fr;
    }

    .pagination-container-admin[b-zub7h8015e] {
        flex-direction: column;
        gap: 16px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .admin-products-page[b-zub7h8015e] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-products-page[b-zub7h8015e]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-admin[b-zub7h8015e],
[data-theme="dark"] .filters-section-admin[b-zub7h8015e],
[data-theme="dark"] .table-container-admin[b-zub7h8015e],
[data-theme="dark"] .product-card-admin[b-zub7h8015e],
[data-theme="dark"] .loading-container-admin[b-zub7h8015e],
[data-theme="dark"] .empty-state-admin[b-zub7h8015e],
[data-theme="dark"] .pagination-container-admin[b-zub7h8015e],
[data-theme="dark"] .unauthorized-container-admin[b-zub7h8015e] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-card-admin[b-zub7h8015e] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .products-table-admin tbody td[b-zub7h8015e] {
    background: #1e293b;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .products-table-admin tbody tr:hover[b-zub7h8015e] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .search-input-admin[b-zub7h8015e],
[data-theme="dark"] .filter-select-admin[b-zub7h8015e] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input-admin:focus[b-zub7h8015e],
    [data-theme="dark"] .filter-select-admin:focus[b-zub7h8015e] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

    [data-theme="dark"] .search-input-admin[b-zub7h8015e]::placeholder {
        color: #64748b;
    }

[data-theme="dark"] .page-title-admin[b-zub7h8015e] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle-admin[b-zub7h8015e] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-link[b-zub7h8015e] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-zub7h8015e] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-zub7h8015e] {
    color: #e2e8f0;
}

[data-theme="dark"] .breadcrumb-separator[b-zub7h8015e] {
    color: #4b5563;
}

[data-theme="dark"] .product-name-admin[b-zub7h8015e] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-name-en-admin[b-zub7h8015e] {
    color: #9ca3af;
}

[data-theme="dark"] .merchant-name[b-zub7h8015e] {
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-code[b-zub7h8015e] {
    color: #9ca3af;
}

[data-theme="dark"] .price[b-zub7h8015e] {
    color: #e2e8f0;
}

[data-theme="dark"] .stat-value-admin[b-zub7h8015e] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .stat-label-admin[b-zub7h8015e] {
    color: #9ca3af;
}

[data-theme="dark"] .date-admin[b-zub7h8015e] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-label-admin[b-zub7h8015e] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-value-admin[b-zub7h8015e] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-title-admin[b-zub7h8015e] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-subtitle-admin[b-zub7h8015e] {
    color: #9ca3af;
}

[data-theme="dark"] .product-card-footer-admin[b-zub7h8015e] {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pagination-info-admin[b-zub7h8015e] {
    color: #9ca3af;
}

[data-theme="dark"] .pagination-btn-admin[b-zub7h8015e] {
    background: rgba(102, 126, 234, 0.2);
    color: #a78bfa;
}

[data-theme="dark"] .empty-state-admin i[b-zub7h8015e],
[data-theme="dark"] .unauthorized-container-admin i[b-zub7h8015e] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-state-admin h3[b-zub7h8015e],
[data-theme="dark"] .unauthorized-container-admin h3[b-zub7h8015e] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state-admin p[b-zub7h8015e],
[data-theme="dark"] .unauthorized-container-admin p[b-zub7h8015e] {
    color: #9ca3af;
}
/* _content/Sahelly/Components/Pages/Admin/AMerchantReports.razor.rz.scp.css */
/* ===================================
   Merchant Reports Page - Professional Styles
   Modern E-commerce Admin Interface
   =================================== */

/* Page Container */
.merchant-reports-page[b-5cgmw131cq] {
    padding: 32px;
    max-width: 1600px;
    margin: 0 auto;
    animation: fadeIn-b-5cgmw131cq 0.5s ease-out;
}

/* Loading & Error States */
.loading-container[b-5cgmw131cq],
.error-container[b-5cgmw131cq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    text-align: center;
}

.loading-spinner[b-5cgmw131cq] {
    font-size: 48px;
    color: var(--primary-color);
    animation: spin-b-5cgmw131cq 1s linear infinite;
}

.loading-text[b-5cgmw131cq] {
    margin-top: 16px;
    font-size: 18px;
    color: var(--text-secondary);
}

.error-icon[b-5cgmw131cq] {
    font-size: 64px;
    color: var(--danger-color);
    margin-bottom: 16px;
}

.error-title[b-5cgmw131cq] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.error-message[b-5cgmw131cq] {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Page Header */
.page-header[b-5cgmw131cq] {
    margin-bottom: 32px;
}

.breadcrumb[b-5cgmw131cq] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
}

.breadcrumb-link[b-5cgmw131cq] {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

    .breadcrumb-link:hover[b-5cgmw131cq] {
        color: var(--primary-color);
    }

.breadcrumb-separator[b-5cgmw131cq] {
    color: var(--text-tertiary);
}

.breadcrumb-current[b-5cgmw131cq] {
    color: var(--text-primary);
    font-weight: 500;
}

.header-content[b-5cgmw131cq] {
    margin-bottom: 24px;
}

.page-title[b-5cgmw131cq] {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-subtitle[b-5cgmw131cq] {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

.header-actions[b-5cgmw131cq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Date Range Selector */
.date-range-selector[b-5cgmw131cq] {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 12px;
}

.date-btn[b-5cgmw131cq] {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .date-btn:hover[b-5cgmw131cq] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .date-btn.active[b-5cgmw131cq] {
        background: var(--surface-color);
        color: var(--primary-color);
        box-shadow: var(--shadow-sm);
    }

.action-buttons[b-5cgmw131cq] {
    display: flex;
    gap: 12px;
}

/* Summary Cards */
.summary-cards[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.summary-card[b-5cgmw131cq] {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-5cgmw131cq]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
    }

    .summary-card.revenue[b-5cgmw131cq]::before {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    .summary-card.orders[b-5cgmw131cq]::before {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
    }

    .summary-card.customers[b-5cgmw131cq]::before {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .summary-card.outstanding[b-5cgmw131cq]::before {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

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

.card-icon[b-5cgmw131cq] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.summary-card.revenue .card-icon[b-5cgmw131cq] {
    background: var(--success-light);
    color: var(--success-dark);
}

.summary-card.orders .card-icon[b-5cgmw131cq] {
    background: var(--info-light);
    color: var(--info-dark);
}

.summary-card.customers .card-icon[b-5cgmw131cq] {
    background: var(--warning-light);
    color: var(--warning-dark);
}

.summary-card.outstanding .card-icon[b-5cgmw131cq] {
    background: var(--danger-light);
    color: var(--danger-dark);
}

.card-content[b-5cgmw131cq] {
    flex: 1;
}

.card-label[b-5cgmw131cq] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value[b-5cgmw131cq] {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1;
}

.card-change[b-5cgmw131cq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
}

    .card-change.positive[b-5cgmw131cq] {
        color: var(--success-color);
    }

    .card-change.negative[b-5cgmw131cq] {
        color: var(--danger-color);
    }

/* Report Tabs */
.report-tabs[b-5cgmw131cq] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: var(--bg-secondary);
    padding: 8px;
    border-radius: 12px;
    overflow-x: auto;
}

.tab-btn[b-5cgmw131cq] {
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .tab-btn:hover[b-5cgmw131cq] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .tab-btn.active[b-5cgmw131cq] {
        background: var(--surface-color);
        color: var(--primary-color);
        box-shadow: var(--shadow-sm);
    }

/* Tab Content */
.tab-content[b-5cgmw131cq] {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    animation: fadeIn-b-5cgmw131cq 0.3s ease-out;
}

/* Overview Section */
.overview-section[b-5cgmw131cq] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Charts */
.chart-container[b-5cgmw131cq] {
    background: var(--surface-color);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.chart-header[b-5cgmw131cq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.chart-title[b-5cgmw131cq] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.chart-controls[b-5cgmw131cq] {
    display: flex;
    gap: 12px;
}

.chart-area[b-5cgmw131cq] {
    height: 300px;
}

.chart-area-medium[b-5cgmw131cq] {
    height: 400px;
}

.chart-area-large[b-5cgmw131cq] {
    height: 500px;
}

/* Stats Grid */
.stats-grid[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

.stat-box[b-5cgmw131cq] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 24px;
}

    .stat-box h4[b-5cgmw131cq] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 16px 0;
        color: var(--text-primary);
    }

/* Top Items List */
.top-items-list[b-5cgmw131cq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-item[b-5cgmw131cq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--surface-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .top-item:hover[b-5cgmw131cq] {
        transform: translateX(4px);
        box-shadow: var(--shadow-sm);
    }

.item-info[b-5cgmw131cq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .item-info img[b-5cgmw131cq] {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        object-fit: cover;
    }

    .item-info h5[b-5cgmw131cq] {
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: var(--text-primary);
    }

    .item-info p[b-5cgmw131cq] {
        font-size: 12px;
        color: var(--text-secondary);
        margin: 0;
    }

.item-value[b-5cgmw131cq] {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

.customer-avatar[b-5cgmw131cq] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
}

/* Activities Timeline */
.activities-section[b-5cgmw131cq] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 24px;
}

    .activities-section h3[b-5cgmw131cq] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 24px 0;
        color: var(--text-primary);
    }

.activities-timeline[b-5cgmw131cq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item[b-5cgmw131cq] {
    display: flex;
    gap: 16px;
    position: relative;
}

    .timeline-item:not(:last-child)[b-5cgmw131cq]::after {
        content: '';
        position: absolute;
        left: 20px;
        top: 48px;
        bottom: -16px;
        width: 2px;
        background: var(--border-color);
    }

.timeline-icon[b-5cgmw131cq] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

    .timeline-icon.order[b-5cgmw131cq] {
        border-color: var(--info-color);
        color: var(--info-color);
    }

    .timeline-icon.payment[b-5cgmw131cq] {
        border-color: var(--success-color);
        color: var(--success-color);
    }

    .timeline-icon.product[b-5cgmw131cq] {
        border-color: var(--warning-color);
        color: var(--warning-color);
    }

    .timeline-icon.customer[b-5cgmw131cq] {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

.timeline-content[b-5cgmw131cq] {
    flex: 1;
}

    .timeline-content h5[b-5cgmw131cq] {
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: var(--text-primary);
    }

    .timeline-content p[b-5cgmw131cq] {
        font-size: 12px;
        color: var(--text-secondary);
        margin: 0;
        display: flex;
        gap: 16px;
    }

        .timeline-content p i[b-5cgmw131cq] {
            width: 14px;
        }

/* Section Headers */
.section-header[b-5cgmw131cq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .section-header h3[b-5cgmw131cq] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        color: var(--text-primary);
    }

.section-actions[b-5cgmw131cq] {
    display: flex;
    gap: 12px;
}

/* Report Summary */
.report-summary[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.summary-item[b-5cgmw131cq] {
    text-align: center;
}

    .summary-item h4[b-5cgmw131cq] {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0 0 8px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .summary-item .value[b-5cgmw131cq] {
        font-size: 32px;
        font-weight: 800;
        margin: 0;
        color: var(--text-primary);
    }

        .summary-item .value.positive[b-5cgmw131cq] {
            color: var(--success-color);
        }

        .summary-item .value.negative[b-5cgmw131cq] {
            color: var(--danger-color);
        }

/* Data Tables */
.data-table-container[b-5cgmw131cq] {
    overflow-x: auto;
    margin-top: 24px;
}

.data-table[b-5cgmw131cq] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-5cgmw131cq] {
        background: var(--bg-secondary);
        padding: 16px;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid var(--border-color);
    }

    .data-table td[b-5cgmw131cq] {
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
    }

    .data-table tbody tr[b-5cgmw131cq] {
        transition: all 0.2s ease;
    }

        .data-table tbody tr:hover[b-5cgmw131cq] {
            background: var(--bg-tertiary);
        }

.product-cell[b-5cgmw131cq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .product-cell img[b-5cgmw131cq] {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        object-fit: cover;
    }

.customer-cell[b-5cgmw131cq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Customer Segments */
.customer-segments[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.segment-card[b-5cgmw131cq] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .segment-card[b-5cgmw131cq]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    }

    .segment-card.new[b-5cgmw131cq]::before {
        background: var(--info-color);
    }

    .segment-card.returning[b-5cgmw131cq]::before {
        background: var(--success-color);
    }

    .segment-card.vip[b-5cgmw131cq]::before {
        background: var(--warning-color);
    }

    .segment-card h4[b-5cgmw131cq] {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0 0 8px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.segment-value[b-5cgmw131cq] {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 16px 0;
    color: var(--text-primary);
}

.segment-chart[b-5cgmw131cq] {
    height: 100px;
}

/* Agent Performance Cards */
.agent-cards-grid[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.agent-performance-card[b-5cgmw131cq] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
}

    .agent-performance-card:hover[b-5cgmw131cq] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

.agent-header[b-5cgmw131cq] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.agent-avatar[b-5cgmw131cq] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
}

.agent-header h4[b-5cgmw131cq] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.agent-header p[b-5cgmw131cq] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.performance-metrics[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.metric[b-5cgmw131cq] {
    text-align: center;
}

.metric-label[b-5cgmw131cq] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value[b-5cgmw131cq] {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.performance-chart[b-5cgmw131cq] {
    height: 150px;
}

/* Financial Section */
.financial-summary[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.financial-card[b-5cgmw131cq] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

    .financial-card[b-5cgmw131cq]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    }

    .financial-card.income[b-5cgmw131cq]::before {
        background: var(--success-color);
    }

    .financial-card.expenses[b-5cgmw131cq]::before {
        background: var(--danger-color);
    }

    .financial-card.profit[b-5cgmw131cq]::before {
        background: var(--primary-color);
    }

    .financial-card h4[b-5cgmw131cq] {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 12px 0;
        color: var(--text-primary);
    }

.amount[b-5cgmw131cq] {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 16px 0;
    color: var(--text-primary);
}

    .amount.positive[b-5cgmw131cq] {
        color: var(--success-color);
    }

    .amount.negative[b-5cgmw131cq] {
        color: var(--danger-color);
    }

.breakdown[b-5cgmw131cq] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.profit-margin[b-5cgmw131cq] {
    font-size: 16px;
    font-weight: 600;
    margin-top: 12px;
}

/* Inventory Section */
.inventory-summary[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.inventory-stat[b-5cgmw131cq] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 20px;
}

    .inventory-stat i[b-5cgmw131cq] {
        font-size: 32px;
        color: var(--text-tertiary);
    }

    .inventory-stat.warning i[b-5cgmw131cq] {
        color: var(--warning-color);
    }

    .inventory-stat.danger i[b-5cgmw131cq] {
        color: var(--danger-color);
    }

    .inventory-stat h4[b-5cgmw131cq] {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0 0 4px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .inventory-stat p[b-5cgmw131cq] {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        color: var(--text-primary);
    }

/* Alert Section */
.alert-section[b-5cgmw131cq] {
    background: var(--warning-light);
    border: 1px solid var(--warning-color);
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
}

    .alert-section h4[b-5cgmw131cq] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 16px 0;
        color: var(--warning-dark);
    }

.alert-items[b-5cgmw131cq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-item[b-5cgmw131cq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-color);
    border-radius: 8px;
    padding: 16px;
}

.product-info[b-5cgmw131cq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .product-info img[b-5cgmw131cq] {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        object-fit: cover;
    }

    .product-info h5[b-5cgmw131cq] {
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: var(--text-primary);
    }

    .product-info p[b-5cgmw131cq] {
        font-size: 12px;
        color: var(--text-secondary);
        margin: 0;
    }

.stock-info[b-5cgmw131cq] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
}

.current-stock[b-5cgmw131cq] {
    color: var(--danger-color);
}

.min-stock[b-5cgmw131cq] {
    color: var(--text-secondary);
}

/* Export Modal */
.export-options[b-5cgmw131cq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.export-option[b-5cgmw131cq] {
    padding: 24px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

    .export-option:hover[b-5cgmw131cq] {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

    .export-option i[b-5cgmw131cq] {
        font-size: 32px;
        color: var(--primary-color);
        display: block;
        margin-bottom: 8px;
    }

    .export-option span[b-5cgmw131cq] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

/* Animations */
@keyframes fadeIn-b-5cgmw131cq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes spin-b-5cgmw131cq {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Print Styles */
@media print {
    .header-actions[b-5cgmw131cq],
    .report-tabs[b-5cgmw131cq],
    .section-actions[b-5cgmw131cq],
    .btn[b-5cgmw131cq],
    .modal[b-5cgmw131cq] {
        display: none !important;
    }

    .merchant-reports-page[b-5cgmw131cq] {
        padding: 0;
    }

    .tab-content[b-5cgmw131cq] {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .chart-area[b-5cgmw131cq],
    .chart-area-medium[b-5cgmw131cq],
    .chart-area-large[b-5cgmw131cq] {
        page-break-inside: avoid;
    }

    .data-table[b-5cgmw131cq] {
        font-size: 12px;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .merchant-reports-page[b-5cgmw131cq] {
        padding: 24px;
    }

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

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

@media (max-width: 768px) {
    .merchant-reports-page[b-5cgmw131cq] {
        padding: 16px;
    }

    .page-title[b-5cgmw131cq] {
        font-size: 24px;
    }

    .header-actions[b-5cgmw131cq] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-range-selector[b-5cgmw131cq] {
        width: 100%;
        justify-content: space-between;
    }

    .action-buttons[b-5cgmw131cq] {
        width: 100%;
    }

        .action-buttons .btn[b-5cgmw131cq] {
            flex: 1;
        }

    .summary-cards[b-5cgmw131cq] {
        grid-template-columns: 1fr;
    }

    .summary-card[b-5cgmw131cq] {
        padding: 20px;
    }

    .card-value[b-5cgmw131cq] {
        font-size: 24px;
    }

    .report-tabs[b-5cgmw131cq] {
        gap: 4px;
        padding: 4px;
    }

    .tab-btn[b-5cgmw131cq] {
        padding: 10px 16px;
        font-size: 13px;
    }

        .tab-btn i[b-5cgmw131cq] {
            display: none;
        }

    .tab-content[b-5cgmw131cq] {
        padding: 20px;
    }

    .agent-cards-grid[b-5cgmw131cq] {
        grid-template-columns: 1fr;
    }

    .financial-summary[b-5cgmw131cq] {
        grid-template-columns: 1fr;
    }

    .customer-segments[b-5cgmw131cq] {
        grid-template-columns: 1fr;
    }

    .inventory-summary[b-5cgmw131cq] {
        grid-template-columns: 1fr;
    }

    .export-options[b-5cgmw131cq] {
        grid-template-columns: 1fr;
    }

    .data-table[b-5cgmw131cq] {
        font-size: 14px;
    }

        .data-table th[b-5cgmw131cq],
        .data-table td[b-5cgmw131cq] {
            padding: 12px;
        }
}

@media (max-width: 480px) {
    .date-btn[b-5cgmw131cq] {
        padding: 6px 12px;
        font-size: 12px;
    }

    .summary-card[b-5cgmw131cq] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .card-icon[b-5cgmw131cq] {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .report-tabs[b-5cgmw131cq] {
        flex-wrap: wrap;
    }

    .tab-btn[b-5cgmw131cq] {
        flex: 1 1 calc(33.333% - 4px);
        min-width: 100px;
        justify-content: center;
    }

    .performance-metrics[b-5cgmw131cq] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .alert-item[b-5cgmw131cq] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* RTL Support */
html[dir="rtl"] .breadcrumb[b-5cgmw131cq] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .data-table th[b-5cgmw131cq],
html[dir="rtl"] .data-table td[b-5cgmw131cq] {
    text-align: right;
}

html[dir="rtl"] .top-item[b-5cgmw131cq] {
    flex-direction: row-reverse;
}

    html[dir="rtl"] .top-item:hover[b-5cgmw131cq] {
        transform: translateX(-4px);
    }

html[dir="rtl"] .timeline-item[b-5cgmw131cq] {
    flex-direction: row-reverse;
}

    html[dir="rtl"] .timeline-item:not(:last-child)[b-5cgmw131cq]::after {
        left: auto;
        right: 20px;
    }

html[dir="rtl"] .timeline-content p[b-5cgmw131cq] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .product-cell[b-5cgmw131cq],
html[dir="rtl"] .customer-cell[b-5cgmw131cq] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .agent-header[b-5cgmw131cq] {
    flex-direction: row-reverse;
}

/* Dark Theme Support */
[data-theme="dark"] .summary-card[b-5cgmw131cq] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .tab-content[b-5cgmw131cq] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .chart-container[b-5cgmw131cq] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .stat-box[b-5cgmw131cq] {
    background: var(--bg-primary);
}

[data-theme="dark"] .top-item[b-5cgmw131cq] {
    background: var(--bg-primary);
}

[data-theme="dark"] .timeline-icon[b-5cgmw131cq] {
    background: var(--bg-primary);
}

[data-theme="dark"] .data-table th[b-5cgmw131cq] {
    background: var(--bg-primary);
}

[data-theme="dark"] .data-table tbody tr:hover[b-5cgmw131cq] {
    background: var(--bg-primary);
}

[data-theme="dark"] .agent-performance-card[b-5cgmw131cq] {
    background: var(--bg-primary);
}

[data-theme="dark"] .financial-card[b-5cgmw131cq] {
    background: var(--bg-primary);
}

[data-theme="dark"] .inventory-stat[b-5cgmw131cq] {
    background: var(--bg-primary);
}

[data-theme="dark"] .alert-section[b-5cgmw131cq] {
    background: rgba(251, 191, 36, 0.1);
}

[data-theme="dark"] .alert-item[b-5cgmw131cq] {
    background: var(--bg-primary);
}
/* _content/Sahelly/Components/Pages/Admin/BackupSettings.razor.rz.scp.css */
/* ===================================
   Backup Settings - Professional Styles
   Modern E-commerce Admin Interface
   ���� ����� ���������� - ����� �������
   =================================== */

/* Main Container */
.backup-settings-container[b-bveu1hl5m8] {
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn-b-bveu1hl5m8 0.5s ease-out;
}

/* Page Header */
.page-header[b-bveu1hl5m8] {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
}

.header-content[b-bveu1hl5m8] {
    flex: 1;
}

.page-title[b-bveu1hl5m8] {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-bveu1hl5m8] {
        font-size: 28px;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Breadcrumb */
.breadcrumb[b-bveu1hl5m8] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.breadcrumb-item[b-bveu1hl5m8] {
    display: flex;
    align-items: center;
    color: var(--text-tertiary);
}

    .breadcrumb-item a[b-bveu1hl5m8] {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-bveu1hl5m8] {
            color: var(--primary-color);
        }

    .breadcrumb-item:not(:first-child)[b-bveu1hl5m8]::before {
        content: '/';
        margin-right: 12px;
        color: var(--text-tertiary);
    }

html[dir="rtl"] .breadcrumb-item:not(:first-child)[b-bveu1hl5m8]::before {
    margin-right: 0;
    margin-left: 12px;
}

.breadcrumb-item.active[b-bveu1hl5m8] {
    color: var(--text-primary);
    font-weight: 500;
}

/* Quick Actions Section */
.quick-actions[b-bveu1hl5m8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.action-card[b-bveu1hl5m8] {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

    .action-card:hover[b-bveu1hl5m8] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-light);
    }

.create-backup[b-bveu1hl5m8] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.action-icon[b-bveu1hl5m8] {
    width: 64px;
    height: 64px;
    background: var(--gradient-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .action-icon i[b-bveu1hl5m8] {
        font-size: 28px;
        color: white;
    }

.action-content h3[b-bveu1hl5m8] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.action-content p[b-bveu1hl5m8] {
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Stats Grid */
.stats-grid[b-bveu1hl5m8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stat-item[b-bveu1hl5m8] {
    text-align: center;
}

.stat-value[b-bveu1hl5m8] {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.stat-label[b-bveu1hl5m8] {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Tabs */
.backup-tabs[b-bveu1hl5m8] {
    background: var(--surface-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.nav-tabs[b-bveu1hl5m8] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

    .nav-tabs[b-bveu1hl5m8]::-webkit-scrollbar {
        display: none;
    }

.nav-item[b-bveu1hl5m8] {
    flex-shrink: 0;
}

.nav-link[b-bveu1hl5m8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .nav-link i[b-bveu1hl5m8] {
        font-size: 16px;
        transition: transform 0.2s ease;
    }

    .nav-link:hover[b-bveu1hl5m8] {
        color: var(--primary-color);
        background: var(--hover-background);
    }

        .nav-link:hover i[b-bveu1hl5m8] {
            transform: translateY(-2px);
        }

    .nav-link.active[b-bveu1hl5m8] {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
        background: var(--primary-light);
    }

/* Tab Content */
.tab-content[b-bveu1hl5m8] {
    padding: 32px;
    min-height: 400px;
}

/* Backups Section */
.backups-section[b-bveu1hl5m8] {
    animation: fadeIn-b-bveu1hl5m8 0.3s ease-out;
}

/* Backups Table */
.backups-table-wrapper[b-bveu1hl5m8] {
    overflow-x: auto;
}

.backups-table[b-bveu1hl5m8] {
    width: 100%;
    border-collapse: collapse;
}

    .backups-table thead[b-bveu1hl5m8] {
        background: var(--bg-secondary);
        border-bottom: 2px solid var(--border-color);
    }

    .backups-table th[b-bveu1hl5m8] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-secondary);
        white-space: nowrap;
    }

html[dir="ltr"] .backups-table th[b-bveu1hl5m8] {
    text-align: left;
}

.backups-table tbody tr[b-bveu1hl5m8] {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

    .backups-table tbody tr:hover[b-bveu1hl5m8] {
        background: var(--hover-background);
    }

.backups-table td[b-bveu1hl5m8] {
    padding: 16px;
    vertical-align: middle;
}

.backup-name[b-bveu1hl5m8] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

    .backup-name i[b-bveu1hl5m8] {
        font-size: 20px;
    }

/* Badges */
.badge[b-bveu1hl5m8] {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
}

.badge-primary[b-bveu1hl5m8] {
    background: var(--primary-light);
    color: var(--primary-color);
}

.badge-info[b-bveu1hl5m8] {
    background: var(--info-light);
    color: var(--info-color);
}

.badge-warning[b-bveu1hl5m8] {
    background: var(--warning-light);
    color: var(--warning-color);
}

/* Status Badge */
.status-badge[b-bveu1hl5m8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
}

    .status-badge[b-bveu1hl5m8]::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.status-completed[b-bveu1hl5m8] {
    background: var(--success-light);
    color: var(--success-color);
}

.status-inprogress[b-bveu1hl5m8] {
    background: var(--warning-light);
    color: var(--warning-color);
}

.status-failed[b-bveu1hl5m8] {
    background: var(--danger-light);
    color: var(--danger-color);
}

/* Action Buttons */
.action-buttons[b-bveu1hl5m8] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-bveu1hl5m8] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .btn-icon:hover[b-bveu1hl5m8] {
        transform: translateY(-2px);
    }

.btn-download:hover[b-bveu1hl5m8] {
    background: var(--primary-color);
    color: white;
}

.btn-restore:hover[b-bveu1hl5m8] {
    background: var(--success-color);
    color: white;
}

.btn-delete:hover[b-bveu1hl5m8] {
    background: var(--danger-color);
    color: white;
}

/* Mobile View */
.backups-mobile[b-bveu1hl5m8] {
    display: none;
}

.backup-card[b-bveu1hl5m8] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.backup-header[b-bveu1hl5m8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

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

.backup-details[b-bveu1hl5m8] {
    margin-bottom: 16px;
}

.detail-item[b-bveu1hl5m8] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

    .detail-item:last-child[b-bveu1hl5m8] {
        border-bottom: none;
    }

.detail-label[b-bveu1hl5m8] {
    font-size: 14px;
    color: var(--text-secondary);
}

.detail-value[b-bveu1hl5m8] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.backup-actions[b-bveu1hl5m8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Empty State */
.empty-state[b-bveu1hl5m8] {
    text-align: center;
    padding: 64px 32px;
}

    .empty-state i[b-bveu1hl5m8] {
        font-size: 64px;
        color: var(--text-tertiary);
        margin-bottom: 24px;
    }

    .empty-state h3[b-bveu1hl5m8] {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 8px 0;
    }

    .empty-state p[b-bveu1hl5m8] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0 0 24px 0;
    }

/* Schedule Section */
.schedule-section[b-bveu1hl5m8], .settings-section[b-bveu1hl5m8] {
    animation: fadeIn-b-bveu1hl5m8 0.3s ease-out;
}

.settings-card[b-bveu1hl5m8] {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-title[b-bveu1hl5m8] {
    padding: 20px 24px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

    .card-title i[b-bveu1hl5m8] {
        color: var(--primary-color);
        font-size: 20px;
    }

.card-content[b-bveu1hl5m8] {
    padding: 24px;
}

/* Form Elements */
.form-group[b-bveu1hl5m8] {
    margin-bottom: 20px;
}

    .form-group label[b-bveu1hl5m8] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-primary);
    }

.form-control[b-bveu1hl5m8] {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    .form-control:focus[b-bveu1hl5m8] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px var(--primary-light);
        background: var(--surface-color);
    }

select.form-control[b-bveu1hl5m8] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    padding-right: 40px;
}

/* Checkbox Group */
.checkbox-group[b-bveu1hl5m8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .checkbox-group label[b-bveu1hl5m8] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: normal;
        cursor: pointer;
    }

.form-check-input[b-bveu1hl5m8] {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Input Group */
.input-group[b-bveu1hl5m8] {
    display: flex;
    align-items: stretch;
}

    .input-group .form-control[b-bveu1hl5m8] {
        border-radius: 8px 0 0 8px;
        border-right: none;
    }

.input-group-text[b-bveu1hl5m8] {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Schedule Options */
.schedule-options[b-bveu1hl5m8] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Storage Info */
.storage-info[b-bveu1hl5m8] {
    margin-bottom: 24px;
}

.storage-meter[b-bveu1hl5m8] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 20px;
}

.meter-header[b-bveu1hl5m8] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

    .meter-header span:first-child[b-bveu1hl5m8] {
        color: var(--text-secondary);
    }

    .meter-header span:last-child[b-bveu1hl5m8] {
        font-weight: 600;
        color: var(--text-primary);
    }

.meter-bar[b-bveu1hl5m8] {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.meter-fill[b-bveu1hl5m8] {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Cloud Settings */
.cloud-settings[b-bveu1hl5m8] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Settings Actions */
.settings-actions[b-bveu1hl5m8] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* Buttons */
.btn[b-bveu1hl5m8] {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-bveu1hl5m8] {
    background: var(--gradient-primary);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-bveu1hl5m8] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

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

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

    .btn-secondary:hover[b-bveu1hl5m8] {
        background: var(--border-color);
    }

.btn-danger[b-bveu1hl5m8] {
    background: var(--danger-color);
    color: white;
}

    .btn-danger:hover[b-bveu1hl5m8] {
        background: var(--danger-hover);
    }

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

    .btn-outline-primary:hover[b-bveu1hl5m8] {
        background: var(--primary-color);
        color: white;
    }

.btn-outline-success[b-bveu1hl5m8] {
    background: transparent;
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

    .btn-outline-success:hover[b-bveu1hl5m8] {
        background: var(--success-color);
        color: white;
    }

.btn-outline-danger[b-bveu1hl5m8] {
    background: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

    .btn-outline-danger:hover[b-bveu1hl5m8] {
        background: var(--danger-color);
        color: white;
    }

/* Loading Spinner */
.loading-spinner[b-bveu1hl5m8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.spinner-border[b-bveu1hl5m8] {
    width: 48px;
    height: 48px;
    border-width: 4px;
    color: var(--primary-color);
}

.spinner-border-sm[b-bveu1hl5m8] {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.me-2[b-bveu1hl5m8] {
    margin-right: 8px;
}

html[dir="rtl"] .me-2[b-bveu1hl5m8] {
    margin-right: 0;
    margin-left: 8px;
}

/* Modal */
.modal-backdrop[b-bveu1hl5m8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1040;
    animation: fadeIn-b-bveu1hl5m8 0.2s ease-out;
}

.modal-dialog[b-bveu1hl5m8] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    z-index: 1050;
    animation: slideIn-b-bveu1hl5m8 0.3s ease-out;
}

.modal-content[b-bveu1hl5m8] {
    background: var(--surface-color);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

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

.modal-title[b-bveu1hl5m8] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.close-btn[b-bveu1hl5m8] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .close-btn:hover[b-bveu1hl5m8] {
        background: var(--danger-color);
        color: white;
    }

.modal-body[b-bveu1hl5m8] {
    padding: 24px;
}

.backup-info[b-bveu1hl5m8] {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

    .backup-info ul[b-bveu1hl5m8] {
        margin: 8px 0 0 0;
        padding-right: 20px;
        list-style: disc;
    }

html[dir="ltr"] .backup-info ul[b-bveu1hl5m8] {
    padding-left: 20px;
    padding-right: 0;
}

.modal-footer[b-bveu1hl5m8] {
    padding: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Unauthorized Message */
.unauthorized-message[b-bveu1hl5m8] {
    text-align: center;
    padding: 64px 32px;
}

    .unauthorized-message i[b-bveu1hl5m8] {
        font-size: 64px;
        color: var(--danger-color);
        margin-bottom: 24px;
    }

    .unauthorized-message h3[b-bveu1hl5m8] {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 8px 0;
    }

    .unauthorized-message p[b-bveu1hl5m8] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

/* RTL Support */
html[dir="rtl"][b-bveu1hl5m8] {
    .action-buttons

{
    direction: ltr;
}

select.form-control[b-bveu1hl5m8] {
    background-position: left 12px center;
    padding-right: 16px;
    padding-left: 40px;
}

.input-group .form-control[b-bveu1hl5m8] {
    border-radius: 0 8px 8px 0;
    border-right: 1px solid var(--border-color);
    border-left: none;
}

.input-group-text[b-bveu1hl5m8] {
    border-radius: 8px 0 0 8px;
    border-left: 1px solid var(--border-color);
    border-right: none;
}

}

/* Dark Theme Support */
[data-theme="dark"][b-bveu1hl5m8] {
    .backup-settings-container

{
    background: var(--bg-primary);
}

.action-card[b-bveu1hl5m8],
.backup-tabs[b-bveu1hl5m8],
.modal-content[b-bveu1hl5m8] {
    background: var(--bg-secondary);
}

.settings-card[b-bveu1hl5m8] {
    background: var(--bg-tertiary);
}

.form-control[b-bveu1hl5m8] {
    background: var(--bg-quaternary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

}

/* Responsive Design */
@media (max-width: 1024px) {
    .quick-actions[b-bveu1hl5m8] {
        grid-template-columns: 1fr;
    }

    .stats-grid[b-bveu1hl5m8] {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .backup-settings-container[b-bveu1hl5m8] {
        padding: 16px;
    }

    .page-title[b-bveu1hl5m8] {
        font-size: 24px;
    }

    .action-card[b-bveu1hl5m8] {
        padding: 20px;
    }

    .create-backup[b-bveu1hl5m8] {
        flex-direction: column;
        text-align: center;
    }

    .nav-link[b-bveu1hl5m8] {
        padding: 12px 16px;
        font-size: 14px;
    }

    .tab-content[b-bveu1hl5m8] {
        padding: 16px;
    }

    .backups-table-wrapper[b-bveu1hl5m8] {
        display: none;
    }

    .backups-mobile[b-bveu1hl5m8] {
        display: block;
    }

    .settings-actions[b-bveu1hl5m8] {
        justify-content: stretch;
    }

    .btn-primary[b-bveu1hl5m8] {
        width: 100%;
    }

    .modal-dialog[b-bveu1hl5m8] {
        width: 95%;
    }
}

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

    .backup-actions[b-bveu1hl5m8] {
        flex-direction: column;
    }

        .backup-actions .btn[b-bveu1hl5m8] {
            width: 100%;
        }
}

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

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

@keyframes slideIn-b-bveu1hl5m8 {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Print Styles */
@media print {
    .quick-actions[b-bveu1hl5m8],
    .nav-tabs[b-bveu1hl5m8],
    .settings-actions[b-bveu1hl5m8],
    .action-buttons[b-bveu1hl5m8],
    .backup-actions[b-bveu1hl5m8],
    .btn[b-bveu1hl5m8] {
        display: none !important;
    }
}
/* _content/Sahelly/Components/Pages/Admin/CountriesManagement.razor.rz.scp.css */

.btn-gradient-primary[b-drwytftikn] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-drwytftikn] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-drwytftikn] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-warning[b-drwytftikn] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-gradient-warning:hover[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-gradient-danger[b-drwytftikn] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Countries Management Page */
.countries-page[b-drwytftikn] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .countries-page[b-drwytftikn]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .countries-page > *[b-drwytftikn] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-drwytftikn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-content[b-drwytftikn] {
    flex: 1;
}

.header-actions[b-drwytftikn] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.breadcrumb[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-link[b-drwytftikn] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-drwytftikn] {
        color: #667eea;
    }

.breadcrumb-separator[b-drwytftikn] {
    color: #d1d5db;
}

.breadcrumb-current[b-drwytftikn] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-drwytftikn] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-drwytftikn] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Tab Navigation */
.tab-navigation[b-drwytftikn] {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.tab-button[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

    .tab-button i[b-drwytftikn] {
        font-size: 18px;
    }

    .tab-button:hover[b-drwytftikn] {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px);
    }

    .tab-button.active[b-drwytftikn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.tab-badge[b-drwytftikn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.tab-button.active .tab-badge[b-drwytftikn] {
    background: rgba(255, 255, 255, 0.2);
}

/* Tab Content */
.tab-content[b-drwytftikn] {
    animation: fadeIn-b-drwytftikn 0.3s ease-in-out;
}

/* Statistics Cards */
.stats-grid[b-drwytftikn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-drwytftikn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-drwytftikn]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-drwytftikn] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-drwytftikn]::before {
            opacity: 1;
        }

.stat-icon[b-drwytftikn] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .stat-icon.countries[b-drwytftikn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.active[b-drwytftikn] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-icon.inactive[b-drwytftikn] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

    .stat-icon.currencies[b-drwytftikn] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

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

.stat-value[b-drwytftikn] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-drwytftikn] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Filters Section */
.filters-section[b-drwytftikn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    gap: 16px;
}

.search-box[b-drwytftikn] {
    position: relative;
    flex: 1;
}

    .search-box i[b-drwytftikn] {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #9333ea;
    }

.search-input[b-drwytftikn] {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .search-input:focus[b-drwytftikn] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-drwytftikn]::placeholder {
        color: #9ca3af;
    }

.filter-controls[b-drwytftikn] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-select[b-drwytftikn] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #4b5563;
}

    .filter-select:focus[b-drwytftikn] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-filter[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 12px;
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-filter:hover[b-drwytftikn] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

/* Tables */
.table-container[b-drwytftikn] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
}

.countries-table[b-drwytftikn],
.cities-table[b-drwytftikn] {
    width: 100%;
    border-collapse: collapse;
}

    .countries-table th[b-drwytftikn],
    .cities-table th[b-drwytftikn] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .countries-table td[b-drwytftikn],
    .cities-table td[b-drwytftikn] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .countries-table tbody tr[b-drwytftikn],
    .cities-table tbody tr[b-drwytftikn] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .countries-table tbody tr:hover[b-drwytftikn],
        .cities-table tbody tr:hover[b-drwytftikn] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .countries-table tbody tr:last-child td[b-drwytftikn],
        .cities-table tbody tr:last-child td[b-drwytftikn] {
            border-bottom: none;
        }

/* Country Info */
.country-info[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.country-flag[b-drwytftikn] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 50%;
    overflow: hidden;
}

.flag-emoji[b-drwytftikn] {
    font-size: 24px;
}

.country-name[b-drwytftikn] {
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.country-name-en[b-drwytftikn] {
    font-size: 13px;
    color: #9333ea;
    margin: 0;
}

.country-capital[b-drwytftikn] {
    font-size: 12px;
    color: #6b7280;
    margin: 4px 0 0 0;
}

.country-code[b-drwytftikn] {
    font-family: monospace;
    font-weight: 600;
    background: rgba(102, 126, 234, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    color: #4c1d95;
}

.currency-info[b-drwytftikn] {
    display: flex;
    flex-direction: column;
}

.currency-name[b-drwytftikn] {
    font-weight: 600;
    color: #1f2937;
}

.currency-code[b-drwytftikn] {
    font-size: 12px;
    color: #6b7280;
}

.phone-code[b-drwytftikn] {
    font-family: monospace;
    font-weight: 500;
    color: #4b5563;
}

.cities-count[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count[b-drwytftikn] {
    font-weight: 700;
    font-size: 18px;
    color: #4c1d95;
}

.btn-link[b-drwytftikn] {
    background: none;
    border: none;
    color: #667eea;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

    .btn-link:hover[b-drwytftikn] {
        color: #764ba2;
    }

/* Status Badge */
.status-badge[b-drwytftikn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.active[b-drwytftikn] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-drwytftikn] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .status-badge i[b-drwytftikn] {
        font-size: 8px;
    }

/* Action Buttons */
.action-buttons[b-drwytftikn] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-icon[b-drwytftikn] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    color: white;
    position: relative;
    overflow: hidden;
}

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

    .btn-icon:hover[b-drwytftikn]::before {
        width: 100px;
        height: 100px;
    }

    .btn-icon:hover[b-drwytftikn] {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

    .btn-icon.view[b-drwytftikn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .btn-icon.edit[b-drwytftikn] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .btn-icon.suspend[b-drwytftikn] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .btn-icon.activate[b-drwytftikn] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .btn-icon.delete[b-drwytftikn] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

    .btn-icon.cities[b-drwytftikn] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

/* City Info */
.city-info[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.city-icon[b-drwytftikn] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 50%;
    color: #f59e0b;
}

.city-name[b-drwytftikn] {
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.city-name-en[b-drwytftikn] {
    font-size: 13px;
    color: #9333ea;
    margin: 0;
}

.country-reference[b-drwytftikn] {
    display: flex;
    flex-direction: column;
}

.country-name[b-drwytftikn] {
    font-weight: 600;
    color: #1f2937;
}

.country-name-en[b-drwytftikn] {
    font-size: 12px;
    color: #6b7280;
}

.city-type[b-drwytftikn] {
    background: rgba(102, 126, 234, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    color: #4c1d95;
    font-size: 13px;
    font-weight: 500;
}

.shipping-cost[b-drwytftikn] {
    font-weight: 700;
    color: #4c1d95;
}

.no-cost[b-drwytftikn] {
    color: #9ca3af;
    font-style: italic;
}

/* Mobile Cards */
.countries-grid[b-drwytftikn],
.cities-grid[b-drwytftikn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.country-card[b-drwytftikn],
.city-card[b-drwytftikn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    border: 2px solid transparent;
}

    .country-card:hover[b-drwytftikn],
    .city-card:hover[b-drwytftikn] {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        border-color: rgba(102, 126, 234, 0.3);
    }

.country-card-header[b-drwytftikn],
.city-card-header[b-drwytftikn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.country-flag-large[b-drwytftikn] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 50%;
    overflow: hidden;
}

.city-icon-large[b-drwytftikn] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 50%;
    color: #f59e0b;
}

.country-card-body[b-drwytftikn],
.city-card-body[b-drwytftikn] {
    padding: 20px;
}

.country-title[b-drwytftikn],
.city-title[b-drwytftikn] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #1f2937;
}

.country-subtitle[b-drwytftikn],
.city-subtitle[b-drwytftikn] {
    font-size: 14px;
    color: #9333ea;
    margin: 0 0 16px 0;
}

.country-details[b-drwytftikn],
.city-details[b-drwytftikn] {
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    padding-top: 16px;
}

.detail-item[b-drwytftikn] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(102, 126, 234, 0.1);
}

.detail-label[b-drwytftikn] {
    color: #6b7280;
    font-size: 14px;
}

.detail-value[b-drwytftikn] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.country-card-footer[b-drwytftikn],
.city-card-footer[b-drwytftikn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px;
    background: rgba(102, 126, 234, 0.05);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.btn-card-action[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-card-action:hover[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    }

    .btn-card-action.view[b-drwytftikn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .btn-card-action.edit[b-drwytftikn] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .btn-card-action.cities[b-drwytftikn] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .btn-card-action.suspend[b-drwytftikn] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .btn-card-action.activate[b-drwytftikn] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

/* Empty State */
.empty-state[b-drwytftikn] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
}

    .empty-state i[b-drwytftikn] {
        font-size: 64px;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-state h3[b-drwytftikn] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #4c1d95;
    }

    .empty-state p[b-drwytftikn] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Loading Container */
.loading-container[b-drwytftikn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner[b-drwytftikn] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.1);
    border-left-color: #667eea;
    border-radius: 50%;
    animation: spin-b-drwytftikn 1s linear infinite;
    margin-bottom: 16px;
}

.loading-text[b-drwytftikn] {
    font-size: 18px;
    font-weight: 600;
    color: #4c1d95;
}

/* Settings Section */
.settings-section[b-drwytftikn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-title[b-drwytftikn] {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #4c1d95;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.1);
}

.settings-grid[b-drwytftikn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-bottom: 32px;
}

.setting-group[b-drwytftikn] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.group-title[b-drwytftikn] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group[b-drwytftikn] {
    margin-bottom: 20px;
}

.form-label[b-drwytftikn] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #4b5563;
}

.form-control[b-drwytftikn] {
    width: 100%;
    padding: 12px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    background-color: white;
    font-size: 15px;
    transition: all 0.3s;
}

    .form-control:focus[b-drwytftikn] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.checkbox-group[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-actions[b-drwytftikn] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid rgba(102, 126, 234, 0.1);
}

/* Modals */
.modal[b-drwytftikn] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1050;
    overflow: auto;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
}

    .modal.show[b-drwytftikn] {
        display: flex;
        align-items: center;
        justify-content: center;
        animation: modalFadeIn-b-drwytftikn 0.3s;
    }

.modal-dialog[b-drwytftikn] {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    animation: modalSlideIn-b-drwytftikn 0.3s;
}

.modal-content[b-drwytftikn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-drwytftikn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.05);
}

.modal-title[b-drwytftikn] {
    font-size: 22px;
    font-weight: 700;
    color: #4c1d95;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-close[b-drwytftikn] {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.3s;
}

    .btn-close:hover[b-drwytftikn] {
        background-color: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-drwytftikn] {
    padding: 24px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.form-grid[b-drwytftikn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.required[b-drwytftikn] {
    color: #ef4444;
    margin-left: 4px;
}

.validation-message[b-drwytftikn] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
}

.validation-summary[b-drwytftikn] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #ef4444;
}

/* Country Details Modal */
.country-details-grid[b-drwytftikn] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 24px;
}

.details-section[b-drwytftikn] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.section-title[b-drwytftikn] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #4c1d95;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-grid[b-drwytftikn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.info-item[b-drwytftikn] {
    margin-bottom: 12px;
}

    .info-item label[b-drwytftikn] {
        display: block;
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 4px;
    }

    .info-item span[b-drwytftikn] {
        font-weight: 600;
        color: #1f2937;
        font-size: 15px;
    }

.cities-list[b-drwytftikn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.city-item[b-drwytftikn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.more-cities[b-drwytftikn] {
    text-align: center;
    padding: 12px;
    color: #6b7280;
    font-style: italic;
    border-top: 1px dashed rgba(102, 126, 234, 0.1);
    margin-top: 8px;
}

.no-cities[b-drwytftikn] {
    text-align: center;
    padding: 24px 0;
    color: #6b7280;
    font-style: italic;
}

/* Import Modal */
.import-section[b-drwytftikn] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.import-instructions[b-drwytftikn] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .import-instructions h6[b-drwytftikn] {
        font-weight: 700;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .import-instructions ul[b-drwytftikn] {
        padding-left: 20px;
        margin: 0;
    }

    .import-instructions li[b-drwytftikn] {
        margin-bottom: 8px;
        color: #4b5563;
    }

.file-upload-section[b-drwytftikn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.file-input[b-drwytftikn] {
    width: 100%;
    padding: 32px;
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.05);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .file-input:hover[b-drwytftikn] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

.selected-file[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .selected-file i[b-drwytftikn] {
        font-size: 24px;
        color: #667eea;
    }

    .selected-file span[b-drwytftikn] {
        flex: 1;
        font-weight: 500;
        color: #1f2937;
    }

.btn-clear[b-drwytftikn] {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.3s;
}

    .btn-clear:hover[b-drwytftikn] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
    }

.import-progress[b-drwytftikn] {
    margin-top: 16px;
}

.progress-bar[b-drwytftikn] {
    height: 12px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-drwytftikn] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    transition: width 0.3s;
}

.progress-text[b-drwytftikn] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
}

.import-result[b-drwytftikn] {
    margin-top: 16px;
    border-top: 1px dashed rgba(102, 126, 234, 0.2);
    padding-top: 16px;
}

.result-header[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

    .result-header.success[b-drwytftikn] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .result-header.error[b-drwytftikn] {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

    .result-header i[b-drwytftikn] {
        font-size: 24px;
    }

    .result-header span[b-drwytftikn] {
        font-weight: 600;
    }

.result-stats[b-drwytftikn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.stat-item[b-drwytftikn] {
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .stat-item .stat-label[b-drwytftikn] {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 4px;
    }

    .stat-item .stat-value[b-drwytftikn] {
        font-size: 24px;
        font-weight: 700;
    }

.result-errors[b-drwytftikn] {
    background: rgba(239, 68, 68, 0.05);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(239, 68, 68, 0.1);
}

    .result-errors h6[b-drwytftikn] {
        font-weight: 700;
        margin-bottom: 12px;
        color: #dc2626;
    }

    .result-errors ul[b-drwytftikn] {
        padding-left: 20px;
        margin: 0;
    }

    .result-errors li[b-drwytftikn] {
        margin-bottom: 8px;
        color: #b91c1c;
    }

/* Delete Confirmation Modal */
.alert[b-drwytftikn] {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.alert-warning[b-drwytftikn] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert i[b-drwytftikn] {
    font-size: 20px;
}

.country-details[b-drwytftikn],
.city-details[b-drwytftikn] {
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 16px;
    text-align: center;
    font-size: 18px;
}

.btn-delete[b-drwytftikn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-delete:hover:not([disabled])[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

    .btn-delete[disabled][b-drwytftikn] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Unauthorized View */
.unauthorized-container[b-drwytftikn] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 60px auto;
}

    .unauthorized-container i[b-drwytftikn] {
        font-size: 64px;
        margin-bottom: 24px;
        color: #d04e5f;
    }

    .unauthorized-container h3[b-drwytftikn] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #4c1d95;
    }

    .unauthorized-container p[b-drwytftikn] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

/* Custom Buttons */
.btn-primary[b-drwytftikn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover:not([disabled])[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-primary[disabled][b-drwytftikn] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-secondary[b-drwytftikn] {
    background: white;
    color: #4b5563;
    border: 1px solid #d1d5db;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-secondary:hover:not([disabled])[b-drwytftikn] {
        background: #f9fafb;
        border-color: #9ca3af;
    }

.btn-export[b-drwytftikn] {
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

    .btn-export:hover[b-drwytftikn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
    }

/* Animations */
@keyframes fadeIn-b-drwytftikn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalFadeIn-b-drwytftikn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn-b-drwytftikn {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

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

/* Responsive Styles */
@media (max-width: 1200px) {
    .country-details-grid[b-drwytftikn] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 992px) {
    .page-header[b-drwytftikn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-actions[b-drwytftikn] {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .filters-section[b-drwytftikn] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .countries-page[b-drwytftikn] {
        padding: 16px;
    }

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

    .desktop-only[b-drwytftikn] {
        display: none;
    }

    .tab-navigation[b-drwytftikn] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 12px;
        margin-bottom: 24px;
    }

    .tab-button[b-drwytftikn] {
        padding: 12px 16px;
        font-size: 14px;
    }

    .modal-dialog[b-drwytftikn] {
        margin: 16px;
        max-width: calc(100% - 32px);
    }

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

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

@media (min-width: 769px) {
    .mobile-only[b-drwytftikn] {
        display: none;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .countries-page[b-drwytftikn] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .countries-page[b-drwytftikn]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-drwytftikn],
[data-theme="dark"] .filters-section[b-drwytftikn],
[data-theme="dark"] .stat-card[b-drwytftikn],
[data-theme="dark"] .table-container[b-drwytftikn],
[data-theme="dark"] .empty-state[b-drwytftikn],
[data-theme="dark"] .loading-container[b-drwytftikn],
[data-theme="dark"] .settings-section[b-drwytftikn],
[data-theme="dark"] .country-card[b-drwytftikn],
[data-theme="dark"] .city-card[b-drwytftikn],
[data-theme="dark"] .modal-content[b-drwytftikn] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .tab-button[b-drwytftikn] {
    background: rgba(30, 41, 59, 0.8);
    color: #cbd5e1;
}

    [data-theme="dark"] .tab-button:hover[b-drwytftikn] {
        background: rgba(30, 41, 59, 0.95);
    }

    [data-theme="dark"] .tab-button.active[b-drwytftikn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

[data-theme="dark"] .search-input[b-drwytftikn],
[data-theme="dark"] .filter-select[b-drwytftikn],
[data-theme="dark"] .form-control[b-drwytftikn] {
    background: rgba(30, 41, 59, 0.6);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-drwytftikn],
    [data-theme="dark"] .filter-select:focus[b-drwytftikn],
    [data-theme="dark"] .form-control:focus[b-drwytftikn] {
        background: rgba(30, 41, 59, 0.8);
        border-color: #667eea;
    }

[data-theme="dark"] .country-name[b-drwytftikn],
[data-theme="dark"] .city-name[b-drwytftikn],
[data-theme="dark"] .country-title[b-drwytftikn],
[data-theme="dark"] .city-title[b-drwytftikn],
[data-theme="dark"] .detail-value[b-drwytftikn],
[data-theme="dark"] .info-item span[b-drwytftikn],
[data-theme="dark"] .modal-title[b-drwytftikn] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-secondary[b-drwytftikn] {
    background: rgba(30, 41, 59, 0.8);
    border-color: #475569;
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-secondary:hover[b-drwytftikn] {
        background: rgba(30, 41, 59, 0.95);
        border-color: #64748b;
    }

[data-theme="dark"] .setting-group[b-drwytftikn],
[data-theme="dark"] .details-section[b-drwytftikn],
[data-theme="dark"] .selected-file[b-drwytftikn],
[data-theme="dark"] .stat-item[b-drwytftikn],
[data-theme="dark"] .city-item[b-drwytftikn] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .import-instructions[b-drwytftikn],
[data-theme="dark"] .file-input[b-drwytftikn] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .page-title[b-drwytftikn],
[data-theme="dark"] .stat-value[b-drwytftikn],
[data-theme="dark"] .empty-state i[b-drwytftikn] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle[b-drwytftikn],
[data-theme="dark"] .breadcrumb-link[b-drwytftikn],
[data-theme="dark"] .stat-label[b-drwytftikn],
[data-theme="dark"] .detail-label[b-drwytftikn],
[data-theme="dark"] .form-label[b-drwytftikn],
[data-theme="dark"] .country-name-en[b-drwytftikn],
[data-theme="dark"] .city-name-en[b-drwytftikn],
[data-theme="dark"] .country-subtitle[b-drwytftikn],
[data-theme="dark"] .city-subtitle[b-drwytftikn] {
    color: #94a3b8;
}

[data-theme="dark"] .result-header.success[b-drwytftikn] {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

[data-theme="dark"] .result-header.error[b-drwytftikn] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

[data-theme="dark"] .country-details[b-drwytftikn],
[data-theme="dark"] .city-details[b-drwytftikn] {
    background: rgba(30, 41, 59, 0.5);
}

[data-theme="dark"] .alert-danger[b-drwytftikn] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

[data-theme="dark"] .alert-warning[b-drwytftikn] {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}
/* _content/Sahelly/Components/Pages/Admin/CustomerActivity.razor.rz.scp.css */
/* Customer Activity Page - Modern Professional Design
   Based on Sahelly Design System and app.css variables
   Matching the design language of Users.razor.css */

/* Page Container */
.admin-customer-activity-page[b-mmbo3c2kjh] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-customer-activity-page[b-mmbo3c2kjh]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-customer-activity-page > *[b-mmbo3c2kjh] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-mmbo3c2kjh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.header-content[b-mmbo3c2kjh] {
    flex: 1;
}

/* Modern Breadcrumbs */
.breadcrumb-modern[b-mmbo3c2kjh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-item[b-mmbo3c2kjh] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

    .breadcrumb-item:hover[b-mmbo3c2kjh] {
        color: #667eea;
    }

.separator[b-mmbo3c2kjh] {
    color: #d1d5db;
}

.breadcrumb-current[b-mmbo3c2kjh] {
    color: #4c1d95;
    font-weight: 600;
}

/* Header Title Section */
.header-title-section[b-mmbo3c2kjh] {
    margin-top: 12px;
}

.page-title-modern[b-mmbo3c2kjh] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-icon[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.page-subtitle-enhanced[b-mmbo3c2kjh] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Header Actions */
.header-actions[b-mmbo3c2kjh] {
    display: flex;
    gap: 12px;
    margin-left: 20px;
}

.btn-action-primary[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-primary:hover[b-mmbo3c2kjh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-action-secondary[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-secondary:hover[b-mmbo3c2kjh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-action-success[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-success:hover[b-mmbo3c2kjh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Loading Container */
.loading-container[b-mmbo3c2kjh] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    width: 100%;
}

.spinner-container[b-mmbo3c2kjh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner[b-mmbo3c2kjh] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-right-color: #667eea;
    animation: spin-b-mmbo3c2kjh 0.8s linear infinite;
}

.loading-text[b-mmbo3c2kjh] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

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

/* Error Container */
.error-container[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.error-icon[b-mmbo3c2kjh] {
    font-size: 64px;
    color: #d04e5f;
    margin-bottom: 16px;
}

.error-container h3[b-mmbo3c2kjh] {
    font-size: 24px;
    color: #4c1d95;
    margin-bottom: 8px;
}

.error-container p[b-mmbo3c2kjh] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
    max-width: 500px;
}

.btn-gradient-primary[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-gradient-primary:hover[b-mmbo3c2kjh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Activity Content Container */
.activity-content[b-mmbo3c2kjh] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Activity Filters */
.activity-filters[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.filters-container[b-mmbo3c2kjh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    align-items: end;
}

.filter-group[b-mmbo3c2kjh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-group label[b-mmbo3c2kjh] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.filter-select[b-mmbo3c2kjh], .filter-date[b-mmbo3c2kjh] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    color: #4b5563;
    transition: all 0.3s;
    font-size: 15px;
    outline: none;
}

    .filter-select:focus[b-mmbo3c2kjh], .filter-date:focus[b-mmbo3c2kjh] {
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.date-inputs[b-mmbo3c2kjh] {
    position: relative;
}

.btn-reset-filters[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: end;
    height: 46px;
}

    .btn-reset-filters:hover[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
        transform: translateY(-2px);
    }

/* Statistics Overview */
.statistics-overview[b-mmbo3c2kjh] {
    margin: 0;
}

.stats-grid[b-mmbo3c2kjh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.stat-card[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-mmbo3c2kjh]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-mmbo3c2kjh] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-mmbo3c2kjh]::before {
            opacity: 1;
        }

.stat-icon[b-mmbo3c2kjh] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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

.stat-card.purchases .stat-icon[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.payments .stat-icon[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.activity-period .stat-icon[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

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

    .stat-content h3[b-mmbo3c2kjh] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 4px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

    .stat-content p[b-mmbo3c2kjh] {
        font-size: 15px;
        color: #6b7280;
        margin: 0 0 12px 0;
        font-weight: 500;
    }

.stat-breakdown[b-mmbo3c2kjh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

    .stat-breakdown span[b-mmbo3c2kjh] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .stat-breakdown span[b-mmbo3c2kjh]::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

.completed[b-mmbo3c2kjh]::before {
    background: #10b981;
}

.pending[b-mmbo3c2kjh]::before {
    background: #f59e0b;
}

.cancelled[b-mmbo3c2kjh]::before {
    background: #ef4444;
}

.paid[b-mmbo3c2kjh]::before {
    background: #10b981;
}

.due[b-mmbo3c2kjh]::before {
    background: #f59e0b;
}

.on-time[b-mmbo3c2kjh]::before {
    background: #10b981;
}

.late[b-mmbo3c2kjh]::before {
    background: #ef4444;
}

.first-order[b-mmbo3c2kjh]::before {
    background: #3b82f6;
}

.last-order[b-mmbo3c2kjh]::before {
    background: #8b5cf6;
}

/* Activity Timeline Section */
.activity-timeline-section[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-header[b-mmbo3c2kjh] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.section-title[b-mmbo3c2kjh] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4c1d95;
}

.timeline-controls[b-mmbo3c2kjh] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.activity-count[b-mmbo3c2kjh] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Activity Timeline */
.activity-timeline[b-mmbo3c2kjh] {
    padding: 24px;
}

.timeline-day[b-mmbo3c2kjh] {
    margin-bottom: 32px;
}

    .timeline-day:last-child[b-mmbo3c2kjh] {
        margin-bottom: 0;
    }

.day-header[b-mmbo3c2kjh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.day-title[b-mmbo3c2kjh] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 700;
    margin: 0;
}

.day-count[b-mmbo3c2kjh] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    padding: 4px 12px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
}

.day-activities[b-mmbo3c2kjh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

    .day-activities[b-mmbo3c2kjh]::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 24px;
        width: 2px;
        background: linear-gradient(to bottom, rgba(102, 126, 234, 0.5) 0%, rgba(118, 75, 162, 0.5) 100%);
        z-index: 0;
    }

.activity-item[b-mmbo3c2kjh] {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 4px solid transparent;
}

    .activity-item:hover[b-mmbo3c2kjh] {
        transform: translateX(5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.9);
    }

.activity-icon[b-mmbo3c2kjh] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border: 3px solid white;
    z-index: 2;
}

.activity-content[b-mmbo3c2kjh] {
    flex: 1;
}

.activity-header[b-mmbo3c2kjh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.activity-title[b-mmbo3c2kjh] {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.activity-time[b-mmbo3c2kjh] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    padding: 2px 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
}

.activity-description[b-mmbo3c2kjh] {
    font-size: 15px;
    color: #4b5563;
    margin: 0 0 12px 0;
}

/* Activity Type Styles */
.order-activity[b-mmbo3c2kjh] {
    border-right-color: #667eea;
}

    .order-activity .activity-icon[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

.payment-activity[b-mmbo3c2kjh] {
    border-right-color: #10b981;
}

    .payment-activity .activity-icon[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    }

.delivery-activity[b-mmbo3c2kjh] {
    border-right-color: #f59e0b;
}

    .delivery-activity .activity-icon[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    }

.registration-activity[b-mmbo3c2kjh] {
    border-right-color: #8b5cf6;
}

    .registration-activity .activity-icon[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    }

.profile-activity[b-mmbo3c2kjh] {
    border-right-color: #ec4899;
}

    .profile-activity .activity-icon[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    }

.login-activity[b-mmbo3c2kjh] {
    border-right-color: #3b82f6;
}

    .login-activity .activity-icon[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    }

.admin-activity[b-mmbo3c2kjh] {
    border-right-color: #ef4444;
}

    .admin-activity .activity-icon[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    }

.default-activity[b-mmbo3c2kjh] {
    border-right-color: #9ca3af;
}

    .default-activity .activity-icon[b-mmbo3c2kjh] {
        background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
    }

/* Activity Details */
.activity-details[b-mmbo3c2kjh] {
    border-top: 1px dashed rgba(102, 126, 234, 0.3);
    padding-top: 12px;
}

.btn-toggle-details[b-mmbo3c2kjh] {
    background: transparent;
    border: none;
    color: #667eea;
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-toggle-details:hover[b-mmbo3c2kjh] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
    }

.details-content[b-mmbo3c2kjh] {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    animation: fadeIn-b-mmbo3c2kjh 0.3s ease;
}

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

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

/* Activity Actions */
.activity-actions[b-mmbo3c2kjh] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.btn-link[b-mmbo3c2kjh] {
    background: transparent;
    border: 1px solid #667eea;
    color: #667eea;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .btn-link:hover[b-mmbo3c2kjh] {
        background: #667eea;
        color: white;
    }

/* Empty Timeline */
.empty-timeline[b-mmbo3c2kjh] {
    padding: 60px 20px;
    text-align: center;
}

.empty-icon[b-mmbo3c2kjh] {
    font-size: 60px;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-timeline h3[b-mmbo3c2kjh] {
    font-size: 24px;
    color: #4c1d95;
    margin-bottom: 8px;
}

.empty-timeline p[b-mmbo3c2kjh] {
    font-size: 16px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto;
}

/* Monthly Activity Chart */
.monthly-activity-section[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.monthly-chart-container[b-mmbo3c2kjh] {
    padding: 24px;
    height: 400px;
}

/* Unauthorized Container */
.unauthorized-container[b-mmbo3c2kjh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-height: 60vh;
}

.unauthorized-icon[b-mmbo3c2kjh] {
    font-size: 80px;
    color: #f5576c;
    margin-bottom: 24px;
}

.unauthorized-container h2[b-mmbo3c2kjh] {
    font-size: 32px;
    color: #4c1d95;
    margin-bottom: 16px;
}

.unauthorized-container p[b-mmbo3c2kjh] {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 32px;
    max-width: 500px;
}

/* Dark Theme Support */
[data-theme="dark"] .admin-customer-activity-page[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-customer-activity-page[b-mmbo3c2kjh]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-mmbo3c2kjh],
[data-theme="dark"] .activity-filters[b-mmbo3c2kjh],
[data-theme="dark"] .activity-timeline-section[b-mmbo3c2kjh],
[data-theme="dark"] .monthly-activity-section[b-mmbo3c2kjh],
[data-theme="dark"] .error-container[b-mmbo3c2kjh],
[data-theme="dark"] .unauthorized-container[b-mmbo3c2kjh],
[data-theme="dark"] .stat-card[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .activity-item[b-mmbo3c2kjh] {
    background: rgba(30, 41, 59, 0.6);
}

    [data-theme="dark"] .activity-item:hover[b-mmbo3c2kjh] {
        background: rgba(30, 41, 59, 0.8);
    }

[data-theme="dark"] .section-header[b-mmbo3c2kjh] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .day-header[b-mmbo3c2kjh] {
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .day-activities[b-mmbo3c2kjh]::before {
    background: linear-gradient(to bottom, rgba(129, 140, 248, 0.5) 0%, rgba(167, 139, 250, 0.5) 100%);
}

[data-theme="dark"] .filter-select[b-mmbo3c2kjh],
[data-theme="dark"] .filter-date[b-mmbo3c2kjh] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-select:focus[b-mmbo3c2kjh],
    [data-theme="dark"] .filter-date:focus[b-mmbo3c2kjh] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .day-title[b-mmbo3c2kjh] {
    color: #e2e8f0;
}

[data-theme="dark"] .day-count[b-mmbo3c2kjh] {
    background: rgba(129, 140, 248, 0.1);
}

[data-theme="dark"] .activity-title[b-mmbo3c2kjh] {
    color: #e2e8f0;
}

[data-theme="dark"] .activity-time[b-mmbo3c2kjh] {
    background: rgba(129, 140, 248, 0.1);
}

[data-theme="dark"] .activity-description[b-mmbo3c2kjh] {
    color: #cbd5e1;
}

[data-theme="dark"] .details-content[b-mmbo3c2kjh] {
    background: rgba(30, 41, 59, 0.5);
    color: #cbd5e1;
}

[data-theme="dark"] .section-title[b-mmbo3c2kjh],
[data-theme="dark"] .filter-group label[b-mmbo3c2kjh] {
    color: #e2e8f0;
}

/* Responsive Design */
@media (max-width: 992px) {
    .page-header-enhanced[b-mmbo3c2kjh] {
        flex-direction: column;
    }

    .header-actions[b-mmbo3c2kjh] {
        margin-left: 0;
        margin-top: 20px;
        width: 100%;
        justify-content: flex-end;
    }

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

@media (max-width: 768px) {
    .admin-customer-activity-page[b-mmbo3c2kjh] {
        padding: 16px;
    }

    .page-header-enhanced[b-mmbo3c2kjh] {
        padding: 20px;
        margin-bottom: 24px;
    }

    .page-title-modern[b-mmbo3c2kjh] {
        font-size: 24px;
    }

    .title-icon[b-mmbo3c2kjh] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .header-actions[b-mmbo3c2kjh] {
        flex-wrap: wrap;
        gap: 8px;
    }

        .header-actions button[b-mmbo3c2kjh] {
            flex: 1;
            padding: 8px 16px;
            font-size: 14px;
        }

    .filters-container[b-mmbo3c2kjh] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stats-grid[b-mmbo3c2kjh] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-mmbo3c2kjh] {
        padding: 20px;
    }

    .activity-item[b-mmbo3c2kjh] {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .activity-icon[b-mmbo3c2kjh] {
        align-self: flex-start;
    }

    .activity-header[b-mmbo3c2kjh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .day-activities[b-mmbo3c2kjh]::before {
        left: 24px;
    }

    .monthly-chart-container[b-mmbo3c2kjh] {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .breadcrumb-modern[b-mmbo3c2kjh] {
        font-size: 12px;
    }

    .page-title-modern[b-mmbo3c2kjh] {
        font-size: 22px;
    }

    .stat-card[b-mmbo3c2kjh] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .activity-actions[b-mmbo3c2kjh] {
        flex-direction: column;
    }

    .btn-link[b-mmbo3c2kjh] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/Sahelly/Components/Pages/Admin/CustomerDetails.razor.rz.scp.css */
/* Admin Customer Details Page - Modern Professional Design
   Based on app.css architecture and Users.razor.css styling */

/* Page Container */
.admin-customer-details-page[b-7a5pxz77t3] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-customer-details-page[b-7a5pxz77t3]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-customer-details-page > *[b-7a5pxz77t3] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Header Section */
.page-header-enhanced[b-7a5pxz77t3] {
    margin-bottom: 32px;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-content[b-7a5pxz77t3] {
    flex: 1;
    min-width: 300px;
}

.breadcrumb-modern[b-7a5pxz77t3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item[b-7a5pxz77t3] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-7a5pxz77t3] {
        color: #667eea;
    }

.separator[b-7a5pxz77t3] {
    color: #d1d5db;
}

.breadcrumb-current[b-7a5pxz77t3] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-7a5pxz77t3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title-modern[b-7a5pxz77t3] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-icon[b-7a5pxz77t3] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
}

.page-subtitle-enhanced[b-7a5pxz77t3] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.customer-status[b-7a5pxz77t3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .customer-status.active[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .customer-status.inactive[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.header-actions[b-7a5pxz77t3] {
    display: flex;
    gap: 12px;
}

.btn-action-primary[b-7a5pxz77t3] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-primary:hover[b-7a5pxz77t3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-action-secondary[b-7a5pxz77t3] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-secondary:hover[b-7a5pxz77t3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-action-danger[b-7a5pxz77t3] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-danger:hover[b-7a5pxz77t3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

.btn-action-success[b-7a5pxz77t3] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-success:hover[b-7a5pxz77t3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Main Content */
.details-content[b-7a5pxz77t3] {
    display: grid;
    gap: 24px;
}

/* Overview Cards */
.overview-cards[b-7a5pxz77t3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 8px;
}

.overview-card[b-7a5pxz77t3] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .overview-card[b-7a5pxz77t3]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .overview-card:hover[b-7a5pxz77t3] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .overview-card:hover[b-7a5pxz77t3]::before {
            opacity: 1;
        }

    .overview-card.orders .card-icon[b-7a5pxz77t3] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .overview-card.purchases .card-icon[b-7a5pxz77t3] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .overview-card.credit .card-icon[b-7a5pxz77t3] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .overview-card.registration .card-icon[b-7a5pxz77t3] {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    }

.card-icon[b-7a5pxz77t3] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-content[b-7a5pxz77t3] {
    flex: 1;
}

    .card-content h3[b-7a5pxz77t3] {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 4px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .card-content p[b-7a5pxz77t3] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Content Sections */
.content-sections[b-7a5pxz77t3] {
    display: grid;
    gap: 24px;
}

.info-section[b-7a5pxz77t3] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

    .info-section:hover[b-7a5pxz77t3] {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        transform: translateY(-3px);
    }

.section-header[b-7a5pxz77t3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.section-title[b-7a5pxz77t3] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4c1d95;
}

    .section-title i[b-7a5pxz77t3] {
        color: #667eea;
    }

.section-content[b-7a5pxz77t3] {
    padding: 24px;
}

/* Information Grid */
.info-grid[b-7a5pxz77t3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.info-item[b-7a5pxz77t3] {
    padding: 8px 0;
}

.info-label[b-7a5pxz77t3] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .info-label i[b-7a5pxz77t3] {
        color: #667eea;
        width: 16px;
        text-align: center;
    }

.info-value[b-7a5pxz77t3] {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.email-link[b-7a5pxz77t3], .phone-link[b-7a5pxz77t3] {
    color: #667eea;
    text-decoration: none;
    transition: color 0.2s;
}

    .email-link:hover[b-7a5pxz77t3], .phone-link:hover[b-7a5pxz77t3] {
        color: #4c1d95;
        text-decoration: underline;
    }

.customer-code[b-7a5pxz77t3] {
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 6px;
    font-family: monospace;
    letter-spacing: 1px;
}

/* Status Badge */
.status-badge[b-7a5pxz77t3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.active[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    /* Order Status Badges */
    .status-badge.pending[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(251, 191, 36, 0.3);
    }

    .status-badge.processing[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
        color: #2563eb;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .status-badge.completed[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .status-badge.cancelled[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .status-badge.shipped[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(67, 56, 202, 0.2) 100%);
        color: #4f46e5;
        border: 1px solid rgba(79, 70, 229, 0.3);
    }

    .status-badge.delivered[b-7a5pxz77t3] {
        background: linear-gradient(135deg, rgba(5, 150, 105, 0.2) 0%, rgba(4, 120, 87, 0.2) 100%);
        color: #047857;
        border: 1px solid rgba(5, 150, 105, 0.3);
    }

/* Agent Info */
.agent-info[b-7a5pxz77t3] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.agent-avatar[b-7a5pxz77t3] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
}

    .agent-avatar img[b-7a5pxz77t3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.avatar-placeholder[b-7a5pxz77t3] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
}

.agent-details[b-7a5pxz77t3] {
    flex: 1;
}

    .agent-details h4[b-7a5pxz77t3] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 8px 0;
        color: #4c1d95;
    }

    .agent-details p[b-7a5pxz77t3] {
        font-size: 14px;
        margin: 0 0 4px 0;
        color: #6b7280;
    }

/* Orders Table */
.orders-table[b-7a5pxz77t3] {
    overflow-x: auto;
}

    .orders-table table[b-7a5pxz77t3] {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .orders-table th[b-7a5pxz77t3] {
        padding: 16px;
        text-align: right;
        font-size: 14px;
        color: #6b7280;
        font-weight: 600;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
        text-transform: uppercase;
    }

    .orders-table td[b-7a5pxz77t3] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-size: 14px;
        color: #4b5563;
    }

    .orders-table tbody tr[b-7a5pxz77t3] {
        transition: all 0.3s;
    }

        .orders-table tbody tr:hover[b-7a5pxz77t3] {
            background-color: rgba(102, 126, 234, 0.05);
            transform: scale(1.01);
        }

.order-link[b-7a5pxz77t3] {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .order-link:hover[b-7a5pxz77t3] {
        color: #4c1d95;
        text-decoration: underline;
    }

.btn-link[b-7a5pxz77t3] {
    background: transparent;
    border: none;
    color: #667eea;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-link:hover[b-7a5pxz77t3] {
        color: #4c1d95;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 8px;
    }

/* Loading & Error States */
.loading-container[b-7a5pxz77t3],
.error-container[b-7a5pxz77t3] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

.spinner-container[b-7a5pxz77t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner[b-7a5pxz77t3] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-7a5pxz77t3 1s linear infinite;
}

.loading-text[b-7a5pxz77t3] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

.error-icon[b-7a5pxz77t3] {
    font-size: 60px;
    margin-bottom: 20px;
    color: #ef4444;
}

.error-container h3[b-7a5pxz77t3] {
    font-size: 24px;
    margin-bottom: 12px;
    color: #4c1d95;
}

.error-container p[b-7a5pxz77t3] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
}

.btn-gradient-primary[b-7a5pxz77t3] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-gradient-primary:hover[b-7a5pxz77t3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Unauthorized Access */
.unauthorized-container[b-7a5pxz77t3] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 100px auto;
    max-width: 500px;
}

.unauthorized-icon[b-7a5pxz77t3] {
    font-size: 80px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #f87171 0%, #f43f5e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.unauthorized-container h2[b-7a5pxz77t3] {
    font-size: 28px;
    margin-bottom: 16px;
    color: #4c1d95;
}

.unauthorized-container p[b-7a5pxz77t3] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 32px;
}

/* Animations */
@keyframes spin-b-7a5pxz77t3 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .page-header-enhanced[b-7a5pxz77t3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-7a5pxz77t3] {
        width: 100%;
        justify-content: flex-start;
    }

    .overview-cards[b-7a5pxz77t3] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-customer-details-page[b-7a5pxz77t3] {
        padding: 16px;
    }

    .page-header-enhanced[b-7a5pxz77t3] {
        padding: 20px;
        margin-bottom: 24px;
    }

    .page-title-modern[b-7a5pxz77t3] {
        font-size: 26px;
    }

    .title-icon[b-7a5pxz77t3] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .overview-cards[b-7a5pxz77t3] {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        gap: 16px;
    }

    .overview-card[b-7a5pxz77t3] {
        padding: 16px;
    }

    .card-icon[b-7a5pxz77t3] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .section-header[b-7a5pxz77t3] {
        padding: 16px;
    }

    .section-content[b-7a5pxz77t3] {
        padding: 16px;
    }

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

    .agent-info[b-7a5pxz77t3] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .agent-avatar[b-7a5pxz77t3] {
        margin: 0 auto;
    }

    .orders-table th[b-7a5pxz77t3],
    .orders-table td[b-7a5pxz77t3] {
        padding: 12px 8px;
        font-size: 13px;
    }
}

/* RTL Support */
html[dir="rtl"] .orders-table th[b-7a5pxz77t3],
html[dir="rtl"] .orders-table td[b-7a5pxz77t3] {
    text-align: left;
}

html[dir="rtl"] .btn-link i[b-7a5pxz77t3] {
    transform: rotate(180deg);
}

/* Dark Theme Support */
[data-theme="dark"] .admin-customer-details-page[b-7a5pxz77t3] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-customer-details-page[b-7a5pxz77t3]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-7a5pxz77t3],
[data-theme="dark"] .overview-card[b-7a5pxz77t3],
[data-theme="dark"] .info-section[b-7a5pxz77t3],
[data-theme="dark"] .loading-container[b-7a5pxz77t3],
[data-theme="dark"] .error-container[b-7a5pxz77t3],
[data-theme="dark"] .unauthorized-container[b-7a5pxz77t3] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-7a5pxz77t3] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-7a5pxz77t3] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-7a5pxz77t3] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title-modern[b-7a5pxz77t3] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .card-content h3[b-7a5pxz77t3] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .card-content p[b-7a5pxz77t3],
[data-theme="dark"] .info-label[b-7a5pxz77t3],
[data-theme="dark"] .page-subtitle-enhanced[b-7a5pxz77t3],
[data-theme="dark"] .loading-text[b-7a5pxz77t3] {
    color: #9ca3af;
}

[data-theme="dark"] .info-value[b-7a5pxz77t3] {
    color: #e2e8f0;
}

[data-theme="dark"] .section-header[b-7a5pxz77t3] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .section-title[b-7a5pxz77t3] {
    color: #e2e8f0;
}

    [data-theme="dark"] .section-title i[b-7a5pxz77t3],
    [data-theme="dark"] .info-label i[b-7a5pxz77t3] {
        color: #a78bfa;
    }

[data-theme="dark"] .email-link[b-7a5pxz77t3],
[data-theme="dark"] .phone-link[b-7a5pxz77t3],
[data-theme="dark"] .order-link[b-7a5pxz77t3],
[data-theme="dark"] .btn-link[b-7a5pxz77t3] {
    color: #a78bfa;
}

    [data-theme="dark"] .email-link:hover[b-7a5pxz77t3],
    [data-theme="dark"] .phone-link:hover[b-7a5pxz77t3],
    [data-theme="dark"] .order-link:hover[b-7a5pxz77t3],
    [data-theme="dark"] .btn-link:hover[b-7a5pxz77t3] {
        color: #c084fc;
    }

[data-theme="dark"] .orders-table th[b-7a5pxz77t3] {
    color: #9ca3af;
    border-bottom: 2px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .orders-table td[b-7a5pxz77t3] {
    color: #e2e8f0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .orders-table tbody tr:hover[b-7a5pxz77t3] {
    background-color: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .agent-details h4[b-7a5pxz77t3] {
    color: #e2e8f0;
}

[data-theme="dark"] .agent-details p[b-7a5pxz77t3] {
    color: #9ca3af;
}

[data-theme="dark"] .error-container h3[b-7a5pxz77t3],
[data-theme="dark"] .unauthorized-container h2[b-7a5pxz77t3] {
    color: #e2e8f0;
}

[data-theme="dark"] .error-container p[b-7a5pxz77t3],
[data-theme="dark"] .unauthorized-container p[b-7a5pxz77t3] {
    color: #9ca3af;
}

[data-theme="dark"] .customer-code[b-7a5pxz77t3] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-7a5pxz77t3],
    *[b-7a5pxz77t3]::before,
    *[b-7a5pxz77t3]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus Accessibility */
button:focus-visible[b-7a5pxz77t3],
a:focus-visible[b-7a5pxz77t3] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}
/* _content/Sahelly/Components/Pages/Admin/Dashboard_admin.razor.rz.scp.css */

/* Admin Dashboard Page Styles
   Based on the professional architecture from app.css
   and design elements from Users.razor.css */

/* Page Container */
.admin-dashboard-page[b-mp5oktzums] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-dashboard-page[b-mp5oktzums]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-dashboard-page > *[b-mp5oktzums] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-mp5oktzums] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-mp5oktzums] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-mp5oktzums] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-mp5oktzums] {
        color: #667eea;
    }

.breadcrumb-separator[b-mp5oktzums] {
    color: #d1d5db;
}

.breadcrumb-current[b-mp5oktzums] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-mp5oktzums] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-mp5oktzums] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Loading Container */
.loading-container[b-mp5oktzums] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner-container[b-mp5oktzums] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner[b-mp5oktzums] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-mp5oktzums 0.8s linear infinite;
}

.loading-text[b-mp5oktzums] {
    color: #667eea;
    font-weight: 600;
    font-size: 18px;
}

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

/* Error Container */
.error-container[b-mp5oktzums] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .error-container i[b-mp5oktzums] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .error-container h2[b-mp5oktzums] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #1f2937;
    }

    .error-container p[b-mp5oktzums] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Statistics Grid */
.stats-grid[b-mp5oktzums] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-mp5oktzums]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-mp5oktzums] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-mp5oktzums]::before {
            opacity: 1;
        }

.stat-icon[b-mp5oktzums] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.merchants .stat-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.users .stat-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.revenue .stat-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.tasks .stat-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

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

.stat-title[b-mp5oktzums] {
    font-size: 16px;
    color: #6b7280;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.stat-value[b-mp5oktzums] {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-subtitle[b-mp5oktzums] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.stat-change[b-mp5oktzums] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

    .stat-change.positive[b-mp5oktzums] {
        color: #10b981;
    }

    .stat-change.negative[b-mp5oktzums] {
        color: #ef4444;
    }

.stat-action[b-mp5oktzums] {
    margin-top: 12px;
}

.action-link[b-mp5oktzums] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667eea;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
}

    .action-link:hover[b-mp5oktzums] {
        color: #4c1d95;
        transform: translateX(4px);
    }

/* Quick Actions Section */
.quick-actions-section[b-mp5oktzums] {
    margin-bottom: 32px;
}

.section-title[b-mp5oktzums] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1f2937;
    position: relative;
    padding-left: 16px;
}

    .section-title[b-mp5oktzums]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 4px;
    }

.quick-actions-grid[b-mp5oktzums] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.action-card[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .action-card i[b-mp5oktzums] {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .action-card span[b-mp5oktzums] {
        font-size: 15px;
        font-weight: 600;
        text-align: center;
    }

    .action-card[b-mp5oktzums]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .action-card:hover[b-mp5oktzums] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

        .action-card:hover[b-mp5oktzums]::before {
            opacity: 1;
        }

    .action-card.primary[b-mp5oktzums] {
        color: #667eea;
        border-left: 3px solid #667eea;
    }

    .action-card.success[b-mp5oktzums] {
        color: #10b981;
        border-left: 3px solid #10b981;
    }

    .action-card.warning[b-mp5oktzums] {
        color: #f59e0b;
        border-left: 3px solid #f59e0b;
    }

    .action-card.danger[b-mp5oktzums] {
        color: #ef4444;
        border-left: 3px solid #ef4444;
    }

    .action-card.info[b-mp5oktzums] {
        color: #3b82f6;
        border-left: 3px solid #3b82f6;
    }

    .action-card.secondary[b-mp5oktzums] {
        color: #8b5cf6;
        border-left: 3px solid #8b5cf6;
    }

    .action-card .badge[b-mp5oktzums] {
        position: absolute;
        top: 10px;
        right: 10px;
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        color: white;
        font-size: 12px;
        font-weight: 700;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    }

/* Charts Section */
.charts-section[b-mp5oktzums] {
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.chart-container[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

    .chart-container.large[b-mp5oktzums] {
        grid-column: span 2;
    }

.chart-header[b-mp5oktzums] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.chart-title[b-mp5oktzums] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.chart-controls[b-mp5oktzums] {
    display: flex;
    gap: 8px;
}

.chart-control[b-mp5oktzums] {
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
    font-size: 14px;
    font-weight: 600;
}

    .chart-control:hover[b-mp5oktzums] {
        background: rgba(102, 126, 234, 0.2);
        color: #667eea;
    }

    .chart-control.active[b-mp5oktzums] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

.chart-body[b-mp5oktzums] {
    padding: 24px;
    height: 300px;
    position: relative;
}

/* Tables Section */
.tables-section[b-mp5oktzums] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.table-container[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.table-header[b-mp5oktzums] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.table-title[b-mp5oktzums] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.view-all-link[b-mp5oktzums] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667eea;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
}

    .view-all-link:hover[b-mp5oktzums] {
        color: #4c1d95;
        transform: translateX(4px);
    }

.refresh-btn[b-mp5oktzums] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .refresh-btn:hover[b-mp5oktzums] {
        background: rgba(102, 126, 234, 0.2);
        transform: rotate(180deg);
    }

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

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

.table-body[b-mp5oktzums] {
    padding: 0;
}

.data-table[b-mp5oktzums] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-mp5oktzums] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #6b7280;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        white-space: nowrap;
    }

    .data-table td[b-mp5oktzums] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .data-table tbody tr[b-mp5oktzums] {
        transition: all 0.3s;
    }

        .data-table tbody tr:hover[b-mp5oktzums] {
            background: rgba(102, 126, 234, 0.05);
        }

        .data-table tbody tr:last-child td[b-mp5oktzums] {
            border-bottom: none;
        }

/* Specific Table Cell Styles */
.rank-cell[b-mp5oktzums] {
    width: 60px;
    text-align: center;
}

.rank-badge[b-mp5oktzums] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    color: white;
}

    .rank-badge.rank-1[b-mp5oktzums] {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
        box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    }

    .rank-badge.rank-2[b-mp5oktzums] {
        background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
        box-shadow: 0 2px 6px rgba(148, 163, 184, 0.3);
    }

    .rank-badge.rank-3[b-mp5oktzums] {
        background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
        box-shadow: 0 2px 6px rgba(180, 83, 9, 0.3);
    }

.merchant-info[b-mp5oktzums] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.merchant-name[b-mp5oktzums] {
    font-weight: 600;
    color: #1f2937;
}

.merchant-code[b-mp5oktzums] {
    font-size: 12px;
    color: #6b7280;
}

.revenue-cell[b-mp5oktzums] {
    font-weight: 700;
    color: #10b981;
}

.orders-cell[b-mp5oktzums] {
    font-weight: 600;
    color: #1f2937;
}

.growth-cell[b-mp5oktzums] {
    width: 100px;
}

.growth-badge[b-mp5oktzums] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

    .growth-badge.positive[b-mp5oktzums] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .growth-badge.negative[b-mp5oktzums] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.actions-cell[b-mp5oktzums] {
    text-align: center;
    width: 60px;
}

.btn-icon[b-mp5oktzums] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-icon:hover[b-mp5oktzums] {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Activities List */
.activities-list[b-mp5oktzums] {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.activity-item[b-mp5oktzums] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

    .activity-item:hover[b-mp5oktzums] {
        background: rgba(102, 126, 234, 0.05);
        border-radius: 8px;
    }

    .activity-item:last-child[b-mp5oktzums] {
        border-bottom: none;
    }

.activity-icon[b-mp5oktzums] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

.merchant-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

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

.payment-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.product-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.user-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.system-icon[b-mp5oktzums] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.activity-content[b-mp5oktzums] {
    flex: 1;
}

.activity-text[b-mp5oktzums] {
    margin: 0 0 4px 0;
    color: #1f2937;
    font-size: 15px;
}

.activity-meta[b-mp5oktzums] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
}

.activity-user[b-mp5oktzums] {
    font-weight: 600;
}

.activity-time[b-mp5oktzums] {
    color: #9ca3af;
}

.activity-value[b-mp5oktzums] {
    font-weight: 700;
    font-size: 16px;
    color: #10b981;
    white-space: nowrap;
}

.no-data[b-mp5oktzums] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: #9ca3af;
    text-align: center;
}

    .no-data i[b-mp5oktzums] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-data p[b-mp5oktzums] {
        font-size: 16px;
        font-weight: 500;
    }

/* System Health Section */
.system-health-section[b-mp5oktzums] {
    margin-bottom: 32px;
}

.health-grid[b-mp5oktzums] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.health-card[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

    .health-card:hover[b-mp5oktzums] {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }

.health-icon[b-mp5oktzums] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

    .health-icon.good[b-mp5oktzums] {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    }

    .health-icon.warning[b-mp5oktzums] {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    }

    .health-icon.error[b-mp5oktzums] {
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    }

    .health-icon.info[b-mp5oktzums] {
        background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    }

.health-content[b-mp5oktzums] {
    flex: 1;
}

    .health-content h4[b-mp5oktzums] {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 6px 0;
    }

.health-status[b-mp5oktzums] {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .health-status[b-mp5oktzums]::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    .health-status.good[b-mp5oktzums] {
        color: #10b981;
    }

        .health-status.good[b-mp5oktzums]::before {
            background: #10b981;
            box-shadow: 0 0 8px #10b981;
        }

    .health-status.warning[b-mp5oktzums] {
        color: #f59e0b;
    }

        .health-status.warning[b-mp5oktzums]::before {
            background: #f59e0b;
            box-shadow: 0 0 8px #f59e0b;
        }

    .health-status.error[b-mp5oktzums] {
        color: #ef4444;
    }

        .health-status.error[b-mp5oktzums]::before {
            background: #ef4444;
            box-shadow: 0 0 8px #ef4444;
        }

    .health-status.info[b-mp5oktzums] {
        color: #3b82f6;
    }

        .health-status.info[b-mp5oktzums]::before {
            background: #3b82f6;
            box-shadow: 0 0 8px #3b82f6;
        }

.health-metric[b-mp5oktzums] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Modal Styles */
.modal-overlay[b-mp5oktzums] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-mp5oktzums 0.3s ease;
}

.modal-content[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: zoomIn-b-mp5oktzums 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header[b-mp5oktzums] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .modal-header h3[b-mp5oktzums] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        color: #1f2937;
    }

.modal-close[b-mp5oktzums] {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
}

    .modal-close:hover[b-mp5oktzums] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transform: rotate(90deg);
    }

.modal-body[b-mp5oktzums] {
    padding: 24px;
    max-height: calc(80vh - 70px);
    overflow-y: auto;
}

/* Pending Tasks */
.tasks-list[b-mp5oktzums] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.task-item[b-mp5oktzums] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 12px;
    transition: all 0.3s;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .task-item:hover[b-mp5oktzums] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

.task-icon[b-mp5oktzums] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.priority-high[b-mp5oktzums] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.priority-medium[b-mp5oktzums] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.priority-low[b-mp5oktzums] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.task-content[b-mp5oktzums] {
    flex: 1;
}

.task-title[b-mp5oktzums] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: #1f2937;
}

.task-description[b-mp5oktzums] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 10px 0;
}

.task-time[b-mp5oktzums] {
    font-size: 13px;
    color: #9ca3af;
}

.task-action[b-mp5oktzums] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    align-self: center;
}

    .task-action:hover[b-mp5oktzums] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Unauthorized Page */
.unauthorized-container[b-mp5oktzums] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 100px auto;
    max-width: 500px;
}

    .unauthorized-container i[b-mp5oktzums] {
        font-size: 80px;
        color: #667eea;
        margin-bottom: 24px;
    }

    .unauthorized-container h2[b-mp5oktzums] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #1f2937;
    }

    .unauthorized-container p[b-mp5oktzums] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

/* Animations */
@keyframes fadeIn-b-mp5oktzums {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

/* Responsive Styles */
@media (max-width: 1200px) {
    .charts-section[b-mp5oktzums] {
        grid-template-columns: 1fr;
    }

    .chart-container.large[b-mp5oktzums] {
        grid-column: auto;
    }
}

@media (max-width: 992px) {
    .quick-actions-grid[b-mp5oktzums] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-dashboard-page[b-mp5oktzums] {
        padding: 16px;
    }

    .page-header[b-mp5oktzums] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-mp5oktzums] {
        font-size: 28px;
    }

    .page-subtitle[b-mp5oktzums] {
        font-size: 16px;
    }

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

    .stat-card[b-mp5oktzums] {
        padding: 16px;
    }

    .tables-section[b-mp5oktzums] {
        grid-template-columns: 1fr;
    }

    .health-grid[b-mp5oktzums] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-mp5oktzums] {
        width: 95%;
    }
}

@media (max-width: 480px) {
    .stat-card[b-mp5oktzums] {
        flex-direction: column;
        text-align: center;
    }

    .action-card[b-mp5oktzums] {
        padding: 16px;
    }

    .quick-actions-grid[b-mp5oktzums] {
        grid-template-columns: 1fr 1fr;
    }

    .chart-controls[b-mp5oktzums] {
        flex-wrap: wrap;
    }

    .chart-control[b-mp5oktzums] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .activity-item[b-mp5oktzums] {
        flex-direction: column;
    }

    .activity-icon[b-mp5oktzums] {
        margin: 0 auto 8px;
    }

    .activity-content[b-mp5oktzums] {
        text-align: center;
    }

    .activity-meta[b-mp5oktzums] {
        justify-content: center;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .admin-dashboard-page[b-mp5oktzums] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-dashboard-page[b-mp5oktzums]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-mp5oktzums],
[data-theme="dark"] .stat-card[b-mp5oktzums],
[data-theme="dark"] .chart-container[b-mp5oktzums],
[data-theme="dark"] .table-container[b-mp5oktzums],
[data-theme="dark"] .health-card[b-mp5oktzums],
[data-theme="dark"] .unauthorized-container[b-mp5oktzums],
[data-theme="dark"] .loading-container[b-mp5oktzums],
[data-theme="dark"] .error-container[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-title[b-mp5oktzums] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle[b-mp5oktzums],
[data-theme="dark"] .stat-title[b-mp5oktzums],
[data-theme="dark"] .stat-subtitle[b-mp5oktzums],
[data-theme="dark"] .activity-meta[b-mp5oktzums],
[data-theme="dark"] .health-metric[b-mp5oktzums] {
    color: #94a3b8;
}

[data-theme="dark"] .breadcrumb-link[b-mp5oktzums] {
    color: #94a3b8;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-mp5oktzums] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-mp5oktzums] {
    color: #e2e8f0;
}

[data-theme="dark"] .action-card[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%);
}

[data-theme="dark"] .stat-value[b-mp5oktzums] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .chart-header[b-mp5oktzums],
[data-theme="dark"] .table-header[b-mp5oktzums],
[data-theme="dark"] .modal-header[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .chart-title[b-mp5oktzums],
    [data-theme="dark"] .table-title[b-mp5oktzums],
    [data-theme="dark"] .section-title[b-mp5oktzums],
    [data-theme="dark"] .health-content h4[b-mp5oktzums],
    [data-theme="dark"] .task-title[b-mp5oktzums],
    [data-theme="dark"] .modal-header h3[b-mp5oktzums],
    [data-theme="dark"] .unauthorized-container h2[b-mp5oktzums] {
        color: #e2e8f0;
    }

[data-theme="dark"] .data-table th[b-mp5oktzums] {
    color: #94a3b8;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .data-table td[b-mp5oktzums] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .data-table tbody tr:hover[b-mp5oktzums] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .activity-item[b-mp5oktzums] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .activity-text[b-mp5oktzums],
[data-theme="dark"] .merchant-name[b-mp5oktzums] {
    color: #e2e8f0;
}

[data-theme="dark"] .modal-content[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
}

[data-theme="dark"] .task-item[b-mp5oktzums] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(30, 41, 59, 0.6) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .task-description[b-mp5oktzums] {
    color: #94a3b8;
}

[data-theme="dark"] .modal-close[b-mp5oktzums] {
    color: #94a3b8;
}

    [data-theme="dark"] .modal-close:hover[b-mp5oktzums] {
        background: rgba(167, 139, 250, 0.1);
        color: #a78bfa;
    }

[data-theme="dark"] .chart-control[b-mp5oktzums] {
    background: rgba(167, 139, 250, 0.1);
    color: #94a3b8;
}

    [data-theme="dark"] .chart-control:hover[b-mp5oktzums] {
        background: rgba(167, 139, 250, 0.2);
        color: #a78bfa;
    }

    [data-theme="dark"] .chart-control.active[b-mp5oktzums] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: #e2e8f0;
    }

[data-theme="dark"] .btn-icon[b-mp5oktzums] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-icon:hover[b-mp5oktzums] {
        background: #a78bfa;
        color: #1e293b;
    }

[data-theme="dark"] .action-link[b-mp5oktzums],
[data-theme="dark"] .view-all-link[b-mp5oktzums] {
    color: #a78bfa;
}

[data-theme="dark"] .refresh-btn[b-mp5oktzums] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

    [data-theme="dark"] .refresh-btn:hover[b-mp5oktzums] {
        background: rgba(167, 139, 250, 0.2);
    }

[data-theme="dark"] .loading-container .loading-text[b-mp5oktzums] {
    color: #a78bfa;
}

[data-theme="dark"] .spinner[b-mp5oktzums] {
    border-color: rgba(167, 139, 250, 0.2);
    border-right-color: #a78bfa;
}
/* _content/Sahelly/Components/Pages/Admin/DetailsMerchants.razor.rz.scp.css */

/* DetailsMerchants.razor.css - Modern Professional Design
   Following the app.css architecture and Users.razor.css styling */

/* Page Container */
.merchant-details-page[b-lsip5irm5z] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .merchant-details-page[b-lsip5irm5z]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .merchant-details-page > *[b-lsip5irm5z] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-lsip5irm5z] {
    margin-bottom: 32px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-link[b-lsip5irm5z] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-lsip5irm5z] {
        color: #667eea;
    }

.breadcrumb-separator[b-lsip5irm5z] {
    color: #d1d5db;
}

.breadcrumb-current[b-lsip5irm5z] {
    color: #4c1d95;
    font-weight: 600;
}

/* Merchant Header Card */
.merchant-header-card[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 24px;
}

.merchant-header-content[b-lsip5irm5z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

@media (max-width: 768px) {
    .merchant-header-content[b-lsip5irm5z] {
        flex-direction: column;
        align-items: flex-start;
    }
}

.merchant-profile[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.merchant-avatar[b-lsip5irm5z] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    border: 4px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.avatar-placeholder[b-lsip5irm5z] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
}

.merchant-info[b-lsip5irm5z] {
    flex: 1;
}

.merchant-name[b-lsip5irm5z] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.merchant-company[b-lsip5irm5z] {
    font-size: 18px;
    color: #4b5563;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.merchant-meta[b-lsip5irm5z] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.merchant-code[b-lsip5irm5z], .merchant-type[b-lsip5irm5z], .merchant-date[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
    background: rgba(102, 126, 234, 0.1);
    padding: 6px 12px;
    border-radius: 30px;
}

.merchant-actions[b-lsip5irm5z] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-badges[b-lsip5irm5z] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.status-badge[b-lsip5irm5z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.status-inactive[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
    color: #dc2626;
    border: 1px solid rgba(245, 87, 108, 0.3);
}

.status-approved[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.status-pending[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.action-buttons[b-lsip5irm5z] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Tab Navigation */
.detail-tabs[b-lsip5irm5z] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    scrollbar-width: none;
}

    .detail-tabs[b-lsip5irm5z]::-webkit-scrollbar {
        display: none;
    }

.tab-btn[b-lsip5irm5z] {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 15px;
}

    .tab-btn i[b-lsip5irm5z] {
        font-size: 16px;
    }

    .tab-btn:hover[b-lsip5irm5z] {
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

    .tab-btn.active[b-lsip5irm5z] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Tab Content */
.tab-content[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 32px;
    margin-bottom: 32px;
}

/* Information Cards Grid */
.info-grid[b-lsip5irm5z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.info-card[b-lsip5irm5z] {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

    .info-card:hover[b-lsip5irm5z] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

.info-card-header[b-lsip5irm5z] {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.info-card-title[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
}

    .info-card-title i[b-lsip5irm5z] {
        color: #667eea;
    }

.info-card-content[b-lsip5irm5z] {
    padding: 20px;
}

.info-row[b-lsip5irm5z] {
    display: flex;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .info-row:last-child[b-lsip5irm5z] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.info-label[b-lsip5irm5z] {
    font-weight: 600;
    width: 140px;
    color: #4b5563;
    font-size: 14px;
}

.info-value[b-lsip5irm5z] {
    flex: 1;
    color: #1f2937;
}

    .info-value a[b-lsip5irm5z] {
        color: #667eea;
        text-decoration: none;
    }

        .info-value a:hover[b-lsip5irm5z] {
            text-decoration: underline;
        }

.document-preview[b-lsip5irm5z] {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.document-item[b-lsip5irm5z] {
    width: 120px;
    text-align: center;
}

    .document-item img[b-lsip5irm5z] {
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid rgba(102, 126, 234, 0.3);
        cursor: pointer;
        transition: all 0.3s;
    }

        .document-item img:hover[b-lsip5irm5z] {
            border-color: #667eea;
            transform: scale(1.05);
        }

    .document-item p[b-lsip5irm5z] {
        margin-top: 8px;
        font-size: 13px;
        color: #6b7280;
    }

.no-data[b-lsip5irm5z] {
    color: #6b7280;
    font-style: italic;
    text-align: center;
    padding: 40px;
}

/* Financial Tab */
.financial-overview[b-lsip5irm5z] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.wallet-card[b-lsip5irm5z] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 24px;
    color: white;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.wallet-header[b-lsip5irm5z] {
    margin-bottom: 20px;
}

.wallet-title[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.wallet-content[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 640px) {
    .wallet-content[b-lsip5irm5z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

.wallet-balance[b-lsip5irm5z] {
    display: flex;
    flex-direction: column;
}

.balance-label[b-lsip5irm5z] {
    font-size: 16px;
    opacity: 0.8;
}

.balance-amount[b-lsip5irm5z] {
    font-size: 36px;
    font-weight: 800;
}

.wallet-actions[b-lsip5irm5z] {
    display: flex;
    gap: 12px;
}

.btn-outline-primary[b-lsip5irm5z] {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s;
}

    .btn-outline-primary:hover[b-lsip5irm5z] {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

.btn-outline-secondary[b-lsip5irm5z] {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid transparent;
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s;
}

    .btn-outline-secondary:hover[b-lsip5irm5z] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
    }

.stats-grid[b-lsip5irm5z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stat-card[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card:hover[b-lsip5irm5z] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

.stat-icon[b-lsip5irm5z] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

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

.stat-title[b-lsip5irm5z] {
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 0;
    margin-bottom: 8px;
}

.stat-value[b-lsip5irm5z] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subscription Tab */
.subscription-info[b-lsip5irm5z] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.subscription-card[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.subscription-header[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.subscription-title[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #4c1d95;
}

    .subscription-title i[b-lsip5irm5z] {
        color: #f59e0b;
    }

.subscription-badge[b-lsip5irm5z] {
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .subscription-badge.free[b-lsip5irm5z] {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    }

    .subscription-badge.basic[b-lsip5irm5z] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .subscription-badge.premium[b-lsip5irm5z] {
        background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    }

    .subscription-badge.enterprise[b-lsip5irm5z] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .subscription-badge.default[b-lsip5irm5z] {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    }

.subscription-details[b-lsip5irm5z] {
    padding: 24px;
}

.detail-row[b-lsip5irm5z] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .detail-row:first-child[b-lsip5irm5z] {
        padding-top: 0;
    }

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

.detail-label[b-lsip5irm5z] {
    font-weight: 600;
    color: #4b5563;
}

.detail-value[b-lsip5irm5z] {
    font-weight: 700;
    color: #1f2937;
}

.subscription-actions[b-lsip5irm5z] {
    padding: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
}

/* Settings Tab */
.settings-info[b-lsip5irm5z] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.settings-grid[b-lsip5irm5z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.setting-card[b-lsip5irm5z] {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 24px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

    .setting-card:hover[b-lsip5irm5z] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

.setting-title[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .setting-title i[b-lsip5irm5z] {
        color: #667eea;
    }

.setting-options[b-lsip5irm5z] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-toggle[b-lsip5irm5z] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: not-allowed;
    opacity: 0.8;
}

    .setting-toggle input[b-lsip5irm5z] {
        width: 18px;
        height: 18px;
    }

/* Activity Timeline */
.activity-timeline[b-lsip5irm5z] {
    padding: 24px;
}

.timeline-title[b-lsip5irm5z] {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 700;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .timeline-title[b-lsip5irm5z]::before {
        content: '';
        width: 4px;
        height: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 2px;
    }

/* Modal Styles */
.modal-backdrop[b-lsip5irm5z] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 1000;
}

.modal[b-lsip5irm5z] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 20px;
    z-index: 1100;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.modal-header[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .modal-header h3[b-lsip5irm5z] {
        margin: 0;
        font-size: 20px;
        color: #4c1d95;
        font-weight: 700;
    }

.modal-close[b-lsip5irm5z] {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .modal-close:hover[b-lsip5irm5z] {
        background-color: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-lsip5irm5z] {
    padding: 24px;
    overflow-y: auto;
}

.modal-footer[b-lsip5irm5z] {
    padding: 16px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.form-group[b-lsip5irm5z] {
    margin-bottom: 24px;
}

    .form-group label[b-lsip5irm5z] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #4c1d95;
    }

.form-control[b-lsip5irm5z] {
    width: 100%;
    padding: 12px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s;
}

    .form-control:focus[b-lsip5irm5z] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control[b-lsip5irm5z]::placeholder {
        color: #9ca3af;
    }

textarea.form-control[b-lsip5irm5z] {
    min-height: 120px;
    resize: vertical;
}

/* Image Preview Modal */
.image-modal .modal-body[b-lsip5irm5z] {
    padding: 0;
    text-align: center;
}

.preview-image[b-lsip5irm5z] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

/* Loading and Error States */
.loading-container[b-lsip5irm5z], .error-container[b-lsip5irm5z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.loading-spinner[b-lsip5irm5z] {
    font-size: 60px;
    color: #667eea;
    margin-bottom: 20px;
}

.loading-text[b-lsip5irm5z] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 600;
}

.error-icon[b-lsip5irm5z] {
    font-size: 60px;
    color: #ef4444;
    margin-bottom: 20px;
}

.error-title[b-lsip5irm5z] {
    font-size: 24px;
    color: #b91c1c;
    margin-bottom: 12px;
    font-weight: 700;
}

.error-message[b-lsip5irm5z] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
}

/* Button Styles */
.btn[b-lsip5irm5z] {
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    padding: 12px 24px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

    .btn:hover[b-lsip5irm5z] {
        transform: translateY(-2px);
    }

.btn-sm[b-lsip5irm5z] {
    padding: 8px 16px;
    min-height: 36px;
    font-size: 14px;
}

.btn-primary[b-lsip5irm5z] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-lsip5irm5z] {
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-success[b-lsip5irm5z] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-success:hover[b-lsip5irm5z] {
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-warning[b-lsip5irm5z] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-warning:hover[b-lsip5irm5z] {
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-danger[b-lsip5irm5z] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-danger:hover[b-lsip5irm5z] {
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

.btn-secondary[b-lsip5irm5z] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-lsip5irm5z] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    }

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

.btn-icon[b-lsip5irm5z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .info-grid[b-lsip5irm5z] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 767px) {
    .merchant-details-page[b-lsip5irm5z] {
        padding: 16px;
    }

    .tab-content[b-lsip5irm5z] {
        padding: 20px;
    }

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

    .settings-grid[b-lsip5irm5z] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-lsip5irm5z] {
        flex-wrap: wrap;
    }

        .action-buttons .btn[b-lsip5irm5z] {
            flex: 1;
            min-width: 120px;
        }

    .merchant-meta[b-lsip5irm5z] {
        flex-direction: column;
        gap: 8px;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .merchant-details-page[b-lsip5irm5z] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .page-header[b-lsip5irm5z],
[data-theme="dark"] .merchant-header-card[b-lsip5irm5z],
[data-theme="dark"] .detail-tabs[b-lsip5irm5z],
[data-theme="dark"] .tab-content[b-lsip5irm5z],
[data-theme="dark"] .info-card[b-lsip5irm5z],
[data-theme="dark"] .loading-container[b-lsip5irm5z],
[data-theme="dark"] .error-container[b-lsip5irm5z],
[data-theme="dark"] .setting-card[b-lsip5irm5z],
[data-theme="dark"] .subscription-card[b-lsip5irm5z],
[data-theme="dark"] .stat-card[b-lsip5irm5z] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .merchant-name[b-lsip5irm5z],
[data-theme="dark"] .stat-value[b-lsip5irm5z] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .modal[b-lsip5irm5z] {
    background: #1e293b;
}

[data-theme="dark"] .breadcrumb-link[b-lsip5irm5z] {
    color: #94a3b8;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-lsip5irm5z] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-lsip5irm5z] {
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-company[b-lsip5irm5z],
[data-theme="dark"] .merchant-meta > span[b-lsip5irm5z] {
    color: #94a3b8;
}

[data-theme="dark"] .info-label[b-lsip5irm5z],
[data-theme="dark"] .detail-label[b-lsip5irm5z] {
    color: #94a3b8;
}

[data-theme="dark"] .info-value[b-lsip5irm5z],
[data-theme="dark"] .detail-value[b-lsip5irm5z] {
    color: #e2e8f0;
}

[data-theme="dark"] .no-data[b-lsip5irm5z] {
    color: #94a3b8;
}

[data-theme="dark"] .tab-btn[b-lsip5irm5z] {
    color: #94a3b8;
}

    [data-theme="dark"] .tab-btn:hover[b-lsip5irm5z] {
        background: rgba(167, 139, 250, 0.1);
        color: #a78bfa;
    }

[data-theme="dark"] .info-card-title[b-lsip5irm5z],
[data-theme="dark"] .setting-title[b-lsip5irm5z],
[data-theme="dark"] .subscription-title[b-lsip5irm5z],
[data-theme="dark"] .timeline-title[b-lsip5irm5z] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-lsip5irm5z] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-lsip5irm5z] {
        border-color: #a78bfa;
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .form-group label[b-lsip5irm5z] {
    color: #e2e8f0;
}

/* Print Styles */
@media print {
    .merchant-details-page[b-lsip5irm5z] {
        background: white;
    }

        .merchant-details-page[b-lsip5irm5z]::before {
            display: none;
        }

    .action-buttons[b-lsip5irm5z],
    .wallet-actions[b-lsip5irm5z],
    .subscription-actions[b-lsip5irm5z],
    .detail-tabs[b-lsip5irm5z] {
        display: none;
    }

    .tab-content[b-lsip5irm5z] {
        display: block !important;
    }

    .page-header[b-lsip5irm5z],
    .merchant-header-card[b-lsip5irm5z],
    .tab-content[b-lsip5irm5z],
    .info-card[b-lsip5irm5z],
    .stat-card[b-lsip5irm5z],
    .subscription-card[b-lsip5irm5z],
    .setting-card[b-lsip5irm5z] {
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }
}
/* _content/Sahelly/Components/Pages/Admin/EditCustomer.razor.rz.scp.css */

/* EditCustomer.razor.css */
/* Professional CSS redesign following the app.css global styles and Users.razor.css pattern */

/* Page Container */
.admin-edit-customer-page[b-vze4s8hr8j] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-edit-customer-page[b-vze4s8hr8j]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-edit-customer-page > *[b-vze4s8hr8j] {
        position: relative;
        z-index: 1;
    }

/* Page Header Enhanced */
.page-header-enhanced[b-vze4s8hr8j] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-vze4s8hr8j] {
    flex: 1;
}

.breadcrumb-modern[b-vze4s8hr8j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-item[b-vze4s8hr8j] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-vze4s8hr8j] {
        color: #667eea;
    }

.separator[b-vze4s8hr8j] {
    color: #d1d5db;
}

.breadcrumb-current[b-vze4s8hr8j] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-vze4s8hr8j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title-modern[b-vze4s8hr8j] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-icon[b-vze4s8hr8j] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.page-subtitle-enhanced[b-vze4s8hr8j] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-vze4s8hr8j] {
    display: flex;
    gap: 12px;
}

.btn-action-secondary[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .btn-action-secondary:hover[b-vze4s8hr8j] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }

/* Loading Container */
.loading-container[b-vze4s8hr8j] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner-container[b-vze4s8hr8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner[b-vze4s8hr8j] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-vze4s8hr8j 0.8s linear infinite;
}

.loading-text[b-vze4s8hr8j] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 600;
}

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

/* Error Container */
.error-container[b-vze4s8hr8j] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .error-container i[b-vze4s8hr8j] {
        font-size: 100px;
        background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .error-container h3[b-vze4s8hr8j] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .error-container p[b-vze4s8hr8j] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .error-container .btn[b-vze4s8hr8j] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    }

        .error-container .btn:hover[b-vze4s8hr8j] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

/* Form Container */
.form-container[b-vze4s8hr8j] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Form Section */
.form-section[b-vze4s8hr8j] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .form-section:hover[b-vze4s8hr8j] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

.section-header[b-vze4s8hr8j] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.section-title[b-vze4s8hr8j] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
}

    .section-title i[b-vze4s8hr8j] {
        color: #667eea;
    }

.form-grid[b-vze4s8hr8j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 24px;
}

/* Form Groups and Controls */
.form-group[b-vze4s8hr8j] {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label[b-vze4s8hr8j] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.form-control[b-vze4s8hr8j] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    width: 100%;
}

    .form-control:focus[b-vze4s8hr8j] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control:disabled[b-vze4s8hr8j] {
        background: #f3f4f6;
        cursor: not-allowed;
    }

.form-hint[b-vze4s8hr8j] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.required[b-vze4s8hr8j] {
    color: #ef4444;
    margin-left: 4px;
}

/* Input with Icon */
.input-with-icon[b-vze4s8hr8j] {
    position: relative;
}

    .input-with-icon .form-control[b-vze4s8hr8j] {
        padding-right: 60px;
    }

.input-icon[b-vze4s8hr8j] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-weight: 500;
}

/* Checkbox Wrapper */
.checkbox-wrapper[b-vze4s8hr8j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .checkbox-wrapper input[type="checkbox"][b-vze4s8hr8j] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #667eea;
        border-radius: 4px;
    }

    .checkbox-wrapper label[b-vze4s8hr8j] {
        cursor: pointer;
        user-select: none;
        margin-bottom: 0;
    }

/* Location Container */
.location-container[b-vze4s8hr8j] {
    padding: 0 24px 24px;
}

    .location-container h4[b-vze4s8hr8j] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.coordinates-group[b-vze4s8hr8j] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.btn-pick-location[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
}

    .btn-pick-location:hover[b-vze4s8hr8j] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Admin Actions Grid */
.admin-actions-grid[b-vze4s8hr8j] {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.action-group[b-vze4s8hr8j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .action-group label[b-vze4s8hr8j] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

/* Toggle Group for Active/Inactive */
.toggle-group[b-vze4s8hr8j] {
    display: flex;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .toggle-group input[type="radio"][b-vze4s8hr8j] {
        display: none;
    }

.toggle-label[b-vze4s8hr8j] {
    padding: 10px 20px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px;
    flex: 1;
    text-align: center;
    transition: all 0.3s;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .toggle-label:hover[b-vze4s8hr8j] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
    }

input[type="radio"]:checked + .toggle-label.active[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 201, 104, 0.3);
}

input[type="radio"]:checked + .toggle-label.inactive[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(216, 140, 20, 0.3);
}

/* Form Actions */
.form-actions[b-vze4s8hr8j] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.btn-cancel[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .btn-cancel:hover[b-vze4s8hr8j] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }

.btn-save[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-vze4s8hr8j] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-save:disabled[b-vze4s8hr8j] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-save i[b-vze4s8hr8j] {
        font-size: 16px;
    }

/* Unauthorized Container */
.unauthorized-container[b-vze4s8hr8j] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
}

    .unauthorized-container i[b-vze4s8hr8j] {
        font-size: 100px;
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-vze4s8hr8j] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-container p[b-vze4s8hr8j] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .unauthorized-container .btn[b-vze4s8hr8j] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .unauthorized-container .btn:hover[b-vze4s8hr8j] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

/* Validation Styles */
.validation-message[b-vze4s8hr8j] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
}

.validation-summary[b-vze4s8hr8j] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #ef4444;
}

/* Dark Theme Support */
[data-theme="dark"] .admin-edit-customer-page[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-edit-customer-page[b-vze4s8hr8j]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-vze4s8hr8j],
[data-theme="dark"] .form-section[b-vze4s8hr8j],
[data-theme="dark"] .form-actions[b-vze4s8hr8j],
[data-theme="dark"] .loading-container[b-vze4s8hr8j],
[data-theme="dark"] .error-container[b-vze4s8hr8j],
[data-theme="dark"] .unauthorized-container[b-vze4s8hr8j] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-vze4s8hr8j] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-vze4s8hr8j] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-vze4s8hr8j] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title-modern[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle-enhanced[b-vze4s8hr8j] {
    color: #9ca3af;
}

[data-theme="dark"] .title-icon[b-vze4s8hr8j] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}

[data-theme="dark"] .section-title[b-vze4s8hr8j] {
    color: #e2e8f0;
}

    [data-theme="dark"] .section-title i[b-vze4s8hr8j] {
        color: #a78bfa;
    }

[data-theme="dark"] .section-header[b-vze4s8hr8j] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-control[b-vze4s8hr8j] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-vze4s8hr8j] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
        box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.1);
    }

    [data-theme="dark"] .form-control:disabled[b-vze4s8hr8j] {
        background: rgba(51, 65, 85, 0.5);
    }

[data-theme="dark"] .form-group label[b-vze4s8hr8j] {
    color: #e2e8f0;
}

[data-theme="dark"] .toggle-group[b-vze4s8hr8j] {
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .toggle-label[b-vze4s8hr8j] {
    color: #9ca3af;
}

    [data-theme="dark"] .toggle-label:hover[b-vze4s8hr8j] {
        background: rgba(167, 139, 250, 0.1);
        color: #e2e8f0;
    }

[data-theme="dark"] .location-container h4[b-vze4s8hr8j] {
    color: #e2e8f0;
}

[data-theme="dark"] .error-container h3[b-vze4s8hr8j],
[data-theme="dark"] .unauthorized-container h3[b-vze4s8hr8j] {
    color: #e2e8f0;
}

[data-theme="dark"] .error-container p[b-vze4s8hr8j],
[data-theme="dark"] .unauthorized-container p[b-vze4s8hr8j] {
    color: #9ca3af;
}

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

@media (max-width: 768px) {
    .admin-edit-customer-page[b-vze4s8hr8j] {
        padding: 16px;
    }

    .page-header-enhanced[b-vze4s8hr8j] {
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-vze4s8hr8j] {
        width: 100%;
    }

    .btn-action-secondary[b-vze4s8hr8j],
    .btn-save[b-vze4s8hr8j],
    .btn-cancel[b-vze4s8hr8j] {
        flex: 1;
    }

    .form-grid[b-vze4s8hr8j],
    .admin-actions-grid[b-vze4s8hr8j] {
        grid-template-columns: 1fr;
    }

    .coordinates-group[b-vze4s8hr8j] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-vze4s8hr8j] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-vze4s8hr8j] {
        font-size: 24px;
    }

    .title-icon[b-vze4s8hr8j] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .page-subtitle-enhanced[b-vze4s8hr8j] {
        font-size: 14px;
    }

    .breadcrumb-modern[b-vze4s8hr8j] {
        font-size: 12px;
    }
}
/* _content/Sahelly/Components/Pages/Admin/EmailManagement.razor.rz.scp.css */
.email-management-page[b-4kyivtuvbx] {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-4kyivtuvbx] {
    margin-bottom: 30px;
}

.breadcrumb[b-4kyivtuvbx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #6c757d;
    font-size: 14px;
}

.breadcrumb-link[b-4kyivtuvbx] {
    color: #007bff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .breadcrumb-link:hover[b-4kyivtuvbx] {
        text-decoration: underline;
    }

.breadcrumb-separator[b-4kyivtuvbx] {
    color: #dee2e6;
}

.breadcrumb-current[b-4kyivtuvbx] {
    color: #495057;
    font-weight: 500;
}

.page-title[b-4kyivtuvbx] {
    font-size: 28px;
    font-weight: 600;
    color: #212529;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .page-title i[b-4kyivtuvbx] {
        color: #007bff;
    }

/* Status Section */
.status-section[b-4kyivtuvbx] {
    margin-bottom: 30px;
}

.status-loading[b-4kyivtuvbx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #6c757d;
}

.status-card[b-4kyivtuvbx] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.status-icon[b-4kyivtuvbx] {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.status-info[b-4kyivtuvbx] {
    flex: 1;
}

    .status-info h3[b-4kyivtuvbx] {
        margin: 0 0 10px 0;
        font-size: 18px;
        font-weight: 600;
    }

.status-details[b-4kyivtuvbx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-indicator[b-4kyivtuvbx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

    .status-indicator.connected i[b-4kyivtuvbx] {
        color: #28a745;
    }

    .status-indicator.disconnected i[b-4kyivtuvbx] {
        color: #dc3545;
    }

.server-info[b-4kyivtuvbx] {
    font-size: 12px;
    opacity: 0.8;
}

.btn-refresh[b-4kyivtuvbx] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-refresh:hover[b-4kyivtuvbx] {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    .btn-refresh:disabled[b-4kyivtuvbx] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.spinning[b-4kyivtuvbx] {
    animation: spin-b-4kyivtuvbx 1s linear infinite;
}

@keyframes spin-b-4kyivtuvbx {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Tabs */
.tabs-container[b-4kyivtuvbx] {
    display: flex;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 30px;
    overflow-x: auto;
}

.tab-button[b-4kyivtuvbx] {
    background: none;
    border: none;
    padding: 15px 25px;
    cursor: pointer;
    font-weight: 500;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tab-button:hover[b-4kyivtuvbx] {
        color: #007bff;
        background: #f8f9fa;
    }

    .tab-button.active[b-4kyivtuvbx] {
        color: #007bff;
        border-bottom-color: #007bff;
    }

/* Email Type Selection */
.email-type-selection[b-4kyivtuvbx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.type-option[b-4kyivtuvbx] {
    position: relative;
    cursor: pointer;
}

    .type-option input[type="radio"][b-4kyivtuvbx] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.type-card[b-4kyivtuvbx] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .type-card i[b-4kyivtuvbx] {
        font-size: 24px;
        color: #6c757d;
        transition: all 0.3s ease;
    }

    .type-card span[b-4kyivtuvbx] {
        font-weight: 500;
        color: #495057;
    }

.type-option:hover .type-card[b-4kyivtuvbx] {
    border-color: #007bff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
}

.type-option input[type="radio"]:checked + .type-card[b-4kyivtuvbx] {
    border-color: #007bff;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

    .type-option input[type="radio"]:checked + .type-card i[b-4kyivtuvbx],
    .type-option input[type="radio"]:checked + .type-card span[b-4kyivtuvbx] {
        color: white;
    }

/* Form */
.email-form-container[b-4kyivtuvbx] {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-group[b-4kyivtuvbx] {
    margin-bottom: 20px;
}

    .form-group label[b-4kyivtuvbx] {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #495057;
    }

.form-control[b-4kyivtuvbx] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

    .form-control:focus[b-4kyivtuvbx] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.form-hint[b-4kyivtuvbx] {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

.form-text[b-4kyivtuvbx] {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
    display: block;
}

/* Content Editor */
.content-editor-toolbar[b-4kyivtuvbx] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.btn-format[b-4kyivtuvbx] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .btn-format:hover[b-4kyivtuvbx] {
        background: #e9ecef;
    }

    .btn-format.active[b-4kyivtuvbx] {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

.html-editor[b-4kyivtuvbx] {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.editor-toolbar[b-4kyivtuvbx] {
    background: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    gap: 5px;
}

.btn-editor[b-4kyivtuvbx] {
    background: white;
    border: 1px solid #dee2e6;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

    .btn-editor:hover[b-4kyivtuvbx] {
        background: #007bff;
        color: white;
    }

.html-editor-content[b-4kyivtuvbx] {
    border: none;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

/* Attachments */
.file-input[b-4kyivtuvbx] {
    padding: 10px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .file-input:hover[b-4kyivtuvbx] {
        border-color: #007bff;
        background: #f8f9fa;
    }

.attachments-list[b-4kyivtuvbx] {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.attachment-item[b-4kyivtuvbx] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

    .attachment-item i[b-4kyivtuvbx] {
        color: #6c757d;
    }

.btn-remove[b-4kyivtuvbx] {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

    .btn-remove:hover[b-4kyivtuvbx] {
        background: #dc3545;
        color: white;
    }

/* Advanced Options */
.advanced-options[b-4kyivtuvbx] {
    margin-top: 20px;
    border-top: 1px solid #e9ecef;
    padding-top: 20px;
}

.toggle-advanced[b-4kyivtuvbx] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .toggle-advanced:hover[b-4kyivtuvbx] {
        background: #e9ecef;
    }

.advanced-content[b-4kyivtuvbx] {
    margin-top: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.form-check[b-4kyivtuvbx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.form-check-input[b-4kyivtuvbx] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-check-label[b-4kyivtuvbx] {
    cursor: pointer;
    margin-bottom: 0;
}

/* Buttons */
.form-actions[b-4kyivtuvbx] {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.btn[b-4kyivtuvbx] {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 14px;
}

.btn-gradient-primary[b-4kyivtuvbx] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

    .btn-gradient-primary:hover[b-4kyivtuvbx] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
    }

.btn-secondary[b-4kyivtuvbx] {
    background: #6c757d;
    color: white;
}

    .btn-secondary:hover[b-4kyivtuvbx] {
        background: #5a6268;
    }

.btn-primary[b-4kyivtuvbx] {
    background: #007bff;
    color: white;
}

    .btn-primary:hover[b-4kyivtuvbx] {
        background: #0056b3;
    }

.btn:disabled[b-4kyivtuvbx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-small[b-4kyivtuvbx] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-4kyivtuvbx 1s linear infinite;
}

/* Templates Section */
.templates-section[b-4kyivtuvbx] {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-header[b-4kyivtuvbx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

    .section-header h2[b-4kyivtuvbx] {
        margin: 0;
        color: #495057;
    }

.templates-grid[b-4kyivtuvbx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.template-card[b-4kyivtuvbx] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .template-card:hover[b-4kyivtuvbx] {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.template-header[b-4kyivtuvbx] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
}

    .template-header h3[b-4kyivtuvbx] {
        margin: 0;
        font-size: 16px;
        color: #495057;
    }

.template-code[b-4kyivtuvbx] {
    background: #e9ecef;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #6c757d;
    font-family: monospace;
}

.template-preview[b-4kyivtuvbx] {
    margin-bottom: 15px;
}

.template-subject[b-4kyivtuvbx] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 8px;
    font-size: 14px;
}

.template-content[b-4kyivtuvbx] {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

.template-actions[b-4kyivtuvbx] {
    display: flex;
    gap: 10px;
}

.btn-icon[b-4kyivtuvbx] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #6c757d;
}

    .btn-icon:hover[b-4kyivtuvbx] {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

/* Logs Section */
.logs-section[b-4kyivtuvbx] {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-section[b-4kyivtuvbx] {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: end;
}

.filter-group[b-4kyivtuvbx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-group label[b-4kyivtuvbx] {
        font-weight: 500;
        color: #495057;
        font-size: 14px;
    }

.date-range[b-4kyivtuvbx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .date-range span[b-4kyivtuvbx] {
        color: #6c757d;
        font-weight: 500;
    }

.loading-container[b-4kyivtuvbx] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

.spinner[b-4kyivtuvbx] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin-b-4kyivtuvbx 1s linear infinite;
}

.table-responsive[b-4kyivtuvbx] {
    overflow-x: auto;
}

.data-table[b-4kyivtuvbx] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    .data-table th[b-4kyivtuvbx],
    .data-table td[b-4kyivtuvbx] {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e9ecef;
    }

    .data-table th[b-4kyivtuvbx] {
        background: #f8f9fa;
        font-weight: 600;
        color: #495057;
    }

    .data-table tr:hover[b-4kyivtuvbx] {
        background: #f8f9fa;
    }

.email-id[b-4kyivtuvbx] {
    font-family: monospace;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.subject-cell[b-4kyivtuvbx] {
    max-width: 200px;
}

.status-badge[b-4kyivtuvbx] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-sent[b-4kyivtuvbx] {
    background: #e3f2fd;
    color: #1976d2;
}

.status-delivered[b-4kyivtuvbx] {
    background: #e8f5e8;
    color: #2e7d32;
}

.status-failed[b-4kyivtuvbx] {
    background: #ffebee;
    color: #c62828;
}

.status-bounced[b-4kyivtuvbx] {
    background: #fff3e0;
    color: #f57c00;
}

.no-data[b-4kyivtuvbx] {
    text-align: center;
    padding: 50px;
    color: #6c757d;
}

    .no-data i[b-4kyivtuvbx] {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.5;
    }

/* Analytics Section */
.analytics-section[b-4kyivtuvbx] {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.analytics-cards[b-4kyivtuvbx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.analytics-card[b-4kyivtuvbx] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

    .analytics-card:hover[b-4kyivtuvbx] {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.card-icon[b-4kyivtuvbx] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    background: #007bff;
}

    .card-icon.success[b-4kyivtuvbx] {
        background: #28a745;
    }

    .card-icon.danger[b-4kyivtuvbx] {
        background: #dc3545;
    }

    .card-icon.warning[b-4kyivtuvbx] {
        background: #ffc107;
        color: #333;
    }

.card-content h4[b-4kyivtuvbx] {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.card-content .value[b-4kyivtuvbx] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #495057;
}

.card-content .percentage[b-4kyivtuvbx] {
    font-size: 12px;
    color: #6c757d;
}

.charts-grid[b-4kyivtuvbx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}
/* _content/Sahelly/Components/Pages/Admin/MerchantsDetailView.razor.rz.scp.css */

/* Merchant Detail View - Modern Professional CSS
   Based on the Users.razor.css architecture with app.css styling patterns */

/* Page Container */
.merchant-details-sales-page[b-fzinpcqlg6] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .merchant-details-sales-page[b-fzinpcqlg6]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .merchant-details-sales-page > *[b-fzinpcqlg6] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-fzinpcqlg6] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-content[b-fzinpcqlg6] {
    flex: 1;
}

.header-actions[b-fzinpcqlg6] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Modern Breadcrumb */
.breadcrumb-modern[b-fzinpcqlg6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-item[b-fzinpcqlg6] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-fzinpcqlg6] {
        color: #667eea;
    }

.separator[b-fzinpcqlg6] {
    color: #d1d5db;
}

.current[b-fzinpcqlg6] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-fzinpcqlg6] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .page-title i[b-fzinpcqlg6] {
        font-size: 28px;
        -webkit-text-fill-color: initial;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.page-subtitle[b-fzinpcqlg6] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Merchant Profile Card */
.merchant-profile-card[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    gap: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .merchant-profile-card:hover[b-fzinpcqlg6] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

.merchant-avatar[b-fzinpcqlg6] {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    position: relative;
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    flex-shrink: 0;
}

.status-indicator[b-fzinpcqlg6] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    right: 5px;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

    .status-indicator.active[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .status-indicator.inactive[b-fzinpcqlg6],
    .status-indicator.suspended[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    }

    .status-indicator.pending[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .status-indicator.rejected[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

.merchant-info[b-fzinpcqlg6] {
    flex: 1;
}

.merchant-name[b-fzinpcqlg6] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #1f2937;
}

.merchant-code[b-fzinpcqlg6] {
    font-size: 15px;
    color: #9333ea;
    margin: 0 0 10px 0;
    font-weight: 500;
}

.merchant-owner[b-fzinpcqlg6] {
    font-size: 16px;
    color: #4b5563;
    margin: 0 0 16px 0;
}

.merchant-badges[b-fzinpcqlg6] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.status-badge[b-fzinpcqlg6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.active[b-fzinpcqlg6] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-fzinpcqlg6],
    .status-badge.suspended[b-fzinpcqlg6] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .status-badge.pending[b-fzinpcqlg6] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(253, 230, 138, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(251, 191, 36, 0.3);
    }

    .status-badge.rejected[b-fzinpcqlg6] {
        background: linear-gradient(135deg, rgba(208, 78, 95, 0.2) 0%, rgba(205, 125, 219, 0.2) 100%);
        color: #be123c;
        border: 1px solid rgba(208, 78, 95, 0.3);
    }

.plan-badge[b-fzinpcqlg6] {
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

    .plan-badge[b-fzinpcqlg6]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
    }

    .plan-badge:hover[b-fzinpcqlg6]::before {
        left: 100%;
    }

    .plan-badge.free[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .plan-badge.basic[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
    }

    .plan-badge.premium[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
    }

    .plan-badge.enterprise[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: white;
    }

    .plan-badge.default[b-fzinpcqlg6] {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
        color: white;
    }

.merchant-contact[b-fzinpcqlg6] {
    border-right: 1px solid rgba(102, 126, 234, 0.1);
    padding-right: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.contact-item[b-fzinpcqlg6] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #4b5563;
}

    .contact-item i[b-fzinpcqlg6] {
        width: 16px;
        color: #9333ea;
        text-align: center;
    }

/* Filters Section */
.filters-section[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .filters-section:hover[b-fzinpcqlg6] {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

.date-filters[b-fzinpcqlg6] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-group[b-fzinpcqlg6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

    .filter-group label[b-fzinpcqlg6] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.form-control-modern[b-fzinpcqlg6] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control-modern:focus[b-fzinpcqlg6] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Stats Grid */
.merchant-stats-grid[b-fzinpcqlg6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-fzinpcqlg6]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-fzinpcqlg6] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-fzinpcqlg6]::before {
            opacity: 1;
        }

.stat-icon[b-fzinpcqlg6] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.total-sales .stat-icon[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.total-orders .stat-icon[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.avg-order .stat-icon[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.total-customers .stat-icon[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.total-products .stat-icon[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.wallet-balance .stat-icon[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

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

    .stat-content h3[b-fzinpcqlg6] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 5px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

    .stat-content p[b-fzinpcqlg6] {
        font-size: 15px;
        color: #6b7280;
        margin: 0 0 5px 0;
        font-weight: 500;
    }

    .stat-content small[b-fzinpcqlg6] {
        font-size: 13px;
        color: #9ca3af;
        display: block;
    }

.stat-change[b-fzinpcqlg6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 10px;
}

    .stat-change.positive[b-fzinpcqlg6] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .stat-change.negative[b-fzinpcqlg6] {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

.stat-breakdown[b-fzinpcqlg6] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 13px;
}

    .stat-breakdown .delivered[b-fzinpcqlg6] {
        color: #059669;
    }

    .stat-breakdown .pending[b-fzinpcqlg6] {
        color: #d97706;
    }

/* Charts Section */
.charts-section[b-fzinpcqlg6] {
    margin-bottom: 24px;
}

.charts-grid[b-fzinpcqlg6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
}

.chart-card[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    min-height: 350px;
}

    .chart-card:hover[b-fzinpcqlg6] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

    .chart-card h3[b-fzinpcqlg6] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 20px 0;
        color: #4c1d95;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        padding-bottom: 15px;
    }

/* Tables Section */
.tables-section[b-fzinpcqlg6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.table-card[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .table-card:hover[b-fzinpcqlg6] {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

.table-header[b-fzinpcqlg6] {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .table-header h3[b-fzinpcqlg6] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.table-actions[b-fzinpcqlg6] {
    display: flex;
    gap: 10px;
}

.btn-link[b-fzinpcqlg6] {
    background: none;
    border: none;
    color: #667eea;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}

    .btn-link:hover[b-fzinpcqlg6] {
        color: #764ba2;
        text-decoration: underline;
    }

.table-responsive[b-fzinpcqlg6] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-modern[b-fzinpcqlg6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

    .table-modern th[b-fzinpcqlg6] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

        .table-modern th:first-child[b-fzinpcqlg6] {
            text-align: left;
        }

    .table-modern td[b-fzinpcqlg6] {
        padding: 16px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .table-modern tbody tr[b-fzinpcqlg6] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: white;
    }

        .table-modern tbody tr:hover[b-fzinpcqlg6] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: translateY(-2px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .table-modern tbody tr:last-child td[b-fzinpcqlg6] {
            border-bottom: none;
        }

/* Order Row Styling */
.order-row[b-fzinpcqlg6] {
    cursor: pointer;
}

.order-number[b-fzinpcqlg6] {
    font-weight: 600;
    color: #4c1d95;
}

.customer-info[b-fzinpcqlg6] {
    display: flex;
    flex-direction: column;
}

.customer-name[b-fzinpcqlg6] {
    font-weight: 500;
    color: #1f2937;
}

.customer-email[b-fzinpcqlg6] {
    font-size: 13px;
    color: #6b7280;
}

.amount-info[b-fzinpcqlg6] {
    display: flex;
    flex-direction: column;
}

.total-amount[b-fzinpcqlg6] {
    font-weight: 600;
    color: #1f2937;
}

.remaining-amount[b-fzinpcqlg6] {
    font-size: 12px;
    color: #ef4444;
}

.status-badge.status-pending[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(253, 230, 138, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-badge.status-processing[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.2) 100%);
    color: #0284c7;
    border: 1px solid rgba(79, 172, 254, 0.3);
}

.status-badge.status-shipped[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.2) 100%);
    color: #2563eb;
    border: 1px solid rgba(79, 172, 254, 0.3);
}

.status-badge.status-delivered[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.status-badge.status-cancelled[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
    color: #dc2626;
    border: 1px solid rgba(245, 87, 108, 0.3);
}

.status-badge.status-returned[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(208, 78, 95, 0.2) 0%, rgba(205, 125, 219, 0.2) 100%);
    color: #be123c;
    border: 1px solid rgba(208, 78, 95, 0.3);
}

.payment-method[b-fzinpcqlg6] {
    font-size: 14px;
    color: #6b7280;
}

.date-info[b-fzinpcqlg6] {
    display: flex;
    flex-direction: column;
}

.order-date[b-fzinpcqlg6] {
    font-weight: 500;
    color: #1f2937;
}

.order-time[b-fzinpcqlg6] {
    font-size: 12px;
    color: #6b7280;
}

.action-buttons[b-fzinpcqlg6] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-action[b-fzinpcqlg6] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-action:hover[b-fzinpcqlg6] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Product Info */
.product-info[b-fzinpcqlg6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-fzinpcqlg6] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-name[b-fzinpcqlg6] {
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 2px;
}

.product-sku[b-fzinpcqlg6] {
    font-size: 12px;
    color: #6b7280;
}

/* Loading & Error States */
.loading-container[b-fzinpcqlg6], .error-state[b-fzinpcqlg6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.spinner-modern[b-fzinpcqlg6] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(102, 126, 234, 0.1);
    border-left-color: #667eea;
    border-radius: 50%;
    animation: spin-b-fzinpcqlg6 1s linear infinite;
    margin-bottom: 20px;
}

.loading-container p[b-fzinpcqlg6] {
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
}

.error-state i[b-fzinpcqlg6] {
    font-size: 60px;
    color: #ef4444;
    margin-bottom: 20px;
}

.error-state h3[b-fzinpcqlg6] {
    font-size: 24px;
    color: #1f2937;
    margin-bottom: 10px;
}

.error-state p[b-fzinpcqlg6] {
    color: #6b7280;
    margin-bottom: 20px;
}

/* Button Styles */
.btn-primary[b-fzinpcqlg6], .btn-secondary[b-fzinpcqlg6] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

.btn-secondary[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
}

    .btn-primary:hover[b-fzinpcqlg6], .btn-secondary:hover[b-fzinpcqlg6] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }

.btn-primary-gradient[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-primary-gradient:hover[b-fzinpcqlg6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Unauthorized Access */
.unauthorized-modern[b-fzinpcqlg6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.unauthorized-content[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: center;
    max-width: 500px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .unauthorized-content i[b-fzinpcqlg6] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-fzinpcqlg6] {
        font-size: 24px;
        color: #1f2937;
        margin-bottom: 10px;
    }

    .unauthorized-content p[b-fzinpcqlg6] {
        color: #6b7280;
        margin-bottom: 20px;
    }

.btn-modern[b-fzinpcqlg6] {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-modern:hover[b-fzinpcqlg6] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Animations */
@keyframes spin-b-fzinpcqlg6 {
    to {
        transform: rotate(360deg);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .merchant-details-sales-page[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .merchant-details-sales-page[b-fzinpcqlg6]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-fzinpcqlg6],
[data-theme="dark"] .merchant-profile-card[b-fzinpcqlg6],
[data-theme="dark"] .filters-section[b-fzinpcqlg6],
[data-theme="dark"] .stat-card[b-fzinpcqlg6],
[data-theme="dark"] .chart-card[b-fzinpcqlg6],
[data-theme="dark"] .table-card[b-fzinpcqlg6],
[data-theme="dark"] .loading-container[b-fzinpcqlg6],
[data-theme="dark"] .error-state[b-fzinpcqlg6],
[data-theme="dark"] .unauthorized-content[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .page-title[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .stat-content h3[b-fzinpcqlg6] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .page-subtitle[b-fzinpcqlg6],
[data-theme="dark"] .stat-content p[b-fzinpcqlg6],
[data-theme="dark"] .stat-content small[b-fzinpcqlg6] {
    color: #9ca3af;
}

[data-theme="dark"] .table-header[b-fzinpcqlg6] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .table-modern tbody tr[b-fzinpcqlg6] {
    background-color: #1e293b;
}

    [data-theme="dark"] .table-modern tbody tr:hover[b-fzinpcqlg6] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .merchant-name[b-fzinpcqlg6],
[data-theme="dark"] .customer-name[b-fzinpcqlg6],
[data-theme="dark"] .product-name[b-fzinpcqlg6],
[data-theme="dark"] .total-amount[b-fzinpcqlg6],
[data-theme="dark"] .order-date[b-fzinpcqlg6] {
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-code[b-fzinpcqlg6],
[data-theme="dark"] .order-number[b-fzinpcqlg6] {
    color: #a78bfa;
}

[data-theme="dark"] .merchant-owner[b-fzinpcqlg6],
[data-theme="dark"] .customer-email[b-fzinpcqlg6],
[data-theme="dark"] .product-sku[b-fzinpcqlg6],
[data-theme="dark"] .payment-method[b-fzinpcqlg6],
[data-theme="dark"] .order-time[b-fzinpcqlg6] {
    color: #9ca3af;
}

[data-theme="dark"] .form-control-modern[b-fzinpcqlg6] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control-modern:focus[b-fzinpcqlg6] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .table-header h3[b-fzinpcqlg6],
[data-theme="dark"] .chart-card h3[b-fzinpcqlg6],
[data-theme="dark"] .filter-group label[b-fzinpcqlg6] {
    color: #e2e8f0;
}

[data-theme="dark"] .table-modern th[b-fzinpcqlg6] {
    color: #a78bfa;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .table-modern td[b-fzinpcqlg6] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .merchant-stats-grid[b-fzinpcqlg6] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-grid[b-fzinpcqlg6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .page-header-enhanced[b-fzinpcqlg6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-fzinpcqlg6] {
        width: 100%;
        justify-content: flex-start;
    }

    .merchant-profile-card[b-fzinpcqlg6] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .merchant-contact[b-fzinpcqlg6] {
        border-right: none;
        border-top: 1px solid rgba(102, 126, 234, 0.1);
        padding-right: 0;
        padding-top: 20px;
        margin-top: 20px;
        align-items: center;
    }

    .merchant-badges[b-fzinpcqlg6] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .merchant-details-sales-page[b-fzinpcqlg6] {
        padding: 16px;
    }

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

    .date-filters[b-fzinpcqlg6] {
        flex-direction: column;
    }

    .btn-primary-gradient[b-fzinpcqlg6],
    .btn-primary[b-fzinpcqlg6],
    .btn-secondary[b-fzinpcqlg6] {
        padding: 10px 16px;
        font-size: 14px;
    }

    .table-modern[b-fzinpcqlg6] {
        font-size: 14px;
    }

    .product-thumb[b-fzinpcqlg6] {
        width: 40px;
        height: 40px;
    }

    .stat-icon[b-fzinpcqlg6] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-content h3[b-fzinpcqlg6] {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .page-title[b-fzinpcqlg6] {
        font-size: 28px;
    }

    .page-subtitle[b-fzinpcqlg6] {
        font-size: 16px;
    }

    .table-header[b-fzinpcqlg6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .btn-action[b-fzinpcqlg6] {
        width: 32px;
        height: 32px;
    }

    .action-buttons[b-fzinpcqlg6] {
        justify-content: center;
    }

    .table-responsive[b-fzinpcqlg6] {
        margin: 0 -16px;
        width: calc(100% + 32px);
    }
}
/* _content/Sahelly/Components/Pages/Admin/NotificationSettings.razor.rz.scp.css */

/* Main Page Container */
.notification-settings-page[b-zff1mxd6o2] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .notification-settings-page[b-zff1mxd6o2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .notification-settings-page > *[b-zff1mxd6o2] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-zff1mxd6o2] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-zff1mxd6o2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-zff1mxd6o2] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-zff1mxd6o2] {
        color: #667eea;
    }

.breadcrumb-separator[b-zff1mxd6o2] {
    color: #d1d5db;
}

.breadcrumb-current[b-zff1mxd6o2] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-zff1mxd6o2] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-zff1mxd6o2] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Loading Container */
.loading-container[b-zff1mxd6o2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-zff1mxd6o2] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-zff1mxd6o2 0.8s linear infinite;
}

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

/* Settings Tabs */
.settings-tabs[b-zff1mxd6o2] {
    margin-bottom: 24px;
}

.nav-tabs[b-zff1mxd6o2] {
    display: flex;
    gap: 8px;
    border-bottom: none;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
}

.nav-item[b-zff1mxd6o2] {
    flex: 1;
    min-width: auto;
}

.nav-link[b-zff1mxd6o2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    color: #4c1d95;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    width: 100%;
    cursor: pointer;
}

    .nav-link:hover[b-zff1mxd6o2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-link.active[b-zff1mxd6o2] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .nav-link i[b-zff1mxd6o2] {
        font-size: 18px;
    }

/* Settings Section */
.settings-section[b-zff1mxd6o2] {
    margin-bottom: 30px;
}

.settings-card[b-zff1mxd6o2] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header[b-zff1mxd6o2] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.card-title[b-zff1mxd6o2] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .card-title i[b-zff1mxd6o2] {
        color: #667eea;
        font-size: 20px;
    }

.card-subtitle[b-zff1mxd6o2] {
    margin: 6px 0 0 0;
    font-size: 14px;
    color: #6b7280;
}

.card-body[b-zff1mxd6o2] {
    padding: 24px;
}

/* Notification Channels */
.notification-channels[b-zff1mxd6o2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.channel-item[b-zff1mxd6o2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .channel-item:hover[b-zff1mxd6o2] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
        background: white;
    }

.channel-info[b-zff1mxd6o2] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.channel-icon[b-zff1mxd6o2] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
}

    .channel-icon.email[b-zff1mxd6o2] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
    }

    .channel-icon.sms[b-zff1mxd6o2] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        box-shadow: 0 4px 10px rgba(67, 233, 123, 0.3);
    }

    .channel-icon.whatsapp[b-zff1mxd6o2] {
        background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
        box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    }

    .channel-icon.push[b-zff1mxd6o2] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        box-shadow: 0 4px 10px rgba(250, 112, 154, 0.3);
    }

    .channel-icon.inapp[b-zff1mxd6o2] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

.channel-details h4[b-zff1mxd6o2] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.channel-details p[b-zff1mxd6o2] {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

/* Toggle Switch */
.switch[b-zff1mxd6o2] {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

    .switch input[b-zff1mxd6o2] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-zff1mxd6o2] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: .4s;
    border-radius: 34px;
}

    .slider[b-zff1mxd6o2]:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

input:checked + .slider[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

input:focus + .slider[b-zff1mxd6o2] {
    box-shadow: 0 0 1px #667eea;
}

input:checked + .slider[b-zff1mxd6o2]:before {
    transform: translateX(30px);
}

/* Form Styles */
.form-grid[b-zff1mxd6o2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.form-group[b-zff1mxd6o2] {
    margin-bottom: 20px;
}

    .form-group.full-width[b-zff1mxd6o2] {
        grid-column: 1 / -1;
    }

    .form-group label[b-zff1mxd6o2] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
    }

.form-control[b-zff1mxd6o2] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-zff1mxd6o2] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

textarea.form-control[b-zff1mxd6o2] {
    resize: vertical;
    min-height: 100px;
}

.form-text[b-zff1mxd6o2] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    display: block;
}

.form-check[b-zff1mxd6o2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.form-check-input[b-zff1mxd6o2] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.form-check-label[b-zff1mxd6o2] {
    font-size: 14px;
    color: #4c1d95;
}

.form-actions[b-zff1mxd6o2] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Template Section Styles */
.template-header[b-zff1mxd6o2] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.table[b-zff1mxd6o2] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

    .table th[b-zff1mxd6o2] {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #4c1d95;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background: rgba(102, 126, 234, 0.05);
    }

    .table td[b-zff1mxd6o2] {
        padding: 16px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .table tbody tr[b-zff1mxd6o2] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .table tbody tr:hover[b-zff1mxd6o2] {
            background: rgba(102, 126, 234, 0.05);
        }

.template-name[b-zff1mxd6o2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.badge[b-zff1mxd6o2] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bg-info[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.bg-success[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.bg-secondary[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
    color: #4b5563;
}

.btn-group[b-zff1mxd6o2] {
    display: flex;
    gap: 6px;
}

/* Templates Grid for Mobile */
.templates-grid[b-zff1mxd6o2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.template-card[b-zff1mxd6o2] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    flex-direction: column;
}

    .template-card:hover[b-zff1mxd6o2] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    .template-card .template-header[b-zff1mxd6o2] {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background: rgba(102, 126, 234, 0.05);
    }

    .template-card h4[b-zff1mxd6o2] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
    }

.template-body[b-zff1mxd6o2] {
    padding: 16px;
    flex-grow: 1;
}

.template-subject[b-zff1mxd6o2] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

.template-meta[b-zff1mxd6o2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #9ca3af;
}

.template-actions[b-zff1mxd6o2] {
    padding: 12px 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Test Results */
.test-results[b-zff1mxd6o2] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .test-results h4[b-zff1mxd6o2] {
        font-size: 18px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 16px;
    }

.alert[b-zff1mxd6o2] {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .alert i[b-zff1mxd6o2] {
        font-size: 16px;
    }

    .alert small[b-zff1mxd6o2] {
        margin-left: auto;
        opacity: 0.7;
    }

.alert-success[b-zff1mxd6o2] {
    background: rgba(67, 233, 123, 0.1);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.2);
}

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

/* Page Actions */
.page-actions[b-zff1mxd6o2] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 30px;
}

.btn[b-zff1mxd6o2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-weight: 600;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}

.btn-primary[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-zff1mxd6o2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .btn-primary:disabled[b-zff1mxd6o2] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-secondary[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

    .btn-secondary:hover[b-zff1mxd6o2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
    }

.btn-outline-primary[b-zff1mxd6o2] {
    background: transparent;
    color: #5a6cb3;
    border: 1px solid #5a6cb3;
}

    .btn-outline-primary:hover[b-zff1mxd6o2] {
        background: rgba(90, 108, 179, 0.1);
    }

.btn-outline-danger[b-zff1mxd6o2] {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}

    .btn-outline-danger:hover[b-zff1mxd6o2] {
        background: rgba(239, 68, 68, 0.1);
    }

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

.btn-icon[b-zff1mxd6o2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Unauthorized Container */
.unauthorized-container[b-zff1mxd6o2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.unauthorized-content[b-zff1mxd6o2] {
    text-align: center;
    padding: 40px;
    max-width: 500px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-zff1mxd6o2] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-zff1mxd6o2] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 12px;
    }

    .unauthorized-content p[b-zff1mxd6o2] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .notification-settings-page[b-zff1mxd6o2] {
        padding: 16px;
    }

    .page-header[b-zff1mxd6o2] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-zff1mxd6o2] {
        font-size: 26px;
    }

    .page-subtitle[b-zff1mxd6o2] {
        font-size: 15px;
    }

    .nav-tabs[b-zff1mxd6o2] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .nav-item[b-zff1mxd6o2] {
        flex: 0 0 auto;
        min-width: 150px;
    }

    .nav-link[b-zff1mxd6o2] {
        padding: 12px;
        font-size: 14px;
    }

    .card-header[b-zff1mxd6o2] {
        padding: 16px;
    }

    .card-body[b-zff1mxd6o2] {
        padding: 16px;
    }

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

    .channel-info[b-zff1mxd6o2] {
        gap: 12px;
    }

    .channel-icon[b-zff1mxd6o2] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .templates-grid[b-zff1mxd6o2] {
        grid-template-columns: 1fr;
    }

    .page-actions[b-zff1mxd6o2] {
        flex-direction: column;
    }

        .page-actions .btn[b-zff1mxd6o2] {
            width: 100%;
        }

    .btn[b-zff1mxd6o2] {
        padding: 10px 20px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .notification-settings-page[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .notification-settings-page[b-zff1mxd6o2]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-zff1mxd6o2],
[data-theme="dark"] .settings-card[b-zff1mxd6o2],
[data-theme="dark"] .unauthorized-content[b-zff1mxd6o2] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .nav-link[b-zff1mxd6o2] {
    background: rgba(30, 41, 59, 0.95);
    color: #e2e8f0;
}

    [data-theme="dark"] .nav-link.active[b-zff1mxd6o2] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .card-header[b-zff1mxd6o2] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .channel-item[b-zff1mxd6o2] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .channel-item:hover[b-zff1mxd6o2] {
        background: rgba(30, 41, 59, 0.8);
    }

[data-theme="dark"] .breadcrumb-link[b-zff1mxd6o2] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-zff1mxd6o2] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-zff1mxd6o2] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle[b-zff1mxd6o2] {
    color: #9ca3af;
}

[data-theme="dark"] .card-title[b-zff1mxd6o2] {
    color: #e2e8f0;
}

    [data-theme="dark"] .card-title i[b-zff1mxd6o2] {
        color: #a78bfa;
    }

[data-theme="dark"] .card-subtitle[b-zff1mxd6o2] {
    color: #9ca3af;
}

[data-theme="dark"] .channel-details h4[b-zff1mxd6o2] {
    color: #e2e8f0;
}

[data-theme="dark"] .channel-details p[b-zff1mxd6o2] {
    color: #9ca3af;
}

[data-theme="dark"] .slider[b-zff1mxd6o2] {
    background-color: #475569;
}

[data-theme="dark"] input:checked + .slider[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .form-group label[b-zff1mxd6o2],
[data-theme="dark"] .form-check-label[b-zff1mxd6o2] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-zff1mxd6o2] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-zff1mxd6o2] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #5a6cb3;
    }

[data-theme="dark"] .form-text[b-zff1mxd6o2] {
    color: #9ca3af;
}

[data-theme="dark"] .table th[b-zff1mxd6o2] {
    color: #e2e8f0;
    background: rgba(71, 85, 105, 0.3);
    border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .table td[b-zff1mxd6o2] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .table tbody tr:hover[b-zff1mxd6o2] {
    background: rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .template-card[b-zff1mxd6o2] {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .template-card .template-header[b-zff1mxd6o2] {
        background: rgba(71, 85, 105, 0.3);
        border-bottom: 1px solid rgba(71, 85, 105, 0.5);
    }

    [data-theme="dark"] .template-card h4[b-zff1mxd6o2] {
        color: #e2e8f0;
    }

[data-theme="dark"] .template-subject[b-zff1mxd6o2] {
    color: #9ca3af;
}

[data-theme="dark"] .template-meta[b-zff1mxd6o2] {
    color: #64748b;
}

[data-theme="dark"] .template-actions[b-zff1mxd6o2] {
    border-top: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .test-results h4[b-zff1mxd6o2] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content h3[b-zff1mxd6o2] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content p[b-zff1mxd6o2] {
    color: #9ca3af;
}

[data-theme="dark"] .btn-secondary[b-zff1mxd6o2] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}
/* _content/Sahelly/Components/Pages/Admin/NotificationsPge.razor.rz.scp.css */
/* Notifications Page Styles */
.notifications-page[b-nzxxsyo0u2] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
}

/* Header Styles */
.page-header-enhanced[b-nzxxsyo0u2] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-content[b-nzxxsyo0u2] {
    flex: 1;
}

.breadcrumb-modern[b-nzxxsyo0u2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.breadcrumb-item[b-nzxxsyo0u2] {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .breadcrumb-item:hover[b-nzxxsyo0u2] {
        color: #007bff;
    }

.breadcrumb-current[b-nzxxsyo0u2] {
    color: #495057;
    font-weight: 500;
}

.separator[b-nzxxsyo0u2] {
    color: #dee2e6;
}

.header-title-section[b-nzxxsyo0u2] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title-modern[b-nzxxsyo0u2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
}

.title-icon[b-nzxxsyo0u2] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.page-subtitle-enhanced[b-nzxxsyo0u2] {
    margin: 8px 0 0 0;
    color: #6c757d;
    font-size: 16px;
}

.header-actions[b-nzxxsyo0u2] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-primary-modern[b-nzxxsyo0u2], .btn-secondary-modern[b-nzxxsyo0u2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary-modern[b-nzxxsyo0u2] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

    .btn-primary-modern:hover[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
    }

.btn-secondary-modern[b-nzxxsyo0u2] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-secondary-modern:hover[b-nzxxsyo0u2] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

/* Loading Styles */
.loading-modern[b-nzxxsyo0u2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner-container[b-nzxxsyo0u2] {
    text-align: center;
}

.spinner-modern[b-nzxxsyo0u2] {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin-b-nzxxsyo0u2 1s linear infinite;
    margin: 0 auto 16px;
}

.loading-text-modern[b-nzxxsyo0u2] {
    color: #6c757d;
    font-size: 16px;
    margin: 0;
}

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

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

@keyframes spinning-b-nzxxsyo0u2 {
    0% {
        transform: rotate(0deg);
    }

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

.spinning[b-nzxxsyo0u2] {
    animation: spinning-b-nzxxsyo0u2 1s linear infinite;
}

/* Statistics Cards */
.stats-cards-row[b-nzxxsyo0u2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card-modern[b-nzxxsyo0u2] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

    .stat-card-modern:hover[b-nzxxsyo0u2] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

.stat-icon-container[b-nzxxsyo0u2] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.total-card .stat-icon-container[b-nzxxsyo0u2] {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.unread-card .stat-icon-container[b-nzxxsyo0u2] {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.high-priority-card .stat-icon-container[b-nzxxsyo0u2] {
    background: linear-gradient(135deg, #ffc107, #e0a800);
}

.today-card .stat-icon-container[b-nzxxsyo0u2] {
    background: linear-gradient(135deg, #28a745, #1e7e34);
}

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

.stat-number[b-nzxxsyo0u2] {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #2c3e50;
}

.stat-label[b-nzxxsyo0u2] {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

/* Filters Section */
.filters-section-modern[b-nzxxsyo0u2] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.filters-row[b-nzxxsyo0u2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.filter-group[b-nzxxsyo0u2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-nzxxsyo0u2] {
    font-weight: 500;
    color: #495057;
    font-size: 14px;
    margin: 0;
}

.filter-select[b-nzxxsyo0u2] {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    color: #495057;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .filter-select:focus[b-nzxxsyo0u2] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.search-section[b-nzxxsyo0u2] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.search-input-container[b-nzxxsyo0u2] {
    flex: 1;
    position: relative;
}

.search-input[b-nzxxsyo0u2] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .search-input:focus[b-nzxxsyo0u2] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.search-icon[b-nzxxsyo0u2] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.clear-search-btn[b-nzxxsyo0u2] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    .clear-search-btn:hover[b-nzxxsyo0u2] {
        background: #f8f9fa;
        color: #495057;
    }

.search-btn[b-nzxxsyo0u2] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .search-btn:hover[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #0056b3, #004085);
    }

/* Notifications Container */
.notifications-container[b-nzxxsyo0u2] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.notifications-list[b-nzxxsyo0u2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-card[b-nzxxsyo0u2] {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

    .notification-card:hover[b-nzxxsyo0u2] {
        border-color: #007bff;
        box-shadow: 0 4px 20px rgba(0, 123, 255, 0.1);
        transform: translateY(-2px);
    }

    .notification-card.unread[b-nzxxsyo0u2] {
        border-left: 4px solid #007bff;
        background: linear-gradient(to right, rgba(0, 123, 255, 0.02), white);
    }

    .notification-card.read[b-nzxxsyo0u2] {
        opacity: 0.8;
    }

    .notification-card.urgent[b-nzxxsyo0u2] {
        border-left: 4px solid #dc3545;
    }

    .notification-card.high[b-nzxxsyo0u2] {
        border-left: 4px solid #ffc107;
    }

.notification-content[b-nzxxsyo0u2] {
    padding: 20px;
}

.notification-header[b-nzxxsyo0u2] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.notification-icon-wrapper[b-nzxxsyo0u2] {
    position: relative;
}

.notification-icon[b-nzxxsyo0u2] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

    .notification-icon.order[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #007bff, #0056b3);
    }

    .notification-icon.payment[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .notification-icon.delivery[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

    .notification-icon.return[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .notification-icon.system[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #6c757d, #5a6268);
    }

    .notification-icon.success[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .notification-icon.warning[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .notification-icon.error[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .notification-icon.info[b-nzxxsyo0u2] {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

.unread-indicator[b-nzxxsyo0u2] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #dc3545;
    border: 2px solid white;
    border-radius: 50%;
}

.notification-meta[b-nzxxsyo0u2] {
    flex: 1;
}

.notification-title[b-nzxxsyo0u2] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.notification-badges[b-nzxxsyo0u2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.priority-badge[b-nzxxsyo0u2], .type-badge[b-nzxxsyo0u2] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .priority-badge.urgent[b-nzxxsyo0u2] {
        background: #dc3545;
        color: white;
    }

    .priority-badge.high[b-nzxxsyo0u2] {
        background: #ffc107;
        color: #212529;
    }

    .priority-badge.medium[b-nzxxsyo0u2] {
        background: #17a2b8;
        color: white;
    }

    .priority-badge.low[b-nzxxsyo0u2] {
        background: #6c757d;
        color: white;
    }

.type-badge[b-nzxxsyo0u2] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.notification-time[b-nzxxsyo0u2] {
    text-align: right;
    min-width: 120px;
}

.time-text[b-nzxxsyo0u2] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.date-text[b-nzxxsyo0u2] {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.notification-body[b-nzxxsyo0u2] {
    margin-bottom: 16px;
}

.notification-message[b-nzxxsyo0u2] {
    margin: 0;
    color: #495057;
    line-height: 1.5;
    font-size: 14px;
}

.notification-actions[b-nzxxsyo0u2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #f8f9fa;
    padding-top: 16px;
}

.action-btn[b-nzxxsyo0u2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    background: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.read-btn[b-nzxxsyo0u2] {
    border-color: #28a745;
    color: #28a745;
}

    .read-btn:hover[b-nzxxsyo0u2] {
        background: #28a745;
        color: white;
    }

.view-btn[b-nzxxsyo0u2] {
    border-color: #007bff;
    color: #007bff;
}

    .view-btn:hover[b-nzxxsyo0u2] {
        background: #007bff;
        color: white;
    }

.delete-btn[b-nzxxsyo0u2] {
    border-color: #dc3545;
    color: #dc3545;
}

    .delete-btn:hover[b-nzxxsyo0u2] {
        background: #dc3545;
        color: white;
    }

/* Empty State */
.empty-state-modern[b-nzxxsyo0u2] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-nzxxsyo0u2] {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state-modern h3[b-nzxxsyo0u2] {
    color: #495057;
    margin-bottom: 12px;
    font-size: 24px;
}

.empty-state-modern p[b-nzxxsyo0u2] {
    color: #6c757d;
    margin-bottom: 24px;
    font-size: 16px;
}

/* Pagination */
.pagination-modern[b-nzxxsyo0u2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.pagination-info[b-nzxxsyo0u2] {
    color: #6c757d;
    font-size: 14px;
}

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

.pagination-btn[b-nzxxsyo0u2], .pagination-number[b-nzxxsyo0u2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    background: white;
    color: #495057;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .pagination-btn:hover:not(:disabled)[b-nzxxsyo0u2], .pagination-number:hover[b-nzxxsyo0u2] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

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

    .pagination-number.active[b-nzxxsyo0u2] {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }

/* Unauthorized */
.unauthorized-container[b-nzxxsyo0u2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.unauthorized-content[b-nzxxsyo0u2] {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-nzxxsyo0u2] {
        font-size: 48px;
        color: #dc3545;
        margin-bottom: 16px;
    }

    .unauthorized-content h3[b-nzxxsyo0u2] {
        color: #495057;
        margin-bottom: 12px;
    }

    .unauthorized-content p[b-nzxxsyo0u2] {
        color: #6c757d;
        margin-bottom: 20px;
    }

/* RTL Support */
[dir="rtl"] .notification-card[b-nzxxsyo0u2] {
    border-left: none;
    border-right: 4px solid;
}

    [dir="rtl"] .notification-card.unread[b-nzxxsyo0u2] {
        border-right: 4px solid #007bff;
    }

    [dir="rtl"] .notification-card.urgent[b-nzxxsyo0u2] {
        border-right: 4px solid #dc3545;
    }

    [dir="rtl"] .notification-card.high[b-nzxxsyo0u2] {
        border-right: 4px solid #ffc107;
    }

[dir="rtl"] .search-icon[b-nzxxsyo0u2] {
    right: auto;
    left: 12px;
}

[dir="rtl"] .clear-search-btn[b-nzxxsyo0u2] {
    right: auto;
    left: 12px;
}

[dir="rtl"] .unread-indicator[b-nzxxsyo0u2] {
    right: auto;
    left: -2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notifications-page[b-nzxxsyo0u2] {
        padding: 12px;
    }

    .page-header-enhanced[b-nzxxsyo0u2] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

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

    .stats-cards-row[b-nzxxsyo0u2] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .filters-row[b-nzxxsyo0u2] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .search-section[b-nzxxsyo0u2] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-header[b-nzxxsyo0u2] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-time[b-nzxxsyo0u2] {
        text-align: left;
        min-width: auto;
    }

    .notification-actions[b-nzxxsyo0u2] {
        justify-content: center;
    }

    .pagination-modern[b-nzxxsyo0u2] {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-controls[b-nzxxsyo0u2] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-nzxxsyo0u2] {
        font-size: 24px;
    }

    .stat-card-modern[b-nzxxsyo0u2] {
        padding: 16px;
    }

    .stat-number[b-nzxxsyo0u2] {
        font-size: 24px;
    }

    .notification-content[b-nzxxsyo0u2] {
        padding: 16px;
    }

    .notification-icon[b-nzxxsyo0u2] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .notification-title[b-nzxxsyo0u2] {
        font-size: 14px;
    }
}
/* _content/Sahelly/Components/Pages/Admin/PaymentSettings.razor.rz.scp.css */

/* Payment Settings Page Container */
.payment-settings-container[b-x4paglw1gn] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .payment-settings-container[b-x4paglw1gn]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .payment-settings-container > *[b-x4paglw1gn] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-x4paglw1gn] {
    margin-bottom: 32px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-x4paglw1gn] {
    flex: 1;
}

.page-title[b-x4paglw1gn] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-x4paglw1gn] {
        font-size: 28px;
        color: #667eea;
        -webkit-text-fill-color: #667eea;
    }

.breadcrumb[b-x4paglw1gn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.breadcrumb-item[b-x4paglw1gn] {
    color: #6b7280;
    display: flex;
    align-items: center;
}

    .breadcrumb-item a[b-x4paglw1gn] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb-item a:hover[b-x4paglw1gn] {
            color: #667eea;
        }

    .breadcrumb-item.active[b-x4paglw1gn] {
        color: #4c1d95;
        font-weight: 600;
    }

    .breadcrumb-item + .breadcrumb-item[b-x4paglw1gn]::before {
        content: '/';
        margin-right: 10px;
        color: #d1d5db;
    }

/* Loading Spinner */
.loading-spinner[b-x4paglw1gn] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.spinner-border[b-x4paglw1gn] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-x4paglw1gn 0.8s linear infinite;
}

.spinner-border-sm[b-x4paglw1gn] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

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

/* Alert Messages */
.alert[b-x4paglw1gn] {
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeIn-b-x4paglw1gn 0.3s ease;
}

.alert-danger[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%);
    color: #dc2626;
    border: 1px solid rgba(245, 87, 108, 0.3);
}

.alert i[b-x4paglw1gn] {
    font-size: 20px;
}

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

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

/* Settings Tabs */
.settings-tabs[b-x4paglw1gn] {
    margin-bottom: 24px;
}

.nav-tabs[b-x4paglw1gn] {
    display: flex;
    gap: 8px;
    border-bottom: none;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.nav-item[b-x4paglw1gn] {
    flex: 1;
    min-width: auto;
}

.nav-link[b-x4paglw1gn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    color: #4c1d95;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    width: 100%;
    cursor: pointer;
}

    .nav-link:hover[b-x4paglw1gn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-link.active[b-x4paglw1gn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .nav-link i[b-x4paglw1gn] {
        font-size: 18px;
    }

/* Tab Content */
.tab-content[b-x4paglw1gn] {
    margin-bottom: 24px;
}

/* Gateway Section */
.gateways-section[b-x4paglw1gn] {
    animation: slideUp-b-x4paglw1gn 0.4s ease;
}

.section-header[b-x4paglw1gn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-title[b-x4paglw1gn] {
    font-size: 22px;
    font-weight: 700;
    color: #4c1d95;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .section-title i[b-x4paglw1gn] {
        color: #667eea;
        font-size: 20px;
    }

/* Desktop View */
.gateways-grid[b-x4paglw1gn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.gateway-card[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

    .gateway-card:hover[b-x4paglw1gn] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .gateway-card.active[b-x4paglw1gn] {
        border-color: rgba(67, 233, 123, 0.3);
    }

    .gateway-card.inactive[b-x4paglw1gn] {
        border-color: rgba(245, 87, 108, 0.3);
        opacity: 0.8;
    }

.gateway-header[b-x4paglw1gn] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.gateway-logo[b-x4paglw1gn] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

    .gateway-logo img[b-x4paglw1gn] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
    }

    .gateway-logo i[b-x4paglw1gn] {
        font-size: 28px;
        color: #667eea;
    }

.status-badge[b-x4paglw1gn] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .status-badge.active[b-x4paglw1gn] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-x4paglw1gn] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.gateway-body[b-x4paglw1gn] {
    padding: 20px;
    flex: 1;
}

.gateway-name[b-x4paglw1gn] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #1f2937;
}

.gateway-code[b-x4paglw1gn] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px 0;
}

.gateway-description[b-x4paglw1gn] {
    font-size: 15px;
    color: #4b5563;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.gateway-info[b-x4paglw1gn] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(102, 126, 234, 0.2);
}

.info-item[b-x4paglw1gn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .info-item i[b-x4paglw1gn] {
        color: #667eea;
        font-size: 14px;
        width: 16px;
    }

.gateway-footer[b-x4paglw1gn] {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
}

/* Mobile View for Gateways */
.mobile-view[b-x4paglw1gn] {
    display: none;
}

.mobile-gateway-card[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .mobile-gateway-card.active[b-x4paglw1gn] {
        border-color: rgba(67, 233, 123, 0.3);
    }

    .mobile-gateway-card.inactive[b-x4paglw1gn] {
        border-color: rgba(245, 87, 108, 0.3);
        opacity: 0.8;
    }

.mobile-gateway-header[b-x4paglw1gn] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .mobile-gateway-header h4[b-x4paglw1gn] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

.mobile-gateway-info[b-x4paglw1gn] {
    padding: 12px 16px;
    font-size: 14px;
}

    .mobile-gateway-info p[b-x4paglw1gn] {
        margin: 4px 0;
        color: #6b7280;
    }

        .mobile-gateway-info p strong[b-x4paglw1gn] {
            color: #4c1d95;
        }

.mobile-gateway-actions[b-x4paglw1gn] {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
}

/* Transaction Fees Section */
.fees-section[b-x4paglw1gn] {
    animation: slideUp-b-x4paglw1gn 0.4s ease;
}

.settings-card[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 24px;
}

.card-title[b-x4paglw1gn] {
    font-size: 20px;
    font-weight: 700;
    color: #4c1d95;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .card-title i[b-x4paglw1gn] {
        color: #667eea;
        font-size: 18px;
    }

.settings-grid[b-x4paglw1gn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

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

    .form-group label[b-x4paglw1gn] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

.form-control[b-x4paglw1gn] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-x4paglw1gn] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.input-group[b-x4paglw1gn] {
    display: flex;
}

    .input-group .form-control[b-x4paglw1gn] {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

.input-group-text[b-x4paglw1gn] {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: rgba(102, 126, 234, 0.1);
    color: #4c1d95;
    border: 2px solid transparent;
    border-radius: 0 12px 12px 0;
    font-weight: 600;
}

/* Calculation Methods */
.calculation-methods[b-x4paglw1gn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.radio-option[b-x4paglw1gn] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

    .radio-option:hover[b-x4paglw1gn] {
        background: rgba(102, 126, 234, 0.1);
    }

    .radio-option input[type="radio"][b-x4paglw1gn] {
        margin-top: 3px;
        accent-color: #667eea;
    }

.radio-content[b-x4paglw1gn] {
    flex: 1;
}

.radio-title[b-x4paglw1gn] {
    display: block;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.radio-description[b-x4paglw1gn] {
    font-size: 14px;
    color: #6b7280;
}

/* Payment Methods Tab */
.methods-section[b-x4paglw1gn] {
    animation: slideUp-b-x4paglw1gn 0.4s ease;
}

.payment-methods-grid[b-x4paglw1gn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.payment-method-card[b-x4paglw1gn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .payment-method-card:hover[b-x4paglw1gn] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
        background: white;
    }

    .payment-method-card.enabled[b-x4paglw1gn] {
        border-color: rgba(67, 233, 123, 0.3);
    }

    .payment-method-card.disabled[b-x4paglw1gn] {
        opacity: 0.7;
    }

.method-icon[b-x4paglw1gn] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.method-details[b-x4paglw1gn] {
    flex: 1;
}

    .method-details h5[b-x4paglw1gn] {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: #1f2937;
    }

    .method-details p[b-x4paglw1gn] {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
    }

.method-toggle[b-x4paglw1gn] {
    margin-left: auto;
}

/* Toggle Switch */
.switch[b-x4paglw1gn] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

    .switch input[b-x4paglw1gn] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-x4paglw1gn] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: .4s;
    border-radius: 34px;
}

    .slider[b-x4paglw1gn]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

input:checked + .slider[b-x4paglw1gn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

input:focus + .slider[b-x4paglw1gn] {
    box-shadow: 0 0 1px #667eea;
}

input:checked + .slider[b-x4paglw1gn]:before {
    transform: translateX(24px);
}

.checkbox-label[b-x4paglw1gn] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

    .checkbox-label input[type="checkbox"][b-x4paglw1gn] {
        width: 18px;
        height: 18px;
        accent-color: #667eea;
    }

/* Statistics Tab */
.statistics-section[b-x4paglw1gn] {
    animation: slideUp-b-x4paglw1gn 0.4s ease;
}

.stats-overview[b-x4paglw1gn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-x4paglw1gn]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-x4paglw1gn] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-x4paglw1gn]::before {
            opacity: 1;
        }

.stat-icon[b-x4paglw1gn] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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

    .stat-icon.success[b-x4paglw1gn] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-icon.warning[b-x4paglw1gn] {
        background: linear-gradient(135deg, #ffa755 0%, #ff764b 100%);
    }

    .stat-icon.info[b-x4paglw1gn] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

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

    .stat-content h4[b-x4paglw1gn] {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 4px 0;
        font-weight: 500;
    }

.stat-value[b-x4paglw1gn] {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-percentage[b-x4paglw1gn] {
    font-size: 14px;
    color: #059669;
    font-weight: 600;
}

.stat-change[b-x4paglw1gn] {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .stat-change.positive[b-x4paglw1gn] {
        color: #059669;
    }

    .stat-change.negative[b-x4paglw1gn] {
        color: #dc2626;
    }

.charts-row[b-x4paglw1gn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

.chart-card[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.chart-title[b-x4paglw1gn] {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
    margin: 0 0 16px 0;
}

/* Footer Actions */
.settings-footer[b-x4paglw1gn] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Button Styles */
.btn[b-x4paglw1gn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-weight: 600;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}

.btn-primary[b-x4paglw1gn] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-x4paglw1gn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-x4paglw1gn] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

    .btn-secondary:hover[b-x4paglw1gn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
    }

.btn-info[b-x4paglw1gn] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(79, 172, 254, 0.2);
}

    .btn-info:hover[b-x4paglw1gn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(79, 172, 254, 0.3);
    }

.btn-success[b-x4paglw1gn] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-success:hover[b-x4paglw1gn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-warning[b-x4paglw1gn] {
    background: linear-gradient(135deg, #ffa755 0%, #ff764b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(255, 167, 85, 0.2);
}

    .btn-warning:hover[b-x4paglw1gn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(255, 167, 85, 0.3);
    }

.btn-sm[b-x4paglw1gn] {
    padding: 8px 12px;
    font-size: 14px;
}

.btn-outline-primary[b-x4paglw1gn] {
    background: transparent;
    color: #5a6cb3;
    border: 1px solid #5a6cb3;
}

    .btn-outline-primary:hover[b-x4paglw1gn] {
        background: rgba(90, 108, 179, 0.1);
    }

.btn-outline-info[b-x4paglw1gn] {
    background: transparent;
    color: #4facfe;
    border: 1px solid #4facfe;
}

    .btn-outline-info:hover[b-x4paglw1gn] {
        background: rgba(79, 172, 254, 0.1);
    }

.btn-outline-success[b-x4paglw1gn] {
    background: transparent;
    color: #3bc968;
    border: 1px solid #3bc968;
}

    .btn-outline-success:hover[b-x4paglw1gn] {
        background: rgba(59, 201, 104, 0.1);
    }

.btn-outline-warning[b-x4paglw1gn] {
    background: transparent;
    color: #ffa755;
    border: 1px solid #ffa755;
}

    .btn-outline-warning:hover[b-x4paglw1gn] {
        background: rgba(255, 167, 85, 0.1);
    }

.btn:disabled[b-x4paglw1gn] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Modal Styles */
.modal-backdrop[b-x4paglw1gn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
}

.modal-dialog[b-x4paglw1gn] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 100%;
    max-width: 500px;
    animation: zoomIn-b-x4paglw1gn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomIn-b-x4paglw1gn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-content[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-x4paglw1gn] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-x4paglw1gn] {
    font-size: 20px;
    font-weight: 700;
    color: #4c1d95;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .modal-title i[b-x4paglw1gn] {
        color: #667eea;
    }

.close[b-x4paglw1gn] {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
}

    .close:hover[b-x4paglw1gn] {
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-x4paglw1gn] {
    padding: 24px;
}

.modal-footer[b-x4paglw1gn] {
    padding: 16px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Animations */
@keyframes slideUp-b-x4paglw1gn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* RTL Support */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item[b-x4paglw1gn]::before {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="rtl"] .method-toggle[b-x4paglw1gn] {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .info-item i[b-x4paglw1gn],
html[dir="rtl"] .method-icon[b-x4paglw1gn],
html[dir="rtl"] .stat-icon[b-x4paglw1gn],
html[dir="rtl"] .section-title i[b-x4paglw1gn],
html[dir="rtl"] .card-title i[b-x4paglw1gn],
html[dir="rtl"] .page-title i[b-x4paglw1gn],
html[dir="rtl"] .modal-title i[b-x4paglw1gn] {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] input:checked + .slider[b-x4paglw1gn]:before {
    transform: translateX(-24px);
}

html[dir="rtl"] .slider[b-x4paglw1gn]:before {
    left: auto;
    right: 4px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .charts-row[b-x4paglw1gn] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .payment-settings-container[b-x4paglw1gn] {
        padding: 16px;
    }

    .page-header[b-x4paglw1gn] {
        padding: 16px;
        margin-bottom: 24px;
        flex-direction: column;
    }

    .page-title[b-x4paglw1gn] {
        font-size: 28px;
    }

    .desktop-view[b-x4paglw1gn] {
        display: none;
    }

    .mobile-view[b-x4paglw1gn] {
        display: block;
    }

    .nav-tabs[b-x4paglw1gn] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .nav-item[b-x4paglw1gn] {
        flex: 0 0 auto;
        min-width: 150px;
    }

    .nav-link[b-x4paglw1gn] {
        padding: 12px;
        font-size: 14px;
    }

    .section-header[b-x4paglw1gn] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        align-items: stretch;
    }

    .settings-grid[b-x4paglw1gn],
    .stats-overview[b-x4paglw1gn] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .payment-methods-grid[b-x4paglw1gn] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-x4paglw1gn] {
        padding: 16px;
    }

    .stat-icon[b-x4paglw1gn] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .stat-value[b-x4paglw1gn] {
        font-size: 24px;
    }

    .settings-footer[b-x4paglw1gn] {
        flex-direction: column;
        gap: 12px;
    }

        .settings-footer .btn[b-x4paglw1gn] {
            width: 100%;
        }

    .modal-dialog[b-x4paglw1gn] {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .payment-method-card[b-x4paglw1gn] {
        flex-direction: column;
        text-align: center;
        padding: 16px 12px;
    }

    .method-details h5[b-x4paglw1gn] {
        margin-top: 8px;
    }

    .method-toggle[b-x4paglw1gn] {
        margin: 12px 0 0 0;
    }

    .gateway-footer[b-x4paglw1gn] {
        flex-direction: column;
        gap: 8px;
    }

        .gateway-footer .btn[b-x4paglw1gn] {
            width: 100%;
        }
}

/* Dark Theme Support */
[data-theme="dark"] .payment-settings-container[b-x4paglw1gn] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .payment-settings-container[b-x4paglw1gn]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-x4paglw1gn],
[data-theme="dark"] .gateway-card[b-x4paglw1gn],
[data-theme="dark"] .mobile-gateway-card[b-x4paglw1gn],
[data-theme="dark"] .settings-card[b-x4paglw1gn],
[data-theme="dark"] .stat-card[b-x4paglw1gn],
[data-theme="dark"] .chart-card[b-x4paglw1gn],
[data-theme="dark"] .modal-content[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .gateway-logo[b-x4paglw1gn] {
    background: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .gateway-header[b-x4paglw1gn],
[data-theme="dark"] .mobile-gateway-header[b-x4paglw1gn],
[data-theme="dark"] .modal-header[b-x4paglw1gn] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .gateway-footer[b-x4paglw1gn],
[data-theme="dark"] .mobile-gateway-actions[b-x4paglw1gn],
[data-theme="dark"] .modal-footer[b-x4paglw1gn] {
    background: rgba(71, 85, 105, 0.2);
    border-top: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .nav-link[b-x4paglw1gn] {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
}

    [data-theme="dark"] .nav-link.active[b-x4paglw1gn] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

[data-theme="dark"] .page-title[b-x4paglw1gn],
[data-theme="dark"] .stat-value[b-x4paglw1gn] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    [data-theme="dark"] .page-title i[b-x4paglw1gn] {
        color: #a78bfa;
        -webkit-text-fill-color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-item a[b-x4paglw1gn],
[data-theme="dark"] .gateway-code[b-x4paglw1gn],
[data-theme="dark"] .gateway-description[b-x4paglw1gn],
[data-theme="dark"] .info-item[b-x4paglw1gn],
[data-theme="dark"] .method-details p[b-x4paglw1gn],
[data-theme="dark"] .stat-content h4[b-x4paglw1gn],
[data-theme="dark"] .mobile-gateway-info p[b-x4paglw1gn] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-item.active[b-x4paglw1gn],
[data-theme="dark"] .section-title[b-x4paglw1gn],
[data-theme="dark"] .card-title[b-x4paglw1gn],
[data-theme="dark"] .chart-title[b-x4paglw1gn],
[data-theme="dark"] .modal-title[b-x4paglw1gn],
[data-theme="dark"] .form-group label[b-x4paglw1gn] {
    color: #e2e8f0;
}

[data-theme="dark"] .gateway-name[b-x4paglw1gn],
[data-theme="dark"] .method-details h5[b-x4paglw1gn],
[data-theme="dark"] .radio-title[b-x4paglw1gn],
[data-theme="dark"] .mobile-gateway-header h4[b-x4paglw1gn] {
    color: #e2e8f0;
}

[data-theme="dark"] .section-title i[b-x4paglw1gn],
[data-theme="dark"] .card-title i[b-x4paglw1gn],
[data-theme="dark"] .modal-title i[b-x4paglw1gn],
[data-theme="dark"] .info-item i[b-x4paglw1gn] {
    color: #a78bfa;
}

[data-theme="dark"] .form-control[b-x4paglw1gn],
[data-theme="dark"] .radio-option[b-x4paglw1gn] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-x4paglw1gn] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

    [data-theme="dark"] .radio-option:hover[b-x4paglw1gn] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .input-group-text[b-x4paglw1gn] {
    background: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

[data-theme="dark"] .radio-description[b-x4paglw1gn] {
    color: #9ca3af;
}

[data-theme="dark"] .payment-method-card[b-x4paglw1gn] {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .payment-method-card:hover[b-x4paglw1gn] {
        background: rgba(30, 41, 59, 0.9);
    }

[data-theme="dark"] .gateway-info[b-x4paglw1gn] {
    border-top: 1px dashed rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .alert-danger[b-x4paglw1gn] {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .slider[b-x4paglw1gn] {
    background-color: #475569;
}

    [data-theme="dark"] .slider[b-x4paglw1gn]:before {
        background-color: #e2e8f0;
    }

[data-theme="dark"] .settings-footer[b-x4paglw1gn] {
    border-top: 1px solid rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .modal-backdrop[b-x4paglw1gn] {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .close[b-x4paglw1gn] {
    color: #9ca3af;
}

    [data-theme="dark"] .close:hover[b-x4paglw1gn] {
        color: #e2e8f0;
    }

[data-theme="dark"] .btn-secondary[b-x4paglw1gn] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .btn-outline-primary[b-x4paglw1gn],
[data-theme="dark"] .btn-outline-info[b-x4paglw1gn],
[data-theme="dark"] .btn-outline-success[b-x4paglw1gn],
[data-theme="dark"] .btn-outline-warning[b-x4paglw1gn] {
    color: #e2e8f0;
}
/* _content/Sahelly/Components/Pages/Admin/ReportView.razor.rz.scp.css */

/* Report View Page - Professional Architecture
   Based on Users.razor.css with app.css consistency
   ================================================ */

/* Page Container */
.report-view-page[b-4f14w8uoy9] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .report-view-page[b-4f14w8uoy9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .report-view-page > *[b-4f14w8uoy9] {
        position: relative;
        z-index: 1;
    }

/* Report Header */
.report-header[b-4f14w8uoy9] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Modern Breadcrumb */
.breadcrumb-modern[b-4f14w8uoy9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-item[b-4f14w8uoy9] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-4f14w8uoy9] {
        color: #667eea;
    }

.breadcrumb-modern .separator[b-4f14w8uoy9] {
    color: #d1d5db;
}

.breadcrumb-modern .current[b-4f14w8uoy9] {
    color: #4c1d95;
    font-weight: 600;
}

/* Report Title Section */
.report-title-section[b-4f14w8uoy9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-top: 16px;
}

.title-info[b-4f14w8uoy9] {
    flex: 1;
}

.report-title[b-4f14w8uoy9] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .report-title i[b-4f14w8uoy9] {
        font-size: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.report-description[b-4f14w8uoy9] {
    font-size: 18px;
    color: #6b7280;
    margin: 0 0 16px 0;
    font-weight: 400;
}

/* Report Meta Information */
.report-meta[b-4f14w8uoy9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.meta-item[b-4f14w8uoy9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.meta-label[b-4f14w8uoy9] {
    color: #6b7280;
    font-weight: 600;
}

.meta-value[b-4f14w8uoy9] {
    color: #4c1d95;
    font-weight: 500;
}

/* Report Actions */
.report-actions[b-4f14w8uoy9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 280px;
}

.action-group[b-4f14w8uoy9] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.view-controls[b-4f14w8uoy9] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.chart-type-label[b-4f14w8uoy9] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
}

.form-control-small[b-4f14w8uoy9] {
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
}

    .form-control-small:focus[b-4f14w8uoy9] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Summary Section */
.summary-section[b-4f14w8uoy9] {
    margin-bottom: 32px;
}

.summary-cards[b-4f14w8uoy9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.summary-card[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-4f14w8uoy9]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-4f14w8uoy9] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .summary-card:hover[b-4f14w8uoy9]::before {
            opacity: 1;
        }

.card-icon[b-4f14w8uoy9] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-card.revenue .card-icon[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.summary-card.expenses .card-icon[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.summary-card.profit .card-icon[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.summary-card.orders .card-icon[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.summary-card.customers .card-icon[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.card-content[b-4f14w8uoy9] {
    flex: 1;
}

    .card-content h3[b-4f14w8uoy9] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 4px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .card-content p[b-4f14w8uoy9] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Charts Section */
.charts-section[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-header[b-4f14w8uoy9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .section-header h2[b-4f14w8uoy9] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #4c1d95;
    }

.chart-controls[b-4f14w8uoy9] {
    display: flex;
    gap: 8px;
}

.chart-btn[b-4f14w8uoy9] {
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
}

    .chart-btn:hover[b-4f14w8uoy9] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

    .chart-btn.active[b-4f14w8uoy9] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

.chart-container[b-4f14w8uoy9] {
    padding: 24px;
    position: relative;
    min-height: 400px;
}

/* Detailed Data Section */
.detailed-data-section[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.data-controls[b-4f14w8uoy9] {
    display: flex;
    gap: 8px;
}

.data-content[b-4f14w8uoy9] {
    padding: 24px;
}

/* Data Table for Detailed Reports */
.data-table[b-4f14w8uoy9] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

    .data-table th[b-4f14w8uoy9] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .data-table td[b-4f14w8uoy9] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
    }

    .data-table tbody tr[b-4f14w8uoy9] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .data-table tbody tr:hover[b-4f14w8uoy9] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
        }

/* Related Reports Section */
.related-reports-section[b-4f14w8uoy9] {
    margin-bottom: 32px;
}

.related-reports-grid[b-4f14w8uoy9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.related-report-card[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

    .related-report-card:hover[b-4f14w8uoy9] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
    }

.card-content h4[b-4f14w8uoy9] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1f2937;
}

.report-period[b-4f14w8uoy9] {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}

.report-format[b-4f14w8uoy9] {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
}

.report-date[b-4f14w8uoy9] {
    font-size: 13px;
    color: #9333ea;
}

.card-action[b-4f14w8uoy9] {
    width: 36px;
    height: 36px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    transition: all 0.3s;
}

.related-report-card:hover .card-action[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Loading States */
.loading-container[b-4f14w8uoy9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 24px;
    text-align: center;
    color: #4c1d95;
    font-weight: 500;
}

.spinner-modern[b-4f14w8uoy9] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-4f14w8uoy9 0.8s linear infinite;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

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

/* Error State */
.error-container[b-4f14w8uoy9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.error-content[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 48px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .error-content i[b-4f14w8uoy9] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .error-content h3[b-4f14w8uoy9] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #1f2937;
    }

    .error-content p[b-4f14w8uoy9] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* No Detailed Data State */
.no-detail-data[b-4f14w8uoy9] {
    text-align: center;
    padding: 40px 20px;
}

    .no-detail-data i[b-4f14w8uoy9] {
        font-size: 48px;
        color: #9333ea;
        margin-bottom: 16px;
    }

    .no-detail-data p[b-4f14w8uoy9] {
        font-size: 18px;
        color: #6b7280;
    }

/* Button Styles (Consistent with Users.razor.css) */
.btn-primary[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-4f14w8uoy9] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-secondary:hover[b-4f14w8uoy9] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Unauthorized Access State */
.unauthorized-modern[b-4f14w8uoy9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

.unauthorized-content[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 48px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .unauthorized-content i[b-4f14w8uoy9] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-4f14w8uoy9] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #1f2937;
    }

    .unauthorized-content p[b-4f14w8uoy9] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-modern[b-4f14w8uoy9] {
    display: inline-block;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

/* Data Type Specific Sections */
.sales-detail-data[b-4f14w8uoy9],
.financial-detail-data[b-4f14w8uoy9],
.inventory-detail-data[b-4f14w8uoy9],
.agents-detail-data[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

/* Dark Theme Support */
[data-theme="dark"] .report-view-page[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .report-view-page[b-4f14w8uoy9]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .report-header[b-4f14w8uoy9],
[data-theme="dark"] .summary-card[b-4f14w8uoy9],
[data-theme="dark"] .charts-section[b-4f14w8uoy9],
[data-theme="dark"] .detailed-data-section[b-4f14w8uoy9],
[data-theme="dark"] .related-report-card[b-4f14w8uoy9],
[data-theme="dark"] .error-content[b-4f14w8uoy9],
[data-theme="dark"] .unauthorized-content[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-4f14w8uoy9] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-4f14w8uoy9] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-modern .current[b-4f14w8uoy9] {
    color: #e2e8f0;
}

[data-theme="dark"] .report-title[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .report-description[b-4f14w8uoy9] {
    color: #9ca3af;
}

[data-theme="dark"] .meta-label[b-4f14w8uoy9] {
    color: #9ca3af;
}

[data-theme="dark"] .meta-value[b-4f14w8uoy9] {
    color: #e2e8f0;
}

[data-theme="dark"] .chart-type-label[b-4f14w8uoy9] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control-small[b-4f14w8uoy9] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control-small:focus[b-4f14w8uoy9] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .section-header[b-4f14w8uoy9] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

    [data-theme="dark"] .section-header h2[b-4f14w8uoy9] {
        color: #e2e8f0;
    }

[data-theme="dark"] .chart-btn[b-4f14w8uoy9] {
    color: #9ca3af;
}

    [data-theme="dark"] .chart-btn:hover[b-4f14w8uoy9] {
        background: rgba(167, 139, 250, 0.1);
        color: #a78bfa;
    }

    [data-theme="dark"] .chart-btn.active[b-4f14w8uoy9] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .card-content h3[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .card-content p[b-4f14w8uoy9] {
    color: #9ca3af;
}

[data-theme="dark"] .data-table th[b-4f14w8uoy9] {
    color: #a78bfa;
}

[data-theme="dark"] .data-table td[b-4f14w8uoy9] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .data-table tbody tr:hover[b-4f14w8uoy9] {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
}

[data-theme="dark"] .card-content h4[b-4f14w8uoy9] {
    color: #e2e8f0;
}

[data-theme="dark"] .report-period[b-4f14w8uoy9] {
    color: #9ca3af;
}

[data-theme="dark"] .report-format[b-4f14w8uoy9] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

[data-theme="dark"] .report-date[b-4f14w8uoy9] {
    color: #c084fc;
}

[data-theme="dark"] .card-action[b-4f14w8uoy9] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

[data-theme="dark"] .related-report-card:hover .card-action[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
}

[data-theme="dark"] .loading-container[b-4f14w8uoy9] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content i[b-4f14w8uoy9] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .unauthorized-content h3[b-4f14w8uoy9],
[data-theme="dark"] .error-content h3[b-4f14w8uoy9] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content p[b-4f14w8uoy9],
[data-theme="dark"] .error-content p[b-4f14w8uoy9],
[data-theme="dark"] .no-detail-data p[b-4f14w8uoy9] {
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .report-title-section[b-4f14w8uoy9] {
        flex-direction: column;
    }

    .report-actions[b-4f14w8uoy9] {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .report-view-page[b-4f14w8uoy9] {
        padding: 16px;
    }

    .report-header[b-4f14w8uoy9] {
        padding: 16px;
    }

    .report-title[b-4f14w8uoy9] {
        font-size: 28px;
    }

    .report-description[b-4f14w8uoy9] {
        font-size: 16px;
    }

    .report-actions[b-4f14w8uoy9] {
        flex-direction: column;
    }

    .action-group[b-4f14w8uoy9] {
        flex-direction: column;
        width: 100%;
    }

        .action-group button[b-4f14w8uoy9] {
            width: 100%;
        }

    .view-controls[b-4f14w8uoy9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-cards[b-4f14w8uoy9] {
        grid-template-columns: 1fr;
    }

    .summary-card[b-4f14w8uoy9] {
        padding: 20px;
    }

    .card-icon[b-4f14w8uoy9] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .card-content h3[b-4f14w8uoy9] {
        font-size: 24px;
    }

    .section-header[b-4f14w8uoy9] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .chart-controls[b-4f14w8uoy9],
    .data-controls[b-4f14w8uoy9] {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .related-reports-grid[b-4f14w8uoy9] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .breadcrumb-modern[b-4f14w8uoy9] {
        font-size: 12px;
    }

    .report-meta[b-4f14w8uoy9] {
        grid-template-columns: 1fr;
    }

    .error-content[b-4f14w8uoy9],
    .unauthorized-content[b-4f14w8uoy9] {
        padding: 32px 16px;
    }
}

/* Print Styles */
@media print {
    .report-view-page[b-4f14w8uoy9] {
        background: white !important;
        padding: 0 !important;
    }

        .report-view-page[b-4f14w8uoy9]::before {
            display: none;
        }

    .report-actions[b-4f14w8uoy9],
    .chart-controls[b-4f14w8uoy9],
    .data-controls[b-4f14w8uoy9] {
        display: none !important;
    }

    .report-header[b-4f14w8uoy9],
    .summary-card[b-4f14w8uoy9],
    .charts-section[b-4f14w8uoy9],
    .detailed-data-section[b-4f14w8uoy9] {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        break-inside: avoid;
    }
}
/* _content/Sahelly/Components/Pages/Admin/RevenueReports.razor.rz.scp.css */

/* ===================================
   Revenue Reports Page - Modern Professional CSS
   Following Users.razor.css Architecture & app.css Design System
   =================================== */

/* Page Container */
.revenue-reports-page[b-xjzgaz58xl] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .revenue-reports-page[b-xjzgaz58xl]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .revenue-reports-page > *[b-xjzgaz58xl] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-xjzgaz58xl] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-xjzgaz58xl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-xjzgaz58xl] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-xjzgaz58xl] {
        color: #667eea;
    }

.breadcrumb-separator[b-xjzgaz58xl] {
    color: #d1d5db;
}

.breadcrumb-current[b-xjzgaz58xl] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-xjzgaz58xl] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-xjzgaz58xl] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Filters Card */
.filters-card[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

    .filters-card[b-xjzgaz58xl]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .filters-card:hover[b-xjzgaz58xl]::before {
        opacity: 1;
    }

.card-title[b-xjzgaz58xl] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4c1d95;
}

    .card-title i[b-xjzgaz58xl] {
        color: #667eea;
        font-size: 24px;
    }

.filters-grid[b-xjzgaz58xl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.form-group[b-xjzgaz58xl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-xjzgaz58xl] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
}

.form-control[b-xjzgaz58xl] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-xjzgaz58xl] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.filters-actions[b-xjzgaz58xl] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Gradient Buttons */
.btn-primary[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover:not(:disabled)[b-xjzgaz58xl] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

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

.btn-secondary[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-secondary:hover[b-xjzgaz58xl] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Loading State */
.loading-container[b-xjzgaz58xl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 24px;
}

.spinner[b-xjzgaz58xl] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-xjzgaz58xl 0.8s linear infinite;
}

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

.loading-text[b-xjzgaz58xl] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Summary Cards */
.summary-cards[b-xjzgaz58xl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.summary-card[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-xjzgaz58xl]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-xjzgaz58xl] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .summary-card:hover[b-xjzgaz58xl]::before {
            opacity: 1;
        }

.card-icon[b-xjzgaz58xl] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-card.revenue .card-icon[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.summary-card.profit .card-icon[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.summary-card.commission .card-icon[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.summary-card.orders .card-icon[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-content[b-xjzgaz58xl] {
    flex: 1;
}

    .card-content h4[b-xjzgaz58xl] {
        font-size: 15px;
        color: #6b7280;
        margin: 0 0 8px 0;
        font-weight: 500;
    }

.card-value[b-xjzgaz58xl] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-period[b-xjzgaz58xl],
.card-percentage[b-xjzgaz58xl],
.card-rate[b-xjzgaz58xl],
.card-merchants[b-xjzgaz58xl] {
    font-size: 13px;
    color: #9ca3af;
    font-weight: 500;
}

.card-percentage[b-xjzgaz58xl] {
    color: #10b981;
    font-weight: 600;
}

/* Chart Card */
.chart-card[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.chart-container[b-xjzgaz58xl] {
    position: relative;
    height: 400px;
    margin-top: 20px;
}

/* Table Card */
.table-card[b-xjzgaz58xl] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.table-header[b-xjzgaz58xl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.btn-export[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

    .btn-export:hover[b-xjzgaz58xl] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(67, 233, 123, 0.3);
    }

.table-responsive[b-xjzgaz58xl] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.revenue-table[b-xjzgaz58xl] {
    width: 100%;
    border-collapse: collapse;
}

    .revenue-table th[b-xjzgaz58xl] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .revenue-table td[b-xjzgaz58xl] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
    }

    .revenue-table tbody tr[b-xjzgaz58xl] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .revenue-table tbody tr:hover[b-xjzgaz58xl] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

    .revenue-table tfoot tr[b-xjzgaz58xl] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        font-weight: 700;
    }

        .revenue-table tfoot tr th[b-xjzgaz58xl] {
            color: #4c1d95;
        }

.merchant-info[b-xjzgaz58xl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .merchant-info strong[b-xjzgaz58xl] {
        color: #1f2937;
        font-size: 15px;
    }

.merchant-code[b-xjzgaz58xl] {
    font-size: 13px;
    color: #9333ea;
    font-weight: 500;
}

.text-end[b-xjzgaz58xl] {
    text-align: left;
}

html[dir="rtl"] .text-end[b-xjzgaz58xl] {
    text-align: right;
}

.text-center[b-xjzgaz58xl] {
    text-align: center;
}

.profit-cell[b-xjzgaz58xl] {
    color: #10b981;
    font-weight: 600;
}

.commission-cell[b-xjzgaz58xl] {
    color: #f59e0b;
    font-weight: 600;
}

.profit-margin[b-xjzgaz58xl] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

    .profit-margin.excellent[b-xjzgaz58xl] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
    }

    .profit-margin.good[b-xjzgaz58xl] {
        background: linear-gradient(135deg, rgba(74, 163, 194, 0.2) 0%, rgba(41, 104, 178, 0.2) 100%);
        color: #2563eb;
    }

    .profit-margin.average[b-xjzgaz58xl] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
        color: #d97706;
    }

    .profit-margin.low[b-xjzgaz58xl] {
        background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(249, 115, 22, 0.2) 100%);
        color: #ea580c;
    }

    .profit-margin.negative[b-xjzgaz58xl] {
        background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(239, 68, 68, 0.2) 100%);
        color: #dc2626;
    }

    .profit-margin.neutral[b-xjzgaz58xl] {
        background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(107, 114, 128, 0.2) 100%);
        color: #6b7280;
    }

.btn-icon[b-xjzgaz58xl] {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
}

    .btn-icon.view[b-xjzgaz58xl] {
        color: #3b82f6;
    }

        .btn-icon.view:hover[b-xjzgaz58xl] {
            background: rgba(59, 130, 246, 0.1);
            color: #2563eb;
        }

/* Quick Actions */
.quick-actions[b-xjzgaz58xl] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.btn-action[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    color: #667eea;
    padding: 16px 24px;
    border-radius: 16px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

    .btn-action:hover[b-xjzgaz58xl] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
    }

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

        .btn-action.primary:hover[b-xjzgaz58xl] {
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

    .btn-action i[b-xjzgaz58xl] {
        font-size: 18px;
    }

/* Modal Styles */
.modal[b-xjzgaz58xl] {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

.modal-dialog[b-xjzgaz58xl] {
    max-width: 900px;
    width: 90%;
    animation: zoomIn-b-xjzgaz58xl 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .modal-dialog.modal-xl[b-xjzgaz58xl] {
        max-width: 1200px;
    }

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

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

.modal-content[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-header[b-xjzgaz58xl] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-xjzgaz58xl] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

    .modal-title i[b-xjzgaz58xl] {
        font-size: 28px;
    }

.btn-close[b-xjzgaz58xl] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    transition: all 0.3s;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .btn-close:hover[b-xjzgaz58xl] {
        color: #4c1d95;
        transform: rotate(90deg);
        background: rgba(102, 126, 234, 0.1);
    }

.modal-body[b-xjzgaz58xl] {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer[b-xjzgaz58xl] {
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
    border-radius: 0 0 24px 24px;
}

/* Modal Summary Cards */
.modal-summary-cards[b-xjzgaz58xl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.modal-summary-card[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 20px;
    border-radius: 16px;
    text-align: center;
}

    .modal-summary-card h6[b-xjzgaz58xl] {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 8px 0;
        font-weight: 500;
    }

    .modal-summary-card p[b-xjzgaz58xl] {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.section-title[b-xjzgaz58xl] {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Agents Table */
.agents-table[b-xjzgaz58xl],
.orders-table[b-xjzgaz58xl] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .agents-table th[b-xjzgaz58xl],
    .orders-table th[b-xjzgaz58xl] {
        padding: 12px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 13px;
        color: #6b7280;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .agents-table td[b-xjzgaz58xl],
    .orders-table td[b-xjzgaz58xl] {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .agents-table tbody tr:hover[b-xjzgaz58xl],
    .orders-table tbody tr:hover[b-xjzgaz58xl] {
        background: rgba(102, 126, 234, 0.05);
    }

/* Unauthorized Container */
.unauthorized-container[b-xjzgaz58xl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    padding: 40px;
}

    .unauthorized-container i[b-xjzgaz58xl] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-xjzgaz58xl] {
        font-size: 28px;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .unauthorized-container p[b-xjzgaz58xl] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

    .unauthorized-container .btn-primary[b-xjzgaz58xl] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

/* Dark Theme Support */
[data-theme="dark"] .revenue-reports-page[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .revenue-reports-page[b-xjzgaz58xl]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-xjzgaz58xl],
[data-theme="dark"] .filters-card[b-xjzgaz58xl],
[data-theme="dark"] .summary-card[b-xjzgaz58xl],
[data-theme="dark"] .chart-card[b-xjzgaz58xl],
[data-theme="dark"] .table-card[b-xjzgaz58xl],
[data-theme="dark"] .btn-action:not(.primary)[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-content[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .revenue-table th[b-xjzgaz58xl],
[data-theme="dark"] .agents-table th[b-xjzgaz58xl],
[data-theme="dark"] .orders-table th[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .revenue-table td[b-xjzgaz58xl],
[data-theme="dark"] .agents-table td[b-xjzgaz58xl],
[data-theme="dark"] .orders-table td[b-xjzgaz58xl] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .revenue-table tbody tr:hover[b-xjzgaz58xl],
[data-theme="dark"] .agents-table tbody tr:hover[b-xjzgaz58xl],
[data-theme="dark"] .orders-table tbody tr:hover[b-xjzgaz58xl] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .form-control[b-xjzgaz58xl] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-xjzgaz58xl] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .form-label[b-xjzgaz58xl],
[data-theme="dark"] .card-title[b-xjzgaz58xl] {
    color: #e2e8f0;
}

[data-theme="dark"] .breadcrumb-link[b-xjzgaz58xl] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-xjzgaz58xl] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-xjzgaz58xl] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-xjzgaz58xl] {
    color: #9ca3af;
}

[data-theme="dark"] .card-content h4[b-xjzgaz58xl] {
    color: #9ca3af;
}

[data-theme="dark"] .loading-text[b-xjzgaz58xl] {
    color: #9ca3af;
}

[data-theme="dark"] .merchant-info strong[b-xjzgaz58xl] {
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-code[b-xjzgaz58xl] {
    color: #a78bfa;
}

[data-theme="dark"] .btn-icon[b-xjzgaz58xl] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-icon.view[b-xjzgaz58xl] {
        color: #60a5fa;
    }

        [data-theme="dark"] .btn-icon.view:hover[b-xjzgaz58xl] {
            background: rgba(96, 165, 250, 0.1);
            color: #93bbfc;
        }

[data-theme="dark"] .btn-action:not(.primary)[b-xjzgaz58xl] {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}

    [data-theme="dark"] .btn-action:not(.primary):hover[b-xjzgaz58xl] {
        border-color: #a78bfa;
    }

[data-theme="dark"] .modal-summary-card[b-xjzgaz58xl] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(71, 85, 105, 0.2) 100%);
}

    [data-theme="dark"] .modal-summary-card h6[b-xjzgaz58xl] {
        color: #9ca3af;
    }

[data-theme="dark"] .section-title[b-xjzgaz58xl] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-close[b-xjzgaz58xl] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-xjzgaz58xl] {
        color: #e2e8f0;
        background: rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .unauthorized-container h3[b-xjzgaz58xl] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-container p[b-xjzgaz58xl] {
    color: #9ca3af;
}

[data-theme="dark"] .page-title[b-xjzgaz58xl],
[data-theme="dark"] .card-value[b-xjzgaz58xl],
[data-theme="dark"] .modal-title[b-xjzgaz58xl],
[data-theme="dark"] .modal-summary-card p[b-xjzgaz58xl] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

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

@media (max-width: 768px) {
    .revenue-reports-page[b-xjzgaz58xl] {
        padding: 16px;
    }

    .page-header[b-xjzgaz58xl] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-xjzgaz58xl] {
        font-size: 28px;
    }

    .page-subtitle[b-xjzgaz58xl] {
        font-size: 16px;
    }

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

    .filters-actions[b-xjzgaz58xl] {
        flex-direction: column;
    }

        .filters-actions button[b-xjzgaz58xl] {
            width: 100%;
        }

    .summary-cards[b-xjzgaz58xl] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-card[b-xjzgaz58xl] {
        padding: 20px;
    }

    .card-icon[b-xjzgaz58xl] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .card-value[b-xjzgaz58xl] {
        font-size: 24px;
    }

    .quick-actions[b-xjzgaz58xl] {
        flex-direction: column;
    }

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

    .modal-dialog[b-xjzgaz58xl] {
        max-width: calc(100% - 32px);
        margin: 16px;
    }

        .modal-dialog.modal-xl[b-xjzgaz58xl] {
            max-width: calc(100% - 32px);
        }

    .modal-summary-cards[b-xjzgaz58xl] {
        grid-template-columns: 1fr;
    }

    .table-responsive[b-xjzgaz58xl] {
        margin: 0 -16px;
        padding: 0 16px;
    }

    .revenue-table[b-xjzgaz58xl] {
        font-size: 14px;
    }

        .revenue-table th[b-xjzgaz58xl],
        .revenue-table td[b-xjzgaz58xl] {
            padding: 12px 8px;
        }

    .table-header[b-xjzgaz58xl] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

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

    .chart-container[b-xjzgaz58xl] {
        height: 300px;
    }

    .modal-header[b-xjzgaz58xl] {
        padding: 20px;
    }

    .modal-body[b-xjzgaz58xl] {
        padding: 20px;
    }

    .modal-footer[b-xjzgaz58xl] {
        flex-direction: column;
        padding: 16px 20px;
    }

        .modal-footer button[b-xjzgaz58xl] {
            width: 100%;
        }
}

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

    .breadcrumb[b-xjzgaz58xl] {
        font-size: 12px;
    }

    .card-title[b-xjzgaz58xl] {
        font-size: 18px;
    }

    .summary-card[b-xjzgaz58xl] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .filters-card[b-xjzgaz58xl] {
        padding: 20px;
    }

    .btn-primary[b-xjzgaz58xl],
    .btn-secondary[b-xjzgaz58xl] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .modal-title[b-xjzgaz58xl] {
        font-size: 20px;
    }

        .modal-title i[b-xjzgaz58xl] {
            font-size: 24px;
        }
}

/* Print Styles */
@media print {
    .revenue-reports-page[b-xjzgaz58xl] {
        background: white !important;
    }

    .filters-card[b-xjzgaz58xl],
    .quick-actions[b-xjzgaz58xl],
    .btn-export[b-xjzgaz58xl],
    .btn-icon[b-xjzgaz58xl],
    .btn-close[b-xjzgaz58xl] {
        display: none !important;
    }

    .revenue-table[b-xjzgaz58xl] {
        font-size: 12px;
    }

        .revenue-table th[b-xjzgaz58xl] {
            background: #f3f4f6 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

    .summary-card[b-xjzgaz58xl] {
        break-inside: avoid;
    }

    .modal[b-xjzgaz58xl] {
        position: static;
        background: none;
    }

    .modal-dialog[b-xjzgaz58xl] {
        max-width: 100%;
        width: 100%;
    }
}

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

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

.summary-cards[b-xjzgaz58xl] {
    animation: fadeInUp-b-xjzgaz58xl 0.6s ease-out;
}

.filters-card[b-xjzgaz58xl] {
    animation: fadeInUp-b-xjzgaz58xl 0.4s ease-out;
}

.table-card[b-xjzgaz58xl] {
    animation: fadeInUp-b-xjzgaz58xl 0.8s ease-out;
}

/* Accessibility */
:focus-visible[b-xjzgaz58xl] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus-visible[b-xjzgaz58xl] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-xjzgaz58xl] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Admin/SalesReports.razor.rz.scp.css */
/* SalesReports.razor.css - Modern Analytics Dashboard Style */

/* Page Container with Gradient Background */
.admin-sales-reports-page[b-2q7jj2k90m] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .admin-sales-reports-page[b-2q7jj2k90m]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .admin-sales-reports-page > *[b-2q7jj2k90m] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-2q7jj2k90m] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
}

.breadcrumb-modern[b-2q7jj2k90m] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-item[b-2q7jj2k90m] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-2q7jj2k90m] {
        color: #667eea;
    }

.separator[b-2q7jj2k90m] {
    color: #d1d5db;
}

.current[b-2q7jj2k90m] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-2q7jj2k90m] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-2q7jj2k90m] {
        font-size: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.page-subtitle[b-2q7jj2k90m] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Controls Section */
.controls-section[b-2q7jj2k90m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filters-container[b-2q7jj2k90m] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.date-filters[b-2q7jj2k90m], .merchant-filters[b-2q7jj2k90m] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1;
}

.filter-group[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
    flex: 1;
}

    .filter-group label[b-2q7jj2k90m] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.form-control-modern[b-2q7jj2k90m] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    width: 100%;
}

    .form-control-modern:focus[b-2q7jj2k90m] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.actions-container[b-2q7jj2k90m] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    padding-top: 20px;
}

.btn-secondary[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-secondary:hover[b-2q7jj2k90m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-primary-gradient[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary-gradient:hover[b-2q7jj2k90m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Reports Content Section */
.reports-content[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Loading Container */
.loading-container[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px;
    margin: 20px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    gap: 20px;
}

.spinner-modern[b-2q7jj2k90m] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-left-color: #667eea;
    border-radius: 50%;
    animation: spin-b-2q7jj2k90m 1s linear infinite;
}

.loading-container p[b-2q7jj2k90m] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 500;
}

/* Summary Stats Grid */
.summary-stats-grid[b-2q7jj2k90m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.stat-card[b-2q7jj2k90m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-2q7jj2k90m]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-2q7jj2k90m] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-2q7jj2k90m]::before {
            opacity: 1;
        }

.stat-icon[b-2q7jj2k90m] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.total-sales .stat-icon[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.total-orders .stat-icon[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.avg-order .stat-icon[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.total-merchants .stat-icon[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.total-profit .stat-icon[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.total-customers .stat-icon[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

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

    .stat-content h3[b-2q7jj2k90m] {
        font-size: 28px;
        font-weight: 800;
        margin: 0;
        margin-bottom: 4px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-content p[b-2q7jj2k90m] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        margin-bottom: 6px;
        font-weight: 500;
    }

    .stat-content small[b-2q7jj2k90m] {
        font-size: 12px;
        color: #9ca3af;
    }

.stat-change[b-2q7jj2k90m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

    .stat-change.positive[b-2q7jj2k90m] {
        color: #10b981;
    }

    .stat-change.negative[b-2q7jj2k90m] {
        color: #ef4444;
    }

.stat-breakdown[b-2q7jj2k90m] {
    display: flex;
    gap: 10px;
    font-size: 13px;
    margin-top: 8px;
}

.delivered[b-2q7jj2k90m] {
    color: #10b981;
    font-weight: 600;
}

.pending[b-2q7jj2k90m] {
    color: #f97316;
    font-weight: 600;
}

.profit-margin[b-2q7jj2k90m] {
    font-size: 14px;
    color: #10b981;
    font-weight: 600;
    margin-top: 6px;
}

/* Charts Section */
.charts-section[b-2q7jj2k90m] {
    margin-top: 12px;
}

.charts-grid[b-2q7jj2k90m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
}

.chart-card[b-2q7jj2k90m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 350px;
    position: relative;
}

    .chart-card:hover[b-2q7jj2k90m] {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .chart-card h3[b-2q7jj2k90m] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Tables Section */
.tables-section[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 12px;
}

.table-card[b-2q7jj2k90m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.table-header[b-2q7jj2k90m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .table-header h3[b-2q7jj2k90m] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.table-actions[b-2q7jj2k90m] {
    display: flex;
    gap: 10px;
}

.btn-link[b-2q7jj2k90m] {
    background: none;
    border: none;
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
}

    .btn-link:hover[b-2q7jj2k90m] {
        background: rgba(102, 126, 234, 0.1);
        text-decoration: none;
    }

.table-responsive[b-2q7jj2k90m] {
    overflow-x: auto;
    padding: 4px;
}

.table-modern[b-2q7jj2k90m] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

    .table-modern thead[b-2q7jj2k90m] {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .table-modern th[b-2q7jj2k90m] {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        color: #4c1d95;
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 2px solid rgba(102, 126, 234, 0.2);
        position: relative;
    }

    .table-modern td[b-2q7jj2k90m] {
        padding: 16px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        transition: all 0.2s;
    }

    .table-modern tbody tr[b-2q7jj2k90m] {
        transition: all 0.3s;
        cursor: pointer;
        background: white;
    }

        .table-modern tbody tr:hover[b-2q7jj2k90m] {
            background: rgba(102, 126, 234, 0.05);
            transform: translateY(-1px);
        }

/* Merchant Table Styles */
.rank-badge[b-2q7jj2k90m] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.rank-1[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
}

.rank-2[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 100%);
}

.rank-3[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #cd7f32 0%, #a0522d 100%);
}

.merchant-info[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.merchant-name[b-2q7jj2k90m] {
    font-weight: 600;
    color: #1f2937;
}

.merchant-code[b-2q7jj2k90m] {
    font-size: 12px;
    color: #6b7280;
}

.sales-info[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sales-amount[b-2q7jj2k90m] {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
}

.contribution[b-2q7jj2k90m] {
    font-size: 12px;
    color: #6b7280;
}

.growth-indicator[b-2q7jj2k90m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

    .growth-indicator.positive[b-2q7jj2k90m] {
        color: #10b981;
    }

    .growth-indicator.negative[b-2q7jj2k90m] {
        color: #ef4444;
    }

.action-buttons[b-2q7jj2k90m] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-action[b-2q7jj2k90m] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

    .btn-action:hover[b-2q7jj2k90m] {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

/* Order Table Styles */
.order-row[b-2q7jj2k90m] {
    transition: all 0.3s;
}

.order-number[b-2q7jj2k90m] {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}

.customer-info[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-name[b-2q7jj2k90m] {
    font-weight: 600;
    color: #1f2937;
}

.amount-info[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.total-amount[b-2q7jj2k90m] {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
}

.remaining-amount[b-2q7jj2k90m] {
    font-size: 12px;
    color: #6b7280;
}

.status-badge[b-2q7jj2k90m] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge[b-2q7jj2k90m]::before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

.status-pending[b-2q7jj2k90m] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

    .status-pending[b-2q7jj2k90m]::before {
        background-color: #f59e0b;
    }

.status-processing[b-2q7jj2k90m] {
    background-color: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

    .status-processing[b-2q7jj2k90m]::before {
        background-color: #6366f1;
    }

.status-shipped[b-2q7jj2k90m] {
    background-color: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

    .status-shipped[b-2q7jj2k90m]::before {
        background-color: #0ea5e9;
    }

.status-delivered[b-2q7jj2k90m] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

    .status-delivered[b-2q7jj2k90m]::before {
        background-color: #10b981;
    }

.status-cancelled[b-2q7jj2k90m] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

    .status-cancelled[b-2q7jj2k90m]::before {
        background-color: #ef4444;
    }

.status-returned[b-2q7jj2k90m] {
    background-color: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

    .status-returned[b-2q7jj2k90m]::before {
        background-color: #a855f7;
    }

.payment-method[b-2q7jj2k90m] {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background-color: rgba(102, 126, 234, 0.1);
    color: #667eea;
    display: inline-block;
}

.date-info[b-2q7jj2k90m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-date[b-2q7jj2k90m] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.order-time[b-2q7jj2k90m] {
    font-size: 12px;
    color: #6b7280;
}

/* Products Table Styles */
.product-info[b-2q7jj2k90m] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-2q7jj2k90m] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.product-name[b-2q7jj2k90m] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    margin-bottom: 2px;
}

.product-sku[b-2q7jj2k90m] {
    font-size: 12px;
    color: #6b7280;
}

/* Unauthorized Section */
.unauthorized-modern[b-2q7jj2k90m] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.unauthorized-content[b-2q7jj2k90m] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    animation: slideUp-b-2q7jj2k90m 0.5s ease;
}

    .unauthorized-content i[b-2q7jj2k90m] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-2q7jj2k90m] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #1f2937;
    }

    .unauthorized-content p[b-2q7jj2k90m] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-modern[b-2q7jj2k90m] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    text-decoration: none;
}

.btn-primary[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

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

/* Animations */
@keyframes slideUp-b-2q7jj2k90m {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

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

/* Dark Theme Support */
[data-theme="dark"] .admin-sales-reports-page[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .admin-sales-reports-page[b-2q7jj2k90m]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-2q7jj2k90m],
[data-theme="dark"] .controls-section[b-2q7jj2k90m],
[data-theme="dark"] .stat-card[b-2q7jj2k90m],
[data-theme="dark"] .chart-card[b-2q7jj2k90m],
[data-theme="dark"] .table-card[b-2q7jj2k90m],
[data-theme="dark"] .loading-container[b-2q7jj2k90m],
[data-theme="dark"] .unauthorized-content[b-2q7jj2k90m] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .breadcrumb-item[b-2q7jj2k90m] {
    color: #94a3b8;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-2q7jj2k90m] {
        color: #a78bfa;
    }

[data-theme="dark"] .current[b-2q7jj2k90m] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
}

[data-theme="dark"] .page-subtitle[b-2q7jj2k90m] {
    color: #94a3b8;
}

[data-theme="dark"] .filter-group label[b-2q7jj2k90m] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control-modern[b-2q7jj2k90m] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control-modern:focus[b-2q7jj2k90m] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
        box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .stat-content h3[b-2q7jj2k90m] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
}

[data-theme="dark"] .stat-content p[b-2q7jj2k90m] {
    color: #94a3b8;
}

[data-theme="dark"] .stat-content small[b-2q7jj2k90m] {
    color: #64748b;
}

[data-theme="dark"] .table-header h3[b-2q7jj2k90m] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-link[b-2q7jj2k90m] {
    color: #a78bfa;
}

    [data-theme="dark"] .btn-link:hover[b-2q7jj2k90m] {
        background: rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .table-modern th[b-2q7jj2k90m] {
    background: rgba(30, 41, 59, 0.95);
    color: #e2e8f0;
    border-bottom-color: rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .table-modern tbody tr[b-2q7jj2k90m] {
    background: rgba(30, 41, 59, 0.8);
}

    [data-theme="dark"] .table-modern tbody tr:hover[b-2q7jj2k90m] {
        background: rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .table-modern td[b-2q7jj2k90m] {
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .merchant-name[b-2q7jj2k90m],
[data-theme="dark"] .customer-name[b-2q7jj2k90m],
[data-theme="dark"] .sales-amount[b-2q7jj2k90m],
[data-theme="dark"] .total-amount[b-2q7jj2k90m],
[data-theme="dark"] .order-number[b-2q7jj2k90m],
[data-theme="dark"] .order-date[b-2q7jj2k90m],
[data-theme="dark"] .product-name[b-2q7jj2k90m] {
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-code[b-2q7jj2k90m],
[data-theme="dark"] .contribution[b-2q7jj2k90m],
[data-theme="dark"] .remaining-amount[b-2q7jj2k90m],
[data-theme="dark"] .order-time[b-2q7jj2k90m],
[data-theme="dark"] .product-sku[b-2q7jj2k90m] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-action[b-2q7jj2k90m] {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-action:hover[b-2q7jj2k90m] {
        background: #a78bfa;
        color: #1e1b4b;
    }

[data-theme="dark"] .unauthorized-content h3[b-2q7jj2k90m] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content p[b-2q7jj2k90m] {
    color: #94a3b8;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .charts-grid[b-2q7jj2k90m] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .summary-stats-grid[b-2q7jj2k90m] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-sales-reports-page[b-2q7jj2k90m] {
        padding: 16px;
    }

    .page-header-enhanced[b-2q7jj2k90m] {
        padding: 20px;
    }

    .page-title[b-2q7jj2k90m] {
        font-size: 28px;
    }

    .controls-section[b-2q7jj2k90m] {
        padding: 16px;
    }

    .filters-container[b-2q7jj2k90m],
    .date-filters[b-2q7jj2k90m],
    .merchant-filters[b-2q7jj2k90m] {
        flex-direction: column;
    }

    .summary-stats-grid[b-2q7jj2k90m] {
        grid-template-columns: 1fr;
    }

    .chart-card[b-2q7jj2k90m] {
        height: 300px;
    }

    .actions-container[b-2q7jj2k90m] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-secondary[b-2q7jj2k90m],
    .btn-primary-gradient[b-2q7jj2k90m] {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .stat-card[b-2q7jj2k90m] {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .stat-icon[b-2q7jj2k90m] {
        margin-bottom: 12px;
        align-self: center;
    }

    .table-header[b-2q7jj2k90m] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .table-actions[b-2q7jj2k90m] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* _content/Sahelly/Components/Pages/Admin/SmsManagement.razor.rz.scp.css */

/* ===================================
   SMS Management Page - Modern Design System
   Following app.css architecture & Users.razor.css patterns
   =================================== */

/* Page Container */
.sms-management-page[b-30yjnhttky] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .sms-management-page[b-30yjnhttky]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .sms-management-page > *[b-30yjnhttky] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Following Users.razor.css pattern */
.page-header[b-30yjnhttky] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-30yjnhttky] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-30yjnhttky] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-30yjnhttky] {
        color: #667eea;
    }

.breadcrumb-separator[b-30yjnhttky] {
    color: #d1d5db;
}

.breadcrumb-current[b-30yjnhttky] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-30yjnhttky] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-30yjnhttky] {
        font-size: 32px;
    }

/* Balance Section */
.balance-section[b-30yjnhttky] {
    margin-bottom: 32px;
}

.balance-loading[b-30yjnhttky] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    color: #667eea;
    font-weight: 600;
}

.balance-card[b-30yjnhttky] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 32px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .balance-card[b-30yjnhttky]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .balance-card:hover[b-30yjnhttky] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 25px 50px rgba(102, 126, 234, 0.4);
    }

        .balance-card:hover[b-30yjnhttky]::before {
            opacity: 1;
        }

.balance-icon[b-30yjnhttky] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.balance-info[b-30yjnhttky] {
    flex: 1;
}

    .balance-info h3[b-30yjnhttky] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        opacity: 0.9;
    }

.balance-details[b-30yjnhttky] {
    display: flex;
    gap: 32px;
    align-items: baseline;
}

.balance-amount[b-30yjnhttky] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .balance-amount .amount[b-30yjnhttky] {
        font-size: 36px;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .balance-amount .currency[b-30yjnhttky] {
        font-size: 20px;
        font-weight: 600;
        opacity: 0.8;
    }

.balance-messages[b-30yjnhttky] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    opacity: 0.9;
}

    .balance-messages i[b-30yjnhttky] {
        font-size: 18px;
    }

.btn-refresh[b-30yjnhttky] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-refresh:hover[b-30yjnhttky] {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(180deg);
    }

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

/* Tabs Container */
.tabs-container[b-30yjnhttky] {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tab-button[b-30yjnhttky] {
    flex: 1;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
}

    .tab-button:hover[b-30yjnhttky] {
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

    .tab-button.active[b-30yjnhttky] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    .tab-button i[b-30yjnhttky] {
        font-size: 18px;
    }

/* Tab Content */
.tab-content[b-30yjnhttky] {
    animation: fadeInUp-b-30yjnhttky 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Send SMS Section */
.send-sms-section[b-30yjnhttky] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* SMS Type Selection */
.sms-type-selection[b-30yjnhttky] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.type-option[b-30yjnhttky] {
    position: relative;
    cursor: pointer;
}

    .type-option input[type="radio"][b-30yjnhttky] {
        position: absolute;
        opacity: 0;
    }

.type-card[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .type-card i[b-30yjnhttky] {
        font-size: 32px;
        color: #667eea;
    }

    .type-card span[b-30yjnhttky] {
        font-weight: 600;
        color: #4c1d95;
    }

.type-option input[type="radio"]:checked + .type-card[b-30yjnhttky] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

    .type-option input[type="radio"]:checked + .type-card i[b-30yjnhttky],
    .type-option input[type="radio"]:checked + .type-card span[b-30yjnhttky] {
        color: white;
    }

.type-option:hover .type-card[b-30yjnhttky] {
    border-color: #667eea;
    transform: translateY(-4px);
}

/* SMS Form Container */
.sms-form-container[b-30yjnhttky] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Form Groups */
.form-group[b-30yjnhttky] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label[b-30yjnhttky] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.form-control[b-30yjnhttky] {
    width: 100%;
    padding: 14px 18px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    color: #1f2937;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .form-control:hover[b-30yjnhttky] {
        border-color: rgba(102, 126, 234, 0.2);
    }

    .form-control:focus[b-30yjnhttky] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control[b-30yjnhttky]::placeholder {
        color: #9ca3af;
    }

textarea.form-control[b-30yjnhttky] {
    resize: vertical;
    min-height: 120px;
}

.form-hint[b-30yjnhttky] {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

/* Message Info */
.message-info[b-30yjnhttky] {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

    .message-info span[b-30yjnhttky] {
        color: #667eea;
    }

/* Template Variables */
.template-variables[b-30yjnhttky] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

    .template-variables h4[b-30yjnhttky] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 16px;
    }

/* Advanced Options */
.advanced-options[b-30yjnhttky] {
    margin-top: 24px;
}

.toggle-advanced[b-30yjnhttky] {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.2);
    color: #667eea;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

    .toggle-advanced:hover[b-30yjnhttky] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
    }

.advanced-content[b-30yjnhttky] {
    margin-top: 20px;
    padding: 20px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    animation: slideDown-b-30yjnhttky 0.3s ease;
}

.form-check[b-30yjnhttky] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.form-check-input[b-30yjnhttky] {
    width: 20px;
    height: 20px;
    accent-color: #667eea;
    cursor: pointer;
}

.form-check-label[b-30yjnhttky] {
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
}

/* Form Actions */
.form-actions[b-30yjnhttky] {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Button Styles - Following app.css patterns */
.btn[b-30yjnhttky] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

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

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

    .btn:disabled[b-30yjnhttky] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-gradient-primary[b-30yjnhttky] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-gradient-primary:hover:not(:disabled)[b-30yjnhttky] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

.btn-secondary[b-30yjnhttky] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-30yjnhttky] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Templates Section */
.templates-section[b-30yjnhttky] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-header[b-30yjnhttky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

    .section-header h2[b-30yjnhttky] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

.templates-grid[b-30yjnhttky] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.template-card[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .template-card[b-30yjnhttky]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .template-card:hover[b-30yjnhttky] {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

.template-header[b-30yjnhttky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .template-header h3[b-30yjnhttky] {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
    }

.template-code[b-30yjnhttky] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.template-content p[b-30yjnhttky] {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 8px;
}

.english-version[b-30yjnhttky] {
    font-style: italic;
    opacity: 0.8;
}

.template-actions[b-30yjnhttky] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.btn-icon[b-30yjnhttky] {
    background: transparent;
    border: none;
    color: #6b7280;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-icon:hover[b-30yjnhttky] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

/* Logs Section */
.logs-section[b-30yjnhttky] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Filters Section */
.filters-section[b-30yjnhttky] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
}

.filter-group[b-30yjnhttky] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

    .filter-group label[b-30yjnhttky] {
        font-size: 13px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.date-range[b-30yjnhttky] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .date-range input[b-30yjnhttky] {
        flex: 1;
    }

    .date-range span[b-30yjnhttky] {
        color: #6b7280;
        font-weight: 500;
    }

.btn-primary[b-30yjnhttky] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover[b-30yjnhttky] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

/* Data Table - Following Users.razor.css pattern */
.table-responsive[b-30yjnhttky] {
    overflow-x: auto;
    border-radius: 16px;
}

.data-table[b-30yjnhttky] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-30yjnhttky] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

html[dir="ltr"] .data-table th[b-30yjnhttky] {
    text-align: left;
}

.data-table td[b-30yjnhttky] {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
}

.data-table tbody tr[b-30yjnhttky] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .data-table tbody tr:hover[b-30yjnhttky] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        transform: scale(1.01);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

.message-id[b-30yjnhttky] {
    font-family: monospace;
    font-size: 13px;
    color: #6b7280;
}

.message-cell[b-30yjnhttky] {
    max-width: 300px;
}

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

.status-sent[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-delivered[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-failed[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-queued[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-expired[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(156, 163, 175, 0.2) 100%);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Analytics Section */
.analytics-section[b-30yjnhttky] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.analytics-cards[b-30yjnhttky] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.analytics-card[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .analytics-card:hover[b-30yjnhttky] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

.card-icon[b-30yjnhttky] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

    .card-icon.success[b-30yjnhttky] {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
        box-shadow: 0 8px 16px rgba(16, 185, 129, 0.3);
    }

    .card-icon.danger[b-30yjnhttky] {
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        box-shadow: 0 8px 16px rgba(239, 68, 68, 0.3);
    }

    .card-icon.warning[b-30yjnhttky] {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
        box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
    }

.card-content[b-30yjnhttky] {
    flex: 1;
}

    .card-content h4[b-30yjnhttky] {
        font-size: 15px;
        color: #6b7280;
        margin: 0 0 8px 0;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .card-content .value[b-30yjnhttky] {
        font-size: 32px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.percentage[b-30yjnhttky] {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 8px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
}

/* Charts Grid */
.charts-grid[b-30yjnhttky] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

.chart-container[b-30yjnhttky] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .chart-container h3[b-30yjnhttky] {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 20px;
    }

/* Modal Styles - Following Users.razor.css pattern */
.modal-overlay[b-30yjnhttky] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-30yjnhttky 0.3s ease;
}

.modal-content[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    animation: zoomIn-b-30yjnhttky 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header[b-30yjnhttky] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-30yjnhttky] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

.modal-close[b-30yjnhttky] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .modal-close:hover[b-30yjnhttky] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transform: rotate(90deg);
    }

.modal-body[b-30yjnhttky] {
    padding: 30px;
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

.detail-row[b-30yjnhttky] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.05);
}

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

    .detail-row label[b-30yjnhttky] {
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
    }

    .detail-row span[b-30yjnhttky] {
        color: #4b5563;
        font-size: 14px;
    }

    .detail-row.full-width[b-30yjnhttky] {
        grid-template-columns: 1fr;
    }

.message-content[b-30yjnhttky] {
    background: rgba(102, 126, 234, 0.05);
    padding: 16px;
    border-radius: 12px;
    line-height: 1.6;
    margin-top: 8px;
    color: #4b5563;
}

/* Loading States */
.loading-container[b-30yjnhttky] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner[b-30yjnhttky] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-30yjnhttky 0.8s linear infinite;
}

.spinner-small[b-30yjnhttky] {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-right-color: white;
    border-radius: 50%;
    animation: spin-b-30yjnhttky 0.8s linear infinite;
    display: inline-block;
}

/* No Data State */
.no-data[b-30yjnhttky] {
    text-align: center;
    padding: 80px 40px;
    color: #6b7280;
}

    .no-data i[b-30yjnhttky] {
        font-size: 64px;
        color: #e5e7eb;
        margin-bottom: 16px;
    }

    .no-data p[b-30yjnhttky] {
        font-size: 18px;
        font-weight: 500;
    }

/* Animations */
@keyframes fadeIn-b-30yjnhttky {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

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

@keyframes zoomIn-b-30yjnhttky {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

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

.spinning[b-30yjnhttky] {
    animation: spin-b-30yjnhttky 1s linear infinite;
}

/* Dark Theme Support */
[data-theme="dark"] .sms-management-page[b-30yjnhttky] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .page-header[b-30yjnhttky],
[data-theme="dark"] .send-sms-section[b-30yjnhttky],
[data-theme="dark"] .templates-section[b-30yjnhttky],
[data-theme="dark"] .logs-section[b-30yjnhttky],
[data-theme="dark"] .template-card[b-30yjnhttky],
[data-theme="dark"] .analytics-card[b-30yjnhttky],
[data-theme="dark"] .chart-container[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .balance-card[b-30yjnhttky] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .tabs-container[b-30yjnhttky] {
    background: rgba(30, 41, 59, 0.95);
}

[data-theme="dark"] .tab-button[b-30yjnhttky] {
    color: #9ca3af;
}

    [data-theme="dark"] .tab-button:hover[b-30yjnhttky] {
        color: #a78bfa;
        background: rgba(167, 139, 250, 0.1);
    }

    [data-theme="dark"] .tab-button.active[b-30yjnhttky] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .form-control[b-30yjnhttky] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-30yjnhttky] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .form-group label[b-30yjnhttky] {
    color: #e2e8f0;
}

[data-theme="dark"] .data-table th[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
    color: #a78bfa;
}

[data-theme="dark"] .data-table td[b-30yjnhttky] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .data-table tbody tr:hover[b-30yjnhttky] {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
}

[data-theme="dark"] .modal-content[b-30yjnhttky] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .detail-row label[b-30yjnhttky] {
    color: #e2e8f0;
}

[data-theme="dark"] .detail-row span[b-30yjnhttky] {
    color: #9ca3af;
}

[data-theme="dark"] .message-content[b-30yjnhttky] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .analytics-cards[b-30yjnhttky] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-grid[b-30yjnhttky] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sms-management-page[b-30yjnhttky] {
        padding: 16px;
    }

    .page-header[b-30yjnhttky] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-30yjnhttky] {
        font-size: 28px;
    }

    .balance-card[b-30yjnhttky] {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .balance-details[b-30yjnhttky] {
        flex-direction: column;
        gap: 16px;
    }

    .tabs-container[b-30yjnhttky] {
        flex-wrap: wrap;
    }

    .tab-button[b-30yjnhttky] {
        padding: 10px 16px;
        font-size: 14px;
    }

        .tab-button span[b-30yjnhttky] {
            display: none;
        }

    .sms-type-selection[b-30yjnhttky] {
        grid-template-columns: 1fr;
    }

    .filters-section[b-30yjnhttky] {
        flex-direction: column;
    }

    .date-range[b-30yjnhttky] {
        flex-direction: column;
    }

    .form-actions[b-30yjnhttky] {
        flex-direction: column;
    }

        .form-actions .btn[b-30yjnhttky] {
            width: 100%;
        }

    .analytics-cards[b-30yjnhttky] {
        grid-template-columns: 1fr;
    }

    .templates-grid[b-30yjnhttky] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-30yjnhttky] {
        max-width: 95%;
        margin: 16px;
    }

    .detail-row[b-30yjnhttky] {
        grid-template-columns: 1fr;
    }

        .detail-row label[b-30yjnhttky] {
            margin-bottom: 4px;
        }

    .table-responsive[b-30yjnhttky] {
        margin: 0 -16px;
    }

    .data-table[b-30yjnhttky] {
        font-size: 14px;
    }

        .data-table th[b-30yjnhttky],
        .data-table td[b-30yjnhttky] {
            padding: 12px 8px;
        }
}

@media (max-width: 480px) {
    .page-title[b-30yjnhttky] {
        font-size: 24px;
    }

        .page-title i[b-30yjnhttky] {
            font-size: 24px;
        }

    .balance-amount .amount[b-30yjnhttky] {
        font-size: 28px;
    }

    .tab-button[b-30yjnhttky] {
        flex: none;
        width: 50%;
    }

    .card-content .value[b-30yjnhttky] {
        font-size: 24px;
    }
}

/* RTL Support */
html[dir="rtl"] .data-table th[b-30yjnhttky],
html[dir="rtl"] .data-table td[b-30yjnhttky] {
    text-align: left;
}

html[dir="rtl"] .form-actions[b-30yjnhttky] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .detail-row[b-30yjnhttky] {
    direction: rtl;
}

html[dir="rtl"] .tab-button i[b-30yjnhttky] {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .btn i[b-30yjnhttky] {
    margin-right: 0;
    margin-left: 8px;
}

/* Print Styles */
@media print {
    .sms-management-page[b-30yjnhttky] {
        background: white !important;
    }

    .tabs-container[b-30yjnhttky],
    .form-actions[b-30yjnhttky],
    .btn-refresh[b-30yjnhttky],
    .btn-icon[b-30yjnhttky],
    .filters-section[b-30yjnhttky] {
        display: none !important;
    }

    .data-table[b-30yjnhttky] {
        font-size: 12px;
    }

        .data-table th[b-30yjnhttky] {
            background: #f3f4f6 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
}

/* Accessibility */
*:focus[b-30yjnhttky] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-30yjnhttky],
.btn:focus[b-30yjnhttky] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-30yjnhttky],
select:focus[b-30yjnhttky],
textarea:focus[b-30yjnhttky] {
    outline: none;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-30yjnhttky] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Admin/SubscriptionPlans.razor.rz.scp.css */
/* ===================================
   Subscription Plans - Professional Modern Design
   تصميم احترافي حديث لصفحة الخطط الاشتراكية
   =================================== */

/* Modern Gradient Buttons - Matching Users.razor.css */
.btn-gradient-primary[b-tuui0lk35y] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-tuui0lk35y] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-tuui0lk35y] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-tuui0lk35y] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-tuui0lk35y] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-tuui0lk35y] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-danger[b-tuui0lk35y] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-tuui0lk35y] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Page Container - Modern E-Commerce Style */
.subscription-plans-page[b-tuui0lk35y] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .subscription-plans-page[b-tuui0lk35y]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .subscription-plans-page > *[b-tuui0lk35y] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Modern Glass Effect */
.page-header[b-tuui0lk35y] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Breadcrumb - Modern Style */
.breadcrumb-modern[b-tuui0lk35y] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-item[b-tuui0lk35y] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-tuui0lk35y] {
        color: #667eea;
    }

.separator[b-tuui0lk35y] {
    color: #d1d5db;
}

.current[b-tuui0lk35y] {
    color: #4c1d95;
    font-weight: 600;
}

/* Page Title - Modern Gradient */
.page-title[b-tuui0lk35y] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Header Actions */
.header-actions[b-tuui0lk35y] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .header-actions .btn-primary[b-tuui0lk35y] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .header-actions .btn-primary:hover[b-tuui0lk35y] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
        }

/* Plans Container - Modern Glass Card */
.plans-container[b-tuui0lk35y] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Plans Grid - Modern Responsive */
.plans-grid[b-tuui0lk35y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 32px;
    margin-top: 24px;
}

/* Plan Card - Modern Glass Effect with Animations */
.plan-card[b-tuui0lk35y] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .plan-card[b-tuui0lk35y]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .plan-card:hover[b-tuui0lk35y] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

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

    .plan-card.free-plan[b-tuui0lk35y] {
        border-color: #3bc968;
        box-shadow: 0 8px 25px rgba(59, 201, 104, 0.15);
    }

        .plan-card.free-plan:hover[b-tuui0lk35y] {
            border-color: #32d1b7;
            box-shadow: 0 20px 40px rgba(59, 201, 104, 0.2);
        }

    .plan-card.inactive[b-tuui0lk35y] {
        opacity: 0.7;
        border-color: #d04e5f;
        box-shadow: 0 8px 25px rgba(208, 78, 95, 0.15);
    }

        .plan-card.inactive:hover[b-tuui0lk35y] {
            border-color: #cd7ddb;
            box-shadow: 0 20px 40px rgba(208, 78, 95, 0.2);
        }

/* Free Badge - Modern Design */
.free-badge[b-tuui0lk35y] {
    position: absolute;
    top: 20px;
    right: -35px;
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    padding: 8px 45px;
    transform: rotate(45deg);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.3);
    z-index: 10;
}

/* Plan Header - Modern Typography */
.plan-header[b-tuui0lk35y] {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    position: relative;
}

    .plan-header[b-tuui0lk35y]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 2px;
    }

.plan-name[b-tuui0lk35y] {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.plan-name-en[b-tuui0lk35y] {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 20px 0;
    font-weight: 500;
    opacity: 0.8;
}

/* Plan Price - Modern Design */
.plan-price[b-tuui0lk35y] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

    .plan-price .free[b-tuui0lk35y] {
        font-size: 32px;
        font-weight: 800;
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .plan-price .currency[b-tuui0lk35y] {
        font-size: 16px;
        color: #6b7280;
        font-weight: 600;
    }

    .plan-price .amount[b-tuui0lk35y] {
        font-size: 40px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -0.02em;
    }

    .plan-price .duration[b-tuui0lk35y] {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
    }

/* Plan Description - Modern Typography */
.plan-description[b-tuui0lk35y] {
    text-align: center;
    color: #6b7280;
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Plan Features - Modern Design */
.plan-features[b-tuui0lk35y] {
    margin-bottom: 32px;
}

    .plan-features h4[b-tuui0lk35y] {
        font-size: 16px;
        font-weight: 700;
        margin: 32px 0 16px 0;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        padding-left: 20px;
    }

        .plan-features h4[b-tuui0lk35y]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }

        .plan-features h4:first-child[b-tuui0lk35y] {
            margin-top: 0;
        }

    .plan-features ul[b-tuui0lk35y] {
        list-style: none;
        padding: 0;
        margin: 0 0 24px 0;
    }

    .plan-features li[b-tuui0lk35y] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        margin-bottom: 8px;
        background: rgba(102, 126, 234, 0.05);
        border-radius: 12px;
        border: 1px solid rgba(102, 126, 234, 0.1);
        font-size: 14px;
        font-weight: 500;
        color: #4b5563;
        transition: all 0.3s;
    }

        .plan-features li:hover[b-tuui0lk35y] {
            background: rgba(102, 126, 234, 0.1);
            border-color: #667eea;
            transform: translateX(4px);
        }

        .plan-features li i[b-tuui0lk35y] {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            font-size: 10px;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
        }

        .plan-features li strong[b-tuui0lk35y] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }

/* Features List - Special Styling */
.features-list li.enabled[b-tuui0lk35y] {
    background: rgba(59, 201, 104, 0.1);
    border-color: rgba(59, 201, 104, 0.3);
    color: #047857;
}

    .features-list li.enabled i[b-tuui0lk35y] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

    .features-list li.enabled:hover[b-tuui0lk35y] {
        background: rgba(59, 201, 104, 0.15);
        border-color: #3bc968;
    }

.features-list li.disabled[b-tuui0lk35y] {
    background: rgba(208, 78, 95, 0.1);
    border-color: rgba(208, 78, 95, 0.3);
    color: #991b1b;
    opacity: 0.7;
}

    .features-list li.disabled i[b-tuui0lk35y] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
    }

    .features-list li.disabled:hover[b-tuui0lk35y] {
        background: rgba(208, 78, 95, 0.15);
        border-color: #d04e5f;
    }

/* Plan Footer - Modern Design */
.plan-footer[b-tuui0lk35y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 2px solid rgba(102, 126, 234, 0.1);
    position: relative;
}

    .plan-footer[b-tuui0lk35y]::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 2px;
    }

/* Plan Status - Modern Badges */
.plan-status .status[b-tuui0lk35y] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.plan-status .active[b-tuui0lk35y] {
    background: linear-gradient(135deg, rgba(59, 201, 104, 0.2) 0%, rgba(50, 209, 183, 0.2) 100%);
    color: #047857;
    border: 1px solid rgba(59, 201, 104, 0.3);
}

.plan-status .inactive[b-tuui0lk35y] {
    background: linear-gradient(135deg, rgba(208, 78, 95, 0.2) 0%, rgba(205, 125, 219, 0.2) 100%);
    color: #991b1b;
    border: 1px solid rgba(208, 78, 95, 0.3);
}

/* Plan Actions - Modern Icon Buttons */
.plan-actions[b-tuui0lk35y] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-tuui0lk35y] {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(102, 126, 234, 0.3);
    background: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #667eea;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

    .btn-icon[b-tuui0lk35y]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s;
        z-index: -1;
    }

    .btn-icon:hover[b-tuui0lk35y] {
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

        .btn-icon:hover[b-tuui0lk35y]::before {
            opacity: 1;
        }

    .btn-icon.danger[b-tuui0lk35y] {
        border-color: rgba(208, 78, 95, 0.3);
        color: #d04e5f;
    }

        .btn-icon.danger[b-tuui0lk35y]::before {
            background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        }

        .btn-icon.danger:hover[b-tuui0lk35y] {
            box-shadow: 0 4px 12px rgba(208, 78, 95, 0.3);
        }

/* Modal Styles - Modern Glass Effect */
.modal-overlay[b-tuui0lk35y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
    animation: fadeIn-b-tuui0lk35y 0.3s ease;
}

.modal-content[b-tuui0lk35y] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: slideUp-b-tuui0lk35y 0.3s ease;
}

.modal-header[b-tuui0lk35y] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
}

    .modal-header h3[b-tuui0lk35y] {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.btn-close[b-tuui0lk35y] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .btn-close:hover[b-tuui0lk35y] {
        background: rgba(208, 78, 95, 0.1);
        color: #d04e5f;
        transform: rotate(90deg);
    }

.modal-body[b-tuui0lk35y] {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

/* Form Styles - Modern Design */
.form-grid[b-tuui0lk35y] {
    display: grid;
    gap: 32px;
}

.form-section[b-tuui0lk35y] {
    background: rgba(102, 126, 234, 0.05);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
}

    .form-section[b-tuui0lk35y]::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 20px;
        width: 60px;
        height: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 2px;
    }

    .form-section h4[b-tuui0lk35y] {
        margin: 0 0 24px 0;
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .form-section h4[b-tuui0lk35y]::before {
            content: '';
            width: 4px;
            height: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }

.form-row[b-tuui0lk35y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-tuui0lk35y] {
    margin-bottom: 20px;
}

    .form-group label[b-tuui0lk35y] {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-control[b-tuui0lk35y] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    background: rgba(102, 126, 234, 0.05);
    color: #1f2937;
    transition: all 0.3s;
}

    .form-control:focus[b-tuui0lk35y] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control[b-tuui0lk35y]::placeholder {
        color: #9ca3af;
    }

textarea.form-control[b-tuui0lk35y] {
    resize: vertical;
    min-height: 100px;
}

/* Features Grid - Modern Checkboxes */
.features-grid[b-tuui0lk35y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.form-check[b-tuui0lk35y] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

    .form-check:hover[b-tuui0lk35y] {
        background: rgba(102, 126, 234, 0.05);
        border-color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
    }

    .form-check input[type="checkbox"][b-tuui0lk35y] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #667eea;
        border-radius: 4px;
    }

    .form-check label[b-tuui0lk35y] {
        margin: 0;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #1f2937;
        flex: 1;
    }

/* Modal Footer - Modern Actions */
.modal-footer[b-tuui0lk35y] {
    padding: 24px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    background: rgba(102, 126, 234, 0.05);
}

.btn-primary[b-tuui0lk35y], .btn-secondary[b-tuui0lk35y] {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
}

.btn-primary[b-tuui0lk35y] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-tuui0lk35y] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

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

.btn-secondary[b-tuui0lk35y] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-tuui0lk35y] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Loading States - Modern */
.loading-container[b-tuui0lk35y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #6b7280;
}

    .loading-container p[b-tuui0lk35y] {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 500;
    }

.spinner-modern[b-tuui0lk35y] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.1);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-tuui0lk35y 1s linear infinite;
}

.spinner-small[b-tuui0lk35y] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-tuui0lk35y 0.8s linear infinite;
}

/* Empty State - Modern */
.empty-state[b-tuui0lk35y] {
    text-align: center;
    padding: 80px 20px;
    color: #6b7280;
}

    .empty-state i[b-tuui0lk35y] {
        font-size: 80px;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-state h3[b-tuui0lk35y] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-tuui0lk35y] {
        font-size: 16px;
        color: #6b7280;
        font-weight: 500;
    }

/* Validation Messages - Modern */
.validation-message[b-tuui0lk35y] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .validation-message[b-tuui0lk35y]::before {
        content: '⚠';
        color: #ef4444;
    }

/* Animations */
@keyframes fadeIn-b-tuui0lk35y {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

/* Dark Theme Support */
[data-theme="dark"] .subscription-plans-page[b-tuui0lk35y] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .subscription-plans-page[b-tuui0lk35y]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-tuui0lk35y],
[data-theme="dark"] .plans-container[b-tuui0lk35y],
[data-theme="dark"] .plan-card[b-tuui0lk35y],
[data-theme="dark"] .modal-content[b-tuui0lk35y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-title[b-tuui0lk35y],
[data-theme="dark"] .plan-name[b-tuui0lk35y],
[data-theme="dark"] .plan-price .amount[b-tuui0lk35y] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-item[b-tuui0lk35y] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-tuui0lk35y] {
        color: #a78bfa;
    }

[data-theme="dark"] .current[b-tuui0lk35y] {
    color: #e2e8f0;
}

[data-theme="dark"] .plan-name-en[b-tuui0lk35y],
[data-theme="dark"] .plan-description[b-tuui0lk35y],
[data-theme="dark"] .plan-price .currency[b-tuui0lk35y],
[data-theme="dark"] .plan-price .duration[b-tuui0lk35y] {
    color: #9ca3af;
}

[data-theme="dark"] .plan-features li[b-tuui0lk35y] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .plan-features li:hover[b-tuui0lk35y] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .plan-features h4[b-tuui0lk35y] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-section[b-tuui0lk35y] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .form-control[b-tuui0lk35y] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-tuui0lk35y] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .form-check[b-tuui0lk35y] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .form-check:hover[b-tuui0lk35y] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

    [data-theme="dark"] .form-check label[b-tuui0lk35y],
    [data-theme="dark"] .form-group label[b-tuui0lk35y],
    [data-theme="dark"] .form-section h4[b-tuui0lk35y] {
        color: #e2e8f0;
    }

[data-theme="dark"] .modal-header[b-tuui0lk35y],
[data-theme="dark"] .modal-footer[b-tuui0lk35y] {
    background: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .btn-close[b-tuui0lk35y] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-tuui0lk35y] {
        color: #e2e8f0;
    }

[data-theme="dark"] .loading-container[b-tuui0lk35y],
[data-theme="dark"] .empty-state[b-tuui0lk35y] {
    color: #9ca3af;
}

    [data-theme="dark"] .empty-state h3[b-tuui0lk35y] {
        color: #e2e8f0;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .plans-grid[b-tuui0lk35y] {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .subscription-plans-page[b-tuui0lk35y] {
        padding: 16px;
    }

    .page-header[b-tuui0lk35y] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .page-title[b-tuui0lk35y] {
        font-size: 28px;
    }

    .header-actions[b-tuui0lk35y] {
        width: 100%;
    }

        .header-actions .btn-primary[b-tuui0lk35y] {
            width: 100%;
            justify-content: center;
        }

    .plans-container[b-tuui0lk35y] {
        padding: 20px;
    }

    .plans-grid[b-tuui0lk35y] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .plan-card[b-tuui0lk35y] {
        padding: 20px;
    }

    .plan-price .amount[b-tuui0lk35y] {
        font-size: 32px;
    }

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

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

    .modal-content[b-tuui0lk35y] {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-header[b-tuui0lk35y],
    .modal-body[b-tuui0lk35y],
    .modal-footer[b-tuui0lk35y] {
        padding: 20px;
    }

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

        .modal-footer .btn-primary[b-tuui0lk35y],
        .modal-footer .btn-secondary[b-tuui0lk35y] {
            width: 100%;
        }

    .breadcrumb-modern[b-tuui0lk35y] {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .page-title[b-tuui0lk35y] {
        font-size: 24px;
        gap: 12px;
    }

    .plan-name[b-tuui0lk35y] {
        font-size: 20px;
    }

    .plan-price .amount[b-tuui0lk35y] {
        font-size: 28px;
    }

    .free-badge[b-tuui0lk35y] {
        font-size: 10px;
        padding: 6px 35px;
    }

    .plan-features li[b-tuui0lk35y] {
        padding: 10px 12px;
        font-size: 13px;
    }

    .form-check[b-tuui0lk35y] {
        padding: 12px;
    }

    .btn-icon[b-tuui0lk35y] {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .subscription-plans-page[b-tuui0lk35y] {
        background: white !important;
        padding: 0 !important;
    }

    .page-header[b-tuui0lk35y],
    .plans-container[b-tuui0lk35y] {
        background: white !important;
        box-shadow: none !important;
    }

    .header-actions[b-tuui0lk35y],
    .plan-actions[b-tuui0lk35y],
    .btn-close[b-tuui0lk35y] {
        display: none !important;
    }

    .plan-card[b-tuui0lk35y] {
        break-inside: avoid;
        border: 1px solid #ccc !important;
        margin-bottom: 20px !important;
    }

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

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-tuui0lk35y],
    .btn-gradient-secondary[b-tuui0lk35y],
    .btn-gradient-success[b-tuui0lk35y],
    .btn-gradient-danger[b-tuui0lk35y] {
        border: 2px solid currentColor;
    }

    .plan-card[b-tuui0lk35y] {
        border-width: 3px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-tuui0lk35y] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Admin/Users.razor.rz.scp.css */
.btn-gradient-primary[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-qpc05nnq2d] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-qpc05nnq2d] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-qpc05nnq2d] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-warning[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-gradient-warning:hover[b-qpc05nnq2d] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-gradient-danger[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-qpc05nnq2d] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }


/* Updated Actions Bar for Dark Theme */
.actions-bar[b-qpc05nnq2d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}


/*===============================*/







.btn-gradient-ghost[b-qpc05nnq2d] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-gradient-ghost:hover[b-qpc05nnq2d] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-1px);
    }

.btn-ghost[b-qpc05nnq2d] {
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 8px 12px;
    transition: all 0.2s;
}

    .btn-ghost:hover[b-qpc05nnq2d] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

.btn-icon[b-qpc05nnq2d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Override Bootstrap Button Styles */
.btn[b-qpc05nnq2d] {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    padding: 10px 20px;
}

    .btn:hover[b-qpc05nnq2d] {
        transform: translateY(-2px);
    }

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

/* Page Container */
.users-admin-page[b-qpc05nnq2d] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .users-admin-page[b-qpc05nnq2d]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .users-admin-page > *[b-qpc05nnq2d] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-qpc05nnq2d] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-qpc05nnq2d] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-qpc05nnq2d] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-qpc05nnq2d] {
        color: #667eea;
    }

.breadcrumb-separator[b-qpc05nnq2d] {
    color: #d1d5db;
}

.breadcrumb-current[b-qpc05nnq2d] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-qpc05nnq2d] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-qpc05nnq2d] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}



.actions-left[b-qpc05nnq2d],
.actions-right[b-qpc05nnq2d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* View Mode Toggle */
.view-mode-toggle[b-qpc05nnq2d] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.view-mode-btn[b-qpc05nnq2d] {
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

    .view-mode-btn:hover[b-qpc05nnq2d] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .view-mode-btn.active[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

/* Statistics Grid */
.stats-grid[b-qpc05nnq2d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-qpc05nnq2d]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-qpc05nnq2d] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-qpc05nnq2d]::before {
            opacity: 1;
        }

.stat-icon[b-qpc05nnq2d] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}



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

.stat-value[b-qpc05nnq2d] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-qpc05nnq2d] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Filters Card */
.filters-card[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.filters-header[b-qpc05nnq2d] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.filters-title[b-qpc05nnq2d] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
}

.filters-content[b-qpc05nnq2d] {
    padding: 24px;
}

.filter-row[b-qpc05nnq2d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.filter-group[b-qpc05nnq2d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-qpc05nnq2d] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
}

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

.search-icon[b-qpc05nnq2d] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9333ea;
}

.search-box input[b-qpc05nnq2d],
.filter-group select[b-qpc05nnq2d] {
    width: 100%;
    padding: 12px 16px;
    padding-left: 40px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

.filter-group select[b-qpc05nnq2d] {
    padding-left: 16px;
}

    .search-box input:focus[b-qpc05nnq2d],
    .filter-group select:focus[b-qpc05nnq2d] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.search-box input[b-qpc05nnq2d]::placeholder {
    color: #9ca3af;
}

/* Bulk Actions */
.bulk-actions[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown-b-qpc05nnq2d 0.3s ease;
    backdrop-filter: blur(10px);
}

.bulk-info[b-qpc05nnq2d] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
    font-weight: 600;
    font-size: 16px;
}

    .bulk-info i[b-qpc05nnq2d] {
        color: #667eea;
        font-size: 20px;
    }

.bulk-buttons[b-qpc05nnq2d] {
    display: flex;
    gap: 10px;
}

    .bulk-buttons .btn[b-qpc05nnq2d] {
        padding: 10px 20px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .bulk-buttons .btn-success[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        border: none;
        color: white;
    }

    .bulk-buttons .btn-warning[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border: none;
        color: white;
    }

    .bulk-buttons .btn-danger[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
        border: none;
        color: white;
    }

/* Data Table */
.table-container[b-qpc05nnq2d] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.data-table[b-qpc05nnq2d] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-qpc05nnq2d] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

        .data-table th.sortable[b-qpc05nnq2d] {
            cursor: pointer;
            user-select: none;
            transition: all 0.3s;
        }

            .data-table th.sortable:hover[b-qpc05nnq2d] {
                border-bottom: 1px solid rgba(102, 126, 234, 0.1);
            }

    .data-table td[b-qpc05nnq2d] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
    }

    .data-table tbody tr[b-qpc05nnq2d] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .data-table tbody tr:hover[b-qpc05nnq2d] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .data-table tbody tr:last-child td[b-qpc05nnq2d] {
            border-bottom: none;
        }

/* Checkbox Column */
.checkbox-column[b-qpc05nnq2d] {
    width: 40px;
    text-align: center !important;
}

/* Custom Checkbox Style */
input[type="checkbox"][b-qpc05nnq2d] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
    border-radius: 4px;
}

    input[type="checkbox"]:checked[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

/* User Info */
.user-info[b-qpc05nnq2d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-qpc05nnq2d] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
}

    .user-avatar:hover[b-qpc05nnq2d] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

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

.user-details[b-qpc05nnq2d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name[b-qpc05nnq2d] {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}

.user-username[b-qpc05nnq2d] {
    font-size: 13px;
    color: #9333ea;
    font-weight: 500;
}

/* Contact Info */
.contact-info[b-qpc05nnq2d] {
    font-size: 14px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .contact-info div[b-qpc05nnq2d] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .contact-info i[b-qpc05nnq2d] {
        width: 16px;
        color: #9333ea;
        font-size: 14px;
    }

/* Status Badge */
.status-badge[b-qpc05nnq2d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.active[b-qpc05nnq2d] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-qpc05nnq2d] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .status-badge i[b-qpc05nnq2d] {
        font-size: 8px;
    }

/* Role Badges */
.badge[b-qpc05nnq2d] {
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

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

    .badge:hover[b-qpc05nnq2d]::before {
        left: 100%;
    }

.badge-owner[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.badge-admin[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.badge-supervisor[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.badge-merchant[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.badge-agent[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.badge-customer[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    color: white;
}

/* Action Buttons */
.action-buttons[b-qpc05nnq2d] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

    .action-buttons .btn[b-qpc05nnq2d] {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

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

        .action-buttons .btn:hover[b-qpc05nnq2d]::before {
            width: 100px;
            height: 100px;
        }



/* Mobile Table */
.mobile-table[b-qpc05nnq2d] {
    display: none;
}

.user-info-mobile[b-qpc05nnq2d] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-mobile[b-qpc05nnq2d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .info-mobile .badge[b-qpc05nnq2d] {
        align-self: flex-start;
    }

/* Grid View */
.users-grid[b-qpc05nnq2d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.user-card[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

    .user-card[b-qpc05nnq2d]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
    }

    .user-card:hover[b-qpc05nnq2d] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .user-card.selected[b-qpc05nnq2d] {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
    }

.card-header[b-qpc05nnq2d] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    position: relative;
    z-index: 1;
}

.card-body[b-qpc05nnq2d] {
    padding: 24px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.user-avatar-large[b-qpc05nnq2d] {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 700;
    font-size: 36px;
    position: relative;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

    .user-avatar-large img[b-qpc05nnq2d] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.status-indicator[b-qpc05nnq2d] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

    .status-indicator.active[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .status-indicator.inactive[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    }

.user-card-name[b-qpc05nnq2d] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1f2937;
}

.user-card-username[b-qpc05nnq2d] {
    font-size: 15px;
    color: #9333ea;
    margin-bottom: 16px;
    font-weight: 500;
}

.user-card-info[b-qpc05nnq2d] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    text-align: left;
}

.info-item[b-qpc05nnq2d] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #4b5563;
}

    .info-item i[b-qpc05nnq2d] {
        width: 16px;
        color: #9333ea;
    }

/* Empty State */
.empty-state[b-qpc05nnq2d] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-qpc05nnq2d] {
    font-size: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
}

.empty-state h3[b-qpc05nnq2d] {
    font-size: 28px;
    color: #4c1d95;
    margin-bottom: 12px;
    font-weight: 700;
}

.empty-state p[b-qpc05nnq2d] {
    font-size: 18px;
    color: #6b7280;
}

/* Pagination */
.pagination-container[b-qpc05nnq2d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pagination-info[b-qpc05nnq2d] {
    font-size: 14px;
    color: #4c1d95;
    font-weight: 600;
}

.pagination[b-qpc05nnq2d] {
    display: flex;
    gap: 6px;
}

.page-btn[b-qpc05nnq2d] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

.page-size-selector select[b-qpc05nnq2d] {
    min-width: 80px;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    border-radius: 10px;
    color: #4c1d95;
    font-weight: 600;
    transition: all 0.3s;
}

    .page-size-selector select:focus[b-qpc05nnq2d] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Loading State */
.loading-container[b-qpc05nnq2d] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-qpc05nnq2d] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-qpc05nnq2d 0.8s linear infinite;
}

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

/* Modal Overrides */
.modal.show[b-qpc05nnq2d] {
    display: flex;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.modal-dialog[b-qpc05nnq2d] {
    max-width: 600px;
    animation: zoomIn-b-qpc05nnq2d 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.modal-content[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-header[b-qpc05nnq2d] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
}

.modal-title[b-qpc05nnq2d] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-body[b-qpc05nnq2d] {
    padding: 30px;
}

.form-grid[b-qpc05nnq2d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.form-group[b-qpc05nnq2d] {
    margin-bottom: 0;
}

.form-label[b-qpc05nnq2d] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 8px;
}

.form-control[b-qpc05nnq2d] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-qpc05nnq2d] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control:disabled[b-qpc05nnq2d] {
        background: #f3f4f6;
        cursor: not-allowed;
    }

select.form-control[b-qpc05nnq2d] {
    cursor: pointer;
}

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

.form-actions[b-qpc05nnq2d] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.btn-close[b-qpc05nnq2d] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    transition: all 0.3s;
}

    .btn-close:hover[b-qpc05nnq2d] {
        color: #4c1d95;
        transform: rotate(90deg);
    }

.btn-secondary[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-secondary:hover[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Validation Styles */
.validation-message[b-qpc05nnq2d],
.text-danger[b-qpc05nnq2d] {
    color: #ef4444 !important;
    font-size: 13px;
    margin-top: 4px;
}

.validation-summary[b-qpc05nnq2d] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
}

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

/* Dropdown Styles */
.dropdown-menu[b-qpc05nnq2d] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.1);
    padding: 8px;
    min-width: 180px;
}

.dropdown-item[b-qpc05nnq2d] {
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .dropdown-item:hover[b-qpc05nnq2d] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

    .dropdown-item i[b-qpc05nnq2d] {
        width: 16px;
    }

.dropdown-divider[b-qpc05nnq2d] {
    margin: 8px 0;
    border-color: rgba(102, 126, 234, 0.1);
}

.text-warning[b-qpc05nnq2d] {
    color: #f59e0b !important;
}

.text-success[b-qpc05nnq2d] {
    color: #10b981 !important;
}

.text-danger[b-qpc05nnq2d] {
    color: #ef4444 !important;
}

.dropdown-toggle[b-qpc05nnq2d] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s;
}

    .dropdown-toggle:hover[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .dropdown-toggle[b-qpc05nnq2d]:after {
        display: none;
    }

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

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

/* RTL Support */
html[dir="rtl"] .data-table th[b-qpc05nnq2d],
html[dir="rtl"] .data-table td[b-qpc05nnq2d] {
    text-align: left;
}

html[dir="rtl"] .checkbox-column[b-qpc05nnq2d] {
    text-align: center !important;
}

html[dir="rtl"] .action-buttons[b-qpc05nnq2d] {
    justify-content: flex-start;
}

html[dir="rtl"] .contact-info i[b-qpc05nnq2d] {
    margin-right: 0;
    margin-left: 6px;
}

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

    .filter-row[b-qpc05nnq2d] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .users-admin-page[b-qpc05nnq2d] {
        padding: 16px;
    }

    .page-header[b-qpc05nnq2d] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-qpc05nnq2d] {
        font-size: 28px;
    }

    .page-subtitle[b-qpc05nnq2d] {
        font-size: 16px;
    }

    .actions-bar[b-qpc05nnq2d] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .actions-left[b-qpc05nnq2d],
    .actions-right[b-qpc05nnq2d] {
        width: 100%;
        justify-content: space-between;
    }

        .actions-left .btn[b-qpc05nnq2d] {
            flex: 1;
            font-size: 14px;
            padding: 10px 8px;
        }

            .actions-left .btn span[b-qpc05nnq2d] {
                display: none;
            }

    .stats-grid[b-qpc05nnq2d] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-qpc05nnq2d] {
        padding: 20px;
    }

    .stat-icon[b-qpc05nnq2d] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-qpc05nnq2d] {
        font-size: 24px;
    }

    .filter-row[b-qpc05nnq2d] {
        grid-template-columns: 1fr;
    }

    .bulk-actions[b-qpc05nnq2d] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px;
    }

    .bulk-buttons[b-qpc05nnq2d] {
        width: 100%;
        justify-content: center;
    }

    /* Hide desktop table on mobile */
    .table-container.d-none.d-lg-block[b-qpc05nnq2d] {
        display: none !important;
    }

    /* Show mobile table */
    .table-container.d-lg-none[b-qpc05nnq2d] {
        display: block !important;
    }

    .mobile-table[b-qpc05nnq2d] {
        display: table;
        font-size: 14px;
    }

    .dropdown-menu[b-qpc05nnq2d] {
        right: 0 !important;
        left: auto !important;
    }

    .users-grid[b-qpc05nnq2d] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pagination-container[b-qpc05nnq2d] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

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

    .pagination-info[b-qpc05nnq2d] {
        text-align: center;
    }

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

    .form-actions[b-qpc05nnq2d] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-qpc05nnq2d] {
            width: 100%;
        }

    .modal-dialog[b-qpc05nnq2d] {
        margin: 16px;
        max-width: calc(100% - 32px);
    }

    .modal-header[b-qpc05nnq2d] {
        padding: 20px;
    }

    .modal-body[b-qpc05nnq2d] {
        padding: 20px;
    }

    .empty-state[b-qpc05nnq2d] {
        padding: 60px 20px;
    }

    .empty-icon[b-qpc05nnq2d] {
        font-size: 60px;
    }

    .empty-state h3[b-qpc05nnq2d] {
        font-size: 22px;
    }

    .user-avatar[b-qpc05nnq2d] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .user-avatar-large[b-qpc05nnq2d] {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .btn-gradient-primary[b-qpc05nnq2d],
    .btn-gradient-secondary[b-qpc05nnq2d],
    .btn-gradient-success[b-qpc05nnq2d] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .view-mode-toggle[b-qpc05nnq2d] {
        width: 100%;
        justify-content: center;
    }

    .filters-card[b-qpc05nnq2d] {
        margin-bottom: 16px;
    }

    .filters-header[b-qpc05nnq2d] {
        padding: 16px;
    }

    .filters-content[b-qpc05nnq2d] {
        padding: 16px;
    }
}

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

    .breadcrumb[b-qpc05nnq2d] {
        font-size: 12px;
    }

    .stat-card[b-qpc05nnq2d] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .user-card[b-qpc05nnq2d] {
        margin: 0 -8px;
    }

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

    .page-btn[b-qpc05nnq2d] {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .users-admin-page[b-qpc05nnq2d] {
        background: white !important;
    }

    .actions-bar[b-qpc05nnq2d],
    .filters-card[b-qpc05nnq2d],
    .pagination-container[b-qpc05nnq2d],
    .action-buttons[b-qpc05nnq2d],
    .dropdown[b-qpc05nnq2d],
    .checkbox-column[b-qpc05nnq2d],
    .view-mode-toggle[b-qpc05nnq2d] {
        display: none !important;
    }

    .data-table[b-qpc05nnq2d] {
        font-size: 12px;
    }

        .data-table th[b-qpc05nnq2d] {
            background: #f3f4f6 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

    .badge[b-qpc05nnq2d] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Focus States for Accessibility */
*:focus[b-qpc05nnq2d] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-qpc05nnq2d],
.btn:focus[b-qpc05nnq2d] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-qpc05nnq2d],
select:focus[b-qpc05nnq2d] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-qpc05nnq2d],
    .btn-gradient-secondary[b-qpc05nnq2d],
    .btn-gradient-success[b-qpc05nnq2d],
    .btn-gradient-warning[b-qpc05nnq2d],
    .btn-gradient-danger[b-qpc05nnq2d] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-qpc05nnq2d] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .users-admin-page[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .users-admin-page[b-qpc05nnq2d]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .stat-card[b-qpc05nnq2d],
[data-theme="dark"] .filters-card[b-qpc05nnq2d],
[data-theme="dark"] .table-container[b-qpc05nnq2d],
[data-theme="dark"] .user-card[b-qpc05nnq2d],
[data-theme="dark"] .pagination-container[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .data-table th[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] .data-table td[b-qpc05nnq2d] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .data-table tbody tr:hover[b-qpc05nnq2d] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .card-header[b-qpc05nnq2d] {
    background: transparent;
}

[data-theme="dark"] .filters-header[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .search-box input[b-qpc05nnq2d],
[data-theme="dark"] .filter-group select[b-qpc05nnq2d] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-qpc05nnq2d],
    [data-theme="dark"] .filter-group select:focus[b-qpc05nnq2d] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .search-icon[b-qpc05nnq2d] {
    color: #a78bfa;
}

[data-theme="dark"] .filter-label[b-qpc05nnq2d] {
    color: #e2e8f0;
}

[data-theme="dark"] .filters-title[b-qpc05nnq2d] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-btn[b-qpc05nnq2d] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .user-card[b-qpc05nnq2d]::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.05;
}

[data-theme="dark"] .page-title[b-qpc05nnq2d],
[data-theme="dark"] .stat-value[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-link[b-qpc05nnq2d] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-qpc05nnq2d] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-qpc05nnq2d] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-qpc05nnq2d] {
    color: #9ca3af;
}

[data-theme="dark"] .stat-label[b-qpc05nnq2d] {
    color: #9ca3af;
}

[data-theme="dark"] .user-name[b-qpc05nnq2d] {
    color: #e2e8f0;
}

[data-theme="dark"] .contact-info[b-qpc05nnq2d] {
    color: #9ca3af;
}

[data-theme="dark"] .pagination-info[b-qpc05nnq2d] {
    color: #9ca3af;
}

[data-theme="dark"] .modal-content[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-label[b-qpc05nnq2d] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-qpc05nnq2d] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-qpc05nnq2d] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .dropdown-menu[b-qpc05nnq2d] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .dropdown-item[b-qpc05nnq2d] {
    color: #e2e8f0;
}

    [data-theme="dark"] .dropdown-item:hover[b-qpc05nnq2d] {
        background: rgba(102, 126, 234, 0.2);
        color: #a78bfa;
    }

[data-theme="dark"] .user-card-name[b-qpc05nnq2d] {
    color: #e2e8f0;
}

[data-theme="dark"] .user-card-username[b-qpc05nnq2d] {
    color: #a78bfa;
}

[data-theme="dark"] .info-item[b-qpc05nnq2d] {
    color: #9ca3af;
}

    [data-theme="dark"] .info-item i[b-qpc05nnq2d] {
        color: #a78bfa;
    }

[data-theme="dark"] .empty-state[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

[data-theme="dark"] .empty-icon[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-state h3[b-qpc05nnq2d] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-qpc05nnq2d] {
    color: #9ca3af;
}

[data-theme="dark"] .bulk-info[b-qpc05nnq2d] {
    color: #e2e8f0;
}

    [data-theme="dark"] .bulk-info i[b-qpc05nnq2d] {
        color: #a78bfa;
    }

[data-theme="dark"] .btn-close[b-qpc05nnq2d] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-qpc05nnq2d] {
        color: #e2e8f0;
    }

[data-theme="dark"] .view-mode-btn[b-qpc05nnq2d] {
    color: #a78bfa;
}

    [data-theme="dark"] .view-mode-btn:hover[b-qpc05nnq2d] {
        color: #c084fc;
    }

[data-theme="dark"] .btn-gradient-ghost[b-qpc05nnq2d] {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}

    [data-theme="dark"] .btn-gradient-ghost:hover[b-qpc05nnq2d] {
        background: rgba(167, 139, 250, 0.1);
        border-color: #a78bfa;
    }
/* Dark Theme Support - Including Page Header and Actions Bar */
[data-theme="dark"] .users-admin-page[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .users-admin-page[b-qpc05nnq2d]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

/* Dark theme for page header */
[data-theme="dark"] .page-header[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Dark theme for actions bar */
[data-theme="dark"] .actions-bar[b-qpc05nnq2d] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Dark theme adjustments for action buttons */
[data-theme="dark"] .action-buttons .btn-info[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #4096b4 0%, #2670ad 100%);
}

[data-theme="dark"] .action-buttons .btn-primary[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .action-buttons .btn-warning[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #cd7ddb 0%, #d04e5f 100%);
}

[data-theme="dark"] .action-buttons .btn-success[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

[data-theme="dark"] .action-buttons .btn-danger[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
}

[data-theme="dark"] .bulk-info[b-qpc05nnq2d] {
    color: #e2e8f0;
}

    [data-theme="dark"] .bulk-info i[b-qpc05nnq2d] {
        color: #a78bfa;
    }

/* View mode button adjustments for dark theme */
[data-theme="dark"] .view-mode-btn[b-qpc05nnq2d] {
    color: #a78bfa;
}

    [data-theme="dark"] .view-mode-btn:hover[b-qpc05nnq2d] {
        color: #c084fc;
        background: rgba(167, 139, 250, 0.1);
    }

    [data-theme="dark"] .view-mode-btn.active[b-qpc05nnq2d] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(90, 108, 179, 0.3);
    }

/* Dark theme for gradient ghost buttons */
[data-theme="dark"] .btn-gradient-ghost[b-qpc05nnq2d] {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}

    [data-theme="dark"] .btn-gradient-ghost:hover[b-qpc05nnq2d] {
        background: rgba(167, 139, 250, 0.1);
        border-color: #a78bfa;
    }

/* Updated button colors for dark theme bulk actions */
[data-theme="dark"] .bulk-buttons .btn-success[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

[data-theme="dark"] .bulk-buttons .btn-warning[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #cd7ddb 0%, #d04e5f 100%);
}

[data-theme="dark"] .bulk-buttons .btn-danger[b-qpc05nnq2d] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
}
/* _content/Sahelly/Components/Pages/Admin/WalletManagement.razor.rz.scp.css */

/* ===================================
   Wallet Management - Modern Professional CSS
   ���� ����� ������� ������� - ����� ������� ����
   =================================== */

/* Button Gradient System - Following Users.razor.css Pattern */
.btn-gradient-primary[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-blhe6wcy3f] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-success[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-blhe6wcy3f] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Page Container */
.wallets-container[b-blhe6wcy3f] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .wallets-container[b-blhe6wcy3f]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .wallets-container > *[b-blhe6wcy3f] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-blhe6wcy3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-content h1[b-blhe6wcy3f] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .header-content h1 i[b-blhe6wcy3f] {
        font-size: 28px;
    }

.breadcrumb[b-blhe6wcy3f] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .breadcrumb a[b-blhe6wcy3f] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb a:hover[b-blhe6wcy3f] {
            color: #667eea;
        }

    .breadcrumb span:last-child[b-blhe6wcy3f] {
        color: #4c1d95;
        font-weight: 600;
    }

.header-actions[b-blhe6wcy3f] {
    display: flex;
    gap: 12px;
}

    .header-actions .btn[b-blhe6wcy3f] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

/* Dashboard Statistics Cards */
.dashboard-stats[b-blhe6wcy3f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-blhe6wcy3f] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-blhe6wcy3f]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-blhe6wcy3f] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-blhe6wcy3f]::before {
            opacity: 1;
        }

.stat-icon[b-blhe6wcy3f] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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

.stat-card.success .stat-icon[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-card.warning .stat-icon[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.info .stat-icon[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

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

    .stat-content h3[b-blhe6wcy3f] {
        font-size: 28px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-content p[b-blhe6wcy3f] {
        font-size: 15px;
        color: #6b7280;
        margin: 4px 0 0;
        font-weight: 500;
    }

.stat-badge[b-blhe6wcy3f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #4c1d95;
    margin-top: 8px;
}

    .stat-badge i[b-blhe6wcy3f] {
        font-size: 12px;
    }

/* User Type Statistics */
.user-type-stats[b-blhe6wcy3f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-item[b-blhe6wcy3f] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

    .stat-item:hover[b-blhe6wcy3f] {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .stat-item.merchants:hover[b-blhe6wcy3f] {
        border-color: #667eea;
    }

    .stat-item.agents:hover[b-blhe6wcy3f] {
        border-color: #14b8a6;
    }

    .stat-item.customers:hover[b-blhe6wcy3f] {
        border-color: #f59e0b;
    }

.stat-header[b-blhe6wcy3f] {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.stat-item.merchants .stat-header[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-item.agents .stat-header[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.stat-item.customers .stat-header[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-body[b-blhe6wcy3f] {
    padding: 24px;
}

.stat-row[b-blhe6wcy3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .stat-row:last-child[b-blhe6wcy3f] {
        border-bottom: none;
    }

    .stat-row span[b-blhe6wcy3f] {
        color: #6b7280;
        font-size: 14px;
        font-weight: 500;
    }

    .stat-row strong[b-blhe6wcy3f] {
        font-size: 16px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Advanced Filters Section */
.advanced-filters[b-blhe6wcy3f] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.filter-row[b-blhe6wcy3f] {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr) auto;
    gap: 16px;
    align-items: end;
}

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

    .search-box i[b-blhe6wcy3f] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 16px;
    }

    .search-box input[b-blhe6wcy3f] {
        width: 100%;
        padding: 14px 16px 14px 44px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .search-box input:focus[b-blhe6wcy3f] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.filter-group[b-blhe6wcy3f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-group label[b-blhe6wcy3f] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.filter-select[b-blhe6wcy3f] {
    width: 100%;
    padding: 14px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    cursor: pointer;
}

    .filter-select:focus[b-blhe6wcy3f] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.range-inputs[b-blhe6wcy3f] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .range-inputs input[b-blhe6wcy3f] {
        flex: 1;
        padding: 14px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .range-inputs input:focus[b-blhe6wcy3f] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

    .range-inputs span[b-blhe6wcy3f] {
        color: #6b7280;
        font-weight: 500;
    }

.btn-filter-reset[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .btn-filter-reset:hover[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Active Filters Display */
.active-filters[b-blhe6wcy3f] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .active-filters > span:first-child[b-blhe6wcy3f] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.filter-tag[b-blhe6wcy3f] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #4c1d95;
}

    .filter-tag i[b-blhe6wcy3f] {
        cursor: pointer;
        transition: transform 0.2s;
    }

        .filter-tag i:hover[b-blhe6wcy3f] {
            transform: scale(1.2);
        }

/* Results Summary */
.results-summary[b-blhe6wcy3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

    .results-summary > span[b-blhe6wcy3f] {
        font-size: 15px;
        font-weight: 600;
        color: #4c1d95;
    }

.view-options[b-blhe6wcy3f] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.view-btn[b-blhe6wcy3f] {
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

    .view-btn:hover[b-blhe6wcy3f] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .view-btn.active[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

/* Wallets Display Container */
.wallets-container.grid-view[b-blhe6wcy3f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
}

.wallets-container.list-view[b-blhe6wcy3f] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Wallet Card */
.wallet-card[b-blhe6wcy3f] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}

    .wallet-card:hover[b-blhe6wcy3f] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .wallet-card.locked[b-blhe6wcy3f] {
        border-color: rgba(239, 68, 68, 0.3);
        background: linear-gradient(135deg, rgba(254, 226, 226, 0.5) 0%, rgba(255, 255, 255, 0.9) 100%);
    }

    .wallet-card.inactive[b-blhe6wcy3f] {
        opacity: 0.7;
        background: linear-gradient(135deg, rgba(243, 244, 246, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
    }

.wallet-header[b-blhe6wcy3f] {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.user-info[b-blhe6wcy3f] {
    display: flex;
    gap: 16px;
}

.user-avatar[b-blhe6wcy3f] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 700;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
}

    .user-avatar:hover[b-blhe6wcy3f] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

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

.avatar-placeholder[b-blhe6wcy3f] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-details h4[b-blhe6wcy3f] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.user-email[b-blhe6wcy3f] {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
    display: block;
}

.wallet-number[b-blhe6wcy3f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #4c1d95;
}

    .wallet-number i[b-blhe6wcy3f] {
        font-size: 11px;
    }

.wallet-status[b-blhe6wcy3f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.type-badge[b-blhe6wcy3f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .type-badge i[b-blhe6wcy3f] {
        font-size: 14px;
    }

.type-merchant[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.type-agent[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
}

.type-customer[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.status-badge[b-blhe6wcy3f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge i[b-blhe6wcy3f] {
        font-size: 12px;
    }

    .status-badge.active[b-blhe6wcy3f] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.locked[b-blhe6wcy3f] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .status-badge.inactive[b-blhe6wcy3f] {
        background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(209, 213, 219, 0.2) 100%);
        color: #6b7280;
        border: 1px solid rgba(156, 163, 175, 0.3);
    }

.wallet-body[b-blhe6wcy3f] {
    padding: 24px;
}

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

.balance-item[b-blhe6wcy3f] {
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
}

    .balance-item label[b-blhe6wcy3f] {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .balance-item .amount[b-blhe6wcy3f] {
        font-size: 20px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .balance-item.pending .amount[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.last-activity[b-blhe6wcy3f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(129, 140, 248, 0.05) 100%);
    border-radius: 12px;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
}

    .last-activity i[b-blhe6wcy3f] {
        font-size: 16px;
    }

    .last-activity.no-activity[b-blhe6wcy3f] {
        background: linear-gradient(135deg, rgba(156, 163, 175, 0.05) 0%, rgba(209, 213, 219, 0.05) 100%);
        color: #6b7280;
    }

.wallet-actions[b-blhe6wcy3f] {
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    gap: 8px;
}

.action-btn[b-blhe6wcy3f] {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

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

    .action-btn:hover[b-blhe6wcy3f]::before {
        width: 100px;
        height: 100px;
    }

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

    .action-btn.primary[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

        .action-btn.primary:hover:not(:disabled)[b-blhe6wcy3f] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

    .action-btn.info[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: white;
    }

        .action-btn.info:hover[b-blhe6wcy3f] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

    .action-btn.warning[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
    }

    .action-btn.success[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
    }

    .action-btn.secondary[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        color: #4b5563;
    }

/* Empty State */
.empty-state[b-blhe6wcy3f] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-blhe6wcy3f] {
        color: #9ca3af;
        margin-bottom: 24px;
    }

    .empty-state h3[b-blhe6wcy3f] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-blhe6wcy3f] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Pagination */
.pagination-wrapper[b-blhe6wcy3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 32px;
}

.pagination-info[b-blhe6wcy3f] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-size-select[b-blhe6wcy3f] {
    min-width: 120px;
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    border-radius: 10px;
    color: #4c1d95;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
}

    .page-size-select:focus[b-blhe6wcy3f] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.pagination[b-blhe6wcy3f] {
    display: flex;
    gap: 6px;
}

.page-btn[b-blhe6wcy3f] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

.page-dots[b-blhe6wcy3f] {
    padding: 10px 8px;
    color: #9ca3af;
    font-weight: 600;
}

/* Modal Overlay */
.modal-overlay[b-blhe6wcy3f] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-blhe6wcy3f 0.3s;
}

.modal-container[b-blhe6wcy3f] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUpModal-b-blhe6wcy3f 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .modal-container.modal-large[b-blhe6wcy3f] {
        max-width: 900px;
    }

.modal-header[b-blhe6wcy3f] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-blhe6wcy3f] {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .modal-header h3 i[b-blhe6wcy3f] {
            font-size: 20px;
        }

.btn-close[b-blhe6wcy3f] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .btn-close:hover[b-blhe6wcy3f] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-blhe6wcy3f] {
    padding: 30px;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

/* Transaction Timeline */
.transactions-timeline[b-blhe6wcy3f] {
    padding: 20px 0;
}

.timeline-item[b-blhe6wcy3f] {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 30px;
}

    .timeline-item:last-child[b-blhe6wcy3f] {
        padding-bottom: 0;
    }

    .timeline-item:not(:last-child)[b-blhe6wcy3f]::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 48px;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, rgba(102, 126, 234, 0.3) 0%, transparent 100%);
    }

.timeline-marker[b-blhe6wcy3f] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .timeline-marker[b-blhe6wcy3f]::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: inherit;
        opacity: 0.2;
        z-index: -1;
        animation: pulse-b-blhe6wcy3f 2s infinite;
    }

.type-deposit[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.type-withdrawal[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.type-commission[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.type-transfer[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.type-revenue[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.timeline-content[b-blhe6wcy3f] {
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.transaction-header[b-blhe6wcy3f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.transaction-title h4[b-blhe6wcy3f] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.transaction-ref[b-blhe6wcy3f] {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.transaction-amount[b-blhe6wcy3f] {
    font-size: 20px;
    font-weight: 800;
}

    .transaction-amount.credit[b-blhe6wcy3f] {
        color: #10b981;
    }

    .transaction-amount.debit[b-blhe6wcy3f] {
        color: #ef4444;
    }

.transaction-description[b-blhe6wcy3f] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px;
}

.transaction-footer[b-blhe6wcy3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.balance-change[b-blhe6wcy3f] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4c1d95;
    font-weight: 600;
}

    .balance-change i[b-blhe6wcy3f] {
        font-size: 12px;
    }

.transaction-time[b-blhe6wcy3f] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

    .transaction-time i[b-blhe6wcy3f] {
        font-size: 12px;
    }

/* Loading Container */
.loading-container[b-blhe6wcy3f] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.spinner-border[b-blhe6wcy3f] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-blhe6wcy3f 0.8s linear infinite;
}

/* Unauthorized Content */
.unauthorized-content[b-blhe6wcy3f] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 50px auto;
}

    .unauthorized-content i[b-blhe6wcy3f] {
        color: #9ca3af;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-blhe6wcy3f] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-blhe6wcy3f] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Form Styles */
.transaction-form[b-blhe6wcy3f] {
    padding: 20px 0;
}

.wallet-info-card[b-blhe6wcy3f] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .wallet-info-card h4[b-blhe6wcy3f] {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
    }

    .wallet-info-card p[b-blhe6wcy3f] {
        margin: 4px 0;
        font-size: 14px;
        color: #6b7280;
    }

.form-group[b-blhe6wcy3f] {
    margin-bottom: 20px;
}

    .form-group label[b-blhe6wcy3f] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-control[b-blhe6wcy3f] {
    width: 100%;
    padding: 14px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-blhe6wcy3f] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

textarea.form-control[b-blhe6wcy3f] {
    resize: vertical;
    min-height: 100px;
}

/* Wallet Details Modal */
.wallet-details-modal[b-blhe6wcy3f] {
    padding: 20px 0;
}

.details-section[b-blhe6wcy3f] {
    margin-bottom: 30px;
}

    .details-section:last-child[b-blhe6wcy3f] {
        margin-bottom: 0;
    }

    .details-section h4[b-blhe6wcy3f] {
        margin: 0 0 16px;
        font-size: 16px;
        font-weight: 700;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

.details-grid[b-blhe6wcy3f] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item[b-blhe6wcy3f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .detail-item label[b-blhe6wcy3f] {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-item span[b-blhe6wcy3f] {
        font-size: 15px;
        font-weight: 600;
        color: #1f2937;
    }

.text-success[b-blhe6wcy3f] {
    color: #10b981 !important;
}

.text-danger[b-blhe6wcy3f] {
    color: #ef4444 !important;
}

/* Animations */
@keyframes fadeIn-b-blhe6wcy3f {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

@keyframes pulse-b-blhe6wcy3f {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

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

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

/* Dark Theme Support */
[data-theme="dark"] .wallets-container[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .wallets-container[b-blhe6wcy3f]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-blhe6wcy3f],
[data-theme="dark"] .stat-card[b-blhe6wcy3f],
[data-theme="dark"] .stat-item[b-blhe6wcy3f],
[data-theme="dark"] .advanced-filters[b-blhe6wcy3f],
[data-theme="dark"] .results-summary[b-blhe6wcy3f],
[data-theme="dark"] .wallet-card[b-blhe6wcy3f],
[data-theme="dark"] .pagination-wrapper[b-blhe6wcy3f],
[data-theme="dark"] .modal-container[b-blhe6wcy3f],
[data-theme="dark"] .timeline-content[b-blhe6wcy3f],
[data-theme="dark"] .empty-state[b-blhe6wcy3f],
[data-theme="dark"] .unauthorized-content[b-blhe6wcy3f] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-overlay[b-blhe6wcy3f] {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .breadcrumb a[b-blhe6wcy3f],
[data-theme="dark"] .breadcrumb span:not(:last-child)[b-blhe6wcy3f],
[data-theme="dark"] .stat-content p[b-blhe6wcy3f],
[data-theme="dark"] .stat-row span[b-blhe6wcy3f],
[data-theme="dark"] .user-email[b-blhe6wcy3f],
[data-theme="dark"] .balance-item label[b-blhe6wcy3f],
[data-theme="dark"] .transaction-ref[b-blhe6wcy3f],
[data-theme="dark"] .transaction-description[b-blhe6wcy3f],
[data-theme="dark"] .transaction-time[b-blhe6wcy3f],
[data-theme="dark"] .empty-state p[b-blhe6wcy3f],
[data-theme="dark"] .unauthorized-content p[b-blhe6wcy3f],
[data-theme="dark"] .wallet-info-card p[b-blhe6wcy3f] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb span:last-child[b-blhe6wcy3f],
[data-theme="dark"] .results-summary > span[b-blhe6wcy3f],
[data-theme="dark"] .filter-group label[b-blhe6wcy3f],
[data-theme="dark"] .active-filters > span:first-child[b-blhe6wcy3f],
[data-theme="dark"] .filter-tag[b-blhe6wcy3f],
[data-theme="dark"] .wallet-number[b-blhe6wcy3f],
[data-theme="dark"] .stat-badge[b-blhe6wcy3f],
[data-theme="dark"] .last-activity[b-blhe6wcy3f],
[data-theme="dark"] .balance-change[b-blhe6wcy3f],
[data-theme="dark"] .page-size-select[b-blhe6wcy3f],
[data-theme="dark"] .page-btn[b-blhe6wcy3f],
[data-theme="dark"] .details-section h4[b-blhe6wcy3f],
[data-theme="dark"] .form-group label[b-blhe6wcy3f] {
    color: #e2e8f0;
}

[data-theme="dark"] .user-details h4[b-blhe6wcy3f],
[data-theme="dark"] .transaction-title h4[b-blhe6wcy3f],
[data-theme="dark"] .detail-item span[b-blhe6wcy3f],
[data-theme="dark"] .wallet-info-card h4[b-blhe6wcy3f] {
    color: #e2e8f0;
}

[data-theme="dark"] .header-content h1[b-blhe6wcy3f],
[data-theme="dark"] .stat-content h3[b-blhe6wcy3f],
[data-theme="dark"] .stat-row strong[b-blhe6wcy3f],
[data-theme="dark"] .balance-item .amount[b-blhe6wcy3f],
[data-theme="dark"] .modal-header h3[b-blhe6wcy3f],
[data-theme="dark"] .empty-state h3[b-blhe6wcy3f],
[data-theme="dark"] .unauthorized-content h3[b-blhe6wcy3f] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .search-box input[b-blhe6wcy3f],
[data-theme="dark"] .filter-select[b-blhe6wcy3f],
[data-theme="dark"] .range-inputs input[b-blhe6wcy3f],
[data-theme="dark"] .form-control[b-blhe6wcy3f] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-blhe6wcy3f],
    [data-theme="dark"] .filter-select:focus[b-blhe6wcy3f],
    [data-theme="dark"] .range-inputs input:focus[b-blhe6wcy3f],
    [data-theme="dark"] .form-control:focus[b-blhe6wcy3f] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #5a6cb3;
    }

[data-theme="dark"] .search-box i[b-blhe6wcy3f] {
    color: #a78bfa;
}

[data-theme="dark"] .btn-close[b-blhe6wcy3f] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-blhe6wcy3f] {
        color: #e2e8f0;
        background: rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .view-btn[b-blhe6wcy3f] {
    color: #a78bfa;
}

    [data-theme="dark"] .view-btn:hover[b-blhe6wcy3f] {
        color: #c084fc;
        background: rgba(167, 139, 250, 0.1);
    }

    [data-theme="dark"] .view-btn.active[b-blhe6wcy3f] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .timeline-item:not(:last-child)[b-blhe6wcy3f]::before {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.3) 0%, transparent 100%);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-stats[b-blhe6wcy3f] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-row[b-blhe6wcy3f] {
        grid-template-columns: 1fr;
    }

    .range-inputs[b-blhe6wcy3f] {
        grid-column: 1;
    }

    .btn-filter-reset[b-blhe6wcy3f] {
        grid-column: 1;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .wallets-container[b-blhe6wcy3f] {
        padding: 16px;
    }

    .page-header[b-blhe6wcy3f] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .header-actions[b-blhe6wcy3f] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-stats[b-blhe6wcy3f] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .user-type-stats[b-blhe6wcy3f] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .wallets-container.grid-view[b-blhe6wcy3f] {
        grid-template-columns: 1fr;
    }

    .balance-grid[b-blhe6wcy3f] {
        grid-template-columns: 1fr;
    }

    .wallet-actions[b-blhe6wcy3f] {
        flex-wrap: wrap;
    }

        .wallet-actions .action-btn[b-blhe6wcy3f] {
            flex: 1 1 calc(50% - 4px);
            min-width: 0;
        }

            .wallet-actions .action-btn span[b-blhe6wcy3f] {
                display: none;
            }

            .wallet-actions .action-btn i[b-blhe6wcy3f] {
                margin: 0;
            }

    .pagination-wrapper[b-blhe6wcy3f] {
        flex-direction: column;
        gap: 16px;
    }

    .details-grid[b-blhe6wcy3f] {
        grid-template-columns: 1fr;
    }

    .modal-container[b-blhe6wcy3f] {
        width: 95%;
        margin: 10px;
    }

    .active-filters[b-blhe6wcy3f] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .stat-card[b-blhe6wcy3f] {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .stat-icon[b-blhe6wcy3f] {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .user-info[b-blhe6wcy3f] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .wallet-header[b-blhe6wcy3f] {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .wallet-status[b-blhe6wcy3f] {
        align-items: center;
    }

    .page-btn[b-blhe6wcy3f] {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .wallets-container[b-blhe6wcy3f] {
        background: white !important;
    }

    .header-actions[b-blhe6wcy3f],
    .advanced-filters[b-blhe6wcy3f],
    .view-options[b-blhe6wcy3f],
    .wallet-actions[b-blhe6wcy3f],
    .pagination-wrapper[b-blhe6wcy3f] {
        display: none !important;
    }

    .wallet-card[b-blhe6wcy3f] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-blhe6wcy3f] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentAddCustomers.razor.rz.scp.css */

/* Page Container */
.page-container[b-s4u3ncse6r] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .page-container[b-s4u3ncse6r]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .page-container > *[b-s4u3ncse6r] {
        position: relative;
        z-index: 1;
    }

/* Modern Page Header */
.page-header-modern[b-s4u3ncse6r] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-s4u3ncse6r] {
    flex: 1;
}

.breadcrumb-modern[b-s4u3ncse6r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-s4u3ncse6r] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-s4u3ncse6r] {
        color: #667eea;
    }

.breadcrumb-separator[b-s4u3ncse6r] {
    color: #d1d5db;
}

.breadcrumb-current[b-s4u3ncse6r] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title-modern[b-s4u3ncse6r] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-icon[b-s4u3ncse6r] {
    font-size: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-actions[b-s4u3ncse6r] {
    display: flex;
    gap: 12px;
}

/* Form Container */
.customer-form-modern[b-s4u3ncse6r] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Progress Steps */
.form-progress[b-s4u3ncse6r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    padding: 0 40px;
}

.progress-step[b-s4u3ncse6r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.step-number[b-s4u3ncse6r] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #6b7280;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.progress-step.active .step-number[b-s4u3ncse6r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.step-label[b-s4u3ncse6r] {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    transition: color 0.3s;
}

.progress-step.active .step-label[b-s4u3ncse6r] {
    color: #4c1d95;
    font-weight: 600;
}

.progress-line[b-s4u3ncse6r] {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 20px;
    position: relative;
    top: -16px;
}

    .progress-line.active[b-s4u3ncse6r] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

/* Form Step Content */
.form-step-content[b-s4u3ncse6r] {
    display: none;
    animation: fadeIn-b-s4u3ncse6r 0.4s ease;
}

    .form-step-content.active[b-s4u3ncse6r] {
        display: block;
    }

.step-header[b-s4u3ncse6r] {
    text-align: center;
    margin-bottom: 32px;
}

    .step-header h3[b-s4u3ncse6r] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 8px;
    }

    .step-header p[b-s4u3ncse6r] {
        color: #6b7280;
        font-size: 16px;
    }

/* Form Grid Layout */
.form-grid[b-s4u3ncse6r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

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

    .form-group.full-width[b-s4u3ncse6r] {
        grid-column: 1 / -1;
    }

/* Form Controls */
.form-label[b-s4u3ncse6r] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
}

.required[b-s4u3ncse6r] {
    color: #ef4444;
    margin-left: 4px;
}

.input-group-modern[b-s4u3ncse6r] {
    position: relative;
}

.input-icon[b-s4u3ncse6r] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9333ea;
    font-size: 16px;
    z-index: 1;
}

.textarea-icon[b-s4u3ncse6r] {
    top: 16px;
    transform: none;
}

.form-control[b-s4u3ncse6r] {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s;
    color: #1f2937;
}

    .form-control:hover[b-s4u3ncse6r] {
        background: rgba(102, 126, 234, 0.1);
    }

    .form-control:focus[b-s4u3ncse6r] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

textarea.form-control[b-s4u3ncse6r] {
    min-height: 120px;
    resize: vertical;
}

.form-hint[b-s4u3ncse6r] {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280;
}

.validation-message[b-s4u3ncse6r] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* File Upload */
.file-upload-modern[b-s4u3ncse6r] {
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s;
    background: rgba(102, 126, 234, 0.05);
}

    .file-upload-modern:hover[b-s4u3ncse6r] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

.file-label[b-s4u3ncse6r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: #4c1d95;
}

    .file-label i[b-s4u3ncse6r] {
        font-size: 32px;
        color: #667eea;
    }

.file-input[b-s4u3ncse6r] {
    display: none;
}

.uploaded-preview[b-s4u3ncse6r] {
    margin-top: 16px;
    position: relative;
    display: inline-block;
}

    .uploaded-preview img[b-s4u3ncse6r] {
        max-width: 200px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.remove-btn[b-s4u3ncse6r] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .remove-btn:hover[b-s4u3ncse6r] {
        background: #dc2626;
        transform: scale(1.1);
    }

/* Form Actions */
.form-actions[b-s4u3ncse6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    margin-top: 32px;
}

.action-left[b-s4u3ncse6r],
.action-right[b-s4u3ncse6r] {
    display: flex;
    gap: 12px;
}

/* Loading State */
.loading-modern[b-s4u3ncse6r] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner-container[b-s4u3ncse6r] {
    text-align: center;
}

.spinner-modern[b-s4u3ncse6r] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-s4u3ncse6r 1s linear infinite;
    margin: 0 auto 16px;
}

.loading-text-modern[b-s4u3ncse6r] {
    color: #4c1d95;
    font-size: 18px;
    font-weight: 500;
}

/* Action Buttons */
.btn-action-primary[b-s4u3ncse6r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-action-primary:hover[b-s4u3ncse6r] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-action-secondary[b-s4u3ncse6r] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-action-secondary:hover[b-s4u3ncse6r] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-action-outline[b-s4u3ncse6r] {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-action-outline:hover[b-s4u3ncse6r] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
        transform: translateY(-2px);
    }

.btn-action-success[b-s4u3ncse6r] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-action-success:hover[b-s4u3ncse6r] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Unauthorized State */
.unauthorized-container[b-s4u3ncse6r] {
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-container i[b-s4u3ncse6r] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-s4u3ncse6r] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 16px;
    }

    .unauthorized-container p[b-s4u3ncse6r] {
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Dark Theme Support */
[data-theme="dark"] .page-container[b-s4u3ncse6r] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .page-header-modern[b-s4u3ncse6r],
[data-theme="dark"] .customer-form-modern[b-s4u3ncse6r] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-link[b-s4u3ncse6r] {
    color: #94a3b8;
}

[data-theme="dark"] .form-control[b-s4u3ncse6r] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-s4u3ncse6r] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .form-label[b-s4u3ncse6r] {
    color: #e2e8f0;
}

[data-theme="dark"] .step-header h3[b-s4u3ncse6r] {
    color: #e2e8f0;
}

[data-theme="dark"] .step-header p[b-s4u3ncse6r] {
    color: #94a3b8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-container[b-s4u3ncse6r] {
        padding: 16px;
    }

    .page-header-modern[b-s4u3ncse6r] {
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-s4u3ncse6r] {
        width: 100%;
        justify-content: stretch;
    }

        .header-actions button[b-s4u3ncse6r] {
            flex: 1;
        }

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

    .form-progress[b-s4u3ncse6r] {
        padding: 0;
    }

    .step-label[b-s4u3ncse6r] {
        display: none;
    }

    .form-actions[b-s4u3ncse6r] {
        flex-direction: column;
        gap: 16px;
    }

    .action-left[b-s4u3ncse6r],
    .action-right[b-s4u3ncse6r] {
        width: 100%;
    }

        .action-left button[b-s4u3ncse6r],
        .action-right button[b-s4u3ncse6r] {
            width: 100%;
        }
}

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

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

@keyframes spin-b-s4u3ncse6r {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentCollections.razor.rz.scp.css */

/* Agent Collections Page - Modern Professional Design */

/* Page Container */
.agent-collections-page[b-srfpruspp6] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-collections-page[b-srfpruspp6]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-collections-page > *[b-srfpruspp6] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-srfpruspp6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-srfpruspp6] {
    flex: 1;
}

.header-actions[b-srfpruspp6] {
    display: flex;
    gap: 12px;
}

/* Modern Breadcrumb */
.breadcrumb-modern[b-srfpruspp6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-link[b-srfpruspp6] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-srfpruspp6] {
        color: #667eea;
    }

.breadcrumb-separator[b-srfpruspp6] {
    color: #d1d5db;
}

.breadcrumb-current[b-srfpruspp6] {
    color: #4c1d95;
    font-weight: 600;
}

/* Page Title */
.page-title-modern[b-srfpruspp6] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.title-icon[b-srfpruspp6] {
    font-size: 28px;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
}

.page-subtitle[b-srfpruspp6] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Refresh Button */
.btn-refresh[b-srfpruspp6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    color: #667eea;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .btn-refresh:hover:not(:disabled)[b-srfpruspp6] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        transform: translateY(-2px);
    }

    .btn-refresh:disabled[b-srfpruspp6] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Statistics Section */
.statistics-section[b-srfpruspp6] {
    margin-bottom: 32px;
}

.stats-grid[b-srfpruspp6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stat-card[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-srfpruspp6]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-srfpruspp6] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-srfpruspp6]::before {
            opacity: 1;
        }

.stat-card-primary .stat-icon[b-srfpruspp6] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

.stat-card-warning .stat-icon[b-srfpruspp6] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.stat-card-success .stat-icon[b-srfpruspp6] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.stat-card-info .stat-icon[b-srfpruspp6] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.stat-icon[b-srfpruspp6] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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

.stat-value[b-srfpruspp6] {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 4px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-srfpruspp6] {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 8px 0;
    font-weight: 500;
}

.stat-trend[b-srfpruspp6] {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .stat-trend i[b-srfpruspp6] {
        font-size: 12px;
    }

.text-success[b-srfpruspp6] {
    color: #10b981 !important;
}

.text-danger[b-srfpruspp6] {
    color: #ef4444 !important;
}

.text-primary[b-srfpruspp6] {
    color: #667eea !important;
}

/* Filter Section */
.filter-section[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.filter-row[b-srfpruspp6] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.search-box[b-srfpruspp6] {
    flex: 1;
    min-width: 250px;
    position: relative;
}

    .search-box i[b-srfpruspp6] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
        font-size: 16px;
    }

    .search-box input[b-srfpruspp6] {
        width: 100%;
        padding: 12px 16px 12px 42px;
        border-radius: 12px;
        border: 1px solid rgba(102, 126, 234, 0.2);
        background: rgba(255, 255, 255, 0.7);
        font-size: 15px;
        transition: all 0.3s;
    }

        .search-box input:focus[b-srfpruspp6] {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            background: white;
        }

        .search-box input[b-srfpruspp6]::placeholder {
            color: #9ca3af;
        }

.filter-group[b-srfpruspp6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-select[b-srfpruspp6] {
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    background: rgba(255, 255, 255, 0.7);
    color: #4b5563;
    font-size: 15px;
    min-width: 180px;
    cursor: pointer;
    transition: all 0.3s;
}

    .filter-select:focus[b-srfpruspp6] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        background: white;
    }

.btn-filter[b-srfpruspp6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-filter:hover[b-srfpruspp6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-filter i[b-srfpruspp6] {
        font-size: 16px;
    }

/* Loading Container */
.loading-container[b-srfpruspp6] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.spinner-container[b-srfpruspp6] {
    text-align: center;
}

.spinner[b-srfpruspp6] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.1);
    border-left-color: #667eea;
    border-radius: 50%;
    animation: spin-b-srfpruspp6 1s linear infinite;
    margin: 0 auto 20px;
}

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

/* Empty State */
.empty-state[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.empty-icon[b-srfpruspp6] {
    font-size: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    display: block;
}

.empty-state h3[b-srfpruspp6] {
    font-size: 24px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 12px;
}

.empty-state p[b-srfpruspp6] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* Installments Container */
.installments-container[b-srfpruspp6] {
    margin-bottom: 32px;
}

.date-group[b-srfpruspp6] {
    margin-bottom: 32px;
}

.date-header[b-srfpruspp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .date-header h3[b-srfpruspp6] {
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .date-header h3[b-srfpruspp6]::before {
            content: '';
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: inline-block;
        }

.group-count[b-srfpruspp6] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    padding: 6px 12px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
}

.installments-list[b-srfpruspp6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}

/* Installment Card */
.installment-card[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .installment-card:hover[b-srfpruspp6] {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }

    .installment-card.due-today[b-srfpruspp6] {
        border-top: 4px solid #f59e0b;
    }

    .installment-card.overdue[b-srfpruspp6] {
        border-top: 4px solid #ef4444;
    }

    .installment-card.partial[b-srfpruspp6] {
        border-top: 4px solid #3b82f6;
    }

    .installment-card.paid[b-srfpruspp6] {
        border-top: 4px solid #10b981;
    }

.card-header[b-srfpruspp6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.customer-info[b-srfpruspp6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-avatar[b-srfpruspp6] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #667eea;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.customer-details[b-srfpruspp6] {
    display: flex;
    flex-direction: column;
}

    .customer-details h4[b-srfpruspp6] {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

.customer-phone[b-srfpruspp6] {
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .customer-phone i[b-srfpruspp6] {
        color: #667eea;
    }

.installment-status[b-srfpruspp6] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.status-badge[b-srfpruspp6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-info[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-warning[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-danger[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.overdue-days[b-srfpruspp6] {
    font-size: 12px;
    color: #ef4444;
    font-weight: 600;
}

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

.installment-info[b-srfpruspp6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.info-item[b-srfpruspp6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-srfpruspp6] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.info-value[b-srfpruspp6] {
    font-size: 15px;
    color: #1f2937;
    font-weight: 600;
}

.amount-info[b-srfpruspp6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    padding: 12px;
}

.amount-item[b-srfpruspp6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.amount-label[b-srfpruspp6] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.amount-value[b-srfpruspp6] {
    font-size: 16px;
    color: #1f2937;
    font-weight: 700;
}

.notes-section[b-srfpruspp6] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(245, 158, 11, 0.1);
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    color: #92400e;
    border-left: 3px solid #f59e0b;
}

    .notes-section i[b-srfpruspp6] {
        color: #f59e0b;
        font-size: 16px;
        margin-top: 2px;
    }

.card-actions[b-srfpruspp6] {
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
}

.btn-action[b-srfpruspp6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-grow: 1;
    justify-content: center;
    border: none;
}

    .btn-action i[b-srfpruspp6] {
        font-size: 14px;
    }

.btn-primary[b-srfpruspp6] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-srfpruspp6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

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

.btn-secondary[b-srfpruspp6] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-secondary:hover[b-srfpruspp6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-info[b-srfpruspp6] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

    .btn-info:hover[b-srfpruspp6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
    }

.btn-warning[b-srfpruspp6] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

    .btn-warning:hover[b-srfpruspp6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(245, 158, 11, 0.3);
    }

/* Pagination */
.pagination-container[b-srfpruspp6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
    margin-top: 16px;
}

.page-btn[b-srfpruspp6] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}

    .page-btn:hover:not(:disabled)[b-srfpruspp6] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-srfpruspp6] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Payment Modal */
.modal-overlay[b-srfpruspp6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: zoomIn-b-srfpruspp6 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

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

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

.modal-header[b-srfpruspp6] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-srfpruspp6] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4c1d95;
    }

        .modal-header h3 i[b-srfpruspp6] {
            color: #667eea;
        }

.close-btn[b-srfpruspp6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

    .close-btn:hover[b-srfpruspp6] {
        background: rgba(102, 126, 234, 0.2);
        transform: rotate(90deg);
    }

.modal-body[b-srfpruspp6] {
    padding: 24px;
}

.payment-info[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.info-row[b-srfpruspp6] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 15px;
}

    .info-row:last-child[b-srfpruspp6] {
        margin-bottom: 0;
    }

    .info-row span[b-srfpruspp6] {
        color: #6b7280;
    }

    .info-row strong[b-srfpruspp6] {
        color: #1f2937;
    }

.payment-form[b-srfpruspp6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-srfpruspp6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-group label[b-srfpruspp6] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.form-control[b-srfpruspp6] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    background: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    transition: all 0.3s;
}

    .form-control:focus[b-srfpruspp6] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        background: white;
    }

textarea.form-control[b-srfpruspp6] {
    resize: vertical;
    min-height: 80px;
}

.alert[b-srfpruspp6] {
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.alert-warning[b-srfpruspp6] {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border-left: 3px solid #f59e0b;
}

    .alert-warning i[b-srfpruspp6] {
        color: #f59e0b;
    }

.modal-footer[b-srfpruspp6] {
    padding: 20px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn[b-srfpruspp6] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    min-width: 140px;
}

.btn-secondary[b-srfpruspp6] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-srfpruspp6] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
    }

.spinner-border[b-srfpruspp6] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-srfpruspp6 0.8s linear infinite;
}

.spinner-border-sm[b-srfpruspp6] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Unauthorized Container */
.unauthorized-container[b-srfpruspp6] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.unauthorized-content[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .unauthorized-content i[b-srfpruspp6] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-srfpruspp6] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-srfpruspp6] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Dark Theme Support */
[data-theme="dark"] .agent-collections-page[b-srfpruspp6] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-collections-page[b-srfpruspp6]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-srfpruspp6],
[data-theme="dark"] .filter-section[b-srfpruspp6],
[data-theme="dark"] .stat-card[b-srfpruspp6],
[data-theme="dark"] .installment-card[b-srfpruspp6],
[data-theme="dark"] .loading-container[b-srfpruspp6],
[data-theme="dark"] .empty-state[b-srfpruspp6],
[data-theme="dark"] .modal-content[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-link[b-srfpruspp6] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-srfpruspp6] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-srfpruspp6] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-srfpruspp6] {
    color: #9ca3af;
}

[data-theme="dark"] .stat-label[b-srfpruspp6] {
    color: #9ca3af;
}

[data-theme="dark"] .search-box input[b-srfpruspp6],
[data-theme="dark"] .filter-select[b-srfpruspp6],
[data-theme="dark"] .form-control[b-srfpruspp6] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-srfpruspp6],
    [data-theme="dark"] .filter-select:focus[b-srfpruspp6],
    [data-theme="dark"] .form-control:focus[b-srfpruspp6] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .customer-details h4[b-srfpruspp6] {
    color: #e2e8f0;
}

[data-theme="dark"] .info-value[b-srfpruspp6],
[data-theme="dark"] .amount-value[b-srfpruspp6] {
    color: #e2e8f0;
}

[data-theme="dark"] .card-header[b-srfpruspp6],
[data-theme="dark"] .modal-header[b-srfpruspp6],
[data-theme="dark"] .modal-footer[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.5) 0%, rgba(51, 65, 85, 0.5) 100%);
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .btn-refresh[b-srfpruspp6],
[data-theme="dark"] .close-btn[b-srfpruspp6] {
    background: rgba(71, 85, 105, 0.5);
    color: #a78bfa;
}

[data-theme="dark"] .page-title-modern[b-srfpruspp6] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .stat-value[b-srfpruspp6] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-icon[b-srfpruspp6] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-state h3[b-srfpruspp6],
[data-theme="dark"] .modal-header h3[b-srfpruspp6] {
    color: #e2e8f0;
}

[data-theme="dark"] .info-row strong[b-srfpruspp6] {
    color: #e2e8f0;
}

[data-theme="dark"] .info-row span[b-srfpruspp6],
[data-theme="dark"] .info-label[b-srfpruspp6],
[data-theme="dark"] .amount-label[b-srfpruspp6] {
    color: #9ca3af;
}

[data-theme="dark"] .unauthorized-content[b-srfpruspp6] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .unauthorized-content h3[b-srfpruspp6] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .unauthorized-content p[b-srfpruspp6] {
        color: #9ca3af;
    }

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

@media (max-width: 992px) {
    .installments-list[b-srfpruspp6] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .filter-row[b-srfpruspp6] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-srfpruspp6] {
        justify-content: space-between;
    }
}

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

    .stat-card[b-srfpruspp6] {
        padding: 16px;
    }

    .installments-list[b-srfpruspp6] {
        grid-template-columns: 1fr;
    }

    .page-header-enhanced[b-srfpruspp6] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .card-actions[b-srfpruspp6] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-action[b-srfpruspp6] {
        font-size: 13px;
        padding: 8px 12px;
    }

    .info-item[b-srfpruspp6], .amount-item[b-srfpruspp6] {
        text-align: center;
    }

    .modal-content[b-srfpruspp6] {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .agent-collections-page[b-srfpruspp6] {
        padding: 16px;
    }

    .page-title-modern[b-srfpruspp6] {
        font-size: 24px;
    }

    .page-header-enhanced[b-srfpruspp6],
    .filter-section[b-srfpruspp6],
    .stat-card[b-srfpruspp6],
    .installment-card[b-srfpruspp6],
    .loading-container[b-srfpruspp6],
    .empty-state[b-srfpruspp6] {
        padding: 16px;
        border-radius: 16px;
    }

    .stat-icon[b-srfpruspp6] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .stat-value[b-srfpruspp6] {
        font-size: 24px;
    }

    .modal-body[b-srfpruspp6],
    .modal-header[b-srfpruspp6],
    .modal-footer[b-srfpruspp6] {
        padding: 16px;
    }

    .btn[b-srfpruspp6] {
        width: 100%;
    }
}

/* Print Styles */
@media print {
    .agent-collections-page[b-srfpruspp6] {
        background: white !important;
        padding: 0;
    }

    .page-header-enhanced[b-srfpruspp6],
    .filter-section[b-srfpruspp6],
    .pagination-container[b-srfpruspp6],
    .btn-action[b-srfpruspp6],
    .btn-refresh[b-srfpruspp6],
    .btn-filter[b-srfpruspp6] {
        display: none !important;
    }

    .stat-card[b-srfpruspp6],
    .installment-card[b-srfpruspp6] {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
        break-inside: avoid;
    }

    .installments-list[b-srfpruspp6] {
        grid-template-columns: 1fr !important;
    }

    .date-group[b-srfpruspp6] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentCustomerRegister.razor.rz.scp.css */

/* ===================================
   Agent Customer Register - Modern Professional CSS
   تصميم احترافي حديث لصفحة تسجيل العملاء
   =================================== */

/* Page Container */
.register-customer-page[b-uesetyjwk5] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .register-customer-page[b-uesetyjwk5]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .register-customer-page > *[b-uesetyjwk5] {
        position: relative;
        z-index: 1;
    }

/* Page Title */
.page-title[b-uesetyjwk5] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-uesetyjwk5] {
        font-size: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Mode Toggle */
.mode-toggle[b-uesetyjwk5] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    width: fit-content;
    margin: 0 auto 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.mode-btn[b-uesetyjwk5] {
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .mode-btn:hover[b-uesetyjwk5] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .mode-btn.active[b-uesetyjwk5] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .mode-btn i[b-uesetyjwk5] {
        font-size: 16px;
    }

/* Loading Container */
.loading-container[b-uesetyjwk5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 24px;
}

    .loading-container p[b-uesetyjwk5] {
        font-size: 18px;
        color: #6b7280;
        font-weight: 500;
    }

/* Spinner Modern */
.spinner-modern[b-uesetyjwk5] {
    width: 60px;
    height: 60px;
    position: relative;
}

    .spinner-modern[b-uesetyjwk5]::before,
    .spinner-modern[b-uesetyjwk5]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid transparent;
        border-top-color: #667eea;
        animation: spin-b-uesetyjwk5 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }

    .spinner-modern[b-uesetyjwk5]::after {
        animation-delay: -0.45s;
        border-top-color: #764ba2;
    }

/* Form Section Card */
.form-section[b-uesetyjwk5] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .form-section:hover[b-uesetyjwk5] {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

/* Card Header */
.card-header[b-uesetyjwk5] {
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .card-header h3[b-uesetyjwk5] {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .card-header h3 i[b-uesetyjwk5] {
            color: #667eea;
            font-size: 20px;
        }

/* Card Body */
.card-body[b-uesetyjwk5] {
    padding: 32px 28px;
}

/* Form Groups */
.form-group[b-uesetyjwk5] {
    margin-bottom: 24px;
}

    .form-group label[b-uesetyjwk5] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
        letter-spacing: 0.025em;
    }

.form-row[b-uesetyjwk5] {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

    .form-row .form-group[b-uesetyjwk5] {
        flex: 1;
        margin-bottom: 0;
    }

/* Form Controls */
.form-control[b-uesetyjwk5] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    color: #1e293b;
}

    .form-control:hover[b-uesetyjwk5] {
        border-color: rgba(102, 126, 234, 0.2);
        background: rgba(102, 126, 234, 0.08);
    }

    .form-control:focus[b-uesetyjwk5] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control:disabled[b-uesetyjwk5],
    .form-control[readonly][b-uesetyjwk5] {
        background: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.7;
    }

select.form-control[b-uesetyjwk5] {
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23667eea'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    appearance: none;
}

/* Input Group */
.input-group[b-uesetyjwk5] {
    display: flex;
    align-items: stretch;
    position: relative;
}

    .input-group .form-control[b-uesetyjwk5] {
        border-radius: 12px 0 0 12px;
        border-right: none;
    }

    .input-group .btn[b-uesetyjwk5] {
        border-radius: 0 12px 12px 0;
        padding: 0 20px;
        border: 2px solid transparent;
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .input-group .btn:hover[b-uesetyjwk5] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

/* Buttons */
.btn[b-uesetyjwk5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

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

    .btn:hover[b-uesetyjwk5]::before {
        width: 100px;
        height: 100px;
    }

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

.btn-primary[b-uesetyjwk5] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-uesetyjwk5] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

.btn-secondary[b-uesetyjwk5] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover:not(:disabled)[b-uesetyjwk5] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-outline-secondary[b-uesetyjwk5] {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
}

    .btn-outline-secondary:hover:not(:disabled)[b-uesetyjwk5] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-2px);
    }

.btn-outline-success[b-uesetyjwk5] {
    background: transparent;
    border: 2px solid #10b981;
    color: #10b981;
}

    .btn-outline-success:hover:not(:disabled)[b-uesetyjwk5] {
        background: rgba(16, 185, 129, 0.1);
        border-color: #059669;
        transform: translateY(-2px);
    }

/* Form Check */
.form-check[b-uesetyjwk5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}

.form-check-input[b-uesetyjwk5] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
    border-radius: 4px;
}

.form-check-label[b-uesetyjwk5] {
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    color: #4b5563;
}

/* HR Separator */
hr[b-uesetyjwk5] {
    margin: 32px 0;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
}

/* Section Titles */
h5[b-uesetyjwk5] {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Textarea */
textarea.form-control[b-uesetyjwk5] {
    resize: vertical;
    min-height: 100px;
}

/* Form Actions */
.form-actions[b-uesetyjwk5] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

/* Spinner Border */
.spinner-border[b-uesetyjwk5] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right-color: white;
    border-radius: 50%;
    animation: spin-b-uesetyjwk5 0.8s linear infinite;
}

.spinner-border-sm[b-uesetyjwk5] {
    width: 14px;
    height: 14px;
}

/* Alert Messages */
.alert[b-uesetyjwk5] {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

    .alert[b-uesetyjwk5]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: currentColor;
    }

.alert-danger[b-uesetyjwk5] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Loading Cities Text */
.text-muted[b-uesetyjwk5] {
    color: #6b7280;
}

    .text-muted i[b-uesetyjwk5] {
        color: #9333ea;
    }

.small[b-uesetyjwk5] {
    font-size: 13px;
}

/* Unauthorized Container */
.unauthorized-container[b-uesetyjwk5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.unauthorized-content[b-uesetyjwk5] {
    text-align: center;
    padding: 48px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

    .unauthorized-content i[b-uesetyjwk5] {
        font-size: 72px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-uesetyjwk5] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 24px;
        font-weight: 700;
    }

/* Animations */
@keyframes spin-b-uesetyjwk5 {
    to {
        transform: rotate(360deg);
    }
}

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

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

/* Dark Theme Support */
[data-theme="dark"] .register-customer-page[b-uesetyjwk5] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .register-customer-page[b-uesetyjwk5]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .form-section[b-uesetyjwk5] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .card-header[b-uesetyjwk5] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

    [data-theme="dark"] .card-header h3[b-uesetyjwk5] {
        color: #e2e8f0;
    }

        [data-theme="dark"] .card-header h3 i[b-uesetyjwk5] {
            color: #a78bfa;
        }

[data-theme="dark"] .form-group label[b-uesetyjwk5] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-uesetyjwk5] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:hover[b-uesetyjwk5] {
        background: rgba(71, 85, 105, 0.4);
        border-color: rgba(167, 139, 250, 0.3);
    }

    [data-theme="dark"] .form-control:focus[b-uesetyjwk5] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] select.form-control[b-uesetyjwk5] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a78bfa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

[data-theme="dark"] .mode-toggle[b-uesetyjwk5] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.3);
}

[data-theme="dark"] .mode-btn[b-uesetyjwk5] {
    color: #a78bfa;
}

    [data-theme="dark"] .mode-btn:hover[b-uesetyjwk5] {
        color: #c084fc;
        background: rgba(167, 139, 250, 0.1);
    }

    [data-theme="dark"] .mode-btn.active[b-uesetyjwk5] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

[data-theme="dark"] .form-actions[b-uesetyjwk5] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] h5[b-uesetyjwk5] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-check-label[b-uesetyjwk5] {
    color: #9ca3af;
}

[data-theme="dark"] .text-muted[b-uesetyjwk5] {
    color: #9ca3af;
}

    [data-theme="dark"] .text-muted i[b-uesetyjwk5] {
        color: #a78bfa;
    }

[data-theme="dark"] .unauthorized-content[b-uesetyjwk5] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

    [data-theme="dark"] .unauthorized-content h3[b-uesetyjwk5] {
        color: #e2e8f0;
    }

[data-theme="dark"] .loading-container p[b-uesetyjwk5] {
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 768px) {
    .register-customer-page[b-uesetyjwk5] {
        padding: 16px;
    }

    .page-title[b-uesetyjwk5] {
        font-size: 28px;
        margin-bottom: 24px;
    }

        .page-title i[b-uesetyjwk5] {
            font-size: 26px;
        }

    .mode-toggle[b-uesetyjwk5] {
        width: 100%;
        margin-bottom: 24px;
    }

    .mode-btn[b-uesetyjwk5] {
        flex: 1;
        padding: 10px 16px;
        font-size: 14px;
    }

    .form-section[b-uesetyjwk5] {
        border-radius: 20px;
    }

    .card-header[b-uesetyjwk5] {
        padding: 20px;
    }

        .card-header h3[b-uesetyjwk5] {
            font-size: 18px;
        }

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

    .form-row[b-uesetyjwk5] {
        flex-direction: column;
        gap: 0;
    }

        .form-row .form-group[b-uesetyjwk5] {
            margin-bottom: 20px;
        }

    .form-actions[b-uesetyjwk5] {
        justify-content: stretch;
        flex-direction: column;
        padding: 16px;
        gap: 12px;
    }

        .form-actions .btn[b-uesetyjwk5] {
            width: 100%;
        }

    .input-group[b-uesetyjwk5] {
        flex-wrap: wrap;
    }

        .input-group .form-control[b-uesetyjwk5] {
            border-radius: 12px;
            border-right: 2px solid transparent;
            margin-bottom: 8px;
        }

        .input-group .btn[b-uesetyjwk5] {
            width: 100%;
            border-radius: 12px;
            margin-bottom: 0;
        }

    .unauthorized-content[b-uesetyjwk5] {
        padding: 32px 24px;
        margin: 16px;
    }

        .unauthorized-content i[b-uesetyjwk5] {
            font-size: 56px;
        }

        .unauthorized-content h3[b-uesetyjwk5] {
            font-size: 22px;
        }
}

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

    h5[b-uesetyjwk5] {
        font-size: 16px;
    }

    .form-control[b-uesetyjwk5] {
        font-size: 14px;
        padding: 10px 14px;
    }

    .btn[b-uesetyjwk5] {
        font-size: 14px;
        padding: 10px 20px;
    }
}

/* Print Styles */
@media print {
    .register-customer-page[b-uesetyjwk5] {
        background: white !important;
    }

    .mode-toggle[b-uesetyjwk5],
    .form-actions[b-uesetyjwk5],
    .btn-outline-secondary[b-uesetyjwk5] {
        display: none !important;
    }

    .form-section[b-uesetyjwk5] {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* RTL Support */
html[dir="rtl"] .form-control[b-uesetyjwk5] {
    text-align: right;
}

html[dir="rtl"] select.form-control[b-uesetyjwk5] {
    padding-right: 16px;
    padding-left: 40px;
    background-position: left 12px center;
}

html[dir="rtl"] .input-group .form-control[b-uesetyjwk5] {
    border-radius: 0 12px 12px 0;
    border-left: none;
    border-right: 2px solid transparent;
}

html[dir="rtl"] .input-group .btn[b-uesetyjwk5] {
    border-radius: 12px 0 0 12px;
}

html[dir="rtl"] .alert[b-uesetyjwk5]::before {
    left: auto;
    right: 0;
}

/* Focus States for Accessibility */
*:focus-visible[b-uesetyjwk5] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus-visible[b-uesetyjwk5],
.btn:focus-visible[b-uesetyjwk5] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn[b-uesetyjwk5] {
        border: 2px solid currentColor;
    }

    .form-control[b-uesetyjwk5] {
        border-width: 2px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-uesetyjwk5] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentCustomers.razor.rz.scp.css */
/* Agent Customers Page - Professional CSS Architecture */
/* Based on app.css framework and Users.razor.css design patterns */

/* Page Container & Layout */
.agent-customers[b-cwwy7u55le] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-customers[b-cwwy7u55le]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-customers > *[b-cwwy7u55le] {
        position: relative;
        z-index: 1;
    }

/* Page Header Section */
.page-header[b-cwwy7u55le] {
    margin-bottom: 32px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-cwwy7u55le] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.page-title[b-cwwy7u55le] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    .page-title i[b-cwwy7u55le] {
        font-size: 28px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.header-actions[b-cwwy7u55le] {
    display: flex;
    gap: 12px;
}

/* Search and Filter Section */
.filters-section[b-cwwy7u55le] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-box[b-cwwy7u55le] {
    position: relative;
    margin-bottom: 16px;
}

    .search-box i[b-cwwy7u55le] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 18px;
    }

    .search-box input[b-cwwy7u55le] {
        width: 100%;
        padding: 14px 16px 14px 48px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 16px;
    }

        .search-box input:focus[b-cwwy7u55le] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.filter-buttons[b-cwwy7u55le] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.filter-btn[b-cwwy7u55le] {
    padding: 10px 18px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    font-weight: 600;
    color: #4c1d95;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-size: 14px;
}

    .filter-btn:hover[b-cwwy7u55le] {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.3);
    }

    .filter-btn.active[b-cwwy7u55le] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

/* Statistics Cards */
.stats-cards[b-cwwy7u55le] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-cwwy7u55le] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-cwwy7u55le]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-cwwy7u55le] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-cwwy7u55le]::before {
            opacity: 1;
        }

.stat-icon[b-cwwy7u55le] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

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

    .stat-content h3[b-cwwy7u55le] {
        font-size: 16px;
        color: #4b5563;
        margin: 0 0 4px 0;
        font-weight: 600;
    }

.stat-value[b-cwwy7u55le] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Customers Grid */
.customers-grid[b-cwwy7u55le] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.customer-card[b-cwwy7u55le] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    position: relative;
}

    .customer-card:hover[b-cwwy7u55le] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

.customer-header[b-cwwy7u55le] {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
}

.customer-avatar[b-cwwy7u55le] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.customer-info[b-cwwy7u55le] {
    flex: 1;
}

    .customer-info h3[b-cwwy7u55le] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 4px 0;
        color: #1f2937;
    }

.customer-phone[b-cwwy7u55le] {
    color: #667eea;
    margin: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.customer-status[b-cwwy7u55le] {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .customer-status.active[b-cwwy7u55le] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .customer-status.inactive[b-cwwy7u55le] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.customer-details[b-cwwy7u55le] {
    padding: 16px 20px;
    flex: 1;
}

.detail-row[b-cwwy7u55le] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.detail-label[b-cwwy7u55le] {
    color: #6b7280;
}

.detail-value[b-cwwy7u55le] {
    color: #1f2937;
    font-weight: 500;
}

.collection-badge[b-cwwy7u55le] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9333ea;
    background: rgba(147, 51, 234, 0.1);
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 13px;
}

.customer-actions[b-cwwy7u55le] {
    padding: 16px 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    gap: 10px;
}

.btn-action[b-cwwy7u55le] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

    .btn-action:hover[b-cwwy7u55le] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

    .btn-action.primary[b-cwwy7u55le] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

        .btn-action.primary:hover[b-cwwy7u55le] {
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.4);
        }

/* No Data State */
.no-data[b-cwwy7u55le] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .no-data i[b-cwwy7u55le] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .no-data h3[b-cwwy7u55le] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .no-data p[b-cwwy7u55le] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Pagination */
.pagination[b-cwwy7u55le] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.page-btn[b-cwwy7u55le] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-cwwy7u55le] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-cwwy7u55le] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Loading State */
.loading-container[b-cwwy7u55le] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
}

    .loading-container p[b-cwwy7u55le] {
        margin-top: 16px;
        color: #4c1d95;
        font-weight: 600;
    }

.spinner-modern[b-cwwy7u55le] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spinner-b-cwwy7u55le 1s linear infinite;
}

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

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

.modal-content[b-cwwy7u55le] {
    width: 100%;
    max-width: 700px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modalZoomIn-b-cwwy7u55le 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-cwwy7u55le] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .modal-header h2[b-cwwy7u55le] {
        font-weight: 700;
        font-size: 22px;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.close-btn[b-cwwy7u55le] {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: #6b7280;
    font-size: 18px;
}

    .close-btn:hover[b-cwwy7u55le] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-cwwy7u55le] {
    padding: 24px;
    overflow-y: auto;
}

.modal-footer[b-cwwy7u55le] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Form Elements */
.form-group[b-cwwy7u55le] {
    margin-bottom: 20px;
}

    .form-group label[b-cwwy7u55le] {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.form-control[b-cwwy7u55le] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-cwwy7u55le] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.form-row[b-cwwy7u55le] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.col-md-6[b-cwwy7u55le] {
    flex: 1;
}

.col-md-4[b-cwwy7u55le] {
    flex: 1;
}

.section-title[b-cwwy7u55le] {
    font-size: 18px;
    font-weight: 600;
    color: #4c1d95;
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

/* Unauthorized Style */
.unauthorized-container[b-cwwy7u55le] {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.unauthorized-content[b-cwwy7u55le] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    text-align: center;
    padding: 40px;
    max-width: 500px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .unauthorized-content i[b-cwwy7u55le] {
        font-size: 80px;
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-cwwy7u55le] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-cwwy7u55le] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 32px;
    }

/* Common Button Styles */
.btn-primary[b-cwwy7u55le] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-primary:hover[b-cwwy7u55le] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-cwwy7u55le] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-secondary:hover[b-cwwy7u55le] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Spinner Small */
.spinner-small[b-cwwy7u55le] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spinner-b-cwwy7u55le 0.8s linear infinite;
}

/* Animations */
@keyframes modalZoomIn-b-cwwy7u55le {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

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

/* Dark Theme Support */
[data-theme="dark"] .agent-customers[b-cwwy7u55le] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-customers[b-cwwy7u55le]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-cwwy7u55le],
[data-theme="dark"] .filters-section[b-cwwy7u55le],
[data-theme="dark"] .stat-card[b-cwwy7u55le],
[data-theme="dark"] .customer-card[b-cwwy7u55le],
[data-theme="dark"] .no-data[b-cwwy7u55le],
[data-theme="dark"] .loading-container[b-cwwy7u55le],
[data-theme="dark"] .modal-content[b-cwwy7u55le] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .page-title[b-cwwy7u55le],
    [data-theme="dark"] .stat-value[b-cwwy7u55le],
    [data-theme="dark"] .no-data i[b-cwwy7u55le],
    [data-theme="dark"] .modal-header h2[b-cwwy7u55le] {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

[data-theme="dark"] .search-box input[b-cwwy7u55le],
[data-theme="dark"] .filter-btn[b-cwwy7u55le],
[data-theme="dark"] .form-control[b-cwwy7u55le] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-cwwy7u55le],
    [data-theme="dark"] .form-control:focus[b-cwwy7u55le] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .filter-btn[b-cwwy7u55le] {
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-btn.active[b-cwwy7u55le] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .customer-info h3[b-cwwy7u55le] {
    color: #e2e8f0;
}

[data-theme="dark"] .customer-phone[b-cwwy7u55le] {
    color: #a78bfa;
}

[data-theme="dark"] .detail-label[b-cwwy7u55le] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-value[b-cwwy7u55le] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-action[b-cwwy7u55le] {
    background: rgba(102, 126, 234, 0.15);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-action.primary[b-cwwy7u55le] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .loading-container p[b-cwwy7u55le],
[data-theme="dark"] .no-data h3[b-cwwy7u55le],
[data-theme="dark"] .section-title[b-cwwy7u55le],
[data-theme="dark"] .form-group label[b-cwwy7u55le] {
    color: #e2e8f0;
}

[data-theme="dark"] .no-data p[b-cwwy7u55le] {
    color: #9ca3af;
}

/* Media Queries for Responsive Design */
@media (max-width: 1200px) {
    .stats-cards[b-cwwy7u55le] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .agent-customers[b-cwwy7u55le] {
        padding: 16px;
    }

    .page-header[b-cwwy7u55le] {
        padding: 16px;
        margin-bottom: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-content[b-cwwy7u55le] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .page-title[b-cwwy7u55le] {
        font-size: 24px;
    }

    .header-actions[b-cwwy7u55le] {
        width: 100%;
    }

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

    .customers-grid[b-cwwy7u55le] {
        grid-template-columns: 1fr;
    }

    .customer-header[b-cwwy7u55le] {
        flex-wrap: wrap;
    }

    .form-row[b-cwwy7u55le] {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .filter-buttons[b-cwwy7u55le] {
        gap: 8px;
    }

    .filter-btn[b-cwwy7u55le] {
        padding: 8px 12px;
        font-size: 13px;
    }

    .customer-actions[b-cwwy7u55le] {
        flex-direction: column;
    }

    .modal-content[b-cwwy7u55le] {
        max-height: 95vh;
    }

    .modal-body[b-cwwy7u55le] {
        padding: 16px;
    }
}

/* Print Styles */
@media print {
    .agent-customers[b-cwwy7u55le] {
        background: white !important;
    }

    .page-header[b-cwwy7u55le], .filters-section[b-cwwy7u55le], .pagination[b-cwwy7u55le],
    .customer-actions[b-cwwy7u55le], .modal-overlay[b-cwwy7u55le] {
        display: none !important;
    }

    .stats-cards[b-cwwy7u55le], .customers-grid[b-cwwy7u55le] {
        gap: 10px;
    }

    .stat-card[b-cwwy7u55le], .customer-card[b-cwwy7u55le] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }
}

/* Focus Accessibility */
*:focus-visible[b-cwwy7u55le] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-cwwy7u55le] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.large-modal .modal-content[b-cwwy7u55le] {
    max-width: 800px;
    width: 90%;
}

.section-title[b-cwwy7u55le] {
    color: #2c3e50;
    margin: 20px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #3498db;
    font-size: 16px;
    font-weight: 600;
}

.form-row[b-cwwy7u55le] {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

    .form-row .form-group[b-cwwy7u55le] {
        flex: 1;
        margin-bottom: 0;
    }

.col-md-4[b-cwwy7u55le] {
    flex: 0 0 33.333333%;
}

.col-md-6[b-cwwy7u55le] {
    flex: 0 0 50%;
}

.col-md-8[b-cwwy7u55le] {
    flex: 0 0 66.666667%;
}

.btn-generate-email[b-cwwy7u55le] {
    width: 100%;
    height: 38px;
    font-size: 13px;
    white-space: nowrap;
}

.optional-fields[b-cwwy7u55le], .work-fields[b-cwwy7u55le] {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    margin-top: 10px;
    animation: slideDown-b-cwwy7u55le 0.3s ease-in-out;
}

.work-fields[b-cwwy7u55le] {
    background-color: #fff9e6;
    border-color: #ffc107;
}

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

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

.form-check[b-cwwy7u55le] {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

    .form-check:hover[b-cwwy7u55le] {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

.form-check-input[b-cwwy7u55le] {
    margin-left: 8px;
    transform: scale(1.1);
}

.form-check-label[b-cwwy7u55le] {
    color: #495057;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .form-check-label i[b-cwwy7u55le] {
        color: #6c757d;
        font-size: 16px;
    }

.detail-row[b-cwwy7u55le] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-label[b-cwwy7u55le] {
    font-weight: 600;
    color: #6c757d;
    font-size: 13px;
}

.detail-value[b-cwwy7u55le] {
    color: #495057;
    font-size: 13px;
    text-align: left;
}
/* _content/Sahelly/Components/Pages/Agent/AgentDashboard.razor.rz.scp.css */

/* Agent Dashboard - Modern Professional Style */
.agent-dashboard[b-2l5bgeajtk] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-dashboard[b-2l5bgeajtk]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-dashboard > *[b-2l5bgeajtk] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Dashboard Header */
.dashboard-header-enhanced[b-2l5bgeajtk] {
    margin-bottom: 32px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .dashboard-header-enhanced:hover[b-2l5bgeajtk] {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        transform: translateY(-3px);
    }

.header-content[b-2l5bgeajtk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.welcome-section[b-2l5bgeajtk] {
    flex: 1;
}

.dashboard-title[b-2l5bgeajtk] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .dashboard-title i[b-2l5bgeajtk] {
        font-size: 32px;
    }

.dashboard-subtitle[b-2l5bgeajtk] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-2l5bgeajtk] {
    display: flex;
    gap: 12px;
}

.btn-action-modern[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-modern:hover[b-2l5bgeajtk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .btn-action-modern:disabled[b-2l5bgeajtk] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .btn-action-modern i[b-2l5bgeajtk] {
        font-size: 16px;
    }

/* Loading Container */
.loading-container[b-2l5bgeajtk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    gap: 24px;
}

.spinner-modern[b-2l5bgeajtk] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-2l5bgeajtk 0.8s linear infinite;
}

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

.loading-container p[b-2l5bgeajtk] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Metrics Section */
.metrics-section[b-2l5bgeajtk] {
    margin-bottom: 32px;
}

.metrics-grid[b-2l5bgeajtk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-card[b-2l5bgeajtk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .metric-card[b-2l5bgeajtk]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .metric-card:hover[b-2l5bgeajtk] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .metric-card:hover[b-2l5bgeajtk]::before {
            opacity: 1;
        }

.card-icon[b-2l5bgeajtk] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.sales-card .card-icon[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.revenue-card .card-icon[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.deliveries-card .card-icon[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.collections-card .card-icon[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.card-content[b-2l5bgeajtk] {
    flex: 1;
}

    .card-content h3[b-2l5bgeajtk] {
        font-size: 15px;
        color: #6b7280;
        margin: 0 0 8px 0;
        font-weight: 500;
    }

.metric-value[b-2l5bgeajtk] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

    .metric-value .currency[b-2l5bgeajtk] {
        font-size: 16px;
        font-weight: 600;
        -webkit-text-fill-color: #6b7280;
    }

.metric-trend[b-2l5bgeajtk] {
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    margin-top: 8px;
}

    .metric-trend.positive[b-2l5bgeajtk] {
        background-color: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .metric-trend.negative[b-2l5bgeajtk] {
        background-color: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.metric-progress[b-2l5bgeajtk] {
    margin-top: 10px;
}

.progress-bar[b-2l5bgeajtk] {
    height: 8px;
    background-color: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill[b-2l5bgeajtk] {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    transition: width 1s ease;
}

.progress-text[b-2l5bgeajtk] {
    font-size: 13px;
    color: #6b7280;
}

.metric-detail[b-2l5bgeajtk] {
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .metric-detail .highlight[b-2l5bgeajtk] {
        color: #667eea;
        font-weight: 600;
    }

/* Wallet Section */
.wallet-section[b-2l5bgeajtk] {
    margin-bottom: 32px;
}

.section-header[b-2l5bgeajtk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .section-header h2[b-2l5bgeajtk] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .section-header h2 i[b-2l5bgeajtk] {
            font-size: 22px;
            color: #667eea;
        }

.wallet-grid[b-2l5bgeajtk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.wallet-card[b-2l5bgeajtk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

    .wallet-card:hover[b-2l5bgeajtk] {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

.wallet-icon[b-2l5bgeajtk] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
}

.wallet-card.balance .wallet-icon[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.wallet-card.commission .wallet-icon[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.wallet-card.earned .wallet-icon[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.wallet-info[b-2l5bgeajtk] {
    flex: 1;
}

    .wallet-info h4[b-2l5bgeajtk] {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 8px 0;
        font-weight: 500;
    }

    .wallet-info .amount[b-2l5bgeajtk] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
    }

/* Charts Section */
.charts-section[b-2l5bgeajtk] {
    margin-bottom: 32px;
}

.chart-container[b-2l5bgeajtk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.chart-header[b-2l5bgeajtk] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .chart-header h3[b-2l5bgeajtk] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #4c1d95;
    }

        .chart-header h3 i[b-2l5bgeajtk] {
            color: #667eea;
        }

.chart-controls[b-2l5bgeajtk] {
    display: flex;
    gap: 8px;
}

.btn-chart-control[b-2l5bgeajtk] {
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
}

    .btn-chart-control:hover[b-2l5bgeajtk] {
        background: rgba(102, 126, 234, 0.2);
    }

    .btn-chart-control.active[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

.chart-body[b-2l5bgeajtk] {
    padding: 20px;
    height: 300px;
}

/* Quick Actions Section */
.quick-actions-section[b-2l5bgeajtk] {
    margin-bottom: 32px;
}

.actions-grid[b-2l5bgeajtk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.action-card[b-2l5bgeajtk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    position: relative;
}

    .action-card:hover[b-2l5bgeajtk] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

.action-icon[b-2l5bgeajtk] {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    margin-bottom: 5px;
}

    .action-icon.orders[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .action-icon.collections[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .action-icon.inventory[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .action-icon.customers[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

.action-card span[b-2l5bgeajtk] {
    font-weight: 600;
    color: #4c1d95;
    font-size: 15px;
}

.action-card .badge[b-2l5bgeajtk] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    min-width: 24px;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

    .action-card .badge.danger[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    }

.action-card .count[b-2l5bgeajtk] {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* Activities Section */
.activities-section[b-2l5bgeajtk] {
    margin-bottom: 32px;
}

.view-all[b-2l5bgeajtk] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}

    .view-all:hover[b-2l5bgeajtk] {
        color: #764ba2;
        transform: translateX(-5px);
    }

.activities-timeline[b-2l5bgeajtk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.activity-item[b-2l5bgeajtk] {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.2s ease;
}

    .activity-item:last-child[b-2l5bgeajtk] {
        border-bottom: none;
    }

    .activity-item:hover[b-2l5bgeajtk] {
        transform: translateX(5px);
    }

.activity-icon[b-2l5bgeajtk] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

    .activity-icon.sale[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .activity-icon.delivery[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .activity-icon.collection[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .activity-icon.return[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .activity-icon.info[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

.activity-content[b-2l5bgeajtk] {
    flex: 1;
}

    .activity-content h4[b-2l5bgeajtk] {
        font-size: 15px;
        font-weight: 600;
        color: #4c1d95;
        margin: 0 0 5px 0;
    }

    .activity-content p[b-2l5bgeajtk] {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 8px 0;
    }

.activity-time[b-2l5bgeajtk] {
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 5px;
}

.no-activities[b-2l5bgeajtk] {
    text-align: center;
    padding: 30px 0;
    color: #6b7280;
}

    .no-activities i[b-2l5bgeajtk] {
        font-size: 40px;
        margin-bottom: 10px;
        color: #d1d5db;
    }

    .no-activities p[b-2l5bgeajtk] {
        font-size: 16px;
    }

/* Unauthorized Container */
.unauthorized-container[b-2l5bgeajtk] {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.unauthorized-content[b-2l5bgeajtk] {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

    .unauthorized-content i[b-2l5bgeajtk] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-2l5bgeajtk] {
        font-size: 24px;
        color: #1f2937;
        margin-bottom: 10px;
    }

    .unauthorized-content p[b-2l5bgeajtk] {
        margin-bottom: 24px;
        color: #6b7280;
    }

    .unauthorized-content .btn[b-2l5bgeajtk] {
        padding: 12px 30px;
    }

/* Dark Theme Support */
[data-theme="dark"] .agent-dashboard[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-dashboard[b-2l5bgeajtk]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .dashboard-header-enhanced[b-2l5bgeajtk],
[data-theme="dark"] .metric-card[b-2l5bgeajtk],
[data-theme="dark"] .wallet-card[b-2l5bgeajtk],
[data-theme="dark"] .chart-container[b-2l5bgeajtk],
[data-theme="dark"] .action-card[b-2l5bgeajtk],
[data-theme="dark"] .activities-timeline[b-2l5bgeajtk] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .dashboard-subtitle[b-2l5bgeajtk],
    [data-theme="dark"] .card-content h3[b-2l5bgeajtk],
    [data-theme="dark"] .progress-text[b-2l5bgeajtk],
    [data-theme="dark"] .metric-detail[b-2l5bgeajtk],
    [data-theme="dark"] .wallet-info h4[b-2l5bgeajtk],
    [data-theme="dark"] .activity-content p[b-2l5bgeajtk],
    [data-theme="dark"] .action-card .count[b-2l5bgeajtk] {
        color: #94a3b8;
    }

[data-theme="dark"] .dashboard-title[b-2l5bgeajtk],
[data-theme="dark"] .metric-value[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .section-header h2[b-2l5bgeajtk],
[data-theme="dark"] .chart-header h3[b-2l5bgeajtk],
[data-theme="dark"] .action-card span[b-2l5bgeajtk],
[data-theme="dark"] .activity-content h4[b-2l5bgeajtk],
[data-theme="dark"] .wallet-info .amount[b-2l5bgeajtk] {
    color: #e2e8f0;
}

    [data-theme="dark"] .section-header h2 i[b-2l5bgeajtk],
    [data-theme="dark"] .chart-header h3 i[b-2l5bgeajtk] {
        color: #a78bfa;
    }

[data-theme="dark"] .btn-chart-control[b-2l5bgeajtk] {
    background: rgba(167, 139, 250, 0.1);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-chart-control:hover[b-2l5bgeajtk] {
        background: rgba(167, 139, 250, 0.2);
    }

    [data-theme="dark"] .btn-chart-control.active[b-2l5bgeajtk] {
        background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
        color: #0f172a;
    }

[data-theme="dark"] .view-all[b-2l5bgeajtk] {
    color: #a78bfa;
}

    [data-theme="dark"] .view-all:hover[b-2l5bgeajtk] {
        color: #c084fc;
    }

[data-theme="dark"] .activity-time[b-2l5bgeajtk] {
    color: #64748b;
}

[data-theme="dark"] .chart-header[b-2l5bgeajtk],
[data-theme="dark"] .activity-item[b-2l5bgeajtk] {
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .unauthorized-container[b-2l5bgeajtk] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .unauthorized-content[b-2l5bgeajtk] {
    background: rgba(30, 41, 59, 0.9);
}

    [data-theme="dark"] .unauthorized-content h3[b-2l5bgeajtk] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .unauthorized-content p[b-2l5bgeajtk] {
        color: #94a3b8;
    }

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

@media (max-width: 768px) {
    .agent-dashboard[b-2l5bgeajtk] {
        padding: 16px;
    }

    .dashboard-header-enhanced[b-2l5bgeajtk] {
        padding: 20px;
    }

    .header-content[b-2l5bgeajtk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-title[b-2l5bgeajtk] {
        font-size: 28px;
    }

    .metrics-grid[b-2l5bgeajtk],
    .wallet-grid[b-2l5bgeajtk] {
        grid-template-columns: 1fr;
    }

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

    .chart-header[b-2l5bgeajtk] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .chart-body[b-2l5bgeajtk] {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .dashboard-title[b-2l5bgeajtk] {
        font-size: 24px;
    }

    .actions-grid[b-2l5bgeajtk] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-2l5bgeajtk],
    .wallet-card[b-2l5bgeajtk],
    .activity-item[b-2l5bgeajtk] {
        padding: 16px;
    }

    .card-icon[b-2l5bgeajtk],
    .wallet-icon[b-2l5bgeajtk] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .metric-value[b-2l5bgeajtk] {
        font-size: 24px;
    }

    .btn-chart-control[b-2l5bgeajtk] {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Animations */
@keyframes fadeIn-b-2l5bgeajtk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentInstallmentDetails.razor.rz.scp.css */

/* Agent Installment Details Page - Modern Professional Style */
.installment-details-container[b-tqnwws31wp] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

/* Detail Header */
.detail-header[b-tqnwws31wp] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 24px;
}

.btn-back[b-tqnwws31wp] {
    background: white;
    border: 2px solid #e5e7eb;
    color: #4b5563;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-back:hover[b-tqnwws31wp] {
        border-color: #667eea;
        color: #667eea;
        transform: translateX(3px);
    }

.header-info[b-tqnwws31wp] {
    flex: 1;
}

    .header-info h1[b-tqnwws31wp] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.breadcrumb[b-tqnwws31wp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .breadcrumb a[b-tqnwws31wp] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.3s;
    }

        .breadcrumb a:hover[b-tqnwws31wp] {
            color: #667eea;
        }

.header-actions[b-tqnwws31wp] {
    display: flex;
    gap: 12px;
}

.btn-action[b-tqnwws31wp] {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary[b-tqnwws31wp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-tqnwws31wp] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-tqnwws31wp] {
    background: white;
    color: #4b5563;
    border: 2px solid #e5e7eb;
}

    .btn-secondary:hover[b-tqnwws31wp] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

/* Status Overview */
.status-overview[b-tqnwws31wp] {
    margin-bottom: 24px;
}

.status-card[b-tqnwws31wp] {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all 0.3s;
}

    .status-card:hover[b-tqnwws31wp] {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

.status-paid[b-tqnwws31wp] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
}

.status-partial[b-tqnwws31wp] {
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
}

.status-overdue[b-tqnwws31wp] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
}

.status-due[b-tqnwws31wp] {
    background: linear-gradient(135deg, #fffbeb 0%, #fed7aa 100%);
    border: 2px solid #fdba74;
}

.status-upcoming[b-tqnwws31wp] {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border: 2px solid #e5e7eb;
}

.status-icon[b-tqnwws31wp] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.status-paid .status-icon[b-tqnwws31wp] {
    background: #86efac;
    color: #14532d;
}

.status-partial .status-icon[b-tqnwws31wp] {
    background: #93c5fd;
    color: #1e3a8a;
}

.status-overdue .status-icon[b-tqnwws31wp] {
    background: #fca5a5;
    color: #7f1d1d;
}

.status-due .status-icon[b-tqnwws31wp] {
    background: #fdba74;
    color: #7c2d12;
}

.status-upcoming .status-icon[b-tqnwws31wp] {
    background: #e5e7eb;
    color: #374151;
}

.status-content[b-tqnwws31wp] {
    flex: 1;
}

    .status-content h3[b-tqnwws31wp] {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 4px 0;
        color: #1f2937;
    }

    .status-content p[b-tqnwws31wp] {
        font-size: 16px;
        color: #6b7280;
        margin: 0;
    }

.progress-container[b-tqnwws31wp] {
    margin-left: auto;
    min-width: 200px;
}

.progress-bar[b-tqnwws31wp] {
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-tqnwws31wp] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

.progress-text[b-tqnwws31wp] {
    font-size: 14px;
    color: #4b5563;
    text-align: center;
}

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

.info-section[b-tqnwws31wp] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s;
}

    .info-section:hover[b-tqnwws31wp] {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

    .info-section.full-width[b-tqnwws31wp] {
        grid-column: span 2;
    }

.section-header[b-tqnwws31wp] {
    background: #f9fafb;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .section-header h3[b-tqnwws31wp] {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .section-header h3 i[b-tqnwws31wp] {
            color: #667eea;
            font-size: 20px;
        }

.section-badge[b-tqnwws31wp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.info-content[b-tqnwws31wp] {
    padding: 24px;
}

.info-row[b-tqnwws31wp] {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

    .info-row:last-child[b-tqnwws31wp] {
        margin-bottom: 0;
    }

.info-item[b-tqnwws31wp] {
    flex: 1;
}

    .info-item.full-width[b-tqnwws31wp] {
        flex: 1 1 100%;
    }

    .info-item.flex-grow[b-tqnwws31wp] {
        flex-grow: 1;
    }

    .info-item label[b-tqnwws31wp] {
        display: block;
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 6px;
        font-weight: 500;
    }

    .info-item strong[b-tqnwws31wp] {
        font-size: 15px;
        color: #1f2937;
        font-weight: 600;
    }

.customer-avatar[b-tqnwws31wp] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid #e5e7eb;
}

.phone-link[b-tqnwws31wp] {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .phone-link:hover[b-tqnwws31wp] {
        text-decoration: underline;
    }

.order-link[b-tqnwws31wp] {
    color: #667eea;
    text-decoration: none;
}

    .order-link:hover[b-tqnwws31wp] {
        text-decoration: underline;
    }

.amount-text[b-tqnwws31wp] {
    font-size: 18px;
    font-weight: 700;
}

.text-success[b-tqnwws31wp] {
    color: #10b981;
}

.text-danger[b-tqnwws31wp] {
    color: #ef4444;
}

.text-warning[b-tqnwws31wp] {
    color: #f59e0b;
}

.overdue-badge[b-tqnwws31wp] {
    display: inline-block;
    background: #fee2e2;
    color: #dc2626;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 8px;
}

.notes-box[b-tqnwws31wp] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .notes-box i[b-tqnwws31wp] {
        color: #d97706;
        margin-top: 2px;
    }

/* Payment History */
.payment-history[b-tqnwws31wp] {
    padding: 24px;
}

.history-timeline[b-tqnwws31wp] {
    position: relative;
    padding-left: 32px;
}

    .history-timeline[b-tqnwws31wp]::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e5e7eb;
    }

.timeline-item[b-tqnwws31wp] {
    position: relative;
    margin-bottom: 24px;
}

    .timeline-item:last-child[b-tqnwws31wp] {
        margin-bottom: 0;
    }

.timeline-marker[b-tqnwws31wp] {
    position: absolute;
    left: -24px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 3px solid #e5e7eb;
}

    .timeline-marker.success[b-tqnwws31wp] {
        border-color: #10b981;
        background: #10b981;
    }

    .timeline-marker.warning[b-tqnwws31wp] {
        border-color: #f59e0b;
        background: #f59e0b;
    }

.timeline-content[b-tqnwws31wp] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
}

.payment-header[b-tqnwws31wp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

    .payment-header h4[b-tqnwws31wp] {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
    }

.payment-date[b-tqnwws31wp] {
    font-size: 13px;
    color: #6b7280;
}

.payment-details[b-tqnwws31wp] {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
}

.payment-method[b-tqnwws31wp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #4b5563;
}

.reference-number[b-tqnwws31wp] {
    font-size: 13px;
    color: #6b7280;
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
}

.payment-notes[b-tqnwws31wp] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.empty-state[b-tqnwws31wp] {
    text-align: center;
    padding: 48px;
}

    .empty-state i[b-tqnwws31wp] {
        font-size: 48px;
        color: #e5e7eb;
        margin-bottom: 16px;
    }

    .empty-state p[b-tqnwws31wp] {
        font-size: 16px;
        color: #6b7280;
        margin: 0;
    }

/* Action Buttons */
.action-buttons[b-tqnwws31wp] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

.btn-action-primary[b-tqnwws31wp],
.btn-action-secondary[b-tqnwws31wp],
.btn-action-success[b-tqnwws31wp] {
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-action-primary[b-tqnwws31wp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-action-primary:hover[b-tqnwws31wp] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-action-secondary[b-tqnwws31wp] {
    background: white;
    color: #4b5563;
    border: 2px solid #e5e7eb;
}

    .btn-action-secondary:hover:not(:disabled)[b-tqnwws31wp] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .btn-action-secondary:disabled[b-tqnwws31wp] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-action-success[b-tqnwws31wp] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

    .btn-action-success:hover[b-tqnwws31wp] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
    }

/* Payment Modal */
.modal-overlay[b-tqnwws31wp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 24px;
}

.modal-content[b-tqnwws31wp] {
    background: white;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.payment-modal[b-tqnwws31wp] {
    animation: slideIn-b-tqnwws31wp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.modal-header[b-tqnwws31wp] {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-tqnwws31wp] {
        font-size: 22px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

.close-btn[b-tqnwws31wp] {
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .close-btn:hover[b-tqnwws31wp] {
        background: #e5e7eb;
    }

.modal-body[b-tqnwws31wp] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.payment-summary[b-tqnwws31wp] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.summary-item[b-tqnwws31wp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

    .summary-item:not(:last-child)[b-tqnwws31wp] {
        border-bottom: 1px solid #e5e7eb;
    }

    .summary-item span[b-tqnwws31wp] {
        color: #6b7280;
        font-size: 14px;
    }

    .summary-item strong[b-tqnwws31wp] {
        font-size: 16px;
        font-weight: 600;
    }

.payment-form[b-tqnwws31wp] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-tqnwws31wp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label[b-tqnwws31wp] {
        font-size: 14px;
        font-weight: 500;
        color: #374151;
    }

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

.input-group[b-tqnwws31wp] {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.input-prefix[b-tqnwws31wp] {
    background: #f9fafb;
    padding: 12px 16px;
    border-right: 2px solid #e5e7eb;
    color: #6b7280;
    font-weight: 500;
}

.form-control[b-tqnwws31wp] {
    flex: 1;
    padding: 12px 16px;
    border: none;
    font-size: 15px;
}

    .form-control:focus[b-tqnwws31wp] {
        outline: none;
    }

.input-group:focus-within[b-tqnwws31wp] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.payment-methods[b-tqnwws31wp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.method-btn[b-tqnwws31wp] {
    padding: 16px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .method-btn:hover[b-tqnwws31wp] {
        border-color: #667eea;
        background: #f0f4ff;
    }

    .method-btn.active[b-tqnwws31wp] {
        border-color: #667eea;
        background: #f0f4ff;
        color: #667eea;
    }

    .method-btn i[b-tqnwws31wp] {
        font-size: 24px;
    }

.early-payment-option[b-tqnwws31wp] {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 16px;
}

.checkbox-label[b-tqnwws31wp] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
}

    .checkbox-label input[type="checkbox"][b-tqnwws31wp] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.discount-info[b-tqnwws31wp] {
    margin-top: 12px;
    padding: 8px 12px;
    background: #d1fae5;
    border-radius: 8px;
    font-size: 14px;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .discount-info i[b-tqnwws31wp] {
        color: #10b981;
    }

.modal-footer[b-tqnwws31wp] {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn[b-tqnwws31wp] {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.btn-secondary[b-tqnwws31wp] {
    background: #f3f4f6;
    color: #4b5563;
}

    .btn-secondary:hover[b-tqnwws31wp] {
        background: #e5e7eb;
    }

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

    .btn-primary:hover:not(:disabled)[b-tqnwws31wp] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

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

.spinner-border[b-tqnwws31wp] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-tqnwws31wp 0.75s linear infinite;
}

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

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

/* Loading & Error States */
.loading-container[b-tqnwws31wp],
.error-container[b-tqnwws31wp],
.unauthorized-container[b-tqnwws31wp] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.spinner-container[b-tqnwws31wp],
.error-content[b-tqnwws31wp],
.unauthorized-content[b-tqnwws31wp] {
    text-align: center;
    background: white;
    padding: 48px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner[b-tqnwws31wp] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-tqnwws31wp 1s linear infinite;
    margin: 0 auto 16px;
}

.error-content i[b-tqnwws31wp],
.unauthorized-content i[b-tqnwws31wp] {
    font-size: 64px;
    color: #ef4444;
    margin-bottom: 24px;
}

.error-content h3[b-tqnwws31wp],
.unauthorized-content h3[b-tqnwws31wp] {
    font-size: 24px;
    color: #1f2937;
    margin-bottom: 12px;
}

.error-content p[b-tqnwws31wp],
.unauthorized-content p[b-tqnwws31wp] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-grid[b-tqnwws31wp] {
        grid-template-columns: 1fr;
    }

    .info-section.full-width[b-tqnwws31wp] {
        grid-column: span 1;
    }

    .payment-methods[b-tqnwws31wp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .installment-details-container[b-tqnwws31wp] {
        padding: 16px;
    }

    .detail-header[b-tqnwws31wp] {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .header-info h1[b-tqnwws31wp] {
        font-size: 24px;
    }

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

    .btn-action[b-tqnwws31wp] {
        flex: 1;
        justify-content: center;
    }

    .status-card[b-tqnwws31wp] {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .progress-container[b-tqnwws31wp] {
        width: 100%;
        margin-left: 0;
        margin-top: 16px;
    }

    .info-row[b-tqnwws31wp] {
        flex-direction: column;
        gap: 16px;
    }

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

    .btn-action-primary[b-tqnwws31wp],
    .btn-action-secondary[b-tqnwws31wp],
    .btn-action-success[b-tqnwws31wp] {
        width: 100%;
        justify-content: center;
    }

    .modal-content[b-tqnwws31wp] {
        margin: 16px;
    }
}

@media (max-width: 480px) {
    .header-info h1[b-tqnwws31wp] {
        font-size: 20px;
    }

    .status-icon[b-tqnwws31wp] {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .section-header h3[b-tqnwws31wp] {
        font-size: 16px;
    }

    .history-timeline[b-tqnwws31wp] {
        padding-left: 20px;
    }

    .timeline-marker[b-tqnwws31wp] {
        left: -20px;
        width: 12px;
        height: 12px;
    }
}

/* Print Styles */
@media print {
    .installment-details-container[b-tqnwws31wp] {
        padding: 0;
        background: white !important;
    }

    .btn-back[b-tqnwws31wp],
    .header-actions[b-tqnwws31wp],
    .action-buttons[b-tqnwws31wp],
    .modal-overlay[b-tqnwws31wp] {
        display: none !important;
    }

    .detail-header[b-tqnwws31wp],
    .status-card[b-tqnwws31wp],
    .info-section[b-tqnwws31wp] {
        box-shadow: none;
        margin-bottom: 20px;
        page-break-inside: avoid;
        border: 1px solid #e5e7eb;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .installment-details-container[b-tqnwws31wp] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .detail-header[b-tqnwws31wp],
[data-theme="dark"] .status-card[b-tqnwws31wp],
[data-theme="dark"] .info-section[b-tqnwws31wp],
[data-theme="dark"] .modal-content[b-tqnwws31wp] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb[b-tqnwws31wp],
[data-theme="dark"] .breadcrumb a[b-tqnwws31wp],
[data-theme="dark"] .info-item label[b-tqnwws31wp],
[data-theme="dark"] .payment-date[b-tqnwws31wp],
[data-theme="dark"] .payment-notes[b-tqnwws31wp] {
    color: #94a3b8;
}

[data-theme="dark"] .header-info h1[b-tqnwws31wp],
[data-theme="dark"] .status-content h3[b-tqnwws31wp],
[data-theme="dark"] .info-item strong[b-tqnwws31wp],
[data-theme="dark"] .payment-header h4[b-tqnwws31wp] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-back[b-tqnwws31wp],
[data-theme="dark"] .btn-secondary[b-tqnwws31wp],
[data-theme="dark"] .btn-action-secondary[b-tqnwws31wp] {
    background: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

[data-theme="dark"] .section-header[b-tqnwws31wp] {
    background: rgba(15, 23, 42, 0.5);
    border-color: #334155;
}

[data-theme="dark"] .timeline-content[b-tqnwws31wp],
[data-theme="dark"] .payment-summary[b-tqnwws31wp] {
    background: rgba(15, 23, 42, 0.5);
}

[data-theme="dark"] .input-group[b-tqnwws31wp],
[data-theme="dark"] .method-btn[b-tqnwws31wp] {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-tqnwws31wp] {
    background: #1e293b;
    color: #e2e8f0;
}
/* _content/Sahelly/Components/Pages/Agent/AgentInventory.razor.rz.scp.css */
/* Agent Inventory Page - Modern Professional CSS
   Based on app.css architecture and Users.razor.css styling */

/* Gradient Buttons - Consistent with Users.razor.css */
.btn-gradient-primary[b-p2otwohsa8] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-p2otwohsa8] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-p2otwohsa8] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-p2otwohsa8] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-p2otwohsa8] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-p2otwohsa8] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-warning[b-p2otwohsa8] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-gradient-warning:hover[b-p2otwohsa8] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-gradient-danger[b-p2otwohsa8] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-p2otwohsa8] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Agent Inventory Page Container */
.agent-inventory-page[b-p2otwohsa8] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-inventory-page[b-p2otwohsa8]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-inventory-page > *[b-p2otwohsa8] {
        position: relative;
        z-index: 1;
    }

/* Header Section */
.inventory-header-section[b-p2otwohsa8] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content[b-p2otwohsa8] {
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.title-section[b-p2otwohsa8] {
    flex: 1;
}

.page-title[b-p2otwohsa8] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-p2otwohsa8] {
        font-size: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-subtitle[b-p2otwohsa8] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-p2otwohsa8] {
    display: flex;
    gap: 12px;
}

.btn-action-primary[b-p2otwohsa8] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-primary:hover[b-p2otwohsa8] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .btn-action-primary:disabled[b-p2otwohsa8] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.btn-action-secondary[b-p2otwohsa8] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-secondary:hover[b-p2otwohsa8] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Statistics Cards */
.inventory-statistics[b-p2otwohsa8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-p2otwohsa8] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-p2otwohsa8]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-p2otwohsa8] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-p2otwohsa8]::before {
            opacity: 1;
        }

.stat-icon[b-p2otwohsa8] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.total-products .stat-icon[b-p2otwohsa8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.total-quantity .stat-icon[b-p2otwohsa8] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.total-value .stat-icon[b-p2otwohsa8] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.low-stock .stat-icon[b-p2otwohsa8] {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
}

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

.stat-value[b-p2otwohsa8] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-p2otwohsa8] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Search and Filter Section */
.search-filter-section[b-p2otwohsa8] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-box[b-p2otwohsa8] {
    position: relative;
    flex: 1;
}

    .search-box i[b-p2otwohsa8] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 18px;
    }

    .search-box .search-input[b-p2otwohsa8] {
        width: 100%;
        padding: 14px 16px 14px 48px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 16px;
    }

        .search-box .search-input:focus[b-p2otwohsa8] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.filter-buttons[b-p2otwohsa8] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.filter-btn[b-p2otwohsa8] {
    background: rgba(102, 126, 234, 0.1);
    color: #4c1d95;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
}

    .filter-btn:hover[b-p2otwohsa8] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

    .filter-btn.active[b-p2otwohsa8] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Inventory Grid */
.inventory-grid[b-p2otwohsa8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.inventory-card[b-p2otwohsa8] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
}

    .inventory-card:hover[b-p2otwohsa8] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .inventory-card.low-stock-alert[b-p2otwohsa8] {
        border-color: #f5576c;
    }

        .inventory-card.low-stock-alert:hover[b-p2otwohsa8] {
            box-shadow: 0 20px 40px rgba(245, 87, 108, 0.2);
        }

.product-image-section[b-p2otwohsa8] {
    height: 180px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
}

.product-image[b-p2otwohsa8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.inventory-card:hover .product-image[b-p2otwohsa8] {
    transform: scale(1.1);
}

.product-image-placeholder[b-p2otwohsa8] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 48px;
}

.stock-badge[b-p2otwohsa8] {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .stock-badge.low[b-p2otwohsa8] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
        color: white;
    }

    .stock-badge.out[b-p2otwohsa8] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
    }

.product-details[b-p2otwohsa8] {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-name[b-p2otwohsa8] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1f2937;
    line-height: 1.4;
}

.product-sku[b-p2otwohsa8] {
    font-size: 14px;
    color: #9333ea;
    margin-bottom: 16px;
    font-weight: 500;
}

.price-section[b-p2otwohsa8] {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.selling-price[b-p2otwohsa8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-label[b-p2otwohsa8] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.price-value[b-p2otwohsa8] {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quantity-info[b-p2otwohsa8] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quantity-item[b-p2otwohsa8] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 15px;
}

    .quantity-item i[b-p2otwohsa8] {
        color: #667eea;
        width: 16px;
        text-align: center;
    }

    .quantity-item.reserved i[b-p2otwohsa8] {
        color: #f59e0b;
    }

.quantity-label[b-p2otwohsa8] {
    font-weight: 500;
}

.quantity-value[b-p2otwohsa8] {
    font-weight: 700;
    margin-left: auto;
}

.card-actions[b-p2otwohsa8] {
    margin-top: auto;
    display: flex;
    gap: 10px;
}

.btn-card-action[b-p2otwohsa8] {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .btn-card-action.primary[b-p2otwohsa8] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    }

        .btn-card-action.primary:hover[b-p2otwohsa8] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
        }

    .btn-card-action.secondary[b-p2otwohsa8] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    }

        .btn-card-action.secondary:hover[b-p2otwohsa8] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
        }

.last-update[b-p2otwohsa8] {
    background: rgba(102, 126, 234, 0.05);
    color: #6b7280;
    font-size: 12px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Inventory Charts Section */
.inventory-charts-section[b-p2otwohsa8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.chart-container[b-p2otwohsa8] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
    height: 400px;
    display: flex;
    flex-direction: column;
}

    .chart-container:hover[b-p2otwohsa8] {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

.chart-title[b-p2otwohsa8] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .chart-title i[b-p2otwohsa8] {
        color: #667eea;
    }

canvas[b-p2otwohsa8] {
    flex: 1;
    width: 100%;
}

/* Loading State */
.loading-container[b-p2otwohsa8] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: center;
}

.loading-spinner[b-p2otwohsa8] {
    margin-bottom: 24px;
}

.spinner-border[b-p2otwohsa8] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-p2otwohsa8 0.8s linear infinite;
}

.loading-text[b-p2otwohsa8] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Empty State */
.empty-state[b-p2otwohsa8] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: center;
}

.empty-icon[b-p2otwohsa8] {
    font-size: 80px;
    margin-bottom: 24px;
    color: #cbd5e1;
}

    .empty-icon i[b-p2otwohsa8] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.empty-title[b-p2otwohsa8] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #4c1d95;
}

.empty-description[b-p2otwohsa8] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
    max-width: 500px;
}

/* Unauthorized State */
.unauthorized-message[b-p2otwohsa8] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: center;
}

    .unauthorized-message i[b-p2otwohsa8] {
        font-size: 80px;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .unauthorized-message h3[b-p2otwohsa8] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .unauthorized-message p[b-p2otwohsa8] {
        font-size: 16px;
        color: #6b7280;
        max-width: 500px;
    }

/* Animation for Spinner */
@keyframes spin-b-p2otwohsa8 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .inventory-statistics[b-p2otwohsa8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .inventory-charts-section[b-p2otwohsa8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .agent-inventory-page[b-p2otwohsa8] {
        padding: 16px;
    }

    .header-content[b-p2otwohsa8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-p2otwohsa8] {
        width: 100%;
    }

    .inventory-statistics[b-p2otwohsa8] {
        grid-template-columns: 1fr;
    }

    .inventory-grid[b-p2otwohsa8] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-p2otwohsa8] {
        padding: 20px;
    }

    .stat-icon[b-p2otwohsa8] {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .stat-value[b-p2otwohsa8] {
        font-size: 28px;
    }

    .btn-action-primary[b-p2otwohsa8],
    .btn-action-secondary[b-p2otwohsa8] {
        width: 100%;
        justify-content: center;
    }

    .chart-container[b-p2otwohsa8] {
        height: 350px;
    }
}

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

    .page-subtitle[b-p2otwohsa8] {
        font-size: 16px;
    }

    .filter-buttons[b-p2otwohsa8] {
        flex-direction: column;
    }

    .filter-btn[b-p2otwohsa8] {
        width: 100%;
    }

    .btn-card-action[b-p2otwohsa8] {
        font-size: 13px;
        padding: 10px;
    }

    .product-name[b-p2otwohsa8] {
        font-size: 16px;
    }

    .price-value[b-p2otwohsa8] {
        font-size: 20px;
    }

    .stat-card[b-p2otwohsa8] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .chart-container[b-p2otwohsa8] {
        height: 300px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .agent-inventory-page[b-p2otwohsa8] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-inventory-page[b-p2otwohsa8]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .inventory-header-section[b-p2otwohsa8],
[data-theme="dark"] .search-filter-section[b-p2otwohsa8],
[data-theme="dark"] .stat-card[b-p2otwohsa8],
[data-theme="dark"] .inventory-card[b-p2otwohsa8],
[data-theme="dark"] .chart-container[b-p2otwohsa8],
[data-theme="dark"] .loading-container[b-p2otwohsa8],
[data-theme="dark"] .empty-state[b-p2otwohsa8],
[data-theme="dark"] .unauthorized-message[b-p2otwohsa8] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-title[b-p2otwohsa8],
[data-theme="dark"] .page-title i[b-p2otwohsa8],
[data-theme="dark"] .stat-value[b-p2otwohsa8],
[data-theme="dark"] .price-value[b-p2otwohsa8],
[data-theme="dark"] .empty-icon i[b-p2otwohsa8] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle[b-p2otwohsa8],
[data-theme="dark"] .stat-label[b-p2otwohsa8],
[data-theme="dark"] .price-label[b-p2otwohsa8],
[data-theme="dark"] .loading-text[b-p2otwohsa8],
[data-theme="dark"] .empty-description[b-p2otwohsa8],
[data-theme="dark"] .last-update[b-p2otwohsa8],
[data-theme="dark"] .unauthorized-message p[b-p2otwohsa8] {
    color: #9ca3af;
}

[data-theme="dark"] .product-name[b-p2otwohsa8],
[data-theme="dark"] .chart-title[b-p2otwohsa8],
[data-theme="dark"] .empty-title[b-p2otwohsa8],
[data-theme="dark"] .unauthorized-message h3[b-p2otwohsa8] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-sku[b-p2otwohsa8] {
    color: #a78bfa;
}

[data-theme="dark"] .quantity-item[b-p2otwohsa8] {
    color: #9ca3af;
}

    [data-theme="dark"] .quantity-item i[b-p2otwohsa8] {
        color: #a78bfa;
    }

[data-theme="dark"] .product-image-section[b-p2otwohsa8] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

[data-theme="dark"] .product-image-placeholder[b-p2otwohsa8] {
    color: #4b5563;
}

[data-theme="dark"] .search-box .search-input[b-p2otwohsa8] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box .search-input:focus[b-p2otwohsa8] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .search-box i[b-p2otwohsa8] {
    color: #a78bfa;
}

[data-theme="dark"] .filter-btn[b-p2otwohsa8] {
    background: rgba(102, 126, 234, 0.1);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-btn:hover[b-p2otwohsa8] {
        background: rgba(102, 126, 234, 0.2);
    }

    [data-theme="dark"] .filter-btn.active[b-p2otwohsa8] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

[data-theme="dark"] .spinner-border[b-p2otwohsa8] {
    border-color: rgba(167, 139, 250, 0.2);
    border-right-color: #a78bfa;
}
/* _content/Sahelly/Components/Pages/Agent/AgentReports.razor.rz.scp.css */

/* Agent Reports Page - Modern Professional Design
   Based on the app.css architecture and similar to Users.razor.css */

/* Page Container */
.agent-reports-page[b-dew8gxgc0e] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-reports-page[b-dew8gxgc0e]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-reports-page > *[b-dew8gxgc0e] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-dew8gxgc0e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-dew8gxgc0e] {
    flex: 1;
}

.breadcrumb-modern[b-dew8gxgc0e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

.breadcrumb-item[b-dew8gxgc0e] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-dew8gxgc0e] {
        color: #667eea;
    }

.separator[b-dew8gxgc0e] {
    color: #d1d5db;
    font-size: 10px;
}

.breadcrumb-current[b-dew8gxgc0e] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title h1[b-dew8gxgc0e] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-actions[b-dew8gxgc0e] {
    display: flex;
    gap: 12px;
}

.btn-action-modern[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-modern:hover[b-dew8gxgc0e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

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

/* Loading Container */
.loading-container[b-dew8gxgc0e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.spinner[b-dew8gxgc0e] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-dew8gxgc0e 0.8s linear infinite;
    margin-bottom: 20px;
}

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

.loading-container p[b-dew8gxgc0e] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 600;
}

/* Report Selector */
.report-selector[b-dew8gxgc0e] {
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.selector-tabs[b-dew8gxgc0e] {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.tab-button[b-dew8gxgc0e] {
    flex: 1;
    background: transparent;
    border: none;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .tab-button:hover[b-dew8gxgc0e] {
        color: #4c1d95;
        background: rgba(102, 126, 234, 0.05);
    }

    .tab-button.active[b-dew8gxgc0e] {
        color: #667eea;
    }

        .tab-button.active[b-dew8gxgc0e]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20%;
            right: 20%;
            height: 3px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px 3px 0 0;
        }

    .tab-button i[b-dew8gxgc0e] {
        font-size: 18px;
    }

/* Date Filter Card */
.date-filter-card[b-dew8gxgc0e] {
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.filter-row[b-dew8gxgc0e] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.filter-group[b-dew8gxgc0e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-group label[b-dew8gxgc0e] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

    .filter-group input[b-dew8gxgc0e] {
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .filter-group input:focus[b-dew8gxgc0e] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.btn-filter[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-filter:hover[b-dew8gxgc0e] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Report Content */
.report-content[b-dew8gxgc0e] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .report-content h3[b-dew8gxgc0e] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
    }

/* Summary Report */
.summary-grid[b-dew8gxgc0e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.summary-card[b-dew8gxgc0e] {
    background: white;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-dew8gxgc0e]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-dew8gxgc0e] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

        .summary-card:hover[b-dew8gxgc0e]::before {
            opacity: 1;
        }

.card-icon[b-dew8gxgc0e] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-card.sales .card-icon[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.summary-card.collections .card-icon[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.summary-card.commissions .card-icon[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.summary-card.customers .card-icon[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-content[b-dew8gxgc0e] {
    flex: 1;
}

    .card-content h4[b-dew8gxgc0e] {
        font-size: 16px;
        font-weight: 600;
        color: #6b7280;
        margin: 0 0 8px 0;
    }

.card-value[b-dew8gxgc0e] {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 4px 0;
}

.card-subtitle[b-dew8gxgc0e] {
    font-size: 14px;
    color: #6b7280;
}

/* Chart Container */
.chart-container[b-dew8gxgc0e] {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

    .chart-container h3[b-dew8gxgc0e] {
        margin-top: 0;
        margin-bottom: 24px;
    }

/* Tables */
.table-container[b-dew8gxgc0e] {
    overflow-x: auto;
    margin-bottom: 24px;
}

.report-table[b-dew8gxgc0e] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: transparent;
}

    .report-table th[b-dew8gxgc0e] {
        padding: 16px;
        text-align: right;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        font-weight: 600;
        font-size: 14px;
        color: #4c1d95;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
        white-space: nowrap;
    }

    .report-table td[b-dew8gxgc0e] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
    }

    .report-table tbody tr[b-dew8gxgc0e] {
        background: white;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .report-table tbody tr:hover[b-dew8gxgc0e] {
            background: rgba(102, 126, 234, 0.05);
            transform: scale(1.01);
        }

/* Status Badge */
.status-badge[b-dew8gxgc0e] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.delivered[b-dew8gxgc0e] {
        background: linear-gradient(135deg, rgba(59, 201, 104, 0.15) 0%, rgba(50, 209, 183, 0.15) 100%);
        color: #10b981;
        border: 1px solid rgba(59, 201, 104, 0.3);
    }

    .status-badge.pending[b-dew8gxgc0e] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 146, 60, 0.15) 100%);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .status-badge.cancelled[b-dew8gxgc0e] {
        background: linear-gradient(135deg, rgba(208, 78, 95, 0.15) 0%, rgba(205, 125, 219, 0.15) 100%);
        color: #ef4444;
        border: 1px solid rgba(208, 78, 95, 0.3);
    }

    .status-badge.paid[b-dew8gxgc0e] {
        background: linear-gradient(135deg, rgba(59, 201, 104, 0.15) 0%, rgba(50, 209, 183, 0.15) 100%);
        color: #10b981;
        border: 1px solid rgba(59, 201, 104, 0.3);
    }

/* Empty State */
.empty-state[b-dew8gxgc0e] {
    text-align: center;
    padding: 60px 20px;
}

    .empty-state i[b-dew8gxgc0e] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
    }

    .empty-state p[b-dew8gxgc0e] {
        font-size: 18px;
        color: #6b7280;
        margin: 0;
    }

/* Unauthorized Screen */
.unauthorized-container[b-dew8gxgc0e] {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.unauthorized-content[b-dew8gxgc0e] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

    .unauthorized-content i[b-dew8gxgc0e] {
        font-size: 64px;
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-dew8gxgc0e] {
        font-size: 28px;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .unauthorized-content p[b-dew8gxgc0e] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Responsive Styles */
@media (max-width: 992px) {
    .summary-grid[b-dew8gxgc0e] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .agent-reports-page[b-dew8gxgc0e] {
        padding: 16px;
    }

    .page-header-enhanced[b-dew8gxgc0e] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-actions[b-dew8gxgc0e] {
        width: 100%;
    }

    .filter-row[b-dew8gxgc0e] {
        flex-direction: column;
        gap: 12px;
    }

    .filter-group[b-dew8gxgc0e] {
        width: 100%;
    }

    .btn-filter[b-dew8gxgc0e] {
        width: 100%;
    }

    .summary-grid[b-dew8gxgc0e] {
        grid-template-columns: 1fr;
    }

    .page-title h1[b-dew8gxgc0e] {
        font-size: 24px;
    }

    .selector-tabs[b-dew8gxgc0e] {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .tab-button[b-dew8gxgc0e] {
        white-space: nowrap;
        padding: 12px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .agent-reports-page[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-reports-page[b-dew8gxgc0e]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-dew8gxgc0e],
[data-theme="dark"] .date-filter-card[b-dew8gxgc0e],
[data-theme="dark"] .report-selector[b-dew8gxgc0e],
[data-theme="dark"] .report-content[b-dew8gxgc0e],
[data-theme="dark"] .summary-card[b-dew8gxgc0e],
[data-theme="dark"] .chart-container[b-dew8gxgc0e],
[data-theme="dark"] .loading-container[b-dew8gxgc0e],
[data-theme="dark"] .unauthorized-content[b-dew8gxgc0e] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-dew8gxgc0e] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-dew8gxgc0e] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-dew8gxgc0e] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title h1[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .tab-button[b-dew8gxgc0e] {
    color: #9ca3af;
}

    [data-theme="dark"] .tab-button:hover[b-dew8gxgc0e] {
        color: #e2e8f0;
        background: rgba(102, 126, 234, 0.1);
    }

    [data-theme="dark"] .tab-button.active[b-dew8gxgc0e] {
        color: #a78bfa;
    }

[data-theme="dark"] .filter-group label[b-dew8gxgc0e] {
    color: #e2e8f0;
}

[data-theme="dark"] .filter-group input[b-dew8gxgc0e] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-group input:focus[b-dew8gxgc0e] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .card-value[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .card-content h4[b-dew8gxgc0e],
[data-theme="dark"] .card-subtitle[b-dew8gxgc0e] {
    color: #9ca3af;
}

[data-theme="dark"] .report-content h3[b-dew8gxgc0e] {
    color: #e2e8f0;
}

[data-theme="dark"] .report-table th[b-dew8gxgc0e] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .report-table tbody tr[b-dew8gxgc0e] {
    background: #1e293b;
}

[data-theme="dark"] .report-table td[b-dew8gxgc0e] {
    color: #e2e8f0;
}

[data-theme="dark"] .report-table tbody tr:hover[b-dew8gxgc0e] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .empty-state i[b-dew8gxgc0e] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-state p[b-dew8gxgc0e] {
    color: #9ca3af;
}
/* _content/Sahelly/Components/Pages/Agent/AgentRequestDetails.razor.rz.scp.css */
/* Agent Request Details Page - Professional Modern Design */

/* Gradient Buttons - Following Users.razor.css pattern */
.btn-gradient-primary[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-ya1wcjq0zk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-ya1wcjq0zk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-ya1wcjq0zk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-warning[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-gradient-warning:hover[b-ya1wcjq0zk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-gradient-danger[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-ya1wcjq0zk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Page Container */
.request-details-page[b-ya1wcjq0zk] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .request-details-page[b-ya1wcjq0zk]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .request-details-page > *[b-ya1wcjq0zk] {
        position: relative;
        z-index: 1;
    }

/* Loading State */
.loading-container[b-ya1wcjq0zk] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    gap: 16px;
}

.loading-spinner .spinner-border[b-ya1wcjq0zk] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-ya1wcjq0zk 0.8s linear infinite;
}

.loading-text[b-ya1wcjq0zk] {
    font-size: 16px;
    color: #4c1d95;
    font-weight: 600;
    margin: 0;
}

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

/* Error State */
.error-state[b-ya1wcjq0zk] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon[b-ya1wcjq0zk] {
    font-size: 100px;
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
}

.error-title[b-ya1wcjq0zk] {
    font-size: 28px;
    color: #4c1d95;
    margin-bottom: 12px;
    font-weight: 700;
}

.error-description[b-ya1wcjq0zk] {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 32px;
}

/* Header Section */
.page-header-section[b-ya1wcjq0zk] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
}

.header-content[b-ya1wcjq0zk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.back-navigation[b-ya1wcjq0zk] {
    display: flex;
    align-items: center;
}

.btn-back[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-back:hover[b-ya1wcjq0zk] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.title-section[b-ya1wcjq0zk] {
    flex: 1;
}

.page-title[b-ya1wcjq0zk] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.request-badges[b-ya1wcjq0zk] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status-badge[b-ya1wcjq0zk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge i[b-ya1wcjq0zk] {
        font-size: 12px;
    }

.status-pending[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-approved[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.status-partial[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-rejected[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
    color: #dc2626;
    border: 1px solid rgba(245, 87, 108, 0.3);
}

.status-completed[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.status-cancelled[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(156, 163, 175, 0.2) 100%);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.date-badge[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.header-actions[b-ya1wcjq0zk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-action-danger[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-danger:hover[b-ya1wcjq0zk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

.btn-action-secondary[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-secondary:hover[b-ya1wcjq0zk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Info Cards Section */
.info-cards-section[b-ya1wcjq0zk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.info-card[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .info-card[b-ya1wcjq0zk]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .info-card:hover[b-ya1wcjq0zk] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .info-card:hover[b-ya1wcjq0zk]::before {
            opacity: 1;
        }

.card-icon[b-ya1wcjq0zk] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.card-content[b-ya1wcjq0zk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-label[b-ya1wcjq0zk] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

.card-value[b-ya1wcjq0zk] {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

/* Section Titles */
.section-title[b-ya1wcjq0zk] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4c1d95;
}

    .section-title i[b-ya1wcjq0zk] {
        color: #667eea;
        font-size: 18px;
    }

/* Timeline Section */
.timeline-section[b-ya1wcjq0zk] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.timeline[b-ya1wcjq0zk] {
    position: relative;
    padding-left: 30px;
}

    .timeline[b-ya1wcjq0zk]::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 20px;
        bottom: 20px;
        width: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 1px;
    }

.timeline-entry[b-ya1wcjq0zk] {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    position: relative;
}

    .timeline-entry:last-child[b-ya1wcjq0zk] {
        margin-bottom: 0;
    }

.timeline-marker[b-ya1wcjq0zk] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    position: absolute;
    left: -45px;
    top: 0;
}

.timeline-content[b-ya1wcjq0zk] {
    background: rgba(102, 126, 234, 0.05);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    flex: 1;
}

.timeline-title[b-ya1wcjq0zk] {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.timeline-date[b-ya1wcjq0zk] {
    font-size: 13px;
    color: #9333ea;
    margin-bottom: 8px;
    font-weight: 500;
}

.timeline-notes[b-ya1wcjq0zk] {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 8px;
    line-height: 1.5;
}

.timeline-user[b-ya1wcjq0zk] {
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
    margin: 0;
}

/* Items Section */
.items-section[b-ya1wcjq0zk] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.items-table-container[b-ya1wcjq0zk] {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.items-table[b-ya1wcjq0zk] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

    .items-table th[b-ya1wcjq0zk] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

html[dir="ltr"] .items-table th[b-ya1wcjq0zk] {
    text-align: left;
}

.items-table td[b-ya1wcjq0zk] {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.items-table tbody tr:hover td[b-ya1wcjq0zk] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    transform: scale(1.01);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.items-table tbody tr:last-child td[b-ya1wcjq0zk] {
    border-bottom: none;
}

.items-table tfoot td[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    font-weight: 600;
    color: #4c1d95;
    border-top: 2px solid rgba(102, 126, 234, 0.2);
}

.product-cell[b-ya1wcjq0zk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-ya1wcjq0zk] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-thumb-placeholder[b-ya1wcjq0zk] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 18px;
}

.product-name[b-ya1wcjq0zk] {
    font-weight: 500;
    color: #1f2937;
    font-size: 15px;
}

.quantity-cell[b-ya1wcjq0zk] {
    text-align: center;
    font-weight: 600;
    color: #4c1d95;
}

.price-cell[b-ya1wcjq0zk] {
    text-align: center;
    font-weight: 500;
    color: #4b5563;
}

    .price-cell.total[b-ya1wcjq0zk] {
        font-weight: 700;
        color: #1f2937;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.item-status-badge[b-ya1wcjq0zk] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-warning[b-ya1wcjq0zk] {
    color: #d97706 !important;
}

.text-success[b-ya1wcjq0zk] {
    color: #059669 !important;
}

.text-muted[b-ya1wcjq0zk] {
    color: #9ca3af !important;
}

.text-end[b-ya1wcjq0zk] {
    text-align: right !important;
}

html[dir="ltr"] .text-end[b-ya1wcjq0zk] {
    text-align: left !important;
}

/* Notes and Response Sections */
.notes-section[b-ya1wcjq0zk],
.response-section[b-ya1wcjq0zk] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.notes-content[b-ya1wcjq0zk],
.response-content[b-ya1wcjq0zk] {
    background: rgba(102, 126, 234, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    color: #4b5563;
    line-height: 1.6;
    font-size: 15px;
}

/* Modal Styles */
.modal-backdrop[b-ya1wcjq0zk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1040;
    backdrop-filter: blur(8px);
    animation: fadeIn-b-ya1wcjq0zk 0.3s ease;
}

.confirmation-modal[b-ya1wcjq0zk] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    max-width: 500px;
    width: calc(100% - 32px);
    animation: zoomIn-b-ya1wcjq0zk 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-header[b-ya1wcjq0zk] {
    padding: 24px 30px 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
}

.modal-title[b-ya1wcjq0zk] {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.btn-close[b-ya1wcjq0zk] {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #6b7280;
    transition: all 0.3s;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-ya1wcjq0zk] {
        color: #4c1d95;
        background: rgba(102, 126, 234, 0.1);
        transform: rotate(90deg);
    }

.modal-body[b-ya1wcjq0zk] {
    padding: 24px 30px;
}

    .modal-body p[b-ya1wcjq0zk] {
        font-size: 16px;
        color: #4b5563;
        margin-bottom: 16px;
    }

.cancel-reason[b-ya1wcjq0zk] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    resize: vertical;
    min-height: 80px;
}

    .cancel-reason:focus[b-ya1wcjq0zk] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .cancel-reason[b-ya1wcjq0zk]::placeholder {
        color: #9ca3af;
    }

.modal-footer[b-ya1wcjq0zk] {
    padding: 16px 30px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-secondary[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-secondary:hover[b-ya1wcjq0zk] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-danger[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-danger:hover:not(:disabled)[b-ya1wcjq0zk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

    .btn-danger:disabled[b-ya1wcjq0zk] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.spinner-border-sm[b-ya1wcjq0zk] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Unauthorized State */
.unauthorized-message[b-ya1wcjq0zk] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-message i[b-ya1wcjq0zk] {
        font-size: 100px;
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-message h3[b-ya1wcjq0zk] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-message p[b-ya1wcjq0zk] {
        font-size: 18px;
        color: #6b7280;
    }

/* Animations */
@keyframes fadeIn-b-ya1wcjq0zk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn-b-ya1wcjq0zk {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .request-details-page[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .request-details-page[b-ya1wcjq0zk]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .loading-container[b-ya1wcjq0zk],
[data-theme="dark"] .error-state[b-ya1wcjq0zk],
[data-theme="dark"] .page-header-section[b-ya1wcjq0zk],
[data-theme="dark"] .info-card[b-ya1wcjq0zk],
[data-theme="dark"] .timeline-section[b-ya1wcjq0zk],
[data-theme="dark"] .items-section[b-ya1wcjq0zk],
[data-theme="dark"] .notes-section[b-ya1wcjq0zk],
[data-theme="dark"] .response-section[b-ya1wcjq0zk],
[data-theme="dark"] .unauthorized-message[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .confirmation-modal[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .items-table[b-ya1wcjq0zk] {
    background: #1e293b;
}

    [data-theme="dark"] .items-table th[b-ya1wcjq0zk] {
        background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
        color: #a78bfa;
    }

    [data-theme="dark"] .items-table td[b-ya1wcjq0zk] {
        background: #1e293b;
        color: #e2e8f0;
    }

    [data-theme="dark"] .items-table tbody tr:hover td[b-ya1wcjq0zk] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .timeline-content[b-ya1wcjq0zk],
[data-theme="dark"] .notes-content[b-ya1wcjq0zk],
[data-theme="dark"] .response-content[b-ya1wcjq0zk] {
    background: rgba(71, 85, 105, 0.3);
    border: 1px solid rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

[data-theme="dark"] .cancel-reason[b-ya1wcjq0zk] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .cancel-reason:focus[b-ya1wcjq0zk] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .page-title[b-ya1wcjq0zk],
[data-theme="dark"] .card-value[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .section-title[b-ya1wcjq0zk] {
    color: #e2e8f0;
}

    [data-theme="dark"] .section-title i[b-ya1wcjq0zk] {
        color: #a78bfa;
    }

[data-theme="dark"] .modal-title[b-ya1wcjq0zk] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .card-label[b-ya1wcjq0zk],
[data-theme="dark"] .timeline-title[b-ya1wcjq0zk],
[data-theme="dark"] .product-name[b-ya1wcjq0zk] {
    color: #e2e8f0;
}

[data-theme="dark"] .loading-text[b-ya1wcjq0zk],
[data-theme="dark"] .error-title[b-ya1wcjq0zk] {
    color: #e2e8f0;
}

[data-theme="dark"] .error-description[b-ya1wcjq0zk] {
    color: #9ca3af;
}

[data-theme="dark"] .timeline-date[b-ya1wcjq0zk] {
    color: #a78bfa;
}

[data-theme="dark"] .timeline-notes[b-ya1wcjq0zk],
[data-theme="dark"] .timeline-user[b-ya1wcjq0zk] {
    color: #9ca3af;
}

[data-theme="dark"] .btn-close[b-ya1wcjq0zk] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-ya1wcjq0zk] {
        color: #e2e8f0;
        background: rgba(167, 139, 250, 0.1);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .info-cards-section[b-ya1wcjq0zk] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .request-details-page[b-ya1wcjq0zk] {
        padding: 16px;
    }

    .page-header-section[b-ya1wcjq0zk] {
        padding: 20px;
        margin-bottom: 24px;
    }

    .header-content[b-ya1wcjq0zk] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .page-title[b-ya1wcjq0zk] {
        font-size: 24px;
    }

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

    .info-cards-section[b-ya1wcjq0zk] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .info-card[b-ya1wcjq0zk] {
        padding: 20px;
    }

    .card-icon[b-ya1wcjq0zk] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .card-value[b-ya1wcjq0zk] {
        font-size: 18px;
    }

    .timeline[b-ya1wcjq0zk] {
        padding-left: 20px;
    }

        .timeline[b-ya1wcjq0zk]::before {
            left: 10px;
        }

    .timeline-marker[b-ya1wcjq0zk] {
        left: -25px;
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .timeline-content[b-ya1wcjq0zk] {
        padding: 12px 16px;
    }

    .items-section[b-ya1wcjq0zk],
    .timeline-section[b-ya1wcjq0zk],
    .notes-section[b-ya1wcjq0zk],
    .response-section[b-ya1wcjq0zk] {
        padding: 20px;
        margin-bottom: 24px;
    }

    .items-table-container[b-ya1wcjq0zk] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .items-table[b-ya1wcjq0zk] {
        min-width: 600px;
        font-size: 14px;
    }

        .items-table th[b-ya1wcjq0zk],
        .items-table td[b-ya1wcjq0zk] {
            padding: 12px 8px;
        }

    .product-cell[b-ya1wcjq0zk] {
        min-width: 150px;
    }

    .product-thumb[b-ya1wcjq0zk],
    .product-thumb-placeholder[b-ya1wcjq0zk] {
        width: 40px;
        height: 40px;
    }

    .confirmation-modal[b-ya1wcjq0zk] {
        margin: 16px;
        max-width: calc(100% - 32px);
    }

    .modal-header[b-ya1wcjq0zk] {
        padding: 20px;
    }

    .modal-body[b-ya1wcjq0zk] {
        padding: 20px;
    }

    .modal-footer[b-ya1wcjq0zk] {
        padding: 16px 20px 20px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer button[b-ya1wcjq0zk] {
            width: 100%;
        }

    .btn-back[b-ya1wcjq0zk],
    .btn-action-danger[b-ya1wcjq0zk],
    .btn-action-secondary[b-ya1wcjq0zk] {
        padding: 10px 16px;
        font-size: 14px;
    }

    .status-badge[b-ya1wcjq0zk],
    .date-badge[b-ya1wcjq0zk] {
        font-size: 12px;
        padding: 6px 12px;
    }
}

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

    .request-badges[b-ya1wcjq0zk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .info-card[b-ya1wcjq0zk] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .section-title[b-ya1wcjq0zk] {
        font-size: 18px;
    }

    .items-table[b-ya1wcjq0zk] {
        min-width: 500px;
    }
}

/* Print Styles */
@media print {
    .request-details-page[b-ya1wcjq0zk] {
        background: white !important;
        padding: 0 !important;
    }

    .btn-back[b-ya1wcjq0zk],
    .header-actions[b-ya1wcjq0zk],
    .modal-backdrop[b-ya1wcjq0zk],
    .confirmation-modal[b-ya1wcjq0zk] {
        display: none !important;
    }

    .page-header-section[b-ya1wcjq0zk],
    .info-cards-section[b-ya1wcjq0zk],
    .timeline-section[b-ya1wcjq0zk],
    .items-section[b-ya1wcjq0zk],
    .notes-section[b-ya1wcjq0zk],
    .response-section[b-ya1wcjq0zk] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
        margin-bottom: 16px !important;
    }

    .items-table[b-ya1wcjq0zk] {
        font-size: 12px;
    }

        .items-table th[b-ya1wcjq0zk] {
            background: #f3f4f6 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

    .status-badge[b-ya1wcjq0zk],
    .item-status-badge[b-ya1wcjq0zk] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Focus States for Accessibility */
*:focus[b-ya1wcjq0zk] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-ya1wcjq0zk],
.btn-back:focus[b-ya1wcjq0zk] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-ya1wcjq0zk],
    .btn-gradient-secondary[b-ya1wcjq0zk],
    .btn-gradient-success[b-ya1wcjq0zk],
    .btn-gradient-warning[b-ya1wcjq0zk],
    .btn-gradient-danger[b-ya1wcjq0zk],
    .btn-action-danger[b-ya1wcjq0zk],
    .btn-action-secondary[b-ya1wcjq0zk] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-ya1wcjq0zk] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentRequestInventory.razor.rz.scp.css */

/* AgentRequestInventory - Modern Professional CSS
   Following Sahelly design system principles */

/* Page Container */
.request-inventory-page[b-16gzt23stx] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .request-inventory-page[b-16gzt23stx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .request-inventory-page > *[b-16gzt23stx] {
        position: relative;
        z-index: 1;
    }

/* Page Header Section */
.page-header-section[b-16gzt23stx] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-16gzt23stx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.title-section[b-16gzt23stx] {
    flex: 1;
}

.page-title[b-16gzt23stx] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-16gzt23stx] {
        font-size: 32px;
    }

.page-subtitle[b-16gzt23stx] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-16gzt23stx] {
    display: flex;
    gap: 12px;
}

/* Tab Navigation */
.tab-navigation[b-16gzt23stx] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 6px;
    gap: 8px;
    margin-bottom: 24px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.tab-btn[b-16gzt23stx] {
    flex: 1;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

    .tab-btn:hover[b-16gzt23stx] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .tab-btn.active[b-16gzt23stx] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.tab-badge[b-16gzt23stx] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
}

/* Search and Filter Section */
.search-filter-section[b-16gzt23stx] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-box[b-16gzt23stx] {
    flex: 1;
    min-width: 300px;
    position: relative;
}

    .search-box i[b-16gzt23stx] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 18px;
    }

.search-input[b-16gzt23stx] {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    font-size: 16px;
}

    .search-input:focus[b-16gzt23stx] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.filter-controls[b-16gzt23stx] {
    display: flex;
    gap: 12px;
}

.filter-select[b-16gzt23stx] {
    min-width: 180px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    font-size: 15px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667eea' width='24' height='24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

    .filter-select:focus[b-16gzt23stx] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Products Grid */
.products-grid[b-16gzt23stx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.product-card[b-16gzt23stx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

    .product-card:hover[b-16gzt23stx] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .product-card.in-cart[b-16gzt23stx] {
        border-color: #667eea;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    }

.product-image-wrapper[b-16gzt23stx] {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.product-image[b-16gzt23stx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-image[b-16gzt23stx] {
    transform: scale(1.1);
}

.product-image-placeholder[b-16gzt23stx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    font-size: 48px;
}

.stock-alert[b-16gzt23stx] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.product-info[b-16gzt23stx] {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-name[b-16gzt23stx] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
}

.product-code[b-16gzt23stx] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

.product-details[b-16gzt23stx] {
    margin-bottom: 20px;
}

.detail-item[b-16gzt23stx] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.detail-label[b-16gzt23stx] {
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-16gzt23stx] {
    font-weight: 600;
    color: #1f2937;
}

.price-value[b-16gzt23stx] {
    color: #4c1d95;
    font-weight: 700;
}

.stock-value[b-16gzt23stx] {
    color: #059669;
    font-weight: 700;
}

/* Quantity Controls */
.quantity-controls[b-16gzt23stx] {
    display: flex;
    align-items: center;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 12px;
}

.qty-btn[b-16gzt23stx] {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #667eea;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
}

    .qty-btn:hover[b-16gzt23stx] {
        background: rgba(102, 126, 234, 0.2);
    }

    .qty-btn.minus[b-16gzt23stx] {
        color: #ef4444;
    }

    .qty-btn.plus[b-16gzt23stx] {
        color: #10b981;
    }

.qty-input[b-16gzt23stx] {
    flex: 1;
    border: none;
    background: white;
    height: 40px;
    text-align: center;
    font-weight: 600;
    color: #4c1d95;
    border-radius: 8px;
    font-size: 16px;
}

    .qty-input:focus[b-16gzt23stx] {
        outline: none;
    }

/* Cart Item Quantity Display */
.item-quantity[b-16gzt23stx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.qty-value[b-16gzt23stx] {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
    min-width: 40px;
    text-align: center;
}

/* Product Card Buttons */
.btn-add-to-cart[b-16gzt23stx] {
    margin-top: auto;
    padding: 12px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    font-size: 16px;
}

    .btn-add-to-cart:hover[b-16gzt23stx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
    }

.btn-remove-from-cart[b-16gzt23stx] {
    margin-top: auto;
    padding: 12px;
    border: none;
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    font-size: 16px;
}

    .btn-remove-from-cart:hover[b-16gzt23stx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(239, 68, 68, 0.3);
    }

/* Header Action Buttons */
.btn-action-primary[b-16gzt23stx] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

    .btn-action-primary:hover[b-16gzt23stx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-action-secondary[b-16gzt23stx] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-secondary:hover[b-16gzt23stx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.cart-badge[b-16gzt23stx] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
}

/* Pagination */
.pagination-section[b-16gzt23stx] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 32px 0;
}

.page-btn[b-16gzt23stx] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-16gzt23stx] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-16gzt23stx] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Empty State */
.empty-state[b-16gzt23stx] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
}

.empty-icon[b-16gzt23stx] {
    font-size: 80px;
    margin-bottom: 24px;
    color: #9333ea;
    opacity: 0.5;
}

.empty-title[b-16gzt23stx] {
    font-size: 28px;
    color: #4c1d95;
    margin-bottom: 12px;
    font-weight: 700;
}

.empty-description[b-16gzt23stx] {
    font-size: 18px;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
}

/* Loading State */
.loading-container[b-16gzt23stx] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
}

.loading-spinner[b-16gzt23stx] {
    margin-bottom: 24px;
}

.loading-text[b-16gzt23stx] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

.spinner-border[b-16gzt23stx] {
    width: 60px;
    height: 60px;
    border-width: 4px;
}

/* Floating Cart Button */
.floating-cart-button[b-16gzt23stx] {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50px;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

    .floating-cart-button:hover[b-16gzt23stx] {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
    }

.cart-count[b-16gzt23stx] {
    background: white;
    color: #4c1d95;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

/* Cart Modal */
.modal-backdrop[b-16gzt23stx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1000;
}

.cart-modal[b-16gzt23stx] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: zoomIn-b-16gzt23stx 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

@keyframes zoomIn-b-16gzt23stx {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.cart-header[b-16gzt23stx] {
    padding: 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.cart-title[b-16gzt23stx] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-close[b-16gzt23stx] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .btn-close:hover[b-16gzt23stx] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.cart-items[b-16gzt23stx] {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 200px);
}

.cart-item[b-16gzt23stx] {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

    .cart-item:hover[b-16gzt23stx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

.item-image[b-16gzt23stx] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    margin-right: 16px;
    flex-shrink: 0;
}

    .item-image img[b-16gzt23stx] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-placeholder[b-16gzt23stx] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 24px;
}

.item-details[b-16gzt23stx] {
    flex: 1;
}

.item-name[b-16gzt23stx] {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #1f2937;
}

.item-code[b-16gzt23stx] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.btn-remove[b-16gzt23stx] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 16px;
}

    .btn-remove:hover[b-16gzt23stx] {
        background: rgba(239, 68, 68, 0.2);
        transform: rotate(90deg);
    }

.cart-summary[b-16gzt23stx] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    padding: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.summary-row[b-16gzt23stx] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
}

    .summary-row:last-child[b-16gzt23stx] {
        margin-bottom: 0;
    }

.summary-label[b-16gzt23stx] {
    font-weight: 500;
    color: #6b7280;
}

.summary-value[b-16gzt23stx] {
    font-weight: 700;
    color: #4c1d95;
}

.cart-note[b-16gzt23stx] {
    padding: 24px;
}

.note-label[b-16gzt23stx] {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #4c1d95;
}

.note-input[b-16gzt23stx] {
    width: 100%;
    border: 1px solid rgba(102, 126, 234, 0.2);
    background: white;
    border-radius: 12px;
    padding: 12px;
    font-size: 16px;
    resize: none;
}

    .note-input:focus[b-16gzt23stx] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.cart-actions[b-16gzt23stx] {
    padding: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.btn-primary[b-16gzt23stx] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    font-size: 16px;
}

    .btn-primary:hover[b-16gzt23stx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-16gzt23stx] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-secondary[b-16gzt23stx] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

    .btn-secondary:hover[b-16gzt23stx] {
        background: rgba(102, 126, 234, 0.2);
    }

/* Pending and Completed Requests */
.pending-requests-section[b-16gzt23stx],
.history-section[b-16gzt23stx] {
    margin-bottom: 32px;
}

.requests-list[b-16gzt23stx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.request-card[b-16gzt23stx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .request-card:hover[b-16gzt23stx] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .request-card.pending[b-16gzt23stx] {
        border-left: 4px solid #f59e0b;
    }

    .request-card.completed[b-16gzt23stx] {
        border-left: 4px solid #10b981;
    }

.request-header[b-16gzt23stx] {
    padding: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.request-info[b-16gzt23stx] {
    flex: 1;
}

.request-number[b-16gzt23stx] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1f2937;
}

.request-date[b-16gzt23stx] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.request-status[b-16gzt23stx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

    .request-status.pending[b-16gzt23stx] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .request-status.completed[b-16gzt23stx] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

.request-items[b-16gzt23stx] {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

    .request-items p[b-16gzt23stx] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #6b7280;
    }

    .request-items i[b-16gzt23stx] {
        color: #667eea;
    }

.request-actions[b-16gzt23stx] {
    padding: 0 20px 20px;
    display: flex;
    justify-content: flex-end;
}

.btn-view-details[b-16gzt23stx] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

    .btn-view-details:hover[b-16gzt23stx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
    }

/* Unauthorized Message */
.unauthorized-message[b-16gzt23stx] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-message i[b-16gzt23stx] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-message h3[b-16gzt23stx] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-message p[b-16gzt23stx] {
        font-size: 18px;
        color: #6b7280;
        max-width: 600px;
        margin: 0 auto;
    }

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

/* Responsive Design */
@media (max-width: 992px) {
    .header-content[b-16gzt23stx] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-16gzt23stx] {
        width: 100%;
        justify-content: space-between;
        margin-top: 16px;
    }

    .search-filter-section[b-16gzt23stx] {
        flex-direction: column;
    }

    .filter-controls[b-16gzt23stx] {
        width: 100%;
    }

    .filter-select[b-16gzt23stx] {
        flex: 1;
    }

    .cart-modal[b-16gzt23stx] {
        width: 95%;
    }
}

@media (max-width: 768px) {
    .request-inventory-page[b-16gzt23stx] {
        padding: 16px;
    }

    .products-grid[b-16gzt23stx] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .requests-list[b-16gzt23stx] {
        grid-template-columns: 1fr;
    }

    .page-title[b-16gzt23stx] {
        font-size: 28px;
    }

    .page-subtitle[b-16gzt23stx] {
        font-size: 16px;
    }

    .tab-navigation[b-16gzt23stx] {
        flex-direction: column;
        gap: 8px;
    }

    .floating-cart-button[b-16gzt23stx] {
        bottom: 20px;
        right: 20px;
        padding: 12px 24px;
    }

    .cart-text[b-16gzt23stx] {
        display: none;
    }

    .cart-actions[b-16gzt23stx] {
        flex-direction: column;
    }

    .btn-primary[b-16gzt23stx],
    .btn-secondary[b-16gzt23stx] {
        width: 100%;
    }
}

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

    .page-header-section[b-16gzt23stx] {
        padding: 16px;
    }

    .btn-action-primary[b-16gzt23stx],
    .btn-action-secondary[b-16gzt23stx] {
        padding: 10px 16px;
        font-size: 14px;
    }

    .cart-items[b-16gzt23stx] {
        padding: 16px;
    }

    .cart-item[b-16gzt23stx] {
        flex-direction: column;
        align-items: flex-start;
    }

    .item-image[b-16gzt23stx] {
        width: 100%;
        height: 120px;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .btn-remove[b-16gzt23stx] {
        position: absolute;
        top: 16px;
        right: 16px;
        margin-left: 0;
    }

    .item-details[b-16gzt23stx] {
        width: 100%;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .request-inventory-page[b-16gzt23stx] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .request-inventory-page[b-16gzt23stx]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-section[b-16gzt23stx],
[data-theme="dark"] .product-card[b-16gzt23stx],
[data-theme="dark"] .request-card[b-16gzt23stx],
[data-theme="dark"] .empty-state[b-16gzt23stx],
[data-theme="dark"] .loading-container[b-16gzt23stx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .cart-modal[b-16gzt23stx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
}

[data-theme="dark"] .cart-item[b-16gzt23stx] {
    background: #1e293b;
}

[data-theme="dark"] .page-title[b-16gzt23stx] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle[b-16gzt23stx],
[data-theme="dark"] .product-code[b-16gzt23stx],
[data-theme="dark"] .detail-label[b-16gzt23stx],
[data-theme="dark"] .request-date[b-16gzt23stx] {
    color: #9ca3af;
}

[data-theme="dark"] .product-name[b-16gzt23stx],
[data-theme="dark"] .detail-value[b-16gzt23stx],
[data-theme="dark"] .request-number[b-16gzt23stx],
[data-theme="dark"] .item-name[b-16gzt23stx] {
    color: #e2e8f0;
}

[data-theme="dark"] .search-input[b-16gzt23stx],
[data-theme="dark"] .filter-select[b-16gzt23stx],
[data-theme="dark"] .note-input[b-16gzt23stx] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-16gzt23stx],
    [data-theme="dark"] .filter-select:focus[b-16gzt23stx],
    [data-theme="dark"] .note-input:focus[b-16gzt23stx] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .qty-input[b-16gzt23stx] {
    background: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

[data-theme="dark"] .cart-title[b-16gzt23stx],
[data-theme="dark"] .empty-title[b-16gzt23stx],
[data-theme="dark"] .note-label[b-16gzt23stx] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-description[b-16gzt23stx],
[data-theme="dark"] .loading-text[b-16gzt23stx],
[data-theme="dark"] .item-code[b-16gzt23stx],
[data-theme="dark"] .summary-label[b-16gzt23stx] {
    color: #9ca3af;
}

[data-theme="dark"] .summary-value[b-16gzt23stx] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-secondary[b-16gzt23stx] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-secondary:hover[b-16gzt23stx] {
        background: rgba(167, 139, 250, 0.2);
    }

/* RTL Support */
html[dir="rtl"] .search-box i[b-16gzt23stx] {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .search-input[b-16gzt23stx] {
    padding-left: 16px;
    padding-right: 48px;
}

html[dir="rtl"] .filter-select[b-16gzt23stx] {
    background-position: left 12px center;
    padding-right: 16px;
    padding-left: 40px;
}

html[dir="rtl"] .item-image[b-16gzt23stx] {
    margin-right: 0;
    margin-left: 16px;
}

html[dir="rtl"] .btn-remove[b-16gzt23stx] {
    margin-left: 0;
    margin-right: 16px;
}

html[dir="rtl"] .request-card.pending[b-16gzt23stx],
html[dir="rtl"] .request-card.completed[b-16gzt23stx] {
    border-left: none;
    border-right: 4px solid;
}

html[dir="rtl"] .request-card.pending[b-16gzt23stx] {
    border-right-color: #f59e0b;
}

html[dir="rtl"] .request-card.completed[b-16gzt23stx] {
    border-right-color: #10b981;
}

html[dir="rtl"] .floating-cart-button[b-16gzt23stx] {
    right: auto;
    left: 32px;
}

@media (max-width: 480px) {
    html[dir="rtl"] .btn-remove[b-16gzt23stx] {
        right: auto;
        left: 16px;
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentSalePage.razor.rz.scp.css */

/* ===================================
   Agent Sale Page - Modern Professional CSS
   ���� ����� ��������� - ����� ������� ����
   =================================== */

/* Mobile Sale Container - Modern E-Commerce Style */
.mobile-sale-container[b-c917gzdpth] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow-x: hidden;
    padding-bottom: 80px; /* Space for bottom navigation */
}

    .mobile-sale-container[b-c917gzdpth]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 300px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .mobile-sale-container > *[b-c917gzdpth] {
        position: relative;
        z-index: 1;
    }

/* Mobile Header - Modern Glass Effect */
.mobile-header[b-c917gzdpth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 0;
}

.back-btn[b-c917gzdpth] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 18px;
}

    .back-btn:hover[b-c917gzdpth] {
        background: var(--gradient-primary);
        color: white;
        transform: translateY(-2px);
        box-shadow: var(--glow-primary);
    }

.header-title[b-c917gzdpth] {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    flex: 1;
}

.cart-btn[b-c917gzdpth] {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 18px;
    box-shadow: var(--shadow-md);
}

    .cart-btn:hover[b-c917gzdpth] {
        transform: translateY(-2px) scale(1.05);
        box-shadow: var(--glow-primary), var(--shadow-xl);
    }

.cart-badge[b-c917gzdpth] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--gradient-warm);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    animation: pulse-b-c917gzdpth 2s infinite;
}

/* Sale Steps - Modern Stepper */
.sale-steps[b-c917gzdpth] {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    margin: var(--spacing-md);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .sale-steps[b-c917gzdpth]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        opacity: 0.3;
    }

.step[b-c917gzdpth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    position: relative;
    flex: 1;
}

    .step:not(:last-child)[b-c917gzdpth]::after {
        content: '';
        position: absolute;
        top: 20px;
        right: -50%;
        width: 100%;
        height: 2px;
        background: var(--border-color);
        z-index: -1;
    }

    .step.active:not(:last-child)[b-c917gzdpth]::after {
        background: var(--gradient-primary);
    }

    .step:hover[b-c917gzdpth] {
        background: rgba(102, 126, 234, 0.05);
    }

.step-number[b-c917gzdpth] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-muted);
    transition: all var(--transition-base);
    font-size: 14px;
}

.step.active .step-number[b-c917gzdpth] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: var(--glow-primary);
    transform: scale(1.1);
}

.step.current .step-number[b-c917gzdpth] {
    animation: pulse-b-c917gzdpth 2s infinite;
}

.step-text[b-c917gzdpth] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    transition: color var(--transition-fast);
}

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

/* Main Content Area */
.mobile-content[b-c917gzdpth] {
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    transition: transform var(--transition-base);
}

    .mobile-content.cart-open[b-c917gzdpth] {
        transform: translateX(-280px);
    }

/* Loading States */
.loading-container[b-c917gzdpth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    text-align: center;
}

.spinner[b-c917gzdpth] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-c917gzdpth 1s linear infinite;
    margin-bottom: var(--spacing-lg);
}

.spinner-small[b-c917gzdpth] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-c917gzdpth 1s linear infinite;
}

/* Step Content */
.step-content[b-c917gzdpth] {
    margin-bottom: var(--spacing-xl);
}

/* Mobile Search Bar - Modern Style */
.mobile-search-bar[b-c917gzdpth] {
    position: relative;
    margin-bottom: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    overflow: hidden;
}

    .mobile-search-bar:focus-within[b-c917gzdpth] {
        border-color: var(--primary-color);
        box-shadow: var(--glow-primary), var(--shadow-lg);
    }

    .mobile-search-bar i[b-c917gzdpth] {
        position: absolute;
        left: var(--spacing-lg);
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        z-index: 2;
        font-size: 16px;
    }

    .mobile-search-bar input[b-c917gzdpth] {
        width: 100%;
        padding: var(--spacing-md) var(--spacing-lg);
        padding-left: calc(var(--spacing-lg) * 2.5);
        padding-right: 50px;
        border: none;
        background: transparent;
        font-size: 16px;
        color: var(--text-primary);
        outline: none;
    }

        .mobile-search-bar input[b-c917gzdpth]::placeholder {
            color: var(--text-tertiary);
        }

.clear-search[b-c917gzdpth] {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .clear-search:hover[b-c917gzdpth] {
        background: var(--primary-color);
        color: white;
    }

/* Products List - Modern Grid */
.mobile-products-list[b-c917gzdpth] {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
}

.mobile-product-item[b-c917gzdpth] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .mobile-product-item[b-c917gzdpth]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity var(--transition-base);
        z-index: 0;
    }

    .mobile-product-item:hover[b-c917gzdpth] {
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow-xl);
        border-color: var(--primary-color);
    }

        .mobile-product-item:hover[b-c917gzdpth]::before {
            opacity: 0.05;
        }

    .mobile-product-item.selected[b-c917gzdpth] {
        border-color: var(--primary-color);
        box-shadow: var(--glow-primary), var(--shadow-xl);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

        .mobile-product-item.selected[b-c917gzdpth]::before {
            opacity: 0.1;
        }

    .mobile-product-item > *[b-c917gzdpth] {
        position: relative;
        z-index: 1;
    }

.product-image[b-c917gzdpth] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .product-image img[b-c917gzdpth] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-base);
    }

    .product-image:hover img[b-c917gzdpth] {
        transform: scale(1.1);
    }

.no-image[b-c917gzdpth] {
    color: var(--text-tertiary);
    font-size: 28px;
}

.sale-badge[b-c917gzdpth] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--gradient-warm);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
}

.product-details[b-c917gzdpth] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

    .product-details h4[b-c917gzdpth] {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
        line-height: 1.4;
    }

.product-info[b-c917gzdpth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.sku[b-c917gzdpth] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.stock[b-c917gzdpth] {
    font-size: 0.875rem;
    color: var(--success-color);
    font-weight: 500;
}

    .stock.low[b-c917gzdpth] {
        color: var(--warning-color);
        background: rgba(245, 158, 11, 0.1);
        padding: 2px 6px;
        border-radius: var(--radius-sm);
    }

.product-price[b-c917gzdpth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
}

.price[b-c917gzdpth] {
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.commission[b-c917gzdpth] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--accent-color);
    background: rgba(245, 158, 11, 0.1);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.selection-icon[b-c917gzdpth] {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    color: var(--success-color);
    font-size: 24px;
    background: white;
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

/* Empty State */
.empty-state[b-c917gzdpth] {
    text-align: center;
    padding: var(--spacing-3xl);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

    .empty-state i[b-c917gzdpth] {
        font-size: 64px;
        color: var(--text-tertiary);
        margin-bottom: var(--spacing-lg);
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-state p[b-c917gzdpth] {
        font-size: 1.125rem;
        color: var(--text-secondary);
        margin: 0;
    }

/* Customer Search Section */
.customer-search[b-c917gzdpth] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

.search-header[b-c917gzdpth] {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

    .search-header h3[b-c917gzdpth] {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-sm);
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .search-header .hint[b-c917gzdpth] {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin: 0;
    }

/* Selected Customer Card */
.selected-customer-card[b-c917gzdpth] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--glow-primary);
    position: relative;
    overflow: hidden;
}

    .selected-customer-card[b-c917gzdpth]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
    }

.customer-avatar[b-c917gzdpth] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.customer-info[b-c917gzdpth] {
    flex: 1;
}

    .customer-info h4[b-c917gzdpth] {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--spacing-xs) 0;
    }

    .customer-info p[b-c917gzdpth] {
        color: var(--text-secondary);
        margin: 0;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

        .customer-info p i[b-c917gzdpth] {
            color: var(--primary-color);
        }

.remove-btn[b-c917gzdpth] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(239, 68, 68, 0.1);
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

    .remove-btn:hover[b-c917gzdpth] {
        background: var(--danger-color);
        color: white;
        transform: scale(1.1);
    }

/* Customers List */
.customers-list[b-c917gzdpth] {
    display: grid;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.customer-item[b-c917gzdpth] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

    .customer-item:hover[b-c917gzdpth] {
        background: var(--hover-background);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .customer-item .customer-avatar[b-c917gzdpth] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .customer-item .customer-info h4[b-c917gzdpth] {
        font-size: 1rem;
    }

.code[b-c917gzdpth] {
    color: var(--primary-color);
    font-weight: 500;
}

/* Payment Section */
.payment-section[b-c917gzdpth] {
    display: grid;
    gap: var(--spacing-xl);
}

.section-block[b-c917gzdpth] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

    .section-block h3[b-c917gzdpth] {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: var(--spacing-md);
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .section-block .hint[b-c917gzdpth] {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin-bottom: var(--spacing-lg);
    }

/* Payment Options */
.payment-options[b-c917gzdpth] {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr 1fr;
}

.payment-option[b-c917gzdpth] {
    cursor: pointer;
}

    .payment-option input[type="radio"][b-c917gzdpth] {
        display: none;
    }

.option-content[b-c917gzdpth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    text-align: center;
}

    .option-content i[b-c917gzdpth] {
        font-size: 28px;
        color: var(--primary-color);
    }

    .option-content span[b-c917gzdpth] {
        font-weight: 600;
        color: var(--text-primary);
    }

.payment-option:hover .option-content[b-c917gzdpth] {
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.05);
}

.payment-option.selected .option-content[b-c917gzdpth] {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    box-shadow: var(--glow-primary);
}

/* Agents Selection */
.select-agents-btn[b-c917gzdpth] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1rem;
    color: var(--text-primary);
}

    .select-agents-btn:hover[b-c917gzdpth] {
        border-color: var(--primary-color);
        background: rgba(102, 126, 234, 0.05);
    }

/* Mobile Dropdown */
.mobile-dropdown[b-c917gzdpth] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    animation: slideUpFull-b-c917gzdpth var(--transition-base);
}

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

    .dropdown-header h4[b-c917gzdpth] {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.close-btn[b-c917gzdpth] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .close-btn:hover[b-c917gzdpth] {
        background: var(--primary-color);
        color: white;
        transform: rotate(90deg);
    }

.dropdown-search[b-c917gzdpth] {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

    .dropdown-search i[b-c917gzdpth] {
        position: absolute;
        left: calc(var(--spacing-lg) + var(--spacing-md));
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
    }

    .dropdown-search input[b-c917gzdpth] {
        width: 100%;
        padding: var(--spacing-md) var(--spacing-lg);
        padding-left: calc(var(--spacing-lg) * 2.5);
        border: 2px solid var(--border-color);
        border-radius: var(--radius-lg);
        font-size: 16px;
        background: var(--bg-tertiary);
        transition: all var(--transition-fast);
    }

        .dropdown-search input:focus[b-c917gzdpth] {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* Agents List */
.agents-list[b-c917gzdpth] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-lg);
}

.agent-item[b-c917gzdpth] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

    .agent-item:hover[b-c917gzdpth] {
        background: var(--hover-background);
        border-color: var(--primary-color);
    }

    .agent-item input[type="checkbox"][b-c917gzdpth] {
        width: 20px;
        height: 20px;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

.agent-name[b-c917gzdpth] {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.agent-id[b-c917gzdpth] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Commission Info */
.commission-info[b-c917gzdpth] {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-top: 1px solid var(--border-color);
}

.info-row[b-c917gzdpth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    font-size: 0.875rem;
}

    .info-row:first-child[b-c917gzdpth] {
        border-bottom: 1px solid rgba(102, 126, 234, 0.2);
        margin-bottom: var(--spacing-sm);
        padding-bottom: var(--spacing-md);
    }

    .info-row strong[b-c917gzdpth] {
        color: var(--primary-color);
        font-weight: 700;
    }

/* Selected Agents */
.selected-agents[b-c917gzdpth] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.agent-chip[b-c917gzdpth] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--gradient-primary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

    .agent-chip button[b-c917gzdpth] {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        width: 20px;
        height: 20px;
        border-radius: var(--radius-full);
        cursor: pointer;
        transition: all var(--transition-fast);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

        .agent-chip button:hover[b-c917gzdpth] {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

/* Mobile Select */
.mobile-select[b-c917gzdpth] {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    font-size: 16px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    cursor: pointer;
}

    .mobile-select:focus[b-c917gzdpth] {
        outline: none;
        border-color: var(--primary-color);
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Installment Button */
.installment-btn[b-c917gzdpth] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--gradient-secondary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: var(--spacing-md);
    box-shadow: var(--shadow-md);
}

    .installment-btn:hover[b-c917gzdpth] {
        transform: translateY(-2px);
        box-shadow: var(--glow-secondary), var(--shadow-xl);
    }

/* Order Summary */
.order-summary[b-c917gzdpth] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--glow-primary);
}

    .order-summary h3[b-c917gzdpth] {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
        color: var(--primary-color);
        text-align: center;
    }

.summary-row[b-c917gzdpth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    font-size: 0.875rem;
}

    .summary-row:not(:last-child)[b-c917gzdpth] {
        border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    }

    .summary-row.commission[b-c917gzdpth] {
        color: var(--accent-color);
        font-weight: 600;
    }

    .summary-row.total[b-c917gzdpth] {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--primary-color);
        padding-top: var(--spacing-md);
        margin-top: var(--spacing-sm);
        border-top: 2px solid var(--primary-color);
    }

/* Bottom Navigation */
.bottom-navigation[b-c917gzdpth] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 200;
}

.nav-btn[b-c917gzdpth] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 48px;
    position: relative;
    overflow: hidden;
}

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

    .nav-btn:hover[b-c917gzdpth]::before {
        width: 200px;
        height: 200px;
    }

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

        .nav-btn:disabled:hover[b-c917gzdpth] {
            transform: none;
            box-shadow: none;
        }

    .nav-btn.prev[b-c917gzdpth] {
        background: var(--gradient-cool);
        color: white;
        box-shadow: var(--shadow-md);
    }

        .nav-btn.prev:hover:not(:disabled)[b-c917gzdpth] {
            transform: translateY(-2px);
            box-shadow: var(--shadow-xl);
        }

    .nav-btn.next[b-c917gzdpth],
    .nav-btn.complete[b-c917gzdpth] {
        background: var(--gradient-primary);
        color: white;
        box-shadow: var(--shadow-md);
    }

        .nav-btn.next:hover:not(:disabled)[b-c917gzdpth],
        .nav-btn.complete:hover:not(:disabled)[b-c917gzdpth] {
            transform: translateY(-2px);
            box-shadow: var(--glow-primary), var(--shadow-xl);
        }

    .nav-btn.complete[b-c917gzdpth] {
        background: var(--gradient-success);
    }

        .nav-btn.complete:hover:not(:disabled)[b-c917gzdpth] {
            box-shadow: var(--glow-secondary), var(--shadow-xl);
        }

/* Cart Drawer */
.cart-drawer[b-c917gzdpth] {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: white;
    z-index: var(--z-modal);
    transition: right var(--transition-base);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

    .cart-drawer.open[b-c917gzdpth] {
        right: 0;
    }

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

    .drawer-header h3[b-c917gzdpth] {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.close-drawer[b-c917gzdpth] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .close-drawer:hover[b-c917gzdpth] {
        background: var(--primary-color);
        color: white;
        transform: rotate(90deg);
    }

.drawer-content[b-c917gzdpth] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-lg);
}

/* Cart Items */
.cart-items[b-c917gzdpth] {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.cart-item[b-c917gzdpth] {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.item-image[b-c917gzdpth] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .item-image img[b-c917gzdpth] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.no-image-small[b-c917gzdpth] {
    color: var(--text-tertiary);
    font-size: 20px;
}

.item-info[b-c917gzdpth] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

    .item-info h5[b-c917gzdpth] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
        line-height: 1.3;
    }

.price-edit[b-c917gzdpth] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.price-input[b-c917gzdpth] {
    width: 70px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    text-align: center;
    background: white;
}

    .price-input:focus[b-c917gzdpth] {
        outline: none;
        border-color: var(--primary-color);
    }

.currency[b-c917gzdpth] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Quantity Controls */
.quantity-controls[b-c917gzdpth] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: white;
    border-radius: var(--radius-md);
    padding: 2px;
    border: 1px solid var(--border-color);
}

    .quantity-controls button[b-c917gzdpth] {
        width: 28px;
        height: 28px;
        border: none;
        background: transparent;
        color: var(--primary-color);
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: all var(--transition-fast);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

        .quantity-controls button:hover[b-c917gzdpth] {
            background: var(--primary-color);
            color: white;
        }

    .quantity-controls span[b-c917gzdpth] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        min-width: 24px;
        text-align: center;
    }

.remove-item[b-c917gzdpth] {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

    .remove-item:hover[b-c917gzdpth] {
        background: var(--danger-color);
        color: white;
        transform: scale(1.1);
    }

/* Cart Summary */
.cart-summary[b-c917gzdpth] {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--primary-color);
}

    .cart-summary .summary-row[b-c917gzdpth] {
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary-color);
    }

/* Clear Cart Button */
.clear-cart-btn[b-c917gzdpth] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--gradient-secondary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

    .clear-cart-btn:hover[b-c917gzdpth] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

/* Empty Cart */
.empty-cart[b-c917gzdpth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    text-align: center;
}

    .empty-cart i[b-c917gzdpth] {
        font-size: 64px;
        color: var(--text-tertiary);
        margin-bottom: var(--spacing-lg);
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-cart p[b-c917gzdpth] {
        font-size: 1.125rem;
        color: var(--text-secondary);
        margin: 0;
    }

/* Drawer Overlay */
.drawer-overlay[b-c917gzdpth] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-modal) - 1);
    backdrop-filter: blur(4px);
    animation: fadeIn-b-c917gzdpth var(--transition-base);
}

/* Products Loading */
.products-loading[b-c917gzdpth] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
}

/* Animations */
@keyframes slideUpFull-b-c917gzdpth {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
    }
}

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

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

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

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

/* Dark Theme Support */
[data-theme="dark"] .mobile-sale-container[b-c917gzdpth] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .mobile-sale-container[b-c917gzdpth]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .mobile-header[b-c917gzdpth],
[data-theme="dark"] .sale-steps[b-c917gzdpth],
[data-theme="dark"] .section-block[b-c917gzdpth],
[data-theme="dark"] .customer-search[b-c917gzdpth],
[data-theme="dark"] .mobile-product-item[b-c917gzdpth],
[data-theme="dark"] .empty-state[b-c917gzdpth],
[data-theme="dark"] .bottom-navigation[b-c917gzdpth],
[data-theme="dark"] .cart-drawer[b-c917gzdpth] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .mobile-dropdown[b-c917gzdpth] {
    background: #1e293b;
}

[data-theme="dark"] .dropdown-header[b-c917gzdpth] {
    background: #334155;
}

[data-theme="dark"] .customer-item[b-c917gzdpth],
[data-theme="dark"] .cart-item[b-c917gzdpth] {
    background: #334155;
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .customer-item:hover[b-c917gzdpth],
    [data-theme="dark"] .cart-item:hover[b-c917gzdpth] {
        background: #475569;
    }

[data-theme="dark"] .mobile-search-bar[b-c917gzdpth],
[data-theme="dark"] .mobile-select[b-c917gzdpth],
[data-theme="dark"] .price-input[b-c917gzdpth] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .mobile-search-bar:focus-within[b-c917gzdpth],
    [data-theme="dark"] .mobile-select:focus[b-c917gzdpth],
    [data-theme="dark"] .price-input:focus[b-c917gzdpth] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #5a6cb3;
    }

[data-theme="dark"] .product-details h4[b-c917gzdpth],
[data-theme="dark"] .customer-info h4[b-c917gzdpth],
[data-theme="dark"] .header-title[b-c917gzdpth],
[data-theme="dark"] .search-header h3[b-c917gzdpth],
[data-theme="dark"] .section-block h3[b-c917gzdpth],
[data-theme="dark"] .drawer-header h3[b-c917gzdpth] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .option-content[b-c917gzdpth],
[data-theme="dark"] .select-agents-btn[b-c917gzdpth] {
    background: #334155;
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .option-content:hover[b-c917gzdpth],
    [data-theme="dark"] .select-agents-btn:hover[b-c917gzdpth] {
        background: #475569;
    }

[data-theme="dark"] .payment-option.selected .option-content[b-c917gzdpth] {
    background: linear-gradient(135deg, rgba(90, 108, 179, 0.2) 0%, rgba(98, 81, 139, 0.2) 100%);
    border-color: #5a6cb3;
}

[data-theme="dark"] .order-summary[b-c917gzdpth],
[data-theme="dark"] .cart-summary[b-c917gzdpth],
[data-theme="dark"] .commission-info[b-c917gzdpth] {
    background: linear-gradient(135deg, rgba(90, 108, 179, 0.15) 0%, rgba(98, 81, 139, 0.15) 100%);
    border-color: #5a6cb3;
}

[data-theme="dark"] .quantity-controls[b-c917gzdpth] {
    background: #334155;
    border-color: rgba(71, 85, 105, 0.5);
}

/* Responsive Design */
@media (max-width: 480px) {
    .mobile-header[b-c917gzdpth] {
        padding: var(--spacing-md);
    }

    .header-title[b-c917gzdpth] {
        font-size: 1.25rem;
    }

    .sale-steps[b-c917gzdpth] {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
    }

    .step-number[b-c917gzdpth] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .step-text[b-c917gzdpth] {
        font-size: 0.75rem;
    }

    .mobile-content[b-c917gzdpth] {
        padding: 0 var(--spacing-sm);
    }

    .section-block[b-c917gzdpth] {
        padding: var(--spacing-lg);
    }

    .payment-options[b-c917gzdpth] {
        grid-template-columns: 1fr;
    }

    .cart-drawer[b-c917gzdpth] {
        width: 100%;
        right: -100%;
    }

    .mobile-product-item[b-c917gzdpth] {
        padding: var(--spacing-md);
    }

    .product-image[b-c917gzdpth] {
        width: 70px;
        height: 70px;
    }

    .customer-avatar[b-c917gzdpth] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .bottom-navigation[b-c917gzdpth] {
        padding: var(--spacing-sm);
    }

    .nav-btn[b-c917gzdpth] {
        font-size: 0.875rem;
        padding: var(--spacing-sm);
    }
}

@media (max-width: 360px) {
    .sale-steps[b-c917gzdpth] {
        gap: var(--spacing-xs);
    }

    .step[b-c917gzdpth] {
        padding: var(--spacing-xs);
    }

    .step-number[b-c917gzdpth] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .step-text[b-c917gzdpth] {
        font-size: 0.7rem;
    }

    .mobile-product-item[b-c917gzdpth] {
        flex-direction: column;
        text-align: center;
    }

    .product-image[b-c917gzdpth] {
        width: 100%;
        height: 120px;
    }

    .product-info[b-c917gzdpth] {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

/* Print Styles */
@media print {
    .mobile-sale-container[b-c917gzdpth] {
        background: white !important;
    }

    .mobile-header[b-c917gzdpth],
    .bottom-navigation[b-c917gzdpth],
    .cart-drawer[b-c917gzdpth],
    .back-btn[b-c917gzdpth],
    .cart-btn[b-c917gzdpth] {
        display: none !important;
    }

    .mobile-content[b-c917gzdpth] {
        padding: 0 !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .mobile-product-item[b-c917gzdpth],
    .customer-item[b-c917gzdpth],
    .cart-item[b-c917gzdpth] {
        border: 2px solid currentColor;
    }

    .btn-gradient-primary[b-c917gzdpth],
    .btn-gradient-secondary[b-c917gzdpth],
    .nav-btn[b-c917gzdpth] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-c917gzdpth] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus States for Accessibility */
*:focus-visible[b-c917gzdpth] {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

button:focus-visible[b-c917gzdpth],
.nav-btn:focus-visible[b-c917gzdpth] {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.2);
}

input:focus-visible[b-c917gzdpth],
select:focus-visible[b-c917gzdpth] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

.inventory-source-toggle[b-c917gzdpth] {
    margin-bottom: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
}

.toggle-header h3[b-c917gzdpth] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.toggle-header .hint[b-c917gzdpth] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #666;
}

.toggle-options[b-c917gzdpth] {
    display: flex;
    gap: 12px;
}

.toggle-option[b-c917gzdpth] {
    flex: 1;
    cursor: pointer;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    background: white;
    transition: all 0.3s ease;
    display: block;
}

    .toggle-option.selected[b-c917gzdpth] {
        border-color: #007bff;
        background: #f0f8ff;
    }

    .toggle-option input[type="radio"][b-c917gzdpth] {
        display: none;
    }

    .toggle-option .option-content[b-c917gzdpth] {
        text-align: center;
    }

        .toggle-option .option-content i[b-c917gzdpth] {
            font-size: 20px;
            color: #007bff;
            margin-bottom: 8px;
            display: block;
        }

        .toggle-option .option-content span[b-c917gzdpth] {
            display: block;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }

        .toggle-option .option-content small[b-c917gzdpth] {
            display: block;
            font-size: 11px;
            color: #666;
        }

.source-badge[b-c917gzdpth] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    color: white;
    z-index: 2;
}

    .source-badge.merchant[b-c917gzdpth] {
        background: #28a745;
    }

    .source-badge.agent[b-c917gzdpth] {
        background: #007bff;
    }

.summary-info[b-c917gzdpth] {
    margin-top: 12px;
    padding: 8px 12px;
    background: #e8f5e8;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .summary-info i[b-c917gzdpth] {
        color: #28a745;
        font-size: 12px;
    }

    .summary-info small[b-c917gzdpth] {
        color: #155724;
        font-size: 11px;
        margin: 0;
    }

.sale-date-selector[b-c917gzdpth] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
}

.date-input-mobile[b-c917gzdpth] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.date-note-mobile[b-c917gzdpth] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.mobile-header[b-c917gzdpth] {
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .sale-date-selector[b-c917gzdpth] {
        width: 100%;
        margin-top: 0.5rem;
        justify-content: center;
    }
}

.add-customer-section[b-c917gzdpth] {
    margin: 1rem 0;
    text-align: center;
}

.add-customer-btn[b-c917gzdpth] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color, #007bff);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .add-customer-btn:hover[b-c917gzdpth] {
        background-color: var(--primary-hover, #0056b3);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .add-customer-btn i[b-c917gzdpth] {
        font-size: 1.1rem;
    }
/* ����� ����� ���� ��� ������� �� ������ */
.installment-summary-section[b-c917gzdpth] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #e0e0e0;
}

.installment-summary-title[b-c917gzdpth] {
    font-size: 0.9rem;
    color: #4CAF50;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.installment-formula[b-c917gzdpth] {
    background-color: #f5f5f5;
    padding: 0.75rem;
    border-radius: 8px;
    margin: 0.5rem 0;
}

    .installment-formula label[b-c917gzdpth] {
        display: block;
        font-size: 0.85rem;
        color: #666;
        margin-bottom: 0.25rem;
    }

.formula-display[b-c917gzdpth] {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

.installment-notes[b-c917gzdpth] {
    background-color: #fff9c4;
    padding: 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #666;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

    .installment-notes i[b-c917gzdpth] {
        color: #f9a825;
        margin-top: 2px;
    }

/* ����� ��� ������ ��� �������� */
@media (max-width: 768px) {
    .installment-formula[b-c917gzdpth] {
        padding: 0.5rem;
    }

    .formula-display[b-c917gzdpth] {
        font-size: 0.9rem;
        padding: 0.4rem;
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentSettings.razor.rz.scp.css */

/* Agent Settings Page - Professional Modern Design */
.agent-settings[b-wng6kdh10z] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-settings[b-wng6kdh10z]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-settings > *[b-wng6kdh10z] {
        position: relative;
        z-index: 1;
    }

/* Settings Header */
.settings-header[b-wng6kdh10z] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-wng6kdh10z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title[b-wng6kdh10z] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-wng6kdh10z] {
        font-size: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-subtitle[b-wng6kdh10z] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Loading Container */
.loading-container[b-wng6kdh10z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 20px;
}

.spinner-modern[b-wng6kdh10z] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-wng6kdh10z 0.8s linear infinite;
}

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

.loading-container p[b-wng6kdh10z] {
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
}

/* Settings Content */
.settings-content[b-wng6kdh10z] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Settings Card */
.settings-card[b-wng6kdh10z] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .settings-card:hover[b-wng6kdh10z] {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

.card-header[b-wng6kdh10z] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .card-header h2[b-wng6kdh10z] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .card-header h2 i[b-wng6kdh10z] {
            font-size: 18px;
            color: #667eea;
        }

.card-body[b-wng6kdh10z] {
    padding: 24px;
}

/* Info Grid */
.info-grid[b-wng6kdh10z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.info-item[b-wng6kdh10z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .info-item label[b-wng6kdh10z] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.info-value[b-wng6kdh10z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    color: #1f2937;
}

    .info-value:hover[b-wng6kdh10z] {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.2);
        transform: translateX(4px);
    }

    .info-value i[b-wng6kdh10z] {
        color: #667eea;
        font-size: 16px;
    }

/* Status Badge */
.status-badge[b-wng6kdh10z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.active[b-wng6kdh10z] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-wng6kdh10z] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .status-badge i[b-wng6kdh10z] {
        font-size: 12px;
    }

/* Role Info */
.role-info[b-wng6kdh10z] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role-badge[b-wng6kdh10z] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

    .role-badge[b-wng6kdh10z]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(45deg);
        transition: all 0.6s;
    }

    .role-badge:hover[b-wng6kdh10z]::before {
        left: 100%;
    }

    .role-badge.commission[b-wng6kdh10z] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .role-badge.partner[b-wng6kdh10z] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
    }

    .role-badge.fixed[b-wng6kdh10z] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
    }

    .role-badge i[b-wng6kdh10z] {
        font-size: 18px;
    }

.role-details[b-wng6kdh10z] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.role-description[b-wng6kdh10z] {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.commission-info[b-wng6kdh10z],
.salary-info[b-wng6kdh10z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    font-size: 16px;
    color: #4c1d95;
}

    .commission-info i[b-wng6kdh10z],
    .salary-info i[b-wng6kdh10z] {
        font-size: 20px;
        color: #667eea;
    }

    .commission-info strong[b-wng6kdh10z],
    .salary-info strong[b-wng6kdh10z] {
        font-size: 18px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Wallet Summary */
.wallet-summary[b-wng6kdh10z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.wallet-item[b-wng6kdh10z] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .wallet-item:hover[b-wng6kdh10z] {
        transform: translateY(-4px);
        border-color: rgba(102, 126, 234, 0.2);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
    }

.wallet-icon[b-wng6kdh10z] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .wallet-icon.available[b-wng6kdh10z] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .wallet-icon.total[b-wng6kdh10z] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .wallet-icon.pending[b-wng6kdh10z] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

.wallet-details[b-wng6kdh10z] {
    flex: 1;
}

    .wallet-details label[b-wng6kdh10z] {
        font-size: 14px;
        color: #6b7280;
        display: block;
        margin-bottom: 4px;
    }

    .wallet-details .amount[b-wng6kdh10z] {
        font-size: 24px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Support Section */
.support-section[b-wng6kdh10z] {
    margin-top: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

    .support-section[b-wng6kdh10z]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: float-b-wng6kdh10z 6s ease-in-out infinite;
    }

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

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

.support-content[b-wng6kdh10z] {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

    .support-content > i[b-wng6kdh10z] {
        font-size: 48px;
        color: rgba(255, 255, 255, 0.9);
    }

    .support-content > div[b-wng6kdh10z] {
        flex: 1;
    }

    .support-content h3[b-wng6kdh10z] {
        margin: 0 0 8px 0;
        font-size: 24px;
        color: white;
        font-weight: 700;
    }

    .support-content p[b-wng6kdh10z] {
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
    }

.btn-support[b-wng6kdh10z] {
    background: white;
    color: #667eea;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .btn-support:hover[b-wng6kdh10z] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

/* No Data State */
.no-data[b-wng6kdh10z] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .no-data i[b-wng6kdh10z] {
        font-size: 80px;
        color: #f59e0b;
        margin-bottom: 20px;
    }

    .no-data p[b-wng6kdh10z] {
        font-size: 18px;
        color: #6b7280;
        margin: 0;
    }

/* Unauthorized Container */
.unauthorized-container[b-wng6kdh10z] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 20px;
}

.unauthorized-content[b-wng6kdh10z] {
    text-align: center;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

    .unauthorized-content i[b-wng6kdh10z] {
        font-size: 80px;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-wng6kdh10z] {
        font-size: 28px;
        color: #1f2937;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-wng6kdh10z] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 32px;
    }

.btn[b-wng6kdh10z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.btn-primary[b-wng6kdh10z] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .btn-primary:hover[b-wng6kdh10z] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

/* Dark Theme Support */
[data-theme="dark"] .agent-settings[b-wng6kdh10z] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-settings[b-wng6kdh10z]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .settings-header[b-wng6kdh10z],
[data-theme="dark"] .settings-card[b-wng6kdh10z],
[data-theme="dark"] .no-data[b-wng6kdh10z],
[data-theme="dark"] .unauthorized-content[b-wng6kdh10z] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .card-header[b-wng6kdh10z] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .info-value[b-wng6kdh10z] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .info-value:hover[b-wng6kdh10z] {
        background: rgba(102, 126, 234, 0.2);
    }

[data-theme="dark"] .page-title[b-wng6kdh10z],
[data-theme="dark"] .wallet-details .amount[b-wng6kdh10z] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle[b-wng6kdh10z],
[data-theme="dark"] .role-description[b-wng6kdh10z],
[data-theme="dark"] .loading-container p[b-wng6kdh10z],
[data-theme="dark"] .no-data p[b-wng6kdh10z],
[data-theme="dark"] .unauthorized-content p[b-wng6kdh10z] {
    color: #9ca3af;
}

[data-theme="dark"] .card-header h2[b-wng6kdh10z],
[data-theme="dark"] .info-item label[b-wng6kdh10z] {
    color: #e2e8f0;
}

[data-theme="dark"] .commission-info[b-wng6kdh10z],
[data-theme="dark"] .salary-info[b-wng6kdh10z] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .wallet-item[b-wng6kdh10z] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.05) 0%, rgba(192, 132, 252, 0.05) 100%);
}

    [data-theme="dark"] .wallet-item:hover[b-wng6kdh10z] {
        border-color: rgba(167, 139, 250, 0.2);
    }

[data-theme="dark"] .wallet-details label[b-wng6kdh10z] {
    color: #9ca3af;
}

[data-theme="dark"] .unauthorized-content h3[b-wng6kdh10z] {
    color: #e2e8f0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .agent-settings[b-wng6kdh10z] {
        padding: 16px;
    }

    .settings-header[b-wng6kdh10z] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-wng6kdh10z] {
        font-size: 28px;
    }

        .page-title i[b-wng6kdh10z] {
            font-size: 24px;
        }

    .page-subtitle[b-wng6kdh10z] {
        font-size: 16px;
    }

    .info-grid[b-wng6kdh10z] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .wallet-summary[b-wng6kdh10z] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .support-content[b-wng6kdh10z] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

        .support-content > i[b-wng6kdh10z] {
            font-size: 36px;
        }

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

    .role-badge[b-wng6kdh10z] {
        font-size: 14px;
        padding: 10px 20px;
    }

        .role-badge i[b-wng6kdh10z] {
            font-size: 16px;
        }

    .commission-info strong[b-wng6kdh10z],
    .salary-info strong[b-wng6kdh10z] {
        font-size: 16px;
    }

    .wallet-icon[b-wng6kdh10z] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .wallet-details .amount[b-wng6kdh10z] {
        font-size: 20px;
    }

    .support-section[b-wng6kdh10z] {
        padding: 24px 20px;
    }

    .support-content h3[b-wng6kdh10z] {
        font-size: 20px;
    }

    .support-content p[b-wng6kdh10z] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .page-title[b-wng6kdh10z] {
        font-size: 24px;
        gap: 8px;
    }

    .card-header[b-wng6kdh10z] {
        padding: 16px;
    }

    .card-body[b-wng6kdh10z] {
        padding: 16px;
    }

    .info-value[b-wng6kdh10z] {
        padding: 10px 14px;
        font-size: 14px;
    }

    .wallet-item[b-wng6kdh10z] {
        padding: 16px;
    }

    .wallet-details .amount[b-wng6kdh10z] {
        font-size: 18px;
    }

    .unauthorized-content[b-wng6kdh10z] {
        padding: 40px 20px;
    }
}

/* Print Styles */
@media print {
    .agent-settings[b-wng6kdh10z] {
        background: white !important;
    }

    .support-section[b-wng6kdh10z],
    .btn-support[b-wng6kdh10z] {
        display: none !important;
    }

    .settings-card[b-wng6kdh10z] {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* Animation Classes */
.animate-in[b-wng6kdh10z] {
    animation: fadeInUp-b-wng6kdh10z 0.5s ease-out;
}

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

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

/* RTL Support */
html[dir="rtl"] .info-value:hover[b-wng6kdh10z] {
    transform: translateX(-4px);
}

html[dir="rtl"] .support-content[b-wng6kdh10z] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .role-badge[b-wng6kdh10z],
html[dir="rtl"] .btn-support[b-wng6kdh10z] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .info-value[b-wng6kdh10z],
html[dir="rtl"] .commission-info[b-wng6kdh10z],
html[dir="rtl"] .salary-info[b-wng6kdh10z],
html[dir="rtl"] .wallet-item[b-wng6kdh10z] {
    flex-direction: row-reverse;
}

/* Accessibility */
.settings-card:focus-within[b-wng6kdh10z] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.btn-support:focus[b-wng6kdh10z] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .settings-card[b-wng6kdh10z] {
        border: 2px solid currentColor;
    }

    .btn-support[b-wng6kdh10z] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *[b-wng6kdh10z] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Agent/AgentViewOrder.razor.rz.scp.css */
/* MerchantViewOrder - Professional Modern Design
   متجانس مع التصميم العام للنظام
   ================================================== */

/* Container and Page Layout */
.order-details-container[b-z4dvfb939i] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .order-details-container[b-z4dvfb939i]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .order-details-container > *[b-z4dvfb939i] {
        position: relative;
        z-index: 1;
    }

.order-content[b-z4dvfb939i] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Order Header */
.order-header[b-z4dvfb939i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-left[b-z4dvfb939i] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-back[b-z4dvfb939i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-back:hover[b-z4dvfb939i] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.header-info h1[b-z4dvfb939i] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.breadcrumb[b-z4dvfb939i] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .breadcrumb a[b-z4dvfb939i] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
    }

        .breadcrumb a:hover[b-z4dvfb939i] {
            color: #667eea;
        }

.header-actions[b-z4dvfb939i] {
    display: flex;
    gap: 12px;
}

.btn-action[b-z4dvfb939i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    color: white;
}

    .btn-action.print[b-z4dvfb939i] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    }

        .btn-action.print:hover[b-z4dvfb939i] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
        }

    .btn-action.share[b-z4dvfb939i] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
    }

        .btn-action.share:hover[b-z4dvfb939i] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
        }

    .btn-action.edit[b-z4dvfb939i] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    }

        .btn-action.edit:hover[b-z4dvfb939i] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
        }

/* Status Card */
.status-card[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-header[b-z4dvfb939i] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.status-info[b-z4dvfb939i], .payment-info[b-z4dvfb939i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-label[b-z4dvfb939i], .payment-label[b-z4dvfb939i] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.status-badge[b-z4dvfb939i], .payment-badge[b-z4dvfb939i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
}

.status-pending[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-processing[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.status-shipped[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.2) 100%);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-delivered[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-cancelled[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-returned[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Payment Status */
.payment-pending[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.payment-partial[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.payment-completed[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.payment-failed[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.payment-refunded[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.status-actions[b-z4dvfb939i] {
    display: flex;
    gap: 12px;
}

.btn-status[b-z4dvfb939i] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-status:hover[b-z4dvfb939i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Information Sections */
.info-section[b-z4dvfb939i], .items-section[b-z4dvfb939i], .payment-section[b-z4dvfb939i],
.installment-section[b-z4dvfb939i], .agents-section[b-z4dvfb939i], .timeline-section[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

    .info-section:hover[b-z4dvfb939i], .items-section:hover[b-z4dvfb939i], .payment-section:hover[b-z4dvfb939i],
    .installment-section:hover[b-z4dvfb939i], .agents-section:hover[b-z4dvfb939i], .timeline-section:hover[b-z4dvfb939i] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

.section-header[b-z4dvfb939i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .section-header h3[b-z4dvfb939i] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4c1d95;
    }

        .section-header h3 i[b-z4dvfb939i] {
            color: #667eea;
        }

.info-grid[b-z4dvfb939i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item[b-z4dvfb939i] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .info-item label[b-z4dvfb939i] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

.info-value[b-z4dvfb939i] {
    font-size: 16px;
    font-weight: 500;
}

    .info-value a[b-z4dvfb939i] {
        color: #667eea;
        text-decoration: none;
        transition: all 0.2s;
    }

        .info-value a:hover[b-z4dvfb939i] {
            color: #4f46e5;
            text-decoration: underline;
        }

.customer-link[b-z4dvfb939i], .phone-link[b-z4dvfb939i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Order Items */
.items-count[b-z4dvfb939i] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.items-table[b-z4dvfb939i] {
    margin-top: 20px;
}

.table[b-z4dvfb939i] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th[b-z4dvfb939i] {
        background: rgba(102, 126, 234, 0.05);
        padding: 12px 16px;
        text-align: right;
        font-weight: 600;
        color: #4c1d95;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .table td[b-z4dvfb939i] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: background 0.2s;
        vertical-align: middle;
    }

    .table tr:hover td[b-z4dvfb939i] {
        background: rgba(102, 126, 234, 0.05);
    }

    .table tr:last-child td[b-z4dvfb939i] {
        border-bottom: none;
    }

.product-info[b-z4dvfb939i] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-z4dvfb939i] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.discount-amount[b-z4dvfb939i] {
    color: #ef4444;
}

.total-price[b-z4dvfb939i] {
    font-weight: 700;
    color: #4c1d95;
}

/* Mobile Items Cards */
.items-mobile[b-z4dvfb939i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-card[b-z4dvfb939i] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.item-header[b-z4dvfb939i] {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.item-image[b-z4dvfb939i] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.item-details[b-z4dvfb939i] {
    flex: 1;
}

    .item-details h4[b-z4dvfb939i] {
        font-size: 16px;
        margin: 0 0 4px 0;
    }

.sku[b-z4dvfb939i] {
    font-size: 12px;
    color: #6b7280;
}

.item-pricing[b-z4dvfb939i] {
    padding: 16px;
}

.price-row[b-z4dvfb939i] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

    .price-row.discount[b-z4dvfb939i] {
        color: #ef4444;
    }

    .price-row.total[b-z4dvfb939i] {
        font-weight: 700;
        border-top: 1px dashed rgba(0, 0, 0, 0.1);
        margin-top: 8px;
        padding-top: 12px;
        font-size: 16px;
    }

/* Payment Summary */
.payment-summary[b-z4dvfb939i] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.summary-row[b-z4dvfb939i] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
}

    .summary-row.discount[b-z4dvfb939i] {
        color: #ef4444;
    }

    .summary-row.total[b-z4dvfb939i] {
        font-size: 20px;
        font-weight: 700;
        border-top: 2px solid rgba(102, 126, 234, 0.1);
        margin-top: 8px;
        padding-top: 12px;
    }

    .summary-row.paid[b-z4dvfb939i] {
        color: #10b981;
        font-weight: 600;
    }

    .summary-row.remaining[b-z4dvfb939i] {
        color: #f59e0b;
        font-weight: 600;
    }

.payment-method[b-z4dvfb939i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .payment-method label[b-z4dvfb939i] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

.method-badge[b-z4dvfb939i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    width: fit-content;
    color: white;
}

.method-cash[b-z4dvfb939i] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.method-card[b-z4dvfb939i] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.method-installment[b-z4dvfb939i] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.method-vodafone[b-z4dvfb939i], .method-etisalat[b-z4dvfb939i], .method-orange[b-z4dvfb939i] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.method-paypal[b-z4dvfb939i], .method-stripe[b-z4dvfb939i], .method-default[b-z4dvfb939i] {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
}

/* Installment Plan */
.plan-status[b-z4dvfb939i] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.plan-active[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
}

.plan-completed[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
}

.plan-defaulted[b-z4dvfb939i], .plan-cancelled[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
}

.plan-onhold[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
}

.installments-schedule[b-z4dvfb939i] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .installments-schedule h4[b-z4dvfb939i] {
        font-size: 18px;
        margin-bottom: 16px;
        color: #4c1d95;
    }

.schedule-progress[b-z4dvfb939i] {
    margin-bottom: 16px;
}

.progress[b-z4dvfb939i] {
    height: 16px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar[b-z4dvfb939i] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    transition: width 0.3s;
}

.progress-text[b-z4dvfb939i] {
    font-size: 14px;
    color: #6b7280;
}

.amount-progress[b-z4dvfb939i] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.guarantor-info[b-z4dvfb939i] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .guarantor-info h4[b-z4dvfb939i] {
        font-size: 18px;
        margin-bottom: 16px;
        color: #4c1d95;
    }

/* Agents Section */
.agents-grid[b-z4dvfb939i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.agent-card[b-z4dvfb939i] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

    .agent-card:hover[b-z4dvfb939i] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

    .agent-card.single[b-z4dvfb939i] {
        grid-column: 1 / -1;
        max-width: 400px;
    }

.agent-avatar[b-z4dvfb939i] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

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

.agent-info[b-z4dvfb939i] {
    flex: 1;
}

    .agent-info h5[b-z4dvfb939i] {
        font-size: 16px;
        margin: 0 0 4px 0;
        font-weight: 600;
    }

.agent-phone[b-z4dvfb939i], .agent-commission[b-z4dvfb939i] {
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* Timeline Section */
.timeline[b-z4dvfb939i] {
    position: relative;
    padding-right: 24px;
}

    .timeline[b-z4dvfb939i]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 9px;
        height: 100%;
        width: 2px;
        background: rgba(102, 126, 234, 0.2);
    }

.timeline-item[b-z4dvfb939i] {
    position: relative;
    padding-bottom: 24px;
    padding-right: 36px;
}

.timeline-icon[b-z4dvfb939i] {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    box-shadow: 0 0 0 4px white;
}

    .timeline-icon.created[b-z4dvfb939i] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .timeline-icon.delivered[b-z4dvfb939i] {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    }

.timeline-content[b-z4dvfb939i] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

    .timeline-content h5[b-z4dvfb939i] {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .timeline-content p[b-z4dvfb939i] {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #6b7280;
    }

    .timeline-content small[b-z4dvfb939i] {
        font-size: 12px;
        color: #6b7280;
        display: block;
    }

/* Action Buttons */
.action-buttons[b-z4dvfb939i] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.btn-action.cancel[b-z4dvfb939i] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
}

    .btn-action.cancel:hover[b-z4dvfb939i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(239, 68, 68, 0.3);
    }

.btn-action.return[b-z4dvfb939i] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

    .btn-action.return:hover[b-z4dvfb939i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(245, 158, 11, 0.3);
    }

.btn-action.installments[b-z4dvfb939i] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2);
}

    .btn-action.installments:hover[b-z4dvfb939i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(139, 92, 246, 0.3);
    }

.btn-action.invoice[b-z4dvfb939i] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

    .btn-action.invoice:hover[b-z4dvfb939i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
    }

/* Not Found / Loading / Unauthorized */
.loading-container[b-z4dvfb939i], .not-found-container[b-z4dvfb939i], .unauthorized-content[b-z4dvfb939i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    text-align: center;
    min-height: 60vh;
}

    .not-found-container i[b-z4dvfb939i], .unauthorized-content i[b-z4dvfb939i] {
        font-size: 64px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .not-found-container h3[b-z4dvfb939i], .unauthorized-content h3[b-z4dvfb939i] {
        font-size: 24px;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .not-found-container p[b-z4dvfb939i], .unauthorized-content p[b-z4dvfb939i] {
        color: #6b7280;
        max-width: 500px;
        margin-bottom: 24px;
    }

/* Responsive Design */
@media (max-width: 991px) {
    .order-header[b-z4dvfb939i] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .status-card[b-z4dvfb939i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .status-header[b-z4dvfb939i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .order-details-container[b-z4dvfb939i] {
        padding: 16px;
    }

    .order-header[b-z4dvfb939i], .status-card[b-z4dvfb939i], .info-section[b-z4dvfb939i],
    .items-section[b-z4dvfb939i], .payment-section[b-z4dvfb939i], .installment-section[b-z4dvfb939i],
    .agents-section[b-z4dvfb939i], .timeline-section[b-z4dvfb939i] {
        padding: 16px;
    }

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

    .agents-grid[b-z4dvfb939i] {
        grid-template-columns: 1fr;
    }

    .header-info h1[b-z4dvfb939i] {
        font-size: 24px;
    }

    .section-header h3[b-z4dvfb939i] {
        font-size: 18px;
    }

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

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

    .timeline[b-z4dvfb939i] {
        padding-right: 20px;
    }

        .timeline[b-z4dvfb939i]::before {
            right: 7px;
        }

    .timeline-item[b-z4dvfb939i] {
        padding-right: 28px;
    }

    .timeline-icon[b-z4dvfb939i] {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }

    .summary-row.total[b-z4dvfb939i] {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .header-actions[b-z4dvfb939i] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-action[b-z4dvfb939i] {
        padding: 10px;
    }
}

/* Print Styles */
@media print {
    .order-details-container[b-z4dvfb939i] {
        padding: 0;
        background: white !important;
    }

        .order-details-container[b-z4dvfb939i]::before {
            display: none;
        }

    .order-header[b-z4dvfb939i], .status-card[b-z4dvfb939i], .info-section[b-z4dvfb939i],
    .items-section[b-z4dvfb939i], .payment-section[b-z4dvfb939i], .installment-section[b-z4dvfb939i],
    .agents-section[b-z4dvfb939i], .timeline-section[b-z4dvfb939i] {
        box-shadow: none;
        margin-bottom: 20px;
        page-break-inside: avoid;
        border: 1px solid #e2e8f0;
        background: white !important;
    }

    .btn-back[b-z4dvfb939i], .header-actions[b-z4dvfb939i], .status-actions[b-z4dvfb939i], .action-buttons[b-z4dvfb939i] {
        display: none !important;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .order-details-container[b-z4dvfb939i] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .order-details-container[b-z4dvfb939i]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .order-header[b-z4dvfb939i],
[data-theme="dark"] .status-card[b-z4dvfb939i],
[data-theme="dark"] .info-section[b-z4dvfb939i],
[data-theme="dark"] .items-section[b-z4dvfb939i],
[data-theme="dark"] .payment-section[b-z4dvfb939i],
[data-theme="dark"] .installment-section[b-z4dvfb939i],
[data-theme="dark"] .agents-section[b-z4dvfb939i],
[data-theme="dark"] .timeline-section[b-z4dvfb939i] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .header-info h1[b-z4dvfb939i] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb a[b-z4dvfb939i],
[data-theme="dark"] .breadcrumb[b-z4dvfb939i] {
    color: #94a3b8;
}

    [data-theme="dark"] .breadcrumb a:hover[b-z4dvfb939i] {
        color: #a78bfa;
    }

[data-theme="dark"] .section-header h3[b-z4dvfb939i] {
    color: #e2e8f0;
}

    [data-theme="dark"] .section-header h3 i[b-z4dvfb939i] {
        color: #a78bfa;
    }

[data-theme="dark"] .info-item label[b-z4dvfb939i],
[data-theme="dark"] .status-label[b-z4dvfb939i],
[data-theme="dark"] .payment-label[b-z4dvfb939i],
[data-theme="dark"] .progress-text[b-z4dvfb939i],
[data-theme="dark"] .agent-phone[b-z4dvfb939i],
[data-theme="dark"] .agent-commission[b-z4dvfb939i] {
    color: #94a3b8;
}

[data-theme="dark"] .info-value[b-z4dvfb939i] {
    color: #e2e8f0;
}

    [data-theme="dark"] .info-value a[b-z4dvfb939i] {
        color: #a78bfa;
    }

        [data-theme="dark"] .info-value a:hover[b-z4dvfb939i] {
            color: #c084fc;
        }

[data-theme="dark"] .table th[b-z4dvfb939i] {
    background: rgba(102, 126, 234, 0.1);
    color: #e2e8f0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .table td[b-z4dvfb939i] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme="dark"] .table tr:hover td[b-z4dvfb939i] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .item-card[b-z4dvfb939i],
[data-theme="dark"] .agent-card[b-z4dvfb939i],
[data-theme="dark"] .timeline-content[b-z4dvfb939i] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .payment-summary[b-z4dvfb939i] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .btn-back[b-z4dvfb939i] {
    background: rgba(102, 126, 234, 0.2);
    color: #a78bfa;
}

[data-theme="dark"] .not-found-container i[b-z4dvfb939i],
[data-theme="dark"] .unauthorized-content i[b-z4dvfb939i] {
    color: #94a3b8;
}

[data-theme="dark"] .not-found-container h3[b-z4dvfb939i],
[data-theme="dark"] .unauthorized-content h3[b-z4dvfb939i] {
    color: #e2e8f0;
}

[data-theme="dark"] .not-found-container p[b-z4dvfb939i],
[data-theme="dark"] .unauthorized-content p[b-z4dvfb939i] {
    color: #94a3b8;
}

[data-theme="dark"] .timeline[b-z4dvfb939i]::before {
    background: rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .timeline-icon[b-z4dvfb939i] {
    box-shadow: 0 0 0 4px rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .installments-schedule h4[b-z4dvfb939i],
[data-theme="dark"] .guarantor-info h4[b-z4dvfb939i] {
    color: #e2e8f0;
}
/* Add this to your CSS file */
.status-dropdown-container[b-z4dvfb939i] {
    position: relative;
    display: inline-block;
}

.status-dropdown[b-z4dvfb939i] {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    background-color: white;
    min-width: 160px;
    font-size: 0.9rem;
    cursor: pointer;
}

    .status-dropdown:focus[b-z4dvfb939i] {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .status-dropdown option[b-z4dvfb939i] {
        padding: 8px;
    }
/* _content/Sahelly/Components/Pages/Agent/AgentWallet.razor.rz.scp.css */

/* ===================================
   Agent Wallet Page - Modern Professional Styling
   Enhanced Financial Dashboard Design
   =================================== */

/* Base Page Layout */
.agent-wallet-page[b-wmmcjvr52i] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-wallet-page[b-wmmcjvr52i]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-wallet-page > *[b-wmmcjvr52i] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Enhanced Modern Style */
.page-header-enhanced[b-wmmcjvr52i] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-wmmcjvr52i] {
    flex: 1;
}

.breadcrumb-section[b-wmmcjvr52i] {
    margin-bottom: 16px;
}

.breadcrumb[b-wmmcjvr52i] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.breadcrumb-link[b-wmmcjvr52i] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-wmmcjvr52i] {
        color: #667eea;
    }

.breadcrumb-separator[b-wmmcjvr52i] {
    color: #d1d5db;
}

.breadcrumb-current[b-wmmcjvr52i] {
    color: #4c1d95;
    font-weight: 600;
}

.title-section[b-wmmcjvr52i] {
    margin-top: 8px;
}

.page-title[b-wmmcjvr52i] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-wmmcjvr52i] {
        font-size: 32px;
        -webkit-text-fill-color: #764ba2;
    }

.page-subtitle[b-wmmcjvr52i] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-wmmcjvr52i] {
    display: flex;
    gap: 12px;
}

/* Button Styles - Modern Gradient */
.btn-action-modern[b-wmmcjvr52i] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-action-modern:hover[b-wmmcjvr52i] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

    .btn-action-modern:disabled[b-wmmcjvr52i] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .btn-action-modern i.rotating[b-wmmcjvr52i] {
        animation: spin-b-wmmcjvr52i 0.8s linear infinite;
    }

.btn-primary-modern[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-primary-modern:hover[b-wmmcjvr52i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Loading State */
.loading-container[b-wmmcjvr52i] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px 20px;
}

.spinner-modern[b-wmmcjvr52i] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-wmmcjvr52i 0.8s linear infinite;
}

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

/* Wallet Summary Section */
.wallet-summary-section[b-wmmcjvr52i] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

.section-header[b-wmmcjvr52i] {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    flex-direction: column;
}

    .section-header h2[b-wmmcjvr52i] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .section-header h2 i[b-wmmcjvr52i] {
            color: #667eea;
        }

.wallet-number[b-wmmcjvr52i] {
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    background: rgba(102, 126, 234, 0.1);
    padding: 8px 16px;
    border-radius: 12px;
    letter-spacing: 1px;
}

.wallet-cards-grid[b-wmmcjvr52i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Wallet Stat Cards */
.wallet-stat-card[b-wmmcjvr52i] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .wallet-stat-card[b-wmmcjvr52i]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .wallet-stat-card:hover[b-wmmcjvr52i] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }

        .wallet-stat-card:hover[b-wmmcjvr52i]::before {
            opacity: 1;
        }

    .wallet-stat-card .card-icon[b-wmmcjvr52i] {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: white;
        position: relative;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .wallet-stat-card .card-content[b-wmmcjvr52i] {
        flex: 1;
    }

    .wallet-stat-card h3[b-wmmcjvr52i] {
        font-size: 16px;
        font-weight: 600;
        color: #4b5563;
        margin: 0 0 8px 0;
    }

    .wallet-stat-card .amount[b-wmmcjvr52i] {
        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .wallet-stat-card .currency[b-wmmcjvr52i] {
        font-size: 16px;
        font-weight: 600;
        opacity: 0.7;
    }

    .wallet-stat-card .card-footer[b-wmmcjvr52i] {
        font-size: 14px;
        font-weight: 500;
    }

    .wallet-stat-card .status[b-wmmcjvr52i] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 20px;
        padding: 4px 12px;
        font-weight: 500;
    }

        .wallet-stat-card .status.active[b-wmmcjvr52i] {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .wallet-stat-card .status.inactive[b-wmmcjvr52i] {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .wallet-stat-card .status i[b-wmmcjvr52i] {
            font-size: 8px;
        }

    .wallet-stat-card .hint[b-wmmcjvr52i] {
        color: #6b7280;
        font-style: italic;
    }

    .wallet-stat-card .count[b-wmmcjvr52i], .wallet-stat-card .period[b-wmmcjvr52i] {
        color: #6b7280;
    }

    /* Card Variations */
    .wallet-stat-card.total .card-icon[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

    .wallet-stat-card.total .amount[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .wallet-stat-card.available .card-icon[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .wallet-stat-card.available .amount[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .wallet-stat-card.pending .card-icon[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .wallet-stat-card.pending .amount[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .wallet-stat-card.rewards .card-icon[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .wallet-stat-card.rewards .amount[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Commissions Section */
.commissions-section[b-wmmcjvr52i] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

.filter-controls[b-wmmcjvr52i] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-select[b-wmmcjvr52i] {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    background: rgba(102, 126, 234, 0.05);
    color: #4c1d95;
    font-weight: 500;
    min-width: 180px;
    cursor: pointer;
    transition: all 0.3s;
}

    .filter-select:hover[b-wmmcjvr52i], .filter-select:focus[b-wmmcjvr52i] {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        outline: none;
    }

.date-filter-wrapper[b-wmmcjvr52i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .date-filter-wrapper label[b-wmmcjvr52i] {
        font-size: 12px;
        font-weight: 600;
        color: #4c1d95;
    }

.date-filter[b-wmmcjvr52i] {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    background: rgba(102, 126, 234, 0.05);
    color: #4c1d95;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

    .date-filter:hover[b-wmmcjvr52i], .date-filter:focus[b-wmmcjvr52i] {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        outline: none;
    }

.btn-filter[b-wmmcjvr52i], .btn-clear-filter[b-wmmcjvr52i] {
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-filter[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-filter:hover:not(:disabled)[b-wmmcjvr52i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .btn-filter:disabled[b-wmmcjvr52i] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-clear-filter[b-wmmcjvr52i] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
}

    .btn-clear-filter:hover[b-wmmcjvr52i] {
        background: rgba(102, 126, 234, 0.2);
    }

/* Commissions Table */
.commissions-table-wrapper[b-wmmcjvr52i] {
    overflow-x: auto;
    margin-top: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.commissions-table[b-wmmcjvr52i] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

    .commissions-table thead tr[b-wmmcjvr52i] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

    .commissions-table th[b-wmmcjvr52i] {
        padding: 16px;
        font-size: 13px;
        font-weight: 600;
        color: #4c1d95;
        text-align: right;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        white-space: nowrap;
    }

    .commissions-table td[b-wmmcjvr52i] {
        padding: 16px;
        font-size: 14px;
        color: #4b5563;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background-color: white;
        vertical-align: middle;
    }

    .commissions-table tbody tr:last-child td[b-wmmcjvr52i] {
        border-bottom: none;
    }

    .commissions-table tbody tr[b-wmmcjvr52i] {
        transition: all 0.3s;
    }

        .commissions-table tbody tr:hover[b-wmmcjvr52i] {
            background-color: rgba(102, 126, 234, 0.05);
            transform: scale(1.01);
        }

.commission-type[b-wmmcjvr52i] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

    .commission-type i[b-wmmcjvr52i] {
        color: #667eea;
    }

.order-link[b-wmmcjvr52i] {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

    .order-link:hover[b-wmmcjvr52i] {
        color: #4f46e5;
        text-decoration: underline;
    }

.amount-cell[b-wmmcjvr52i] {
    font-weight: 700;
    color: #1f2937;
}

.rate-badge[b-wmmcjvr52i] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #4c1d95;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge[b-wmmcjvr52i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

    .status-badge.paid[b-wmmcjvr52i] {
        background-color: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .status-badge.pending[b-wmmcjvr52i] {
        background-color: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .status-badge i[b-wmmcjvr52i] {
        font-size: 10px;
    }

.paid-date[b-wmmcjvr52i] {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-top: 4px;
}

.notes-tooltip[b-wmmcjvr52i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    cursor: help;
}

.text-muted[b-wmmcjvr52i] {
    color: #9ca3af;
}

/* Pagination */
.pagination-wrapper[b-wmmcjvr52i] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.btn-pagination[b-wmmcjvr52i] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.1);
    color: #4c1d95;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-pagination:hover:not(:disabled)[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

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

.page-info[b-wmmcjvr52i] {
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
}

/* Empty State */
.empty-state[b-wmmcjvr52i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

    .empty-state i[b-wmmcjvr52i] {
        font-size: 64px;
        margin-bottom: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-state h3[b-wmmcjvr52i] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 12px;
    }

    .empty-state p[b-wmmcjvr52i] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-primary-small[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-primary-small:hover[b-wmmcjvr52i] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(90, 108, 179, 0.2);
    }

/* Loading Spinner Small */
.loading-spinner-small[b-wmmcjvr52i] {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.spinner-small[b-wmmcjvr52i] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-wmmcjvr52i 0.8s linear infinite;
}

/* Transactions Section */
.transactions-section[b-wmmcjvr52i] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

.btn-export[b-wmmcjvr52i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-export:hover[b-wmmcjvr52i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.transactions-list[b-wmmcjvr52i] {
    margin-top: 20px;
}

.transaction-item[b-wmmcjvr52i] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
}

    .transaction-item:hover[b-wmmcjvr52i] {
        transform: translateX(5px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }

.transaction-icon[b-wmmcjvr52i] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.transaction-details[b-wmmcjvr52i] {
    flex: 1;
}

    .transaction-details h4[b-wmmcjvr52i] {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: #1f2937;
    }

    .transaction-details p[b-wmmcjvr52i] {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 4px 0;
    }

.transaction-date[b-wmmcjvr52i] {
    font-size: 13px;
    color: #9ca3af;
}

.transaction-amount[b-wmmcjvr52i] {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 140px;
}

    .transaction-amount.credit[b-wmmcjvr52i] {
        color: #10b981;
    }

    .transaction-amount.debit[b-wmmcjvr52i] {
        color: #ef4444;
    }

.balance-after[b-wmmcjvr52i] {
    font-size: 12px;
    font-weight: normal;
    color: #9ca3af;
    margin-top: 4px;
}

/* Transaction Item Variations */
.transaction-item.deposit .transaction-icon[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.transaction-item.withdrawal .transaction-icon[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.transaction-item.commission .transaction-icon[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

.transaction-item.transfer .transaction-icon[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.transaction-item.other .transaction-icon[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Withdrawal Requests Section */
.withdrawal-section[b-wmmcjvr52i] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

.withdrawal-requests-grid[b-wmmcjvr52i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.withdrawal-card[b-wmmcjvr52i] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

    .withdrawal-card[b-wmmcjvr52i]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
    }

    .withdrawal-card:hover[b-wmmcjvr52i] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

    .withdrawal-card.pending[b-wmmcjvr52i]::before {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .withdrawal-card.approved[b-wmmcjvr52i]::before {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .withdrawal-card.completed[b-wmmcjvr52i]::before {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .withdrawal-card.rejected[b-wmmcjvr52i]::before {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    }

.withdrawal-header[b-wmmcjvr52i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.request-number[b-wmmcjvr52i] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
}

.request-date[b-wmmcjvr52i] {
    font-size: 13px;
    color: #6b7280;
}

.withdrawal-amount[b-wmmcjvr52i] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #1f2937;
}

.withdrawal-status[b-wmmcjvr52i] {
    margin-bottom: 16px;
}

.withdrawal-notes[b-wmmcjvr52i] {
    font-size: 14px;
    color: #6b7280;
    background: rgba(0, 0, 0, 0.02);
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

    .withdrawal-notes i[b-wmmcjvr52i] {
        color: #9ca3af;
    }

/* Withdrawal Status Variations */
.status-badge.pending[b-wmmcjvr52i] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.status-badge.approved[b-wmmcjvr52i] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.status-badge.completed[b-wmmcjvr52i] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-badge.rejected[b-wmmcjvr52i] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Error State */
.error-state[b-wmmcjvr52i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .error-state i[b-wmmcjvr52i] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .error-state h3[b-wmmcjvr52i] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .error-state p[b-wmmcjvr52i] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Withdrawal Modal */
.modal-overlay[b-wmmcjvr52i] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    animation: fadeIn-b-wmmcjvr52i 0.3s ease;
}

.modal-content[b-wmmcjvr52i] {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: slideUp-b-wmmcjvr52i 0.3s ease;
}

.modal-header[b-wmmcjvr52i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .modal-header h3[b-wmmcjvr52i] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

        .modal-header h3 i[b-wmmcjvr52i] {
            -webkit-text-fill-color: #764ba2;
        }

.modal-close[b-wmmcjvr52i] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #4c1d95;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

    .modal-close:hover[b-wmmcjvr52i] {
        background: rgba(102, 126, 234, 0.2);
        transform: rotate(90deg);
    }

.modal-body[b-wmmcjvr52i] {
    padding: 24px;
}

.form-group[b-wmmcjvr52i] {
    margin-bottom: 20px;
}

    .form-group label[b-wmmcjvr52i] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

.form-control[b-wmmcjvr52i] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1f2937;
}

    .form-control:hover[b-wmmcjvr52i] {
        border-color: rgba(102, 126, 234, 0.3);
    }

    .form-control:focus[b-wmmcjvr52i] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.available-balance-display[b-wmmcjvr52i] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #059669;
    text-align: center;
}

.required[b-wmmcjvr52i] {
    color: #ef4444;
    margin-left: 4px;
}

.modal-footer[b-wmmcjvr52i] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
}

.btn-secondary[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    min-width: 100px;
}

    .btn-secondary:hover[b-wmmcjvr52i] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-primary[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    cursor: pointer;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-primary:hover:not(:disabled)[b-wmmcjvr52i] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

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

/* Animation Keyframes */
@keyframes fadeIn-b-wmmcjvr52i {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

/* Unauthorized */
.unauthorized-container[b-wmmcjvr52i] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.unauthorized-content[b-wmmcjvr52i] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    max-width: 500px;
}

    .unauthorized-content i[b-wmmcjvr52i] {
        font-size: 64px;
        color: #4c1d95;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-wmmcjvr52i] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-wmmcjvr52i] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .wallet-cards-grid[b-wmmcjvr52i] {
        grid-template-columns: repeat(2, 1fr);
    }

    .withdrawal-requests-grid[b-wmmcjvr52i] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .agent-wallet-page[b-wmmcjvr52i] {
        padding: 16px;
    }

    .page-header-enhanced[b-wmmcjvr52i] {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

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

    .page-title[b-wmmcjvr52i] {
        font-size: 28px;
    }

    .wallet-cards-grid[b-wmmcjvr52i] {
        grid-template-columns: 1fr;
    }

    .withdrawal-requests-grid[b-wmmcjvr52i] {
        grid-template-columns: 1fr;
    }

    .filter-controls[b-wmmcjvr52i] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-filter-wrapper[b-wmmcjvr52i] {
        width: 100%;
    }

    .commissions-table th[b-wmmcjvr52i],
    .commissions-table td[b-wmmcjvr52i] {
        padding: 12px 8px;
        font-size: 13px;
    }

    .transaction-item[b-wmmcjvr52i] {
        flex-direction: column;
        align-items: flex-start;
    }

    .transaction-amount[b-wmmcjvr52i] {
        align-items: flex-start;
        width: 100%;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .section-header[b-wmmcjvr52i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .wallet-number[b-wmmcjvr52i] {
        width: 100%;
        text-align: center;
    }

    .btn-action-modern[b-wmmcjvr52i],
    .btn-primary-modern[b-wmmcjvr52i] {
        padding: 10px 16px;
        font-size: 14px;
    }

    .modal-content[b-wmmcjvr52i] {
        width: 95%;
    }
}

/* Print Styles */
@media print {
    .agent-wallet-page[b-wmmcjvr52i] {
        background: white !important;
    }

    .page-header-enhanced[b-wmmcjvr52i] {
        box-shadow: none;
        background: white;
    }

    .btn-action-modern[b-wmmcjvr52i],
    .btn-primary-modern[b-wmmcjvr52i],
    .btn-export[b-wmmcjvr52i],
    .modal-overlay[b-wmmcjvr52i] {
        display: none !important;
    }

    .wallet-summary-section[b-wmmcjvr52i],
    .commissions-section[b-wmmcjvr52i],
    .transactions-section[b-wmmcjvr52i],
    .withdrawal-section[b-wmmcjvr52i] {
        box-shadow: none;
        background: white;
        page-break-inside: avoid;
    }

    .wallet-stat-card[b-wmmcjvr52i] {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .agent-wallet-page[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-wallet-page[b-wmmcjvr52i]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-wmmcjvr52i],
[data-theme="dark"] .wallet-summary-section[b-wmmcjvr52i],
[data-theme="dark"] .commissions-section[b-wmmcjvr52i],
[data-theme="dark"] .transactions-section[b-wmmcjvr52i],
[data-theme="dark"] .withdrawal-section[b-wmmcjvr52i],
[data-theme="dark"] .error-state[b-wmmcjvr52i] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .wallet-stat-card[b-wmmcjvr52i],
[data-theme="dark"] .transaction-item[b-wmmcjvr52i],
[data-theme="dark"] .withdrawal-card[b-wmmcjvr52i] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .commissions-table td[b-wmmcjvr52i] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .breadcrumb-link[b-wmmcjvr52i] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-wmmcjvr52i] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-wmmcjvr52i] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-wmmcjvr52i] {
    color: #9ca3af;
}

[data-theme="dark"] .section-header h2[b-wmmcjvr52i],
[data-theme="dark"] .wallet-stat-card h3[b-wmmcjvr52i],
[data-theme="dark"] .transaction-details h4[b-wmmcjvr52i] {
    color: #e2e8f0;
}

[data-theme="dark"] .filter-select[b-wmmcjvr52i],
[data-theme="dark"] .date-filter[b-wmmcjvr52i],
[data-theme="dark"] .form-control[b-wmmcjvr52i] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .filter-select:focus[b-wmmcjvr52i],
    [data-theme="dark"] .date-filter:focus[b-wmmcjvr52i],
    [data-theme="dark"] .form-control:focus[b-wmmcjvr52i] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

    [data-theme="dark"] .filter-select:hover[b-wmmcjvr52i],
    [data-theme="dark"] .date-filter:hover[b-wmmcjvr52i],
    [data-theme="dark"] .form-control:hover[b-wmmcjvr52i] {
        border-color: #667eea;
    }

[data-theme="dark"] .form-group label[b-wmmcjvr52i],
[data-theme="dark"] .date-filter-wrapper label[b-wmmcjvr52i] {
    color: #e2e8f0;
}

[data-theme="dark"] .commissions-table thead tr[b-wmmcjvr52i] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
}

[data-theme="dark"] .commissions-table th[b-wmmcjvr52i] {
    color: #e2e8f0;
}

[data-theme="dark"] .modal-content[b-wmmcjvr52i] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
}

[data-theme="dark"] .page-title[b-wmmcjvr52i] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    [data-theme="dark"] .page-title i[b-wmmcjvr52i] {
        -webkit-text-fill-color: #a78bfa;
    }
/* _content/Sahelly/Components/Pages/Agent/Component/CustomerSelector.razor.rz.scp.css */

/* Customer Selector - Modern Professional Design */

.customer-selector[b-62ctjiv41p] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .customer-selector[b-62ctjiv41p]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .customer-selector:hover[b-62ctjiv41p]::before {
        opacity: 1;
    }

[data-theme="dark"] .customer-selector[b-62ctjiv41p] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.selector-wrapper[b-62ctjiv41p] {
    position: relative;
}

/* Search Box */
.search-box[b-62ctjiv41p] {
    position: relative;
    margin-bottom: 16px;
}

    .search-box i[b-62ctjiv41p] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 16px;
        z-index: 2;
    }

    .search-box .form-control[b-62ctjiv41p] {
        width: 100%;
        padding: 14px 16px 14px 48px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
        border: 2px solid rgba(102, 126, 234, 0.2);
        border-radius: 12px;
        font-size: 15px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    }

        .search-box .form-control:focus[b-62ctjiv41p] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            background: white;
        }

        .search-box .form-control[b-62ctjiv41p]::placeholder {
            color: var(--text-muted);
        }

[data-theme="dark"] .search-box .form-control[b-62ctjiv41p] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(102, 126, 234, 0.1);
    color: var(--text-primary);
}

    [data-theme="dark"] .search-box .form-control:focus[b-62ctjiv41p] {
        background: rgba(71, 85, 105, 0.5);
    }

/* Search Dropdown */
.search-dropdown[b-62ctjiv41p] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.15);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    animation: slideDown-b-62ctjiv41p 0.3s ease;
    backdrop-filter: blur(10px);
}

[data-theme="dark"] .search-dropdown[b-62ctjiv41p] {
    background: var(--bg-secondary);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.customer-option[b-62ctjiv41p] {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(102, 126, 234, 0.05);
}

    .customer-option:last-child[b-62ctjiv41p] {
        border-bottom: none;
    }

    .customer-option:hover[b-62ctjiv41p] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
        transform: translateX(4px);
    }

    .customer-option.selected[b-62ctjiv41p] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    }

.customer-info[b-62ctjiv41p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-name[b-62ctjiv41p] {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.customer-meta[b-62ctjiv41p] {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

    .customer-meta .phone[b-62ctjiv41p],
    .customer-meta .code[b-62ctjiv41p] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .customer-meta .phone[b-62ctjiv41p]::before {
            content: '\f095';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            font-size: 10px;
            color: var(--primary-color);
        }

        .customer-meta .code[b-62ctjiv41p]::before {
            content: '\f02b';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            font-size: 10px;
            color: var(--secondary-color);
        }

.customer-option i[b-62ctjiv41p] {
    color: var(--primary-color);
    font-size: 18px;
    opacity: 0;
    transition: all 0.3s;
}

.customer-option.selected i[b-62ctjiv41p] {
    opacity: 1;
}

/* Selected Customer */
.selected-customer[b-62ctjiv41p] {
    margin-top: 20px;
}

.customer-card[b-62ctjiv41p] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(102, 126, 234, 0.15);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeIn-b-62ctjiv41p 0.4s ease;
}

    .customer-card:hover[b-62ctjiv41p] {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
        border-color: var(--primary-color);
    }

.customer-avatar[b-62ctjiv41p] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
}

.customer-details[b-62ctjiv41p] {
    flex: 1;
}

    .customer-details h5[b-62ctjiv41p] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 6px 0;
        color: var(--text-primary);
    }

    .customer-details p[b-62ctjiv41p] {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .customer-details i[b-62ctjiv41p] {
        color: var(--primary-color);
        font-size: 14px;
    }

.separator[b-62ctjiv41p] {
    color: var(--text-muted);
    opacity: 0.5;
}

.btn-remove[b-62ctjiv41p] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-remove:hover[b-62ctjiv41p] {
        background: var(--danger-color);
        color: white;
        transform: rotate(90deg);
    }

/* Add New Customer Button */
.btn-add-new[b-62ctjiv41p] {
    background: transparent;
    color: var(--primary-color);
    padding: 10px 16px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    margin-top: 16px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-add-new:hover[b-62ctjiv41p] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

    .btn-add-new i[b-62ctjiv41p] {
        font-size: 14px;
        transition: transform 0.3s;
    }

    .btn-add-new:hover i[b-62ctjiv41p] {
        transform: rotate(90deg);
    }

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

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

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

    to {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .customer-selector[b-62ctjiv41p] {
        padding: 16px;
    }

    .search-box .form-control[b-62ctjiv41p] {
        padding: 12px 16px 12px 44px;
        font-size: 14px;
    }

    .customer-card[b-62ctjiv41p] {
        padding: 16px;
    }

    .customer-avatar[b-62ctjiv41p] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .customer-details h5[b-62ctjiv41p] {
        font-size: 16px;
    }

    .customer-details p[b-62ctjiv41p] {
        font-size: 13px;
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .customer-option[b-62ctjiv41p] {
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .customer-name[b-62ctjiv41p] {
    color: var(--text-primary);
}

[data-theme="dark"] .customer-meta[b-62ctjiv41p] {
    color: var(--text-tertiary);
}

[data-theme="dark"] .customer-card[b-62ctjiv41p] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .customer-details h5[b-62ctjiv41p] {
    color: var(--text-primary);
}

[data-theme="dark"] .customer-details p[b-62ctjiv41p] {
    color: var(--text-tertiary);
}

[data-theme="dark"] .btn-add-new[b-62ctjiv41p] {
    border-color: rgba(102, 126, 234, 0.3);
    color: var(--primary-color);
}

    [data-theme="dark"] .btn-add-new:hover[b-62ctjiv41p] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    }

/* Focus States for Accessibility */
.search-box .form-control:focus[b-62ctjiv41p] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-add-new:focus[b-62ctjiv41p],
.btn-remove:focus[b-62ctjiv41p],
.customer-option:focus[b-62ctjiv41p] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .customer-selector[b-62ctjiv41p],
    .customer-card[b-62ctjiv41p],
    .search-dropdown[b-62ctjiv41p],
    .customer-option[b-62ctjiv41p] {
        border: 2px solid currentColor;
    }

    .btn-add-new[b-62ctjiv41p],
    .btn-remove[b-62ctjiv41p] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-62ctjiv41p] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Agent/CustomerPayments.razor.rz.scp.css */


/* ===================================
   Customer Payments Page - Modern Professional CSS
   ���� ������� ������� - ����� ������� ����
   ���� ������� app.css ���� Users.razor.css
   =================================== */

/* Page Container */
.customer-payments[b-9dqnzgwhuh] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .customer-payments[b-9dqnzgwhuh]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .customer-payments > *[b-9dqnzgwhuh] {
        position: relative;
        z-index: 1;
    }

/* Loading State */
.loading-container[b-9dqnzgwhuh] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    gap: 20px;
}

.spinner-modern[b-9dqnzgwhuh] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-9dqnzgwhuh 0.8s linear infinite;
}

.loading-container p[b-9dqnzgwhuh] {
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
}

/* Error State */
.error-container[b-9dqnzgwhuh],
.unauthorized-container[b-9dqnzgwhuh] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.error-content[b-9dqnzgwhuh],
.unauthorized-content[b-9dqnzgwhuh] {
    text-align: center;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
}

    .error-content i[b-9dqnzgwhuh],
    .unauthorized-content i[b-9dqnzgwhuh] {
        font-size: 80px;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .error-content h3[b-9dqnzgwhuh],
    .unauthorized-content h3[b-9dqnzgwhuh] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .error-content p[b-9dqnzgwhuh],
    .unauthorized-content p[b-9dqnzgwhuh] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Page Header */
.page-header[b-9dqnzgwhuh] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content[b-9dqnzgwhuh] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.header-nav[b-9dqnzgwhuh] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-back[b-9dqnzgwhuh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    text-decoration: none;
}

    .btn-back:hover[b-9dqnzgwhuh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.breadcrumb[b-9dqnzgwhuh] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    flex-wrap: wrap;
}

    .breadcrumb a[b-9dqnzgwhuh] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb a:hover[b-9dqnzgwhuh] {
            color: #667eea;
        }

    .breadcrumb span[b-9dqnzgwhuh] {
        color: #d1d5db;
    }

        .breadcrumb span:last-child[b-9dqnzgwhuh] {
            color: #4c1d95;
            font-weight: 600;
        }

/* Customer Header */
.customer-header[b-9dqnzgwhuh] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.customer-avatar[b-9dqnzgwhuh] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
    flex-shrink: 0;
}

    .customer-avatar:hover[b-9dqnzgwhuh] {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    }

.customer-info[b-9dqnzgwhuh] {
    flex: 1;
    min-width: 200px;
}

    .customer-info h1[b-9dqnzgwhuh] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

.customer-details[b-9dqnzgwhuh] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    flex-wrap: wrap;
}

.customer-code[b-9dqnzgwhuh] {
    font-weight: 600;
    color: #9333ea;
    background: rgba(147, 51, 234, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.separator[b-9dqnzgwhuh] {
    color: #d1d5db;
    font-weight: 300;
}

.customer-phone[b-9dqnzgwhuh] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-weight: 500;
}

    .customer-phone i[b-9dqnzgwhuh] {
        color: #9333ea;
    }

.customer-status[b-9dqnzgwhuh] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    align-self: flex-start;
}

    .customer-status.active[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .customer-status.inactive[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

/* Payment Summary Cards */
.payment-summary[b-9dqnzgwhuh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.summary-card[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-9dqnzgwhuh]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-9dqnzgwhuh] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .summary-card:hover[b-9dqnzgwhuh]::before {
            opacity: 1;
        }

.card-icon[b-9dqnzgwhuh] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.summary-card.total .card-icon[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.summary-card.paid .card-icon[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.summary-card.remaining .card-icon[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.summary-card.credit .card-icon[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.card-content[b-9dqnzgwhuh] {
    flex: 1;
}

    .card-content h3[b-9dqnzgwhuh] {
        font-size: 16px;
        font-weight: 600;
        color: #6b7280;
        margin: 0 0 8px 0;
    }

.amount[b-9dqnzgwhuh] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

/* Filters Section */
.filters-section[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
}

.filter-controls[b-9dqnzgwhuh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: end;
}

.filter-group[b-9dqnzgwhuh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-group label[b-9dqnzgwhuh] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.date-inputs[b-9dqnzgwhuh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .date-inputs span[b-9dqnzgwhuh] {
        color: #6b7280;
        font-weight: 500;
        white-space: nowrap;
    }

.form-control[b-9dqnzgwhuh] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    width: 100%;
}

    .form-control:focus[b-9dqnzgwhuh] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-filter[b-9dqnzgwhuh],
.btn-export[b-9dqnzgwhuh] {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-filter[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-filter:hover[b-9dqnzgwhuh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-export[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-export:hover[b-9dqnzgwhuh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Content Tabs */
.content-tabs[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tab-headers[b-9dqnzgwhuh] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    overflow-x: auto;
}

.tab-header[b-9dqnzgwhuh] {
    flex: 1;
    padding: 20px 24px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
    min-width: 150px;
}

    .tab-header:hover[b-9dqnzgwhuh] {
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

    .tab-header.active[b-9dqnzgwhuh] {
        color: #4c1d95;
        background: rgba(102, 126, 234, 0.15);
        border-bottom: 3px solid #667eea;
    }

        .tab-header.active i[b-9dqnzgwhuh] {
            color: #667eea;
        }

.tab-content[b-9dqnzgwhuh] {
    padding: 32px;
    min-height: 400px;
}

/* Orders Section */
.orders-grid[b-9dqnzgwhuh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.order-card[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

    .order-card:hover[b-9dqnzgwhuh] {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

.order-header[b-9dqnzgwhuh] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.order-number[b-9dqnzgwhuh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .order-number strong[b-9dqnzgwhuh] {
        font-size: 18px;
        color: #4c1d95;
        font-weight: 700;
    }

.order-date[b-9dqnzgwhuh] {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.order-status[b-9dqnzgwhuh] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .order-status.pending[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
    }

    .order-status.processing[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(147, 197, 253, 0.2) 100%);
        color: #2563eb;
    }

    .order-status.completed[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(74, 222, 128, 0.2) 100%);
        color: #059669;
    }

    .order-status.cancelled[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
        color: #dc2626;
    }

.order-details[b-9dqnzgwhuh] {
    padding: 20px;
}

.detail-row[b-9dqnzgwhuh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

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

    .detail-row .label[b-9dqnzgwhuh] {
        font-weight: 500;
        color: #6b7280;
    }

    .detail-row .value[b-9dqnzgwhuh] {
        font-weight: 600;
        color: #1f2937;
    }

.order-actions[b-9dqnzgwhuh] {
    padding: 20px;
    background: rgba(102, 126, 234, 0.03);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-action[b-9dqnzgwhuh] {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    text-decoration: none;
}

    .btn-action:not(.primary)[b-9dqnzgwhuh] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        border: 1px solid rgba(102, 126, 234, 0.2);
    }

        .btn-action:not(.primary):hover[b-9dqnzgwhuh] {
            background: rgba(102, 126, 234, 0.2);
            transform: translateY(-1px);
        }

    .btn-action.primary[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(59, 201, 104, 0.2);
    }

        .btn-action.primary:hover[b-9dqnzgwhuh] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 201, 104, 0.3);
        }

/* Installments Section */
.installments-list[b-9dqnzgwhuh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.installment-payment-card[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

    .installment-payment-card:hover[b-9dqnzgwhuh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

.payment-header[b-9dqnzgwhuh] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.payment-info[b-9dqnzgwhuh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .payment-info strong[b-9dqnzgwhuh] {
        font-size: 20px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.payment-date[b-9dqnzgwhuh] {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.payment-status[b-9dqnzgwhuh] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .payment-status.completed[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(74, 222, 128, 0.2) 100%);
        color: #059669;
    }

    .payment-status.pending[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
    }

    .payment-status.failed[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
        color: #dc2626;
    }

    .payment-status.partial[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(196, 181, 253, 0.2) 100%);
        color: #7c3aed;
    }

.payment-details[b-9dqnzgwhuh] {
    padding: 20px;
}

/* Payments Timeline */
.payments-timeline[b-9dqnzgwhuh] {
    position: relative;
    padding-left: 30px;
}

    .payments-timeline[b-9dqnzgwhuh]::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, #667eea, #764ba2);
        border-radius: 1px;
    }

.timeline-item[b-9dqnzgwhuh] {
    position: relative;
    margin-bottom: 24px;
}

    .timeline-item:last-child[b-9dqnzgwhuh] {
        margin-bottom: 0;
    }

.timeline-marker[b-9dqnzgwhuh] {
    position: absolute;
    left: -23px;
    top: 20px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .timeline-marker.completed[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .timeline-marker.pending[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

.timeline-content[b-9dqnzgwhuh] {
    margin-left: 20px;
}

.payment-card[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

    .payment-card:hover[b-9dqnzgwhuh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .payment-card .payment-header[b-9dqnzgwhuh] {
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

.payment-amount[b-9dqnzgwhuh] {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.payment-card .payment-date[b-9dqnzgwhuh] {
    text-align: right;
    font-size: 13px;
    color: #6b7280;
}

    .payment-card .payment-date small[b-9dqnzgwhuh] {
        display: block;
        font-size: 11px;
        color: #9ca3af;
    }

.payment-info[b-9dqnzgwhuh] {
    padding: 20px;
}

.info-row[b-9dqnzgwhuh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .info-row:last-child[b-9dqnzgwhuh] {
        border-bottom: none;
    }

.info-label[b-9dqnzgwhuh] {
    font-weight: 500;
    color: #6b7280;
    font-size: 14px;
}

.info-value[b-9dqnzgwhuh] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge[b-9dqnzgwhuh] {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-description[b-9dqnzgwhuh] {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 10px;
    font-size: 14px;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .payment-description i[b-9dqnzgwhuh] {
        color: #9333ea;
    }

/* Empty States */
.empty-state[b-9dqnzgwhuh] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-9dqnzgwhuh] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-9dqnzgwhuh] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-9dqnzgwhuh] {
        font-size: 16px;
        color: #6b7280;
    }

/* Pagination */
.pagination[b-9dqnzgwhuh] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 24px;
}

.page-btn[b-9dqnzgwhuh] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Modal Styles */
.modal-overlay[b-9dqnzgwhuh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    padding: 20px;
}

.modal-content[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: zoomIn-b-9dqnzgwhuh 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment-modal .modal-header[b-9dqnzgwhuh] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .payment-modal .modal-header h3[b-9dqnzgwhuh] {
        font-size: 20px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.close-btn[b-9dqnzgwhuh] {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .close-btn:hover[b-9dqnzgwhuh] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        transform: rotate(90deg);
    }

.modal-body[b-9dqnzgwhuh] {
    padding: 30px;
}

.order-summary[b-9dqnzgwhuh] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

    .order-summary h4[b-9dqnzgwhuh] {
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0 0 16px 0;
    }

.summary-item[b-9dqnzgwhuh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

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

    .summary-item span[b-9dqnzgwhuh] {
        font-weight: 500;
        color: #6b7280;
    }

    .summary-item strong[b-9dqnzgwhuh] {
        font-weight: 700;
    }

.payment-form[b-9dqnzgwhuh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-9dqnzgwhuh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label[b-9dqnzgwhuh] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.required[b-9dqnzgwhuh] {
    color: #ef4444;
}

.input-group[b-9dqnzgwhuh] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-9dqnzgwhuh] {
    position: absolute;
    right: 16px;
    color: #6b7280;
    font-weight: 600;
    z-index: 1;
}

.input-group .form-control[b-9dqnzgwhuh] {
    padding-right: 50px;
}

.payment-methods[b-9dqnzgwhuh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.method-btn[b-9dqnzgwhuh] {
    padding: 16px 12px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #6b7280;
    font-size: 13px;
}

    .method-btn i[b-9dqnzgwhuh] {
        font-size: 20px;
        color: #9333ea;
    }

    .method-btn:hover[b-9dqnzgwhuh] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        color: #667eea;
    }

    .method-btn.active[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

        .method-btn.active i[b-9dqnzgwhuh] {
            color: white;
        }

.modal-footer[b-9dqnzgwhuh] {
    padding: 24px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-radius: 0 0 24px 24px;
}

    .modal-footer .btn[b-9dqnzgwhuh] {
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.btn-secondary[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-9dqnzgwhuh] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-primary[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-primary:hover[b-9dqnzgwhuh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

    .btn-primary:disabled[b-9dqnzgwhuh] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.spinner-border[b-9dqnzgwhuh] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-right-color: currentColor;
    border-radius: 50%;
    animation: spin-b-9dqnzgwhuh 0.8s linear infinite;
}

.spinner-border-sm[b-9dqnzgwhuh] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Animations */
@keyframes spin-b-9dqnzgwhuh {
    to {
        transform: rotate(360deg);
    }
}

@keyframes zoomIn-b-9dqnzgwhuh {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

/* Responsive Design */
@media (max-width: 1200px) {
    .payment-summary[b-9dqnzgwhuh] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-controls[b-9dqnzgwhuh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .customer-payments[b-9dqnzgwhuh] {
        padding: 16px;
    }

    .page-header[b-9dqnzgwhuh] {
        padding: 20px;
        margin-bottom: 24px;
    }

    .customer-header[b-9dqnzgwhuh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .customer-avatar[b-9dqnzgwhuh] {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .customer-info h1[b-9dqnzgwhuh] {
        font-size: 24px;
    }

    .customer-details[b-9dqnzgwhuh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .payment-summary[b-9dqnzgwhuh] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-card[b-9dqnzgwhuh] {
        padding: 20px;
        gap: 16px;
    }

    .card-icon[b-9dqnzgwhuh] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .amount[b-9dqnzgwhuh] {
        font-size: 24px;
    }

    .filter-controls[b-9dqnzgwhuh] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .date-inputs[b-9dqnzgwhuh] {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-headers[b-9dqnzgwhuh] {
        flex-direction: column;
    }

    .tab-header[b-9dqnzgwhuh] {
        justify-content: flex-start;
        padding: 16px 20px;
    }

    .tab-content[b-9dqnzgwhuh] {
        padding: 20px;
    }

    .orders-grid[b-9dqnzgwhuh] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .order-header[b-9dqnzgwhuh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .order-actions[b-9dqnzgwhuh] {
        flex-direction: column;
    }

    .payments-timeline[b-9dqnzgwhuh] {
        padding-left: 20px;
    }

        .payments-timeline[b-9dqnzgwhuh]::before {
            left: 10px;
        }

    .timeline-marker[b-9dqnzgwhuh] {
        left: -16px;
    }

    .timeline-content[b-9dqnzgwhuh] {
        margin-left: 15px;
    }

    .payment-methods[b-9dqnzgwhuh] {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-overlay[b-9dqnzgwhuh] {
        padding: 10px;
    }

    .modal-content[b-9dqnzgwhuh] {
        max-height: 95vh;
    }

    .modal-header[b-9dqnzgwhuh] {
        padding: 20px;
    }

    .modal-body[b-9dqnzgwhuh] {
        padding: 20px;
    }

    .modal-footer[b-9dqnzgwhuh] {
        padding: 20px;
        flex-direction: column-reverse;
    }

        .modal-footer .btn[b-9dqnzgwhuh] {
            width: 100%;
            justify-content: center;
        }
}

@media (max-width: 480px) {
    .customer-payments[b-9dqnzgwhuh] {
        padding: 12px;
    }

    .page-header[b-9dqnzgwhuh] {
        padding: 16px;
    }

    .header-nav[b-9dqnzgwhuh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .breadcrumb[b-9dqnzgwhuh] {
        font-size: 12px;
    }

    .customer-info h1[b-9dqnzgwhuh] {
        font-size: 20px;
    }

    .summary-card[b-9dqnzgwhuh] {
        padding: 16px;
        flex-direction: column;
        text-align: center;
    }

    .card-icon[b-9dqnzgwhuh] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .amount[b-9dqnzgwhuh] {
        font-size: 20px;
    }

    .filters-section[b-9dqnzgwhuh] {
        padding: 16px;
    }

    .payment-methods[b-9dqnzgwhuh] {
        grid-template-columns: 1fr;
    }

    .method-btn[b-9dqnzgwhuh] {
        padding: 12px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .customer-payments[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .customer-payments[b-9dqnzgwhuh]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-9dqnzgwhuh],
[data-theme="dark"] .filters-section[b-9dqnzgwhuh],
[data-theme="dark"] .content-tabs[b-9dqnzgwhuh],
[data-theme="dark"] .summary-card[b-9dqnzgwhuh],
[data-theme="dark"] .order-card[b-9dqnzgwhuh],
[data-theme="dark"] .installment-payment-card[b-9dqnzgwhuh],
[data-theme="dark"] .payment-card[b-9dqnzgwhuh],
[data-theme="dark"] .empty-state[b-9dqnzgwhuh],
[data-theme="dark"] .pagination[b-9dqnzgwhuh],
[data-theme="dark"] .modal-content[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .customer-info h1[b-9dqnzgwhuh],
[data-theme="dark"] .amount[b-9dqnzgwhuh],
[data-theme="dark"] .payment-amount[b-9dqnzgwhuh],
[data-theme="dark"] .payment-info strong[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .form-control[b-9dqnzgwhuh] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-9dqnzgwhuh] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .order-summary[b-9dqnzgwhuh],
[data-theme="dark"] .payment-description[b-9dqnzgwhuh] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .method-btn[b-9dqnzgwhuh] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
    color: #cbd5e1;
}

    [data-theme="dark"] .method-btn:hover[b-9dqnzgwhuh] {
        background: rgba(102, 126, 234, 0.2);
        border-color: #667eea;
        color: #a78bfa;
    }

[data-theme="dark"] .tab-headers[b-9dqnzgwhuh],
[data-theme="dark"] .order-header[b-9dqnzgwhuh],
[data-theme="dark"] .payment-header[b-9dqnzgwhuh],
[data-theme="dark"] .modal-header[b-9dqnzgwhuh],
[data-theme="dark"] .modal-footer[b-9dqnzgwhuh] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .order-actions[b-9dqnzgwhuh] {
    background: rgba(102, 126, 234, 0.05);
}

/* Print Styles */
@media print {
    .customer-payments[b-9dqnzgwhuh] {
        background: white !important;
        padding: 20px;
    }

    .btn-back[b-9dqnzgwhuh],
    .filters-section[b-9dqnzgwhuh],
    .tab-headers[b-9dqnzgwhuh],
    .order-actions[b-9dqnzgwhuh],
    .pagination[b-9dqnzgwhuh],
    .modal-overlay[b-9dqnzgwhuh] {
        display: none !important;
    }

    .page-header[b-9dqnzgwhuh],
    .summary-card[b-9dqnzgwhuh],
    .order-card[b-9dqnzgwhuh],
    .payment-card[b-9dqnzgwhuh] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .customer-info h1[b-9dqnzgwhuh],
    .amount[b-9dqnzgwhuh] {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
}

/* Accessibility */
.btn:focus[b-9dqnzgwhuh],
.form-control:focus[b-9dqnzgwhuh],
.method-btn:focus[b-9dqnzgwhuh],
.tab-header:focus[b-9dqnzgwhuh] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .summary-card[b-9dqnzgwhuh],
    .order-card[b-9dqnzgwhuh],
    .payment-card[b-9dqnzgwhuh] {
        border: 2px solid #000;
    }

    .btn-filter[b-9dqnzgwhuh],
    .btn-export[b-9dqnzgwhuh],
    .btn-action[b-9dqnzgwhuh] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *[b-9dqnzgwhuh] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Agent/NotificationsPge.razor.rz.scp.css */
/* Notifications Page Styles */
.notifications-page[b-dsx5hie8ep] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
}

/* Header Styles */
.page-header-enhanced[b-dsx5hie8ep] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-content[b-dsx5hie8ep] {
    flex: 1;
}

.breadcrumb-modern[b-dsx5hie8ep] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.breadcrumb-item[b-dsx5hie8ep] {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .breadcrumb-item:hover[b-dsx5hie8ep] {
        color: #007bff;
    }

.breadcrumb-current[b-dsx5hie8ep] {
    color: #495057;
    font-weight: 500;
}

.separator[b-dsx5hie8ep] {
    color: #dee2e6;
}

.header-title-section[b-dsx5hie8ep] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title-modern[b-dsx5hie8ep] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
}

.title-icon[b-dsx5hie8ep] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.page-subtitle-enhanced[b-dsx5hie8ep] {
    margin: 8px 0 0 0;
    color: #6c757d;
    font-size: 16px;
}

.header-actions[b-dsx5hie8ep] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-primary-modern[b-dsx5hie8ep], .btn-secondary-modern[b-dsx5hie8ep] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary-modern[b-dsx5hie8ep] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

    .btn-primary-modern:hover[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
    }

.btn-secondary-modern[b-dsx5hie8ep] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-secondary-modern:hover[b-dsx5hie8ep] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

/* Loading Styles */
.loading-modern[b-dsx5hie8ep] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner-container[b-dsx5hie8ep] {
    text-align: center;
}

.spinner-modern[b-dsx5hie8ep] {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin-b-dsx5hie8ep 1s linear infinite;
    margin: 0 auto 16px;
}

.loading-text-modern[b-dsx5hie8ep] {
    color: #6c757d;
    font-size: 16px;
    margin: 0;
}

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

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

@keyframes spinning-b-dsx5hie8ep {
    0% {
        transform: rotate(0deg);
    }

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

.spinning[b-dsx5hie8ep] {
    animation: spinning-b-dsx5hie8ep 1s linear infinite;
}

/* Statistics Cards */
.stats-cards-row[b-dsx5hie8ep] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card-modern[b-dsx5hie8ep] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

    .stat-card-modern:hover[b-dsx5hie8ep] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

.stat-icon-container[b-dsx5hie8ep] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.total-card .stat-icon-container[b-dsx5hie8ep] {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.unread-card .stat-icon-container[b-dsx5hie8ep] {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.high-priority-card .stat-icon-container[b-dsx5hie8ep] {
    background: linear-gradient(135deg, #ffc107, #e0a800);
}

.today-card .stat-icon-container[b-dsx5hie8ep] {
    background: linear-gradient(135deg, #28a745, #1e7e34);
}

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

.stat-number[b-dsx5hie8ep] {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #2c3e50;
}

.stat-label[b-dsx5hie8ep] {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

/* Filters Section */
.filters-section-modern[b-dsx5hie8ep] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.filters-row[b-dsx5hie8ep] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.filter-group[b-dsx5hie8ep] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-dsx5hie8ep] {
    font-weight: 500;
    color: #495057;
    font-size: 14px;
    margin: 0;
}

.filter-select[b-dsx5hie8ep] {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    color: #495057;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .filter-select:focus[b-dsx5hie8ep] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.search-section[b-dsx5hie8ep] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.search-input-container[b-dsx5hie8ep] {
    flex: 1;
    position: relative;
}

.search-input[b-dsx5hie8ep] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .search-input:focus[b-dsx5hie8ep] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.search-icon[b-dsx5hie8ep] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.clear-search-btn[b-dsx5hie8ep] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    .clear-search-btn:hover[b-dsx5hie8ep] {
        background: #f8f9fa;
        color: #495057;
    }

.search-btn[b-dsx5hie8ep] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .search-btn:hover[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #0056b3, #004085);
    }

/* Notifications Container */
.notifications-container[b-dsx5hie8ep] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.notifications-list[b-dsx5hie8ep] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-card[b-dsx5hie8ep] {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

    .notification-card:hover[b-dsx5hie8ep] {
        border-color: #007bff;
        box-shadow: 0 4px 20px rgba(0, 123, 255, 0.1);
        transform: translateY(-2px);
    }

    .notification-card.unread[b-dsx5hie8ep] {
        border-left: 4px solid #007bff;
        background: linear-gradient(to right, rgba(0, 123, 255, 0.02), white);
    }

    .notification-card.read[b-dsx5hie8ep] {
        opacity: 0.8;
    }

    .notification-card.urgent[b-dsx5hie8ep] {
        border-left: 4px solid #dc3545;
    }

    .notification-card.high[b-dsx5hie8ep] {
        border-left: 4px solid #ffc107;
    }

.notification-content[b-dsx5hie8ep] {
    padding: 20px;
}

.notification-header[b-dsx5hie8ep] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.notification-icon-wrapper[b-dsx5hie8ep] {
    position: relative;
}

.notification-icon[b-dsx5hie8ep] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

    .notification-icon.order[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #007bff, #0056b3);
    }

    .notification-icon.payment[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .notification-icon.delivery[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

    .notification-icon.return[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .notification-icon.system[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #6c757d, #5a6268);
    }

    .notification-icon.success[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .notification-icon.warning[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .notification-icon.error[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .notification-icon.info[b-dsx5hie8ep] {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

.unread-indicator[b-dsx5hie8ep] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #dc3545;
    border: 2px solid white;
    border-radius: 50%;
}

.notification-meta[b-dsx5hie8ep] {
    flex: 1;
}

.notification-title[b-dsx5hie8ep] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.notification-badges[b-dsx5hie8ep] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.priority-badge[b-dsx5hie8ep], .type-badge[b-dsx5hie8ep] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .priority-badge.urgent[b-dsx5hie8ep] {
        background: #dc3545;
        color: white;
    }

    .priority-badge.high[b-dsx5hie8ep] {
        background: #ffc107;
        color: #212529;
    }

    .priority-badge.medium[b-dsx5hie8ep] {
        background: #17a2b8;
        color: white;
    }

    .priority-badge.low[b-dsx5hie8ep] {
        background: #6c757d;
        color: white;
    }

.type-badge[b-dsx5hie8ep] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.notification-time[b-dsx5hie8ep] {
    text-align: right;
    min-width: 120px;
}

.time-text[b-dsx5hie8ep] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.date-text[b-dsx5hie8ep] {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.notification-body[b-dsx5hie8ep] {
    margin-bottom: 16px;
}

.notification-message[b-dsx5hie8ep] {
    margin: 0;
    color: #495057;
    line-height: 1.5;
    font-size: 14px;
}

.notification-actions[b-dsx5hie8ep] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #f8f9fa;
    padding-top: 16px;
}

.action-btn[b-dsx5hie8ep] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    background: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.read-btn[b-dsx5hie8ep] {
    border-color: #28a745;
    color: #28a745;
}

    .read-btn:hover[b-dsx5hie8ep] {
        background: #28a745;
        color: white;
    }

.view-btn[b-dsx5hie8ep] {
    border-color: #007bff;
    color: #007bff;
}

    .view-btn:hover[b-dsx5hie8ep] {
        background: #007bff;
        color: white;
    }

.delete-btn[b-dsx5hie8ep] {
    border-color: #dc3545;
    color: #dc3545;
}

    .delete-btn:hover[b-dsx5hie8ep] {
        background: #dc3545;
        color: white;
    }

/* Empty State */
.empty-state-modern[b-dsx5hie8ep] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-dsx5hie8ep] {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state-modern h3[b-dsx5hie8ep] {
    color: #495057;
    margin-bottom: 12px;
    font-size: 24px;
}

.empty-state-modern p[b-dsx5hie8ep] {
    color: #6c757d;
    margin-bottom: 24px;
    font-size: 16px;
}

/* Pagination */
.pagination-modern[b-dsx5hie8ep] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.pagination-info[b-dsx5hie8ep] {
    color: #6c757d;
    font-size: 14px;
}

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

.pagination-btn[b-dsx5hie8ep], .pagination-number[b-dsx5hie8ep] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    background: white;
    color: #495057;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .pagination-btn:hover:not(:disabled)[b-dsx5hie8ep], .pagination-number:hover[b-dsx5hie8ep] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

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

    .pagination-number.active[b-dsx5hie8ep] {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }

/* Unauthorized */
.unauthorized-container[b-dsx5hie8ep] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.unauthorized-content[b-dsx5hie8ep] {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-dsx5hie8ep] {
        font-size: 48px;
        color: #dc3545;
        margin-bottom: 16px;
    }

    .unauthorized-content h3[b-dsx5hie8ep] {
        color: #495057;
        margin-bottom: 12px;
    }

    .unauthorized-content p[b-dsx5hie8ep] {
        color: #6c757d;
        margin-bottom: 20px;
    }

/* RTL Support */
[dir="rtl"] .notification-card[b-dsx5hie8ep] {
    border-left: none;
    border-right: 4px solid;
}

    [dir="rtl"] .notification-card.unread[b-dsx5hie8ep] {
        border-right: 4px solid #007bff;
    }

    [dir="rtl"] .notification-card.urgent[b-dsx5hie8ep] {
        border-right: 4px solid #dc3545;
    }

    [dir="rtl"] .notification-card.high[b-dsx5hie8ep] {
        border-right: 4px solid #ffc107;
    }

[dir="rtl"] .search-icon[b-dsx5hie8ep] {
    right: auto;
    left: 12px;
}

[dir="rtl"] .clear-search-btn[b-dsx5hie8ep] {
    right: auto;
    left: 12px;
}

[dir="rtl"] .unread-indicator[b-dsx5hie8ep] {
    right: auto;
    left: -2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notifications-page[b-dsx5hie8ep] {
        padding: 12px;
    }

    .page-header-enhanced[b-dsx5hie8ep] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

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

    .stats-cards-row[b-dsx5hie8ep] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .filters-row[b-dsx5hie8ep] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .search-section[b-dsx5hie8ep] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-header[b-dsx5hie8ep] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-time[b-dsx5hie8ep] {
        text-align: left;
        min-width: auto;
    }

    .notification-actions[b-dsx5hie8ep] {
        justify-content: center;
    }

    .pagination-modern[b-dsx5hie8ep] {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-controls[b-dsx5hie8ep] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-dsx5hie8ep] {
        font-size: 24px;
    }

    .stat-card-modern[b-dsx5hie8ep] {
        padding: 16px;
    }

    .stat-number[b-dsx5hie8ep] {
        font-size: 24px;
    }

    .notification-content[b-dsx5hie8ep] {
        padding: 16px;
    }

    .notification-icon[b-dsx5hie8ep] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .notification-title[b-dsx5hie8ep] {
        font-size: 14px;
    }
}
/* _content/Sahelly/Components/Pages/Customer/CustomerProfile.razor.rz.scp.css */

/* CustomerProfile.razor.css
   Modern Professional Redesign that follows app.css architecture 
   and Users.razor.css design language */

/* Page Container */
.profile-page[b-2rneglrt3u] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .profile-page[b-2rneglrt3u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .profile-page > *[b-2rneglrt3u] {
        position: relative;
        z-index: 1;
    }

/* Profile Header */
.profile-header[b-2rneglrt3u] {
    margin-bottom: 32px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.profile-cover[b-2rneglrt3u] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40px 20px;
    position: relative;
}

    .profile-cover[b-2rneglrt3u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('/images/profile-pattern.png');
        opacity: 0.05;
        z-index: 0;
    }

.profile-info[b-2rneglrt3u] {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.profile-avatar[b-2rneglrt3u] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    background: #f1f5f9;
}

    .profile-avatar img[b-2rneglrt3u] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.avatar-placeholder[b-2rneglrt3u] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #9ca3af;
}

.change-photo-btn[b-2rneglrt3u] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .change-photo-btn:hover[b-2rneglrt3u] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

.profile-details[b-2rneglrt3u] {
    color: white;
}

    .profile-details h2[b-2rneglrt3u] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 4px 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.profile-username[b-2rneglrt3u] {
    font-size: 16px;
    opacity: 0.9;
    margin: 0 0 8px 0;
}

.customer-code[b-2rneglrt3u] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 14px;
    margin: 0;
}

.profile-stats[b-2rneglrt3u] {
    display: flex;
    gap: 24px;
    margin-top: 16px;
}

.stat[b-2rneglrt3u] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-2rneglrt3u] {
    font-size: 24px;
    font-weight: 700;
}

.stat-label[b-2rneglrt3u] {
    font-size: 13px;
    opacity: 0.8;
}

/* Content Section */
.profile-content[b-2rneglrt3u] {
    padding: 0 12px;
}

.profile-sidebar[b-2rneglrt3u] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-menu[b-2rneglrt3u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-item[b-2rneglrt3u] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    color: #4b5563;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .menu-item:hover[b-2rneglrt3u] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transform: translateX(4px);
    }

    .menu-item.active[b-2rneglrt3u] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    }

    .menu-item i[b-2rneglrt3u] {
        font-size: 18px;
        width: 24px;
        text-align: center;
    }

/* Content Cards */
.content-card[b-2rneglrt3u] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .content-card:hover[b-2rneglrt3u] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

.card-header[b-2rneglrt3u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .card-header h3[b-2rneglrt3u] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: #4c1d95;
    }

.btn-primary[b-2rneglrt3u] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-2rneglrt3u] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.card-body[b-2rneglrt3u] {
    padding: 24px;
}

/* Personal Info Grid */
.info-grid[b-2rneglrt3u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.info-item[b-2rneglrt3u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .info-item.full-width[b-2rneglrt3u] {
        grid-column: 1 / -1;
    }

    .info-item label[b-2rneglrt3u] {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
    }

    .info-item p[b-2rneglrt3u] {
        font-size: 16px;
        color: #1f2937;
        font-weight: 500;
        margin: 0;
    }

/* Status Badge */
.status-badge[b-2rneglrt3u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

    .status-badge.active[b-2rneglrt3u] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-2rneglrt3u] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

/* Credit Information */
.credit-info-grid[b-2rneglrt3u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.credit-item[b-2rneglrt3u] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    padding: 16px;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

    .credit-item:hover[b-2rneglrt3u] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        border-color: rgba(102, 126, 234, 0.3);
    }

    .credit-item label[b-2rneglrt3u] {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        display: block;
        margin-bottom: 8px;
    }

.credit-amount[b-2rneglrt3u] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    .credit-amount.available[b-2rneglrt3u] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .credit-amount.due[b-2rneglrt3u] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Recent Activity */
.activity-list[b-2rneglrt3u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item[b-2rneglrt3u] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .activity-item:hover[b-2rneglrt3u] {
        transform: translateX(5px);
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        border-color: rgba(102, 126, 234, 0.2);
    }

.activity-icon[b-2rneglrt3u] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}

.activity-details[b-2rneglrt3u] {
    flex: 1;
}

    .activity-details h5[b-2rneglrt3u] {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: #1f2937;
    }

    .activity-details p[b-2rneglrt3u] {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
    }

.activity-amount[b-2rneglrt3u] {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
}

.view-all-link[b-2rneglrt3u] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .view-all-link:hover[b-2rneglrt3u] {
        color: #764ba2;
        transform: translateX(4px);
    }

    .view-all-link i[b-2rneglrt3u] {
        font-size: 12px;
    }

/* Empty State */
.empty-state[b-2rneglrt3u] {
    padding: 40px;
    text-align: center;
    color: #6b7280;
}

    .empty-state i[b-2rneglrt3u] {
        font-size: 50px;
        color: #d1d5db;
        margin-bottom: 16px;
    }

    .empty-state p[b-2rneglrt3u] {
        font-size: 16px;
        margin: 0;
    }

/* Stats Grid */
.stats-grid[b-2rneglrt3u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.stats-item[b-2rneglrt3u] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .stats-item:hover[b-2rneglrt3u] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(102, 126, 234, 0.2);
    }

.stats-icon[b-2rneglrt3u] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .stats-icon.completed[b-2rneglrt3u] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .stats-icon.pending[b-2rneglrt3u] {
        background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    }

    .stats-icon.payments[b-2rneglrt3u] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stats-icon.amount[b-2rneglrt3u] {
        background: linear-gradient(135deg, #6edcc4 0%, #1aab8b 100%);
    }

.stats-info[b-2rneglrt3u] {
    display: flex;
    flex-direction: column;
}

.stats-value[b-2rneglrt3u] {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.stats-label[b-2rneglrt3u] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Quick Actions */
.quick-actions[b-2rneglrt3u] {
    margin-top: 32px;
}

    .quick-actions h4[b-2rneglrt3u] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #4c1d95;
    }

.actions-grid[b-2rneglrt3u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.action-card[b-2rneglrt3u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .action-card:hover[b-2rneglrt3u] {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        border-color: rgba(102, 126, 234, 0.3);
    }

        .action-card:hover i[b-2rneglrt3u] {
            transform: scale(1.2);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

    .action-card i[b-2rneglrt3u] {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 8px;
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .action-card span[b-2rneglrt3u] {
        font-weight: 600;
        color: #4b5563;
        text-align: center;
        font-size: 15px;
    }

/* Alert Styles */
.alert[b-2rneglrt3u] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(251, 191, 36, 0.1);
    color: #d97706;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

    .alert i[b-2rneglrt3u] {
        font-size: 24px;
    }

/* Loading Container */
.loading-container[b-2rneglrt3u] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.spinner-border[b-2rneglrt3u] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-2rneglrt3u 0.8s linear infinite;
}

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

/* Responsive Styles */
@media (max-width: 992px) {
    .profile-info[b-2rneglrt3u] {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats[b-2rneglrt3u] {
        justify-content: center;
    }

    .info-grid[b-2rneglrt3u], .credit-info-grid[b-2rneglrt3u], .stats-grid[b-2rneglrt3u], .actions-grid[b-2rneglrt3u] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .profile-page[b-2rneglrt3u] {
        padding: 16px;
    }

    .profile-header[b-2rneglrt3u] {
        margin-bottom: 24px;
    }

    .profile-avatar[b-2rneglrt3u] {
        width: 100px;
        height: 100px;
    }

    .profile-details h2[b-2rneglrt3u] {
        font-size: 24px;
    }

    .stat-value[b-2rneglrt3u] {
        font-size: 20px;
    }

    .card-header[b-2rneglrt3u] {
        padding: 16px;
    }

    .card-body[b-2rneglrt3u] {
        padding: 16px;
    }

    .info-grid[b-2rneglrt3u], .credit-info-grid[b-2rneglrt3u], .stats-grid[b-2rneglrt3u] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 576px) {
    .profile-stats[b-2rneglrt3u] {
        flex-direction: column;
        gap: 10px;
    }

    .stat[b-2rneglrt3u] {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .activity-item[b-2rneglrt3u] {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .activity-details[b-2rneglrt3u] {
        width: 100%;
    }

    .activity-amount[b-2rneglrt3u] {
        align-self: flex-end;
        margin-top: 10px;
    }

    .actions-grid[b-2rneglrt3u] {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .profile-page[b-2rneglrt3u] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .profile-page[b-2rneglrt3u]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .profile-sidebar[b-2rneglrt3u],
[data-theme="dark"] .content-card[b-2rneglrt3u],
[data-theme="dark"] .action-card[b-2rneglrt3u] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .card-header[b-2rneglrt3u] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .card-header h3[b-2rneglrt3u] {
        color: #e2e8f0;
    }

[data-theme="dark"] .menu-item[b-2rneglrt3u] {
    color: #e2e8f0;
}

    [data-theme="dark"] .menu-item:hover[b-2rneglrt3u] {
        background: rgba(102, 126, 234, 0.2);
        color: #a78bfa;
    }

[data-theme="dark"] .info-item label[b-2rneglrt3u] {
    color: #94a3b8;
}

[data-theme="dark"] .info-item p[b-2rneglrt3u] {
    color: #e2e8f0;
}

[data-theme="dark"] .activity-item[b-2rneglrt3u],
[data-theme="dark"] .stats-item[b-2rneglrt3u] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .activity-item:hover[b-2rneglrt3u],
    [data-theme="dark"] .stats-item:hover[b-2rneglrt3u] {
        background: rgba(30, 41, 59, 0.9);
    }

[data-theme="dark"] .activity-details h5[b-2rneglrt3u] {
    color: #e2e8f0;
}

[data-theme="dark"] .activity-details p[b-2rneglrt3u] {
    color: #94a3b8;
}

[data-theme="dark"] .activity-amount[b-2rneglrt3u] {
    color: #a78bfa;
}

[data-theme="dark"] .stats-value[b-2rneglrt3u] {
    color: #e2e8f0;
}

[data-theme="dark"] .stats-label[b-2rneglrt3u] {
    color: #94a3b8;
}

[data-theme="dark"] .empty-state[b-2rneglrt3u] {
    color: #94a3b8;
}

    [data-theme="dark"] .empty-state i[b-2rneglrt3u] {
        color: #475569;
    }

[data-theme="dark"] .quick-actions h4[b-2rneglrt3u] {
    color: #e2e8f0;
}

[data-theme="dark"] .action-card span[b-2rneglrt3u] {
    color: #e2e8f0;
}

[data-theme="dark"] .alert[b-2rneglrt3u] {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

[data-theme="dark"] .credit-item[b-2rneglrt3u] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(30, 41, 59, 0.5) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}
/* _content/Sahelly/Components/Pages/Customer/EditProfile.razor.rz.scp.css */
.edit-profile-container[b-sztf9kkz10] {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Page Header */
.page-header[b-sztf9kkz10] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.back-btn[b-sztf9kkz10] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .back-btn:hover[b-sztf9kkz10] {
        background: var(--border-color);
    }

.page-header h1[b-sztf9kkz10] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Loading Spinner */
.loading-spinner[b-sztf9kkz10] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Profile Image Section */
.profile-image-section[b-sztf9kkz10] {
    background: var(--surface-color);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.current-avatar[b-sztf9kkz10] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.avatar-placeholder[b-sztf9kkz10] {
    font-size: 48px;
    color: var(--text-tertiary);
}

.image-actions[b-sztf9kkz10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upload-btn[b-sztf9kkz10], .remove-btn[b-sztf9kkz10] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-btn[b-sztf9kkz10] {
    background: var(--primary-color);
    color: white;
}

    .upload-btn:hover[b-sztf9kkz10] {
        background: var(--primary-dark);
    }

.remove-btn[b-sztf9kkz10] {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}

    .remove-btn:hover[b-sztf9kkz10] {
        background: #ef444410;
    }

/* Alerts */
.alert[b-sztf9kkz10] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-success[b-sztf9kkz10] {
    background: #10b98120;
    color: #10b981;
}

.alert-danger[b-sztf9kkz10] {
    background: #ef444420;
    color: #ef4444;
}

/* Tab Navigation */
.tab-navigation[b-sztf9kkz10] {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 16px;
}

.tab-btn[b-sztf9kkz10] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

    .tab-btn.active[b-sztf9kkz10] {
        background: var(--surface-color);
        color: var(--primary-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .tab-btn i[b-sztf9kkz10] {
        font-size: 16px;
    }

/* Tab Content */
.tab-content[b-sztf9kkz10] {
    background: var(--surface-color);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Profile Form */
.profile-form[b-sztf9kkz10] {
    max-width: 600px;
    margin: 0 auto;
}

.form-section[b-sztf9kkz10] {
    margin-bottom: 30px;
}

    .form-section h3[b-sztf9kkz10] {
        margin: 0 0 20px 0;
        font-size: 20px;
        font-weight: 600;
        color: var(--text-primary);
    }

.form-group[b-sztf9kkz10] {
    margin-bottom: 20px;
}

    .form-group label[b-sztf9kkz10] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-secondary);
    }

        .form-group label i[b-sztf9kkz10] {
            font-size: 14px;
            color: var(--primary-color);
        }

.form-control[b-sztf9kkz10] {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 16px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    .form-control:focus[b-sztf9kkz10] {
        outline: none;
        border-color: var(--primary-color);
        background: var(--surface-color);
    }

textarea.form-control[b-sztf9kkz10] {
    resize: vertical;
    min-height: 100px;
}

select.form-control[b-sztf9kkz10] {
    cursor: pointer;
}

.form-row[b-sztf9kkz10] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Password Input Wrapper */
.password-input-wrapper[b-sztf9kkz10] {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-input-wrapper .form-control[b-sztf9kkz10] {
        padding-right: 48px;
    }

.toggle-password[b-sztf9kkz10] {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
}

    .toggle-password:hover[b-sztf9kkz10] {
        color: var(--text-primary);
    }

/* Password Requirements */
.password-requirements[b-sztf9kkz10] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
}

    .password-requirements p[b-sztf9kkz10] {
        margin: 0 0 8px 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .password-requirements ul[b-sztf9kkz10] {
        margin: 0;
        padding-left: 20px;
    }

    .password-requirements li[b-sztf9kkz10] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

/* Form Actions */
.form-actions[b-sztf9kkz10] {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.save-btn[b-sztf9kkz10], .cancel-btn[b-sztf9kkz10] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-btn[b-sztf9kkz10] {
    background: var(--primary-color);
    color: white;
}

    .save-btn:hover:not(:disabled)[b-sztf9kkz10] {
        background: var(--primary-dark);
        transform: translateY(-2px);
    }

    .save-btn:disabled[b-sztf9kkz10] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.cancel-btn[b-sztf9kkz10] {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

    .cancel-btn:hover[b-sztf9kkz10] {
        background: var(--bg-tertiary);
        border-color: var(--text-tertiary);
    }

/* Validation Messages */
.validation-message[b-sztf9kkz10] {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #ef4444;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .edit-profile-container[b-sztf9kkz10] {
        padding: 16px;
    }

    .page-header[b-sztf9kkz10] {
        flex-wrap: wrap;
    }

        .page-header h1[b-sztf9kkz10] {
            font-size: 24px;
            width: 100%;
            margin-top: 12px;
        }

    .profile-image-section[b-sztf9kkz10] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .image-actions[b-sztf9kkz10] {
        width: 100%;
    }

    .tab-navigation[b-sztf9kkz10] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn[b-sztf9kkz10] {
        white-space: nowrap;
    }

    .tab-content[b-sztf9kkz10] {
        padding: 20px;
    }

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

    .form-actions[b-sztf9kkz10] {
        flex-direction: column;
    }

    .save-btn[b-sztf9kkz10], .cancel-btn[b-sztf9kkz10] {
        width: 100%;
    }
}

/* RTL Support */
.rtl .back-btn i[b-sztf9kkz10] {
    transform: rotate(180deg);
}

.rtl .page-header[b-sztf9kkz10] {
    flex-direction: row-reverse;
}

.rtl .form-group label[b-sztf9kkz10] {
    flex-direction: row-reverse;
}

.rtl .password-input-wrapper .form-control[b-sztf9kkz10] {
    padding-right: 16px;
    padding-left: 48px;
}

.rtl .toggle-password[b-sztf9kkz10] {
    right: auto;
    left: 12px;
}

.rtl .password-requirements ul[b-sztf9kkz10] {
    padding-left: 0;
    padding-right: 20px;
}
/* _content/Sahelly/Components/Pages/Customer/MyPurchases.razor.rz.scp.css */

/* MyPurchases Page - Modern E-Commerce Style
   Following app.css architecture and Users.razor.css design patterns */

/* Page Container */
.purchases-container[b-clhk9uflhv] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .purchases-container[b-clhk9uflhv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .purchases-container > *[b-clhk9uflhv] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-clhk9uflhv] {
    margin-bottom: 32px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .page-header h1[b-clhk9uflhv] {
        font-size: 32px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

.header-actions[b-clhk9uflhv] {
    display: flex;
    gap: 12px;
}

.filter-btn[b-clhk9uflhv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.2);
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .filter-btn:hover[b-clhk9uflhv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .filter-btn i[b-clhk9uflhv] {
        font-size: 16px;
    }

/* Purchase Tabs */
.purchase-tabs[b-clhk9uflhv] {
    display: flex;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 6px;
    margin-bottom: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.tab-btn[b-clhk9uflhv] {
    flex: 1;
    padding: 16px;
    text-align: center;
    background: transparent;
    border: none;
    color: #667eea;
    font-weight: 600;
    font-size: 16px;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .tab-btn i[b-clhk9uflhv] {
        font-size: 18px;
    }

    .tab-btn:hover[b-clhk9uflhv] {
        background: rgba(102, 126, 234, 0.1);
    }

    .tab-btn.active[b-clhk9uflhv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

.tab-badge[b-clhk9uflhv] {
    position: relative;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 4px 8px rgba(245, 87, 108, 0.3);
}

/* Loading State */
.loading-state[b-clhk9uflhv] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.spinner-border[b-clhk9uflhv] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-clhk9uflhv 0.8s linear infinite;
}

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

/* Orders List */
.orders-list[b-clhk9uflhv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
}

.order-card[b-clhk9uflhv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

    .order-card:hover[b-clhk9uflhv] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .order-card[b-clhk9uflhv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        opacity: 0.5;
        z-index: 0;
    }

.order-header[b-clhk9uflhv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.order-info h3[b-clhk9uflhv] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #4c1d95;
}

.order-date[b-clhk9uflhv] {
    font-size: 14px;
    color: #6b7280;
    margin: 4px 0 0 0;
}

.order-status[b-clhk9uflhv] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .order-status.pending[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .order-status.processing[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #6366f1;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .order-status.shipped[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .order-status.delivered[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .order-status.cancelled[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.order-items[b-clhk9uflhv] {
    padding: 0 20px;
}

.order-item[b-clhk9uflhv] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .order-item:last-child[b-clhk9uflhv] {
        border-bottom: none;
    }

    .order-item img[b-clhk9uflhv] {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 12px;
        background: #f3f4f6;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
    }

.order-card:hover .order-item img[b-clhk9uflhv] {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.item-details[b-clhk9uflhv] {
    flex: 1;
}

.item-name[b-clhk9uflhv] {
    font-weight: 600;
    margin: 0 0 5px 0;
    font-size: 15px;
    color: #1f2937;
}

.item-quantity[b-clhk9uflhv] {
    color: #6b7280;
    margin: 0;
    font-size: 14px;
}

.item-price[b-clhk9uflhv] {
    font-weight: 700;
    font-size: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.more-items[b-clhk9uflhv] {
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    padding: 10px 0;
    margin: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 10px;
    font-weight: 500;
}

.order-footer[b-clhk9uflhv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.order-total[b-clhk9uflhv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #4c1d95;
}

    .order-total span[b-clhk9uflhv] {
        font-size: 14px;
    }

    .order-total strong[b-clhk9uflhv] {
        font-size: 18px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.order-payment[b-clhk9uflhv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.payment-method[b-clhk9uflhv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
}

    .payment-method i[b-clhk9uflhv] {
        color: #667eea;
    }

.installment-badge[b-clhk9uflhv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(59, 201, 104, 0.2) 0%, rgba(50, 209, 183, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(59, 201, 104, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

    .installment-badge i[b-clhk9uflhv] {
        font-size: 10px;
    }

.order-actions[b-clhk9uflhv] {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.action-btn[b-clhk9uflhv] {
    flex: 1;
    border: none;
    padding: 12px 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .action-btn i[b-clhk9uflhv] {
        font-size: 14px;
    }

    .action-btn.rate[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
        color: #d97706;
    }

        .action-btn.rate:hover[b-clhk9uflhv] {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(251, 191, 36, 0.3);
        }

    .action-btn.track[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
        color: #3b82f6;
    }

        .action-btn.track:hover[b-clhk9uflhv] {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
        }

    .action-btn.details[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #6366f1;
    }

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

/* Installments Tab */
.installments-summary[b-clhk9uflhv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.summary-card[b-clhk9uflhv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card i[b-clhk9uflhv] {
        font-size: 32px;
        padding: 16px;
        border-radius: 16px;
        color: white;
    }

    .summary-card.total i[b-clhk9uflhv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
    }

    .summary-card.upcoming i[b-clhk9uflhv] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        box-shadow: 0 8px 16px rgba(79, 172, 254, 0.3);
    }

    .summary-card.overdue i[b-clhk9uflhv] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
        box-shadow: 0 8px 16px rgba(245, 87, 108, 0.3);
    }

    .summary-card p[b-clhk9uflhv] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

    .summary-card h3[b-clhk9uflhv] {
        margin: 8px 0 0 0;
        font-size: 28px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .summary-card:hover[b-clhk9uflhv] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

.installments-list[b-clhk9uflhv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
}

.installment-card[b-clhk9uflhv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .installment-card:hover[b-clhk9uflhv] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .installment-card.overdue[b-clhk9uflhv] {
        border-color: rgba(245, 87, 108, 0.5);
        box-shadow: 0 10px 30px rgba(245, 87, 108, 0.15);
    }

        .installment-card.overdue:hover[b-clhk9uflhv] {
            box-shadow: 0 20px 40px rgba(245, 87, 108, 0.2);
        }

.installment-header[b-clhk9uflhv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.installment-card.overdue .installment-header[b-clhk9uflhv] {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.05) 0%, rgba(240, 147, 251, 0.05) 100%);
}

.installment-info h4[b-clhk9uflhv] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
}

.installment-card.overdue .installment-info h4[b-clhk9uflhv] {
    color: #be123c;
}

.order-ref[b-clhk9uflhv] {
    font-size: 14px;
    color: #6b7280;
    margin: 4px 0 0 0;
}

.installment-amount[b-clhk9uflhv] {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.installment-card.overdue .installment-amount[b-clhk9uflhv] {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.installment-details[b-clhk9uflhv] {
    padding: 20px;
}

.detail-item[b-clhk9uflhv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #4b5563;
}

    .detail-item i[b-clhk9uflhv] {
        width: 16px;
        color: #667eea;
    }

    .detail-item.paid i[b-clhk9uflhv] {
        color: #059669;
    }

    .detail-item.overdue i[b-clhk9uflhv] {
        color: #dc2626;
    }

.installment-card.overdue .detail-item i[b-clhk9uflhv] {
    color: #f5576c;
}

.detail-item span[b-clhk9uflhv] {
    color: #6b7280;
}

.detail-item strong[b-clhk9uflhv] {
    font-weight: 600;
    color: #1f2937;
    margin-left: auto;
}

.installment-status[b-clhk9uflhv] {
    padding: 0 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-badge[b-clhk9uflhv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.upcoming[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #6366f1;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .status-badge.due[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .status-badge.paid[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(59, 201, 104, 0.2) 0%, rgba(50, 209, 183, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(59, 201, 104, 0.3);
    }

    .status-badge.overdue[b-clhk9uflhv] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.late-fee[b-clhk9uflhv] {
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
}

.installment-actions[b-clhk9uflhv] {
    padding: 0 20px 20px;
}

.pay-now-btn[b-clhk9uflhv] {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .pay-now-btn:hover[b-clhk9uflhv] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.installment-card.overdue .pay-now-btn[b-clhk9uflhv] {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    box-shadow: 0 4px 10px rgba(245, 87, 108, 0.2);
}

    .installment-card.overdue .pay-now-btn:hover[b-clhk9uflhv] {
        box-shadow: 0 8px 15px rgba(245, 87, 108, 0.3);
    }

/* Empty State */
.empty-state[b-clhk9uflhv] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

    .empty-state i[b-clhk9uflhv] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-clhk9uflhv] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-clhk9uflhv] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 30px;
    }

.start-shopping-btn[b-clhk9uflhv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .start-shopping-btn:hover[b-clhk9uflhv] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

/* Filter Sheet */
.filter-sheet[b-clhk9uflhv] {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 1000;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

    .filter-sheet.show[b-clhk9uflhv] {
        right: 0;
    }

.sheet-content[b-clhk9uflhv] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sheet-header[b-clhk9uflhv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .sheet-header h3[b-clhk9uflhv] {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.sheet-close[b-clhk9uflhv] {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .sheet-close:hover[b-clhk9uflhv] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transform: rotate(90deg);
    }

.sheet-body[b-clhk9uflhv] {
    flex: 1;
    padding: 20px;
}

.filter-section[b-clhk9uflhv] {
    margin-bottom: 30px;
}

    .filter-section h4[b-clhk9uflhv] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin: 0 0 16px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.filter-options[b-clhk9uflhv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-option[b-clhk9uflhv] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #4b5563;
    transition: all 0.2s;
}

    .filter-option:hover[b-clhk9uflhv] {
        color: #667eea;
    }

    .filter-option input[b-clhk9uflhv] {
        width: 20px;
        height: 20px;
        accent-color: #667eea;
        cursor: pointer;
    }

.date-inputs[b-clhk9uflhv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .date-inputs input[b-clhk9uflhv] {
        flex: 1;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .date-inputs input:focus[b-clhk9uflhv] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

    .date-inputs span[b-clhk9uflhv] {
        color: #6b7280;
    }

.filter-actions[b-clhk9uflhv] {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.apply-filter-btn[b-clhk9uflhv] {
    flex: 2;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .apply-filter-btn:hover[b-clhk9uflhv] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.reset-filter-btn[b-clhk9uflhv] {
    flex: 1;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .reset-filter-btn:hover[b-clhk9uflhv] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Dark Theme Support */
[data-theme="dark"] .purchases-container[b-clhk9uflhv] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .purchases-container[b-clhk9uflhv]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-clhk9uflhv],
[data-theme="dark"] .purchase-tabs[b-clhk9uflhv],
[data-theme="dark"] .order-card[b-clhk9uflhv],
[data-theme="dark"] .summary-card[b-clhk9uflhv],
[data-theme="dark"] .installment-card[b-clhk9uflhv],
[data-theme="dark"] .empty-state[b-clhk9uflhv],
[data-theme="dark"] .sheet-content[b-clhk9uflhv] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .filter-btn[b-clhk9uflhv] {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .order-info h3[b-clhk9uflhv],
[data-theme="dark"] .installment-info h4[b-clhk9uflhv],
[data-theme="dark"] .empty-state h3[b-clhk9uflhv],
[data-theme="dark"] .filter-section h4[b-clhk9uflhv] {
    color: #e2e8f0;
}

[data-theme="dark"] .order-date[b-clhk9uflhv],
[data-theme="dark"] .order-ref[b-clhk9uflhv],
[data-theme="dark"] .item-quantity[b-clhk9uflhv],
[data-theme="dark"] .empty-state p[b-clhk9uflhv],
[data-theme="dark"] .summary-card p[b-clhk9uflhv],
[data-theme="dark"] .detail-item span[b-clhk9uflhv] {
    color: #94a3b8;
}

[data-theme="dark"] .item-name[b-clhk9uflhv],
[data-theme="dark"] .detail-item strong[b-clhk9uflhv] {
    color: #e2e8f0;
}

[data-theme="dark"] .filter-option[b-clhk9uflhv] {
    color: #cbd5e1;
}

    [data-theme="dark"] .filter-option:hover[b-clhk9uflhv] {
        color: #a78bfa;
    }

[data-theme="dark"] .date-inputs input[b-clhk9uflhv] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .date-inputs input:focus[b-clhk9uflhv] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .date-inputs span[b-clhk9uflhv] {
    color: #94a3b8;
}

[data-theme="dark"] .sheet-close[b-clhk9uflhv] {
    color: #94a3b8;
}

    [data-theme="dark"] .sheet-close:hover[b-clhk9uflhv] {
        background: rgba(102, 126, 234, 0.2);
        color: #a78bfa;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .installments-summary[b-clhk9uflhv] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .orders-list[b-clhk9uflhv],
    .installments-list[b-clhk9uflhv] {
        grid-template-columns: 1fr;
    }

    .installments-summary[b-clhk9uflhv] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .purchases-container[b-clhk9uflhv] {
        padding: 16px;
    }

    .page-header[b-clhk9uflhv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
    }

    .header-actions[b-clhk9uflhv] {
        width: 100%;
    }

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

    .installments-summary[b-clhk9uflhv] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .order-actions[b-clhk9uflhv] {
        flex-direction: column;
        gap: 10px;
    }

    .filter-sheet[b-clhk9uflhv] {
        width: 100%;
        max-width: 100%;
    }

    .sheet-content[b-clhk9uflhv] {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .purchase-tabs[b-clhk9uflhv] {
        padding: 4px;
    }

    .tab-btn[b-clhk9uflhv] {
        padding: 12px 8px;
        font-size: 14px;
    }

        .tab-btn i[b-clhk9uflhv] {
            font-size: 16px;
        }

    .order-header[b-clhk9uflhv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .order-status[b-clhk9uflhv] {
        align-self: flex-start;
    }

    .order-footer[b-clhk9uflhv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .order-payment[b-clhk9uflhv] {
        align-items: flex-start;
    }

    .filter-actions[b-clhk9uflhv] {
        flex-direction: column;
    }
}

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

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

/* Print Styles */
@media print {
    .filter-btn[b-clhk9uflhv],
    .purchase-tabs[b-clhk9uflhv],
    .order-actions[b-clhk9uflhv],
    .filter-sheet[b-clhk9uflhv],
    .installment-actions[b-clhk9uflhv] {
        display: none !important;
    }

    .purchases-container[b-clhk9uflhv],
    .order-card[b-clhk9uflhv],
    .installment-card[b-clhk9uflhv],
    .summary-card[b-clhk9uflhv] {
        box-shadow: none !important;
        background: white !important;
        border: 1px solid #e5e7eb;
    }
}

/* Focus States for Accessibility */
*:focus[b-clhk9uflhv] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-clhk9uflhv] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-clhk9uflhv] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-clhk9uflhv],
    .filter-btn[b-clhk9uflhv],
    .tab-btn.active[b-clhk9uflhv],
    .order-status[b-clhk9uflhv],
    .status-badge[b-clhk9uflhv],
    .pay-now-btn[b-clhk9uflhv],
    .start-shopping-btn[b-clhk9uflhv],
    .apply-filter-btn[b-clhk9uflhv],
    .reset-filter-btn[b-clhk9uflhv] {
        border: 2px solid currentColor;
    }
}

/* RTL Support */
html[dir="rtl"] .filter-sheet[b-clhk9uflhv] {
    left: -100%;
    right: auto;
}

    html[dir="rtl"] .filter-sheet.show[b-clhk9uflhv] {
        left: 0;
        right: auto;
    }

html[dir="rtl"] .sheet-content[b-clhk9uflhv] {
    left: 0;
    right: auto;
}

html[dir="rtl"] .sheet-header[b-clhk9uflhv],
html[dir="rtl"] .order-header[b-clhk9uflhv],
html[dir="rtl"] .order-footer[b-clhk9uflhv],
html[dir="rtl"] .installment-header[b-clhk9uflhv],
html[dir="rtl"] .installment-status[b-clhk9uflhv] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .action-btn[b-clhk9uflhv],
html[dir="rtl"] .pay-now-btn[b-clhk9uflhv],
html[dir="rtl"] .start-shopping-btn[b-clhk9uflhv],
html[dir="rtl"] .filter-btn[b-clhk9uflhv],
html[dir="rtl"] .tab-btn[b-clhk9uflhv] {
    flex-direction: row-reverse;
}
/* _content/Sahelly/Components/Pages/Customer/NotificationsPge.razor.rz.scp.css */
/* Notifications Page Styles */
.notifications-page[b-iude1lfc0c] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
}

/* Header Styles */
.page-header-enhanced[b-iude1lfc0c] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-content[b-iude1lfc0c] {
    flex: 1;
}

.breadcrumb-modern[b-iude1lfc0c] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.breadcrumb-item[b-iude1lfc0c] {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .breadcrumb-item:hover[b-iude1lfc0c] {
        color: #007bff;
    }

.breadcrumb-current[b-iude1lfc0c] {
    color: #495057;
    font-weight: 500;
}

.separator[b-iude1lfc0c] {
    color: #dee2e6;
}

.header-title-section[b-iude1lfc0c] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title-modern[b-iude1lfc0c] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
}

.title-icon[b-iude1lfc0c] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.page-subtitle-enhanced[b-iude1lfc0c] {
    margin: 8px 0 0 0;
    color: #6c757d;
    font-size: 16px;
}

.header-actions[b-iude1lfc0c] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-primary-modern[b-iude1lfc0c], .btn-secondary-modern[b-iude1lfc0c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary-modern[b-iude1lfc0c] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

    .btn-primary-modern:hover[b-iude1lfc0c] {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
    }

.btn-secondary-modern[b-iude1lfc0c] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-secondary-modern:hover[b-iude1lfc0c] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

/* Loading Styles */
.loading-modern[b-iude1lfc0c] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner-container[b-iude1lfc0c] {
    text-align: center;
}

.spinner-modern[b-iude1lfc0c] {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin-b-iude1lfc0c 1s linear infinite;
    margin: 0 auto 16px;
}

.loading-text-modern[b-iude1lfc0c] {
    color: #6c757d;
    font-size: 16px;
    margin: 0;
}

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

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

@keyframes spinning-b-iude1lfc0c {
    0% {
        transform: rotate(0deg);
    }

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

.spinning[b-iude1lfc0c] {
    animation: spinning-b-iude1lfc0c 1s linear infinite;
}

/* Statistics Cards */
.stats-cards-row[b-iude1lfc0c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card-modern[b-iude1lfc0c] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

    .stat-card-modern:hover[b-iude1lfc0c] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

.stat-icon-container[b-iude1lfc0c] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.total-card .stat-icon-container[b-iude1lfc0c] {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.unread-card .stat-icon-container[b-iude1lfc0c] {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.high-priority-card .stat-icon-container[b-iude1lfc0c] {
    background: linear-gradient(135deg, #ffc107, #e0a800);
}

.today-card .stat-icon-container[b-iude1lfc0c] {
    background: linear-gradient(135deg, #28a745, #1e7e34);
}

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

.stat-number[b-iude1lfc0c] {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #2c3e50;
}

.stat-label[b-iude1lfc0c] {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

/* Filters Section */
.filters-section-modern[b-iude1lfc0c] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.filters-row[b-iude1lfc0c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.filter-group[b-iude1lfc0c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-iude1lfc0c] {
    font-weight: 500;
    color: #495057;
    font-size: 14px;
    margin: 0;
}

.filter-select[b-iude1lfc0c] {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    color: #495057;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .filter-select:focus[b-iude1lfc0c] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.search-section[b-iude1lfc0c] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.search-input-container[b-iude1lfc0c] {
    flex: 1;
    position: relative;
}

.search-input[b-iude1lfc0c] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .search-input:focus[b-iude1lfc0c] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.search-icon[b-iude1lfc0c] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.clear-search-btn[b-iude1lfc0c] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    .clear-search-btn:hover[b-iude1lfc0c] {
        background: #f8f9fa;
        color: #495057;
    }

.search-btn[b-iude1lfc0c] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .search-btn:hover[b-iude1lfc0c] {
        background: linear-gradient(135deg, #0056b3, #004085);
    }

/* Notifications Container */
.notifications-container[b-iude1lfc0c] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.notifications-list[b-iude1lfc0c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-card[b-iude1lfc0c] {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

    .notification-card:hover[b-iude1lfc0c] {
        border-color: #007bff;
        box-shadow: 0 4px 20px rgba(0, 123, 255, 0.1);
        transform: translateY(-2px);
    }

    .notification-card.unread[b-iude1lfc0c] {
        border-left: 4px solid #007bff;
        background: linear-gradient(to right, rgba(0, 123, 255, 0.02), white);
    }

    .notification-card.read[b-iude1lfc0c] {
        opacity: 0.8;
    }

    .notification-card.urgent[b-iude1lfc0c] {
        border-left: 4px solid #dc3545;
    }

    .notification-card.high[b-iude1lfc0c] {
        border-left: 4px solid #ffc107;
    }

.notification-content[b-iude1lfc0c] {
    padding: 20px;
}

.notification-header[b-iude1lfc0c] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.notification-icon-wrapper[b-iude1lfc0c] {
    position: relative;
}

.notification-icon[b-iude1lfc0c] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

    .notification-icon.order[b-iude1lfc0c] {
        background: linear-gradient(135deg, #007bff, #0056b3);
    }

    .notification-icon.payment[b-iude1lfc0c] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .notification-icon.delivery[b-iude1lfc0c] {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

    .notification-icon.return[b-iude1lfc0c] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .notification-icon.system[b-iude1lfc0c] {
        background: linear-gradient(135deg, #6c757d, #5a6268);
    }

    .notification-icon.success[b-iude1lfc0c] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .notification-icon.warning[b-iude1lfc0c] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .notification-icon.error[b-iude1lfc0c] {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .notification-icon.info[b-iude1lfc0c] {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

.unread-indicator[b-iude1lfc0c] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #dc3545;
    border: 2px solid white;
    border-radius: 50%;
}

.notification-meta[b-iude1lfc0c] {
    flex: 1;
}

.notification-title[b-iude1lfc0c] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.notification-badges[b-iude1lfc0c] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.priority-badge[b-iude1lfc0c], .type-badge[b-iude1lfc0c] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .priority-badge.urgent[b-iude1lfc0c] {
        background: #dc3545;
        color: white;
    }

    .priority-badge.high[b-iude1lfc0c] {
        background: #ffc107;
        color: #212529;
    }

    .priority-badge.medium[b-iude1lfc0c] {
        background: #17a2b8;
        color: white;
    }

    .priority-badge.low[b-iude1lfc0c] {
        background: #6c757d;
        color: white;
    }

.type-badge[b-iude1lfc0c] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.notification-time[b-iude1lfc0c] {
    text-align: right;
    min-width: 120px;
}

.time-text[b-iude1lfc0c] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.date-text[b-iude1lfc0c] {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.notification-body[b-iude1lfc0c] {
    margin-bottom: 16px;
}

.notification-message[b-iude1lfc0c] {
    margin: 0;
    color: #495057;
    line-height: 1.5;
    font-size: 14px;
}

.notification-actions[b-iude1lfc0c] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #f8f9fa;
    padding-top: 16px;
}

.action-btn[b-iude1lfc0c] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    background: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.read-btn[b-iude1lfc0c] {
    border-color: #28a745;
    color: #28a745;
}

    .read-btn:hover[b-iude1lfc0c] {
        background: #28a745;
        color: white;
    }

.view-btn[b-iude1lfc0c] {
    border-color: #007bff;
    color: #007bff;
}

    .view-btn:hover[b-iude1lfc0c] {
        background: #007bff;
        color: white;
    }

.delete-btn[b-iude1lfc0c] {
    border-color: #dc3545;
    color: #dc3545;
}

    .delete-btn:hover[b-iude1lfc0c] {
        background: #dc3545;
        color: white;
    }

/* Empty State */
.empty-state-modern[b-iude1lfc0c] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-iude1lfc0c] {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state-modern h3[b-iude1lfc0c] {
    color: #495057;
    margin-bottom: 12px;
    font-size: 24px;
}

.empty-state-modern p[b-iude1lfc0c] {
    color: #6c757d;
    margin-bottom: 24px;
    font-size: 16px;
}

/* Pagination */
.pagination-modern[b-iude1lfc0c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.pagination-info[b-iude1lfc0c] {
    color: #6c757d;
    font-size: 14px;
}

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

.pagination-btn[b-iude1lfc0c], .pagination-number[b-iude1lfc0c] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    background: white;
    color: #495057;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .pagination-btn:hover:not(:disabled)[b-iude1lfc0c], .pagination-number:hover[b-iude1lfc0c] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

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

    .pagination-number.active[b-iude1lfc0c] {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }

/* Unauthorized */
.unauthorized-container[b-iude1lfc0c] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.unauthorized-content[b-iude1lfc0c] {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-iude1lfc0c] {
        font-size: 48px;
        color: #dc3545;
        margin-bottom: 16px;
    }

    .unauthorized-content h3[b-iude1lfc0c] {
        color: #495057;
        margin-bottom: 12px;
    }

    .unauthorized-content p[b-iude1lfc0c] {
        color: #6c757d;
        margin-bottom: 20px;
    }

/* RTL Support */
[dir="rtl"] .notification-card[b-iude1lfc0c] {
    border-left: none;
    border-right: 4px solid;
}

    [dir="rtl"] .notification-card.unread[b-iude1lfc0c] {
        border-right: 4px solid #007bff;
    }

    [dir="rtl"] .notification-card.urgent[b-iude1lfc0c] {
        border-right: 4px solid #dc3545;
    }

    [dir="rtl"] .notification-card.high[b-iude1lfc0c] {
        border-right: 4px solid #ffc107;
    }

[dir="rtl"] .search-icon[b-iude1lfc0c] {
    right: auto;
    left: 12px;
}

[dir="rtl"] .clear-search-btn[b-iude1lfc0c] {
    right: auto;
    left: 12px;
}

[dir="rtl"] .unread-indicator[b-iude1lfc0c] {
    right: auto;
    left: -2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notifications-page[b-iude1lfc0c] {
        padding: 12px;
    }

    .page-header-enhanced[b-iude1lfc0c] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

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

    .stats-cards-row[b-iude1lfc0c] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .filters-row[b-iude1lfc0c] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .search-section[b-iude1lfc0c] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-header[b-iude1lfc0c] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-time[b-iude1lfc0c] {
        text-align: left;
        min-width: auto;
    }

    .notification-actions[b-iude1lfc0c] {
        justify-content: center;
    }

    .pagination-modern[b-iude1lfc0c] {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-controls[b-iude1lfc0c] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-iude1lfc0c] {
        font-size: 24px;
    }

    .stat-card-modern[b-iude1lfc0c] {
        padding: 16px;
    }

    .stat-number[b-iude1lfc0c] {
        font-size: 24px;
    }

    .notification-content[b-iude1lfc0c] {
        padding: 16px;
    }

    .notification-icon[b-iude1lfc0c] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .notification-title[b-iude1lfc0c] {
        font-size: 14px;
    }
}
/* _content/Sahelly/Components/Pages/Customer/OrderDetails.razor.rz.scp.css */

/* ===================================
   Order Details - Modern Professional CSS
   ����� ������� ����� ������ �����
   =================================== */

/* Page Container */
.order-details-container[b-4rp5jr5g90] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .order-details-container[b-4rp5jr5g90]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .order-details-container > *[b-4rp5jr5g90] {
        position: relative;
        z-index: 1;
    }

/* Order Header */
.order-header[b-4rp5jr5g90] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-content[b-4rp5jr5g90] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.back-btn[b-4rp5jr5g90] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .back-btn:hover[b-4rp5jr5g90] {
        transform: translateX(3px) scale(1.05);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.header-info h1[b-4rp5jr5g90] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.order-meta[b-4rp5jr5g90] {
    display: flex;
    gap: 16px;
    color: #6b7280;
    font-weight: 500;
}

    .order-meta span[b-4rp5jr5g90] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .order-meta i[b-4rp5jr5g90] {
        color: #667eea;
    }

.header-actions[b-4rp5jr5g90] {
    display: flex;
    gap: 12px;
}

.action-btn[b-4rp5jr5g90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    font-size: 15px;
    gap: 8px;
}

    .action-btn i[b-4rp5jr5g90] {
        font-size: 16px;
    }

    .action-btn:hover[b-4rp5jr5g90] {
        transform: translateY(-2px);
    }

    .action-btn.primary[b-4rp5jr5g90] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    }

        .action-btn.primary:hover[b-4rp5jr5g90] {
            box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
        }

    .action-btn.secondary[b-4rp5jr5g90] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    }

        .action-btn.secondary:hover[b-4rp5jr5g90] {
            box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
        }

    .action-btn.danger[b-4rp5jr5g90] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
    }

        .action-btn.danger:hover[b-4rp5jr5g90] {
            box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
        }

/* Status Card */
.status-card[b-4rp5jr5g90] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.status-main[b-4rp5jr5g90] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.status-info[b-4rp5jr5g90] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-badge[b-4rp5jr5g90] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

    .status-badge.pending[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(246, 189, 96, 0.2) 0%, rgba(246, 149, 96, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(246, 189, 96, 0.3);
    }

    .status-badge.processing[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #6366f1;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .status-badge.shipped[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(74, 163, 194, 0.2) 0%, rgba(41, 104, 178, 0.2) 100%);
        color: #0284c7;
        border: 1px solid rgba(74, 163, 194, 0.3);
    }

    .status-badge.delivered[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #10b981;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.cancelled[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(208, 78, 95, 0.2) 0%, rgba(205, 125, 219, 0.2) 100%);
        color: #e11d48;
        border: 1px solid rgba(208, 78, 95, 0.3);
    }

    .status-badge.returned[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(246, 149, 96, 0.2) 0%, rgba(237, 100, 116, 0.2) 100%);
        color: #f97316;
        border: 1px solid rgba(246, 149, 96, 0.3);
    }

.status-description[b-4rp5jr5g90] {
    font-size: 14px;
    color: #6b7280;
}

.progress-container[b-4rp5jr5g90] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 200px;
}

.progress-track[b-4rp5jr5g90] {
    height: 8px;
    background-color: rgba(209, 213, 219, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-4rp5jr5g90] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-text[b-4rp5jr5g90] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    text-align: right;
}

.tracking-info[b-4rp5jr5g90] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(209, 213, 219, 0.5);
}

.tracking-item[b-4rp5jr5g90] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tracking-label[b-4rp5jr5g90] {
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
}

.tracking-value[b-4rp5jr5g90] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.delivery-info[b-4rp5jr5g90] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(209, 213, 219, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    font-weight: 600;
}

    .delivery-info i[b-4rp5jr5g90] {
        font-size: 18px;
    }

/* Section Card */
.section-card[b-4rp5jr5g90] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.section-header[b-4rp5jr5g90] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .section-header h3[b-4rp5jr5g90] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4c1d95;
    }

        .section-header h3 i[b-4rp5jr5g90] {
            font-size: 20px;
            color: #667eea;
        }

.items-count[b-4rp5jr5g90] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Order Items */
.items-list[b-4rp5jr5g90] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-item[b-4rp5jr5g90] {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 16px;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(209, 213, 219, 0.5);
}

    .order-item:hover[b-4rp5jr5g90] {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
        border-color: rgba(102, 126, 234, 0.5);
    }

.item-image[b-4rp5jr5g90] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

    .item-image img[b-4rp5jr5g90] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.no-image[b-4rp5jr5g90] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 24px;
}

.item-details[b-4rp5jr5g90] {
    flex: 1;
}

.item-name[b-4rp5jr5g90] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 6px;
    color: #1f2937;
}

.item-info[b-4rp5jr5g90] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}

.item-pricing[b-4rp5jr5g90] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.unit-price[b-4rp5jr5g90] {
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
}

.discount-amount[b-4rp5jr5g90] {
    font-size: 13px;
    color: #ef4444;
    font-weight: 500;
}

.item-total[b-4rp5jr5g90] {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Payment Information */
.payment-badge[b-4rp5jr5g90] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .payment-badge.pending[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(246, 189, 96, 0.2) 0%, rgba(246, 149, 96, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(246, 189, 96, 0.3);
    }

    .payment-badge.partial[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #6366f1;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .payment-badge.completed[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #10b981;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .payment-badge.failed[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(208, 78, 95, 0.2) 0%, rgba(205, 125, 219, 0.2) 100%);
        color: #e11d48;
        border: 1px solid rgba(208, 78, 95, 0.3);
    }

    .payment-badge.refunded[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(246, 149, 96, 0.2) 0%, rgba(237, 100, 116, 0.2) 100%);
        color: #f97316;
        border: 1px solid rgba(246, 149, 96, 0.3);
    }

.payment-summary[b-4rp5jr5g90] {
    background: rgba(249, 250, 251, 0.5);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.summary-row[b-4rp5jr5g90] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 15px;
    color: #4b5563;
}

    .summary-row:not(:last-child)[b-4rp5jr5g90] {
        border-bottom: 1px dashed rgba(209, 213, 219, 0.8);
    }

    .summary-row.discount[b-4rp5jr5g90] {
        color: #ef4444;
    }

    .summary-row.total[b-4rp5jr5g90] {
        font-weight: 700;
        font-size: 18px;
        color: #1f2937;
        border-top: 2px solid rgba(209, 213, 219, 0.8);
        border-bottom: none !important;
        margin-top: 10px;
        padding-top: 16px;
    }

    .summary-row.paid[b-4rp5jr5g90] {
        color: #10b981;
        font-weight: 600;
    }

    .summary-row.remaining[b-4rp5jr5g90] {
        color: #f59e0b;
        font-weight: 600;
    }

.payment-method[b-4rp5jr5g90] {
    background: white;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(209, 213, 219, 0.5);
}

.method-info[b-4rp5jr5g90] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: #4b5563;
}

    .method-info i[b-4rp5jr5g90] {
        font-size: 20px;
        color: #667eea;
        width: 24px;
        text-align: center;
    }

.installment-badge[b-4rp5jr5g90] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
}

/* Installment Plan */
.plan-status[b-4rp5jr5g90] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .plan-status.active[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #10b981;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .plan-status.completed[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #6366f1;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .plan-status.defaulted[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(208, 78, 95, 0.2) 0%, rgba(205, 125, 219, 0.2) 100%);
        color: #e11d48;
        border: 1px solid rgba(208, 78, 95, 0.3);
    }

    .plan-status.cancelled[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(246, 149, 96, 0.2) 0%, rgba(237, 100, 116, 0.2) 100%);
        color: #f97316;
        border: 1px solid rgba(246, 149, 96, 0.3);
    }

    .plan-status.onhold[b-4rp5jr5g90] {
        background: linear-gradient(135deg, rgba(246, 189, 96, 0.2) 0%, rgba(246, 149, 96, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(246, 189, 96, 0.3);
    }

.installment-details[b-4rp5jr5g90] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.installment-grid[b-4rp5jr5g90] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.installment-item[b-4rp5jr5g90] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(209, 213, 219, 0.5);
}

    .installment-item .label[b-4rp5jr5g90] {
        font-size: 13px;
        color: #6b7280;
    }

    .installment-item .value[b-4rp5jr5g90] {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

.installment-progress[b-4rp5jr5g90] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(209, 213, 219, 0.5);
}

.progress-header[b-4rp5jr5g90] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

    .progress-header h4[b-4rp5jr5g90] {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        color: #4c1d95;
    }

.progress-fraction[b-4rp5jr5g90] {
    font-size: 14px;
    font-weight: 600;
    color: #6366f1;
}

.progress-bar[b-4rp5jr5g90] {
    height: 10px;
    background-color: rgba(209, 213, 219, 0.5);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px;
}

.progress-fill[b-4rp5jr5g90] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.progress-amounts[b-4rp5jr5g90] {
    display: flex;
    justify-content: space-between;
}

.amount-item[b-4rp5jr5g90] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .amount-item .label[b-4rp5jr5g90] {
        font-size: 13px;
        color: #6b7280;
    }

    .amount-item .value[b-4rp5jr5g90] {
        font-size: 16px;
        font-weight: 600;
    }

    .amount-item:first-child .value[b-4rp5jr5g90] {
        color: #10b981;
    }

    .amount-item:last-child .value[b-4rp5jr5g90] {
        color: #f59e0b;
    }

.next-installment[b-4rp5jr5g90] {
    margin-top: 16px;
}

.installment-alert[b-4rp5jr5g90] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

    .installment-alert i[b-4rp5jr5g90] {
        font-size: 24px;
        color: #6366f1;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    }

.alert-content[b-4rp5jr5g90] {
    flex: 1;
}

    .alert-content h5[b-4rp5jr5g90] {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: #4c1d95;
    }

    .alert-content p[b-4rp5jr5g90] {
        margin: 0;
        color: #6b7280;
        font-size: 15px;
        font-weight: 500;
    }

/* Shipping Address */
.address-details[b-4rp5jr5g90] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(209, 213, 219, 0.5);
}

.address-info[b-4rp5jr5g90] {
    font-size: 15px;
    color: #4b5563;
}

    .address-info p[b-4rp5jr5g90] {
        margin: 0;
        margin-bottom: 8px;
    }

.address-street[b-4rp5jr5g90] {
    font-weight: 600;
    color: #1f2937;
}

.delivery-notes[b-4rp5jr5g90] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(209, 213, 219, 0.8);
}

.notes-label[b-4rp5jr5g90] {
    font-weight: 600;
    font-size: 14px;
    color: #4c1d95;
    display: block;
    margin-bottom: 6px;
}

.notes-text[b-4rp5jr5g90] {
    color: #6b7280;
    font-size: 14px;
    font-style: italic;
}

/* Order Actions */
.order-actions[b-4rp5jr5g90] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

    .order-actions .action-btn[b-4rp5jr5g90] {
        min-width: 160px;
        justify-content: center;
    }

/* Loading State */
.loading-container[b-4rp5jr5g90] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.spinner-container[b-4rp5jr5g90] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner[b-4rp5jr5g90] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(99, 102, 241, 0.1);
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-4rp5jr5g90 1s linear infinite;
}

@keyframes spin-b-4rp5jr5g90 {
    0% {
        transform: rotate(0deg);
    }

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

/* Not Found State */
.not-found-container[b-4rp5jr5g90] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    max-width: 600px;
    margin: 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.not-found-icon[b-4rp5jr5g90] {
    font-size: 80px;
    color: #6b7280;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    margin-bottom: 20px;
}

.not-found-container h3[b-4rp5jr5g90] {
    font-size: 24px;
    font-weight: 700;
    color: #4c1d95;
    margin: 0;
}

.not-found-container p[b-4rp5jr5g90] {
    color: #6b7280;
    margin-bottom: 20px;
    font-size: 16px;
}

.not-found-container .btn-primary[b-4rp5jr5g90] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    cursor: pointer;
}

    .not-found-container .btn-primary:hover[b-4rp5jr5g90] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

    .not-found-container .btn-primary i[b-4rp5jr5g90] {
        transition: transform 0.3s ease;
    }

    .not-found-container .btn-primary:hover i[b-4rp5jr5g90] {
        transform: translateX(-4px);
    }

/* Auth Required */
.auth-required[b-4rp5jr5g90] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    max-width: 500px;
    margin: 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

    .auth-required i[b-4rp5jr5g90] {
        font-size: 60px;
        color: #6366f1;
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(99, 102, 241, 0.1);
        border-radius: 50%;
        margin-bottom: 20px;
    }

    .auth-required h3[b-4rp5jr5g90] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
    }

    .auth-required p[b-4rp5jr5g90] {
        color: #6b7280;
        margin-bottom: 20px;
        font-size: 16px;
    }

.login-btn[b-4rp5jr5g90] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 36px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    text-decoration: none;
    display: inline-block;
}

    .login-btn:hover[b-4rp5jr5g90] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
        color: white;
    }

/* RTL Support */
html[dir="rtl"] .back-btn:hover[b-4rp5jr5g90] {
    transform: translateX(-3px) scale(1.05);
}

html[dir="rtl"] .not-found-container .btn-primary:hover i[b-4rp5jr5g90] {
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 992px) {
    .order-details-container[b-4rp5jr5g90] {
        padding: 16px;
    }

    .order-header[b-4rp5jr5g90] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        padding: 20px;
    }

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

    .status-main[b-4rp5jr5g90] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .progress-container[b-4rp5jr5g90] {
        width: 100%;
    }

    .installment-grid[b-4rp5jr5g90] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .order-item[b-4rp5jr5g90] {
        flex-direction: column;
        align-items: flex-start;
    }

    .item-image[b-4rp5jr5g90] {
        width: 100%;
        height: 180px;
    }

    .item-details[b-4rp5jr5g90] {
        width: 100%;
    }

    .item-total[b-4rp5jr5g90] {
        align-self: flex-end;
        margin-top: 16px;
    }

    .order-actions[b-4rp5jr5g90] {
        flex-direction: column;
        gap: 12px;
    }

        .order-actions .action-btn[b-4rp5jr5g90] {
            width: 100%;
        }
}

@media (max-width: 576px) {
    .header-content[b-4rp5jr5g90] {
        width: 100%;
    }

    .installment-grid[b-4rp5jr5g90] {
        grid-template-columns: 1fr;
    }

    .progress-amounts[b-4rp5jr5g90] {
        flex-direction: column;
        gap: 12px;
    }

    .installment-alert[b-4rp5jr5g90] {
        flex-direction: column;
        text-align: center;
    }

    .auth-required[b-4rp5jr5g90], .not-found-container[b-4rp5jr5g90] {
        padding: 30px 20px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .order-details-container[b-4rp5jr5g90] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .order-details-container[b-4rp5jr5g90]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .order-header[b-4rp5jr5g90],
[data-theme="dark"] .status-card[b-4rp5jr5g90],
[data-theme="dark"] .section-card[b-4rp5jr5g90],
[data-theme="dark"] .auth-required[b-4rp5jr5g90],
[data-theme="dark"] .not-found-container[b-4rp5jr5g90] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .back-btn[b-4rp5jr5g90] {
    background: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .header-info h1[b-4rp5jr5g90] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .order-meta[b-4rp5jr5g90] {
    color: #94a3b8;
}

    [data-theme="dark"] .order-meta i[b-4rp5jr5g90],
    [data-theme="dark"] .section-header h3 i[b-4rp5jr5g90],
    [data-theme="dark"] .method-info i[b-4rp5jr5g90] {
        color: #a78bfa;
    }

[data-theme="dark"] .section-header h3[b-4rp5jr5g90] {
    color: #e2e8f0;
}

[data-theme="dark"] .items-count[b-4rp5jr5g90],
[data-theme="dark"] .status-description[b-4rp5jr5g90],
[data-theme="dark"] .address-info[b-4rp5jr5g90],
[data-theme="dark"] .notes-text[b-4rp5jr5g90] {
    color: #94a3b8;
}

[data-theme="dark"] .order-item[b-4rp5jr5g90],
[data-theme="dark"] .payment-method[b-4rp5jr5g90],
[data-theme="dark"] .installment-item[b-4rp5jr5g90],
[data-theme="dark"] .installment-progress[b-4rp5jr5g90],
[data-theme="dark"] .address-details[b-4rp5jr5g90] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .payment-summary[b-4rp5jr5g90] {
    background: rgba(30, 41, 59, 0.5);
}

[data-theme="dark"] .summary-row[b-4rp5jr5g90] {
    color: #cbd5e1;
}

    [data-theme="dark"] .summary-row:not(:last-child)[b-4rp5jr5g90] {
        border-bottom-color: rgba(71, 85, 105, 0.5);
    }

    [data-theme="dark"] .summary-row.total[b-4rp5jr5g90] {
        color: #e2e8f0;
        border-top-color: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .no-image[b-4rp5jr5g90] {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    color: #64748b;
}

[data-theme="dark"] .item-name[b-4rp5jr5g90] {
    color: #e2e8f0;
}

[data-theme="dark"] .item-info[b-4rp5jr5g90],
[data-theme="dark"] .installment-item .label[b-4rp5jr5g90],
[data-theme="dark"] .amount-item .label[b-4rp5jr5g90],
[data-theme="dark"] .tracking-label[b-4rp5jr5g90],
[data-theme="dark"] .tracking-value[b-4rp5jr5g90],
[data-theme="dark"] .method-info[b-4rp5jr5g90] {
    color: #94a3b8;
}

[data-theme="dark"] .installment-item .value[b-4rp5jr5g90] {
    color: #e2e8f0;
}

[data-theme="dark"] .progress-track[b-4rp5jr5g90],
[data-theme="dark"] .progress-bar[b-4rp5jr5g90] {
    background-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .installment-alert[b-4rp5jr5g90] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-color: rgba(99, 102, 241, 0.1);
}

    [data-theme="dark"] .installment-alert i[b-4rp5jr5g90] {
        background: #1e293b;
        color: #a78bfa;
    }

[data-theme="dark"] .progress-header h4[b-4rp5jr5g90] {
    color: #e2e8f0;
}

[data-theme="dark"] .progress-fraction[b-4rp5jr5g90] {
    color: #a78bfa;
}

[data-theme="dark"] .alert-content h5[b-4rp5jr5g90] {
    color: #e2e8f0;
}

[data-theme="dark"] .alert-content p[b-4rp5jr5g90] {
    color: #94a3b8;
}

[data-theme="dark"] .delivery-notes[b-4rp5jr5g90] {
    border-top-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .notes-label[b-4rp5jr5g90] {
    color: #e2e8f0;
}

[data-theme="dark"] .not-found-icon[b-4rp5jr5g90],
[data-theme="dark"] .auth-required i[b-4rp5jr5g90] {
    background: rgba(99, 102, 241, 0.15);
    color: #a78bfa;
}

[data-theme="dark"] .not-found-container h3[b-4rp5jr5g90],
[data-theme="dark"] .auth-required h3[b-4rp5jr5g90] {
    color: #e2e8f0;
}

[data-theme="dark"] .not-found-container p[b-4rp5jr5g90],
[data-theme="dark"] .auth-required p[b-4rp5jr5g90] {
    color: #94a3b8;
}

[data-theme="dark"] .spinner[b-4rp5jr5g90] {
    border-color: rgba(99, 102, 241, 0.2);
    border-top-color: #a78bfa;
}

/* Print Styles */
@media print {
    .order-details-container[b-4rp5jr5g90] {
        background: white !important;
        padding: 20px !important;
    }

        .order-details-container[b-4rp5jr5g90]::before {
            display: none;
        }

    .order-header[b-4rp5jr5g90],
    .status-card[b-4rp5jr5g90],
    .section-card[b-4rp5jr5g90] {
        box-shadow: none !important;
        margin-bottom: 15px !important;
        break-inside: avoid;
    }

    .header-actions[b-4rp5jr5g90],
    .order-actions[b-4rp5jr5g90],
    .back-btn[b-4rp5jr5g90] {
        display: none !important;
    }

    .progress-fill[b-4rp5jr5g90],
    .status-badge[b-4rp5jr5g90],
    .payment-badge[b-4rp5jr5g90],
    .plan-status[b-4rp5jr5g90] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .order-item[b-4rp5jr5g90] {
        break-inside: avoid;
        border: 1px solid #e5e7eb;
    }

        .order-item:hover[b-4rp5jr5g90] {
            transform: none !important;
            box-shadow: none !important;
        }

    .payment-summary[b-4rp5jr5g90] {
        break-inside: avoid;
    }
}

/* Motion Reduction */
@media (prefers-reduced-motion: reduce) {
    *[b-4rp5jr5g90] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .status-badge[b-4rp5jr5g90],
    .payment-badge[b-4rp5jr5g90],
    .plan-status[b-4rp5jr5g90],
    .installment-badge[b-4rp5jr5g90] {
        border: 2px solid currentColor !important;
    }

    .action-btn[b-4rp5jr5g90] {
        border: 2px solid currentColor !important;
    }

    .progress-fill[b-4rp5jr5g90] {
        background: #000 !important;
    }
}
/* _content/Sahelly/Components/Pages/Customer/ProfileOrders.razor.rz.scp.css */
/* ProfileOrders.razor.css - Modern E-Commerce Style */

/* Page Container */
.profile-orders-container[b-76dgfltf28] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .profile-orders-container[b-76dgfltf28]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .profile-orders-container > *[b-76dgfltf28] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-76dgfltf28] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.header-content[b-76dgfltf28] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn[b-76dgfltf28] {
    background: rgba(102, 126, 234, 0.1);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

    .back-btn:hover[b-76dgfltf28] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        transform: translateY(-2px);
    }

.page-header h1[b-76dgfltf28] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.header-stats[b-76dgfltf28] {
    display: flex;
    gap: 20px;
}

.stat-item[b-76dgfltf28] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.stat-value[b-76dgfltf28] {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-76dgfltf28] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Quick Filters */
.quick-filters[b-76dgfltf28] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .quick-filters[b-76dgfltf28]::-webkit-scrollbar {
        display: none;
    }

.filter-chip[b-76dgfltf28] {
    flex-shrink: 0;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid transparent;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

    .filter-chip:hover[b-76dgfltf28] {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 1);
        color: #667eea;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .filter-chip.active[b-76dgfltf28] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Orders Grid */
.orders-grid[b-76dgfltf28] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

/* Order Card */
.order-card[b-76dgfltf28] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
}

    .order-card[b-76dgfltf28]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .order-card:hover[b-76dgfltf28] {
        transform: translateY(-8px) scale(1.02);
        border-color: #667eea;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

        .order-card:hover[b-76dgfltf28]::before {
            opacity: 1;
        }

.order-header[b-76dgfltf28] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: rgba(102, 126, 234, 0.05);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.order-main-info[b-76dgfltf28] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-number[b-76dgfltf28] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #4c1d95;
}

.order-date[b-76dgfltf28] {
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-status[b-76dgfltf28] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .order-status.pending[b-76dgfltf28] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .order-status.processing[b-76dgfltf28] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(129, 140, 248, 0.2) 100%);
        color: #4f46e5;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .order-status.shipped[b-76dgfltf28] {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
        color: #0369a1;
        border: 1px solid rgba(14, 165, 233, 0.3);
    }

    .order-status.delivered[b-76dgfltf28] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .order-status.cancelled[b-76dgfltf28] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

/* Order Products Section */
.order-products[b-76dgfltf28] {
    padding: 16px 20px;
}

.product-item[b-76dgfltf28] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .product-item:last-child[b-76dgfltf28] {
        border-bottom: none;
    }

    .product-item img[b-76dgfltf28] {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

        .product-item img:hover[b-76dgfltf28] {
            transform: scale(1.1);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }

.product-info[b-76dgfltf28] {
    flex: 1;
}

.product-name[b-76dgfltf28] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.product-quantity[b-76dgfltf28] {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.product-price[b-76dgfltf28] {
    font-size: 15px;
    font-weight: 700;
    color: #4c1d95;
}

.more-items[b-76dgfltf28] {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
    margin-top: 10px;
    font-weight: 500;
}

/* Order Footer */
.order-footer[b-76dgfltf28] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(102, 126, 234, 0.05);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.footer-info[b-76dgfltf28] {
    display: flex;
    gap: 16px;
}

.info-item[b-76dgfltf28] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .info-item i[b-76dgfltf28] {
        color: #667eea;
    }

    .info-item.installment[b-76dgfltf28] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
        padding: 4px 8px;
        border-radius: 8px;
    }

        .info-item.installment i[b-76dgfltf28] {
            color: #059669;
        }

.order-total[b-76dgfltf28] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.total-label[b-76dgfltf28] {
    font-size: 13px;
    color: #6b7280;
}

.total-amount[b-76dgfltf28] {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Order Actions */
.order-actions[b-76dgfltf28] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.action-btn[b-76dgfltf28] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .action-btn.primary[b-76dgfltf28] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    }

        .action-btn.primary:hover[b-76dgfltf28] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

    .action-btn.secondary[b-76dgfltf28] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    }

        .action-btn.secondary:hover[b-76dgfltf28] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
        }

    .action-btn.danger[b-76dgfltf28] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
    }

        .action-btn.danger:hover[b-76dgfltf28] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
        }

/* Loading State */
.loading-state[b-76dgfltf28] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-container[b-76dgfltf28] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner[b-76dgfltf28] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-76dgfltf28 1s linear infinite;
}

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

/* Empty State */
.empty-state[b-76dgfltf28] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-76dgfltf28] {
    font-size: 80px;
    color: #667eea;
    margin-bottom: 24px;
    opacity: 0.6;
}

.empty-state h3[b-76dgfltf28] {
    font-size: 24px;
    color: #4c1d95;
    margin-bottom: 12px;
    font-weight: 700;
}

.empty-state p[b-76dgfltf28] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.start-shopping-btn[b-76dgfltf28] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .start-shopping-btn:hover[b-76dgfltf28] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
    }

/* Load More Button */
.load-more-container[b-76dgfltf28] {
    display: flex;
    justify-content: center;
    margin: 30px 0 50px;
}

.load-more-btn[b-76dgfltf28] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .load-more-btn:hover:not(:disabled)[b-76dgfltf28] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-2px);
    }

    .load-more-btn:disabled[b-76dgfltf28] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Auth Required State */
.auth-required[b-76dgfltf28] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 50px auto;
}

    .auth-required i[b-76dgfltf28] {
        font-size: 80px;
        color: #667eea;
        margin-bottom: 24px;
        opacity: 0.6;
    }

    .auth-required h3[b-76dgfltf28] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .auth-required p[b-76dgfltf28] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.login-btn[b-76dgfltf28] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .login-btn:hover[b-76dgfltf28] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
        color: white;
    }

/* Dark Theme Support */
[data-theme="dark"] .profile-orders-container[b-76dgfltf28] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .profile-orders-container[b-76dgfltf28]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-76dgfltf28],
[data-theme="dark"] .order-card[b-76dgfltf28],
[data-theme="dark"] .empty-state[b-76dgfltf28],
[data-theme="dark"] .auth-required[b-76dgfltf28] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .order-header[b-76dgfltf28],
[data-theme="dark"] .order-footer[b-76dgfltf28] {
    background: rgba(71, 85, 105, 0.2);
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .filter-chip[b-76dgfltf28] {
    background: rgba(30, 41, 59, 0.9);
    color: #cbd5e1;
}

    [data-theme="dark"] .filter-chip:hover[b-76dgfltf28] {
        color: #a78bfa;
        background: rgba(30, 41, 59, 1);
    }

    [data-theme="dark"] .filter-chip.active[b-76dgfltf28] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .back-btn[b-76dgfltf28] {
    background: rgba(71, 85, 105, 0.3);
    color: #a78bfa;
}

    [data-theme="dark"] .back-btn:hover[b-76dgfltf28] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .product-name[b-76dgfltf28] {
    color: #e2e8f0;
}

[data-theme="dark"] .order-number[b-76dgfltf28] {
    color: #a78bfa;
}

[data-theme="dark"] .product-quantity[b-76dgfltf28],
[data-theme="dark"] .order-date[b-76dgfltf28],
[data-theme="dark"] .info-item[b-76dgfltf28],
[data-theme="dark"] .total-label[b-76dgfltf28],
[data-theme="dark"] .stat-label[b-76dgfltf28] {
    color: #94a3b8;
}

[data-theme="dark"] .product-price[b-76dgfltf28],
[data-theme="dark"] .product-item img[b-76dgfltf28] {
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .empty-state h3[b-76dgfltf28],
[data-theme="dark"] .auth-required h3[b-76dgfltf28] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-76dgfltf28],
[data-theme="dark"] .auth-required p[b-76dgfltf28] {
    color: #94a3b8;
}

[data-theme="dark"] .load-more-btn[b-76dgfltf28] {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}

    [data-theme="dark"] .load-more-btn:hover:not(:disabled)[b-76dgfltf28] {
        background: rgba(167, 139, 250, 0.1);
        border-color: #a78bfa;
    }

[data-theme="dark"] .more-items[b-76dgfltf28] {
    color: #a78bfa;
    background: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .product-item[b-76dgfltf28] {
    border-color: rgba(71, 85, 105, 0.4);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .orders-grid[b-76dgfltf28] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-76dgfltf28] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-stats[b-76dgfltf28] {
        width: 100%;
        justify-content: space-around;
    }

    .stat-item[b-76dgfltf28] {
        align-items: center;
    }

    .orders-grid[b-76dgfltf28] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .profile-orders-container[b-76dgfltf28] {
        padding: 16px;
    }

    .page-header[b-76dgfltf28] {
        padding: 16px;
        margin-bottom: 20px;
    }

        .page-header h1[b-76dgfltf28] {
            font-size: 24px;
        }

    .stat-value[b-76dgfltf28] {
        font-size: 22px;
    }

    .stat-label[b-76dgfltf28] {
        font-size: 12px;
    }

    .filter-chip[b-76dgfltf28] {
        padding: 10px 16px;
        font-size: 13px;
    }

    .order-header[b-76dgfltf28],
    .order-products[b-76dgfltf28],
    .order-footer[b-76dgfltf28],
    .order-actions[b-76dgfltf28] {
        padding: 12px;
    }

    .order-number[b-76dgfltf28] {
        font-size: 16px;
    }

    .product-item img[b-76dgfltf28] {
        width: 48px;
        height: 48px;
    }

    .product-name[b-76dgfltf28] {
        font-size: 14px;
    }

    .total-amount[b-76dgfltf28] {
        font-size: 16px;
    }

    .action-btn[b-76dgfltf28] {
        font-size: 13px;
        padding: 10px;
    }

        .action-btn i[b-76dgfltf28] {
            font-size: 12px;
        }

    .empty-icon[b-76dgfltf28],
    .auth-required i[b-76dgfltf28] {
        font-size: 60px;
    }

    .empty-state h3[b-76dgfltf28],
    .auth-required h3[b-76dgfltf28] {
        font-size: 20px;
    }

    .empty-state p[b-76dgfltf28],
    .auth-required p[b-76dgfltf28] {
        font-size: 14px;
    }

    .start-shopping-btn[b-76dgfltf28],
    .login-btn[b-76dgfltf28] {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .profile-orders-container[b-76dgfltf28] {
        background: white !important;
        min-height: auto;
    }

        .profile-orders-container[b-76dgfltf28]::before {
            display: none;
        }

    .page-header[b-76dgfltf28] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .quick-filters[b-76dgfltf28],
    .order-actions[b-76dgfltf28],
    .back-btn[b-76dgfltf28],
    .load-more-container[b-76dgfltf28] {
        display: none !important;
    }

    .orders-grid[b-76dgfltf28] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .order-card[b-76dgfltf28] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* RTL Support */
html[dir="rtl"] .back-btn i[b-76dgfltf28] {
    transform: rotate(180deg);
}

html[dir="rtl"] .order-total[b-76dgfltf28] {
    align-items: flex-start;
}

html[dir="rtl"] .product-info[b-76dgfltf28] {
    text-align: right;
}
/* _content/Sahelly/Components/Pages/Customer/ProfileWallet.razor.rz.scp.css */

/* Profile Wallet - Modern Professional CSS Design
   Following the architecture of app.css and inspired by Users.razor.css
   =================================== */

/* Page Container */
.profile-wallet-container[b-k2wl9027kq] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .profile-wallet-container[b-k2wl9027kq]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .profile-wallet-container > *[b-k2wl9027kq] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-k2wl9027kq] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-k2wl9027kq] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn[b-k2wl9027kq] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .back-btn:hover[b-k2wl9027kq] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.page-header h1[b-k2wl9027kq] {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

/* Loading State */
.loading-state[b-k2wl9027kq] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.spinner-container[b-k2wl9027kq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner[b-k2wl9027kq] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-k2wl9027kq 0.8s linear infinite;
}

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

.spinner-container p[b-k2wl9027kq] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Wallet Card */
.wallet-card[b-k2wl9027kq] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 28px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .wallet-card[b-k2wl9027kq]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .wallet-card:hover[b-k2wl9027kq] {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

        .wallet-card:hover[b-k2wl9027kq]::before {
            opacity: 1;
        }

.wallet-header[b-k2wl9027kq] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    position: relative;
}

.wallet-icon[b-k2wl9027kq] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wallet-card:hover .wallet-icon[b-k2wl9027kq] {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 12px 20px rgba(102, 126, 234, 0.4);
}

.wallet-info[b-k2wl9027kq] {
    flex: 1;
}

.wallet-label[b-k2wl9027kq] {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 4px;
    font-weight: 500;
}

.wallet-number[b-k2wl9027kq] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.wallet-status[b-k2wl9027kq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .wallet-status.active[b-k2wl9027kq] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .wallet-status.locked[b-k2wl9027kq] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

/* Balance Grid */
.balance-grid[b-k2wl9027kq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.balance-item[b-k2wl9027kq] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .balance-item:hover[b-k2wl9027kq] {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    }

    .balance-item.main[b-k2wl9027kq] {
        grid-column: span 3;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border: 1px solid rgba(102, 126, 234, 0.2);
        padding: 30px;
    }

        .balance-item.main:hover[b-k2wl9027kq] {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
        }

.balance-label[b-k2wl9027kq] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 8px;
    font-weight: 500;
}

.balance-amount[b-k2wl9027kq] {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.balance-item.main .balance-amount[b-k2wl9027kq] {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-top: 8px;
}

.balance-amount.available[b-k2wl9027kq] {
    color: #059669;
}

.balance-amount.pending[b-k2wl9027kq] {
    color: #d97706;
}

/* Wallet Actions */
.wallet-actions[b-k2wl9027kq] {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.action-btn[b-k2wl9027kq] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .action-btn.withdrawal[b-k2wl9027kq] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(245, 87, 108, 0.3);
    }

        .action-btn.withdrawal:hover:not(:disabled)[b-k2wl9027kq] {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
        }

    .action-btn.transfer[b-k2wl9027kq] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

        .action-btn.transfer:hover:not(:disabled)[b-k2wl9027kq] {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

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

/* Statistics Grid */
.stats-grid[b-k2wl9027kq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-k2wl9027kq] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

    .stat-card:hover[b-k2wl9027kq] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }

.stat-icon[b-k2wl9027kq] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .stat-icon.sales[b-k2wl9027kq] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.direct[b-k2wl9027kq] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .stat-icon.agent[b-k2wl9027kq] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .stat-icon.online[b-k2wl9027kq] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

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

.stat-label[b-k2wl9027kq] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

.stat-value[b-k2wl9027kq] {
    font-size: 24px;
    font-weight: 700;
    margin: 8px 0 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-subtitle[b-k2wl9027kq] {
    font-size: 13px;
    color: #9ca3af;
    margin: 6px 0 0;
    font-weight: 500;
}

/* Filter Section */
.filter-section[b-k2wl9027kq] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.date-filters[b-k2wl9027kq] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.date-input[b-k2wl9027kq] {
    flex: 1;
    min-width: 200px;
}

    .date-input label[b-k2wl9027kq] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

    .date-input input[b-k2wl9027kq] {
        width: 100%;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 14px;
    }

        .date-input input:focus[b-k2wl9027kq] {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            background: white;
        }

.filter-btn[b-k2wl9027kq] {
    height: 48px;
    padding: 0 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 26px;
}

    .filter-btn:hover[b-k2wl9027kq] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
    }

/* Transactions Section */
.transactions-section[b-k2wl9027kq] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title[b-k2wl9027kq] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .section-title i[b-k2wl9027kq] {
        color: #667eea;
        font-size: 22px;
    }

.transactions-list[b-k2wl9027kq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.transaction-item[b-k2wl9027kq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

    .transaction-item:hover[b-k2wl9027kq] {
        transform: translateX(5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
    }

.transaction-icon[b-k2wl9027kq] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

    .transaction-icon.deposit[b-k2wl9027kq] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .transaction-icon.withdrawal[b-k2wl9027kq] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    }

    .transaction-icon.commission[b-k2wl9027kq] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .transaction-icon.transfer[b-k2wl9027kq] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .transaction-icon.default[b-k2wl9027kq] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

.transaction-details[b-k2wl9027kq] {
    flex: 1;
}

.transaction-title[b-k2wl9027kq] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #1f2937;
}

.transaction-description[b-k2wl9027kq] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 8px;
}

.transaction-date[b-k2wl9027kq] {
    font-size: 13px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.transaction-amount[b-k2wl9027kq] {
    font-size: 18px;
    font-weight: 700;
    margin-right: 8px;
}

    .transaction-amount.credit[b-k2wl9027kq] {
        color: #059669;
    }

    .transaction-amount.debit[b-k2wl9027kq] {
        color: #dc2626;
    }

.load-more-container[b-k2wl9027kq] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.load-more-btn[b-k2wl9027kq] {
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .load-more-btn:hover:not(:disabled)[b-k2wl9027kq] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
        color: white;
        box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Empty States */
.empty-transactions[b-k2wl9027kq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

    .empty-transactions i[b-k2wl9027kq] {
        font-size: 60px;
        color: #d1d5db;
        margin-bottom: 16px;
    }

    .empty-transactions p[b-k2wl9027kq] {
        font-size: 18px;
        color: #6b7280;
        text-align: center;
        max-width: 500px;
    }

.empty-state[b-k2wl9027kq] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-k2wl9027kq] {
    font-size: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
}

.empty-state h3[b-k2wl9027kq] {
    font-size: 28px;
    color: #4c1d95;
    margin-bottom: 12px;
    font-weight: 700;
}

.empty-state p[b-k2wl9027kq] {
    font-size: 18px;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
}

/* Modals */
.modal-backdrop[b-k2wl9027kq] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-k2wl9027kq 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content[b-k2wl9027kq] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: zoomIn-b-k2wl9027kq 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header[b-k2wl9027kq] {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .modal-header h3[b-k2wl9027kq] {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.close-btn[b-k2wl9027kq] {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .close-btn:hover[b-k2wl9027kq] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-k2wl9027kq] {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer[b-k2wl9027kq] {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.form-group[b-k2wl9027kq] {
    margin-bottom: 24px;
}

    .form-group label[b-k2wl9027kq] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

    .form-group input[b-k2wl9027kq],
    .form-group select[b-k2wl9027kq] {
        width: 100%;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .form-group input:focus[b-k2wl9027kq],
        .form-group select:focus[b-k2wl9027kq] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.available-hint[b-k2wl9027kq] {
    font-size: 13px;
    color: #059669;
    margin-top: 8px;
    font-weight: 500;
}

.btn[b-k2wl9027kq] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}

.btn-primary[b-k2wl9027kq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-k2wl9027kq] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-k2wl9027kq] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-k2wl9027kq] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
    }

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

/* Auth Required */
.auth-required[b-k2wl9027kq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    gap: 20px;
}

    .auth-required i[b-k2wl9027kq] {
        font-size: 80px;
        color: #d1d5db;
    }

    .auth-required h3[b-k2wl9027kq] {
        font-size: 28px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
    }

    .auth-required p[b-k2wl9027kq] {
        font-size: 18px;
        color: #6b7280;
        margin: 0;
        max-width: 500px;
    }

.login-btn[b-k2wl9027kq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .login-btn:hover[b-k2wl9027kq] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

/* Spinner in Button */
.spinner-border-sm[b-k2wl9027kq] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-k2wl9027kq 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

/* Animations */
@keyframes fadeIn-b-k2wl9027kq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

/* Dark Theme Support */
[data-theme="dark"] .profile-wallet-container[b-k2wl9027kq] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .page-header[b-k2wl9027kq],
[data-theme="dark"] .wallet-card[b-k2wl9027kq],
[data-theme="dark"] .filter-section[b-k2wl9027kq],
[data-theme="dark"] .transactions-section[b-k2wl9027kq],
[data-theme="dark"] .empty-state[b-k2wl9027kq],
[data-theme="dark"] .stat-card[b-k2wl9027kq] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .transaction-item[b-k2wl9027kq] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .transaction-item:hover[b-k2wl9027kq] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    }

[data-theme="dark"] .balance-item[b-k2wl9027kq] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .balance-item.main[b-k2wl9027kq] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    }

        [data-theme="dark"] .balance-item.main:hover[b-k2wl9027kq] {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%);
        }

[data-theme="dark"] .wallet-number[b-k2wl9027kq],
[data-theme="dark"] .transaction-title[b-k2wl9027kq] {
    color: #e2e8f0;
}

[data-theme="dark"] .wallet-label[b-k2wl9027kq],
[data-theme="dark"] .balance-label[b-k2wl9027kq],
[data-theme="dark"] .transaction-description[b-k2wl9027kq],
[data-theme="dark"] .stat-label[b-k2wl9027kq] {
    color: #9ca3af;
}

[data-theme="dark"] .transaction-date[b-k2wl9027kq],
[data-theme="dark"] .stat-subtitle[b-k2wl9027kq] {
    color: #64748b;
}

[data-theme="dark"] .balance-amount[b-k2wl9027kq] {
    color: #e2e8f0;
}

[data-theme="dark"] .section-title[b-k2wl9027kq] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-transactions i[b-k2wl9027kq] {
    color: #475569;
}

[data-theme="dark"] .empty-transactions p[b-k2wl9027kq],
[data-theme="dark"] .empty-state p[b-k2wl9027kq] {
    color: #9ca3af;
}

[data-theme="dark"] .empty-state h3[b-k2wl9027kq] {
    color: #e2e8f0;
}

[data-theme="dark"] .date-input label[b-k2wl9027kq],
[data-theme="dark"] .form-group label[b-k2wl9027kq] {
    color: #e2e8f0;
}

[data-theme="dark"] .date-input input[b-k2wl9027kq],
[data-theme="dark"] .form-group input[b-k2wl9027kq],
[data-theme="dark"] .form-group select[b-k2wl9027kq] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .date-input input:focus[b-k2wl9027kq],
    [data-theme="dark"] .form-group input:focus[b-k2wl9027kq],
    [data-theme="dark"] .form-group select:focus[b-k2wl9027kq] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .modal-content[b-k2wl9027kq] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
}

[data-theme="dark"] .close-btn[b-k2wl9027kq] {
    color: #9ca3af;
}

    [data-theme="dark"] .close-btn:hover[b-k2wl9027kq] {
        background: rgba(102, 126, 234, 0.15);
        color: #e2e8f0;
    }

[data-theme="dark"] .btn-secondary[b-k2wl9027kq] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-secondary:hover[b-k2wl9027kq] {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    }

[data-theme="dark"] .load-more-btn[b-k2wl9027kq] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    color: #a78bfa;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .balance-grid[b-k2wl9027kq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .balance-item.main[b-k2wl9027kq] {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .profile-wallet-container[b-k2wl9027kq] {
        padding: 16px;
    }

    .page-header[b-k2wl9027kq] {
        padding: 16px;
        margin-bottom: 24px;
    }

        .page-header h1[b-k2wl9027kq] {
            font-size: 28px;
        }

    .wallet-card[b-k2wl9027kq] {
        padding: 20px;
    }

    .wallet-header[b-k2wl9027kq] {
        flex-wrap: wrap;
    }

    .wallet-status[b-k2wl9027kq] {
        margin-top: 16px;
        margin-left: 84px;
    }

    .balance-item.main .balance-amount[b-k2wl9027kq] {
        font-size: 32px;
    }

    .stat-card[b-k2wl9027kq] {
        padding: 16px;
    }

    .stat-icon[b-k2wl9027kq] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .stat-value[b-k2wl9027kq] {
        font-size: 20px;
    }

    .date-filters[b-k2wl9027kq] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-btn[b-k2wl9027kq] {
        margin-top: 16px;
    }

    .transactions-section[b-k2wl9027kq] {
        padding: 16px;
    }

    .section-title[b-k2wl9027kq] {
        font-size: 18px;
    }

    .transaction-icon[b-k2wl9027kq] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .transaction-title[b-k2wl9027kq] {
        font-size: 14px;
    }

    .transaction-description[b-k2wl9027kq] {
        font-size: 13px;
    }

    .transaction-amount[b-k2wl9027kq] {
        font-size: 16px;
    }
}

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

    .balance-grid[b-k2wl9027kq] {
        grid-template-columns: 1fr;
    }

    .balance-item.main[b-k2wl9027kq] {
        grid-column: span 1;
    }

    .wallet-actions[b-k2wl9027kq] {
        flex-direction: column;
    }

    .modal-content[b-k2wl9027kq] {
        width: 95%;
    }

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

        .modal-footer .btn[b-k2wl9027kq] {
            width: 100%;
        }
}
/* _content/Sahelly/Components/Pages/Customer/Wishlist.razor.rz.scp.css */
/* Wishlist Page - Modern Professional Design */
.wishlist-container[b-v9zj2ucxfn] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .wishlist-container[b-v9zj2ucxfn]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .wishlist-container > *[b-v9zj2ucxfn] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-v9zj2ucxfn] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .page-header h1[b-v9zj2ucxfn] {
        font-size: 36px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

.header-actions[b-v9zj2ucxfn] {
    display: flex;
    gap: 12px;
}

.clear-all-btn[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .clear-all-btn:hover[b-v9zj2ucxfn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Wishlist Summary */
.wishlist-summary[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .wishlist-summary p[b-v9zj2ucxfn] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin: 0;
    }

/* Wishlist Grid */
.wishlist-grid[b-v9zj2ucxfn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

/* Wishlist Item */
.wishlist-item[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
}

    .wishlist-item[b-v9zj2ucxfn]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
    }

    .wishlist-item:hover[b-v9zj2ucxfn] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

/* Remove Button */
.remove-btn[b-v9zj2ucxfn] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #d04e5f;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .remove-btn:hover[b-v9zj2ucxfn] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
        transform: rotate(90deg);
        box-shadow: 0 6px 15px rgba(208, 78, 95, 0.3);
    }

/* Product Image */
.product-image[b-v9zj2ucxfn] {
    position: relative;
    overflow: hidden;
    height: 240px;
    cursor: pointer;
    z-index: 1;
}

    .product-image img[b-v9zj2ucxfn] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

.wishlist-item:hover .product-image img[b-v9zj2ucxfn] {
    transform: scale(1.08);
}

/* Discount Badge */
.discount-badge[b-v9zj2ucxfn] {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

/* Out of Stock Overlay */
.out-of-stock-overlay[b-v9zj2ucxfn] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

    .out-of-stock-overlay span[b-v9zj2ucxfn] {
        background: rgba(255, 255, 255, 0.9);
        color: #d04e5f;
        font-weight: 700;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

/* Product Info */
.product-info[b-v9zj2ucxfn] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

    .product-info h3[b-v9zj2ucxfn] {
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
        cursor: pointer;
        transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        line-height: 1.4;
    }

        .product-info h3:hover[b-v9zj2ucxfn] {
            color: #667eea;
        }

/* Product Meta */
.product-meta[b-v9zj2ucxfn] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #6b7280;
    font-size: 14px;
}

.brand[b-v9zj2ucxfn] {
    font-weight: 600;
    color: #4c1d95;
}

.added-date[b-v9zj2ucxfn] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
}

    .added-date i[b-v9zj2ucxfn] {
        color: #d04e5f;
    }

/* Price Info */
.price-info[b-v9zj2ucxfn] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 8px;
}

.price[b-v9zj2ucxfn] {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.original-price[b-v9zj2ucxfn] {
    color: #9ca3af;
    text-decoration: line-through;
    font-size: 16px;
    font-weight: 500;
}

.sale-price[b-v9zj2ucxfn] {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Rating */
.rating[b-v9zj2ucxfn] {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .rating i[b-v9zj2ucxfn] {
        color: #fbbf24;
        filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.2));
    }

        .rating i.far[b-v9zj2ucxfn] {
            color: #d1d5db;
        }

.rating-count[b-v9zj2ucxfn] {
    color: #6b7280;
    font-size: 14px;
    margin-left: 8px;
}

/* Product Actions */
.product-actions[b-v9zj2ucxfn] {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.add-to-cart-btn[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    flex: 1;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .add-to-cart-btn:hover[b-v9zj2ucxfn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.notify-btn[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    flex: 1;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .notify-btn:hover[b-v9zj2ucxfn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Empty State */
.empty-state[b-v9zj2ucxfn] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px 0;
}

    .empty-state i[b-v9zj2ucxfn] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: inline-block;
    }

    .empty-state h3[b-v9zj2ucxfn] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-v9zj2ucxfn] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

.browse-btn[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    font-size: 16px;
}

    .browse-btn:hover[b-v9zj2ucxfn] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Loading State */
.loading-state[b-v9zj2ucxfn] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-v9zj2ucxfn] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-v9zj2ucxfn 0.8s linear infinite;
}

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

/* Modal Styles */
.modal-backdrop[b-v9zj2ucxfn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    animation: fadeIn-b-v9zj2ucxfn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 30px;
    max-width: 500px;
    width: 90%;
    animation: zoomIn-b-v9zj2ucxfn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .modal-content h4[b-v9zj2ucxfn] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 16px;
    }

    .modal-content p[b-v9zj2ucxfn] {
        color: #4b5563;
        font-size: 16px;
        margin-bottom: 24px;
    }

.modal-actions[b-v9zj2ucxfn] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.confirm-btn[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .confirm-btn:hover[b-v9zj2ucxfn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

.cancel-btn[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .cancel-btn:hover[b-v9zj2ucxfn] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Animations */
@keyframes fadeIn-b-v9zj2ucxfn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

@media (max-width: 768px) {
    .wishlist-container[b-v9zj2ucxfn] {
        padding: 16px;
    }

    .page-header[b-v9zj2ucxfn] {
        padding: 16px;
        margin-bottom: 24px;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

        .page-header h1[b-v9zj2ucxfn] {
            font-size: 28px;
        }

    .wishlist-grid[b-v9zj2ucxfn] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-image[b-v9zj2ucxfn] {
        height: 200px;
    }

    .product-info[b-v9zj2ucxfn] {
        padding: 16px;
    }

        .product-info h3[b-v9zj2ucxfn] {
            font-size: 18px;
        }

    .price-info[b-v9zj2ucxfn] {
        flex-wrap: wrap;
    }

    .product-actions[b-v9zj2ucxfn] {
        flex-direction: column;
    }

    .modal-content[b-v9zj2ucxfn] {
        padding: 24px;
    }

    .empty-state[b-v9zj2ucxfn] {
        padding: 40px 16px;
    }

        .empty-state i[b-v9zj2ucxfn] {
            font-size: 60px;
        }

        .empty-state h3[b-v9zj2ucxfn] {
            font-size: 22px;
        }

        .empty-state p[b-v9zj2ucxfn] {
            font-size: 16px;
        }
}

/* Dark Theme Support */
[data-theme="dark"] .wishlist-container[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .wishlist-container[b-v9zj2ucxfn]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-v9zj2ucxfn],
[data-theme="dark"] .wishlist-summary[b-v9zj2ucxfn],
[data-theme="dark"] .wishlist-item[b-v9zj2ucxfn],
[data-theme="dark"] .empty-state[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-content[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .remove-btn[b-v9zj2ucxfn] {
    background: rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .product-info h3[b-v9zj2ucxfn] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-meta[b-v9zj2ucxfn],
[data-theme="dark"] .added-date[b-v9zj2ucxfn],
[data-theme="dark"] .rating-count[b-v9zj2ucxfn],
[data-theme="dark"] .modal-content p[b-v9zj2ucxfn] {
    color: #9ca3af;
}

[data-theme="dark"] .empty-state h3[b-v9zj2ucxfn] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-v9zj2ucxfn] {
    color: #9ca3af;
}

[data-theme="dark"] .cancel-btn[b-v9zj2ucxfn] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

    [data-theme="dark"] .cancel-btn:hover[b-v9zj2ucxfn] {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    }
/* _content/Sahelly/Components/Pages/Home.razor.rz.scp.css */

/* ===================================
   Home Page - Modern E-Commerce Design
   Inspired by Users.razor.css Architecture
   =================================== */

/* Page Container */
.home-page[b-amxxn5etu7] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow-x: hidden;
}

/* Hero Section with Gradient Background */
.hero-section[b-amxxn5etu7] {
    position: relative;
    padding: 60px 0 80px;
    overflow: hidden;
}

    .hero-section[b-amxxn5etu7]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 600px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

.hero-background[b-amxxn5etu7] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.animated-gradient[b-amxxn5etu7] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 25%, rgba(102, 126, 234, 0.1) 50%, rgba(118, 75, 162, 0.1) 75%, rgba(102, 126, 234, 0.1) 100%);
    animation: gradientShift-b-amxxn5etu7 20s ease infinite;
}

@keyframes gradientShift-b-amxxn5etu7 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-25%, -25%) rotate(180deg);
    }

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

.floating-shapes[b-amxxn5etu7] {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .floating-shapes[b-amxxn5etu7]::before,
    .floating-shapes[b-amxxn5etu7]::after {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    }

    .floating-shapes[b-amxxn5etu7]::before {
        top: -150px;
        right: -150px;
        animation: float-b-amxxn5etu7 8s ease-in-out infinite;
    }

    .floating-shapes[b-amxxn5etu7]::after {
        bottom: -150px;
        left: -150px;
        animation: float-b-amxxn5etu7 8s ease-in-out infinite reverse;
    }

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

    50% {
        transform: translateY(-30px) scale(1.1);
    }
}

/* Hero Content */
.hero-content[b-amxxn5etu7] {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.hero-header[b-amxxn5etu7] {
    margin-bottom: 40px;
    animation: fadeInUp-b-amxxn5etu7 0.8s ease;
}

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

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

.hero-badge[b-amxxn5etu7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    color: #667eea;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(102, 126, 234, 0.3);
    animation: pulse-b-amxxn5etu7 2s ease-in-out infinite;
}

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

    50% {
        transform: scale(1.05);
    }
}

.hero-title[b-amxxn5etu7] {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.hero-subtitle[b-amxxn5etu7] {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: #6b7280;
    margin-bottom: 48px;
    font-weight: 400;
}

/* Location Widget - Premium Style */
.location-widget[b-amxxn5etu7] {
    max-width: 800px;
    margin: 0 auto 40px;
    animation: slideInUp-b-amxxn5etu7 0.8s ease 0.2s both;
}

@keyframes slideInUp-b-amxxn5etu7 {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

.location-active[b-amxxn5etu7] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .location-active[b-amxxn5etu7]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        animation: rotate-b-amxxn5etu7 30s linear infinite;
    }

@keyframes rotate-b-amxxn5etu7 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.location-info[b-amxxn5etu7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

    .location-info .fa-map-marker-alt[b-amxxn5etu7] {
        font-size: 28px;
        color: #667eea;
        filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
    }

        .location-info .fa-map-marker-alt.pulse[b-amxxn5etu7] {
            animation: locationPulse-b-amxxn5etu7 2s ease-in-out infinite;
        }

@keyframes locationPulse-b-amxxn5etu7 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

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

.location-details[b-amxxn5etu7] {
    text-align: right;
}

.location-label[b-amxxn5etu7] {
    display: block;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.location-name[b-amxxn5etu7] {
    font-size: 20px;
    font-weight: 700;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .location-name .fa-location-arrow[b-amxxn5etu7] {
        font-size: 16px;
        color: #10b981;
    }

.btn-change-location[b-amxxn5etu7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .btn-change-location:hover[b-amxxn5etu7] {
        transform: translateY(-2px) rotate(180deg);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

/* Location Stats - Modern Cards */
.location-stats[b-amxxn5etu7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.stat[b-amxxn5etu7] {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .stat:hover[b-amxxn5etu7] {
        transform: translateY(-4px);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.15);
    }

.stat-value[b-amxxn5etu7] {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label[b-amxxn5etu7] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Location Prompt */
.location-prompt[b-amxxn5etu7] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 2px dashed rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

    .location-prompt .fa-map-marker-alt[b-amxxn5etu7] {
        font-size: 64px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.3));
    }

.prompt-content h3[b-amxxn5etu7] {
    font-size: 24px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 12px;
}

.prompt-content p[b-amxxn5etu7] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
}

.btn-location[b-amxxn5etu7] {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Hero Search - Premium Style */
.hero-search[b-amxxn5etu7] {
    max-width: 600px;
    margin: 0 auto 32px;
    animation: slideInUp-b-amxxn5etu7 0.8s ease 0.4s both;
}

.search-box[b-amxxn5etu7] {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 60px;
    padding: 8px 8px 8px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .search-box:focus-within[b-amxxn5etu7] {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .search-box .fa-search[b-amxxn5etu7] {
        position: absolute;
        right: 24px;
        color: #9333ea;
        font-size: 20px;
    }

    .search-box input[b-amxxn5etu7] {
        flex: 1;
        border: none;
        background: transparent;
        padding: 16px 20px;
        font-size: 16px;
        color: #1e293b;
        outline: none;
    }

        .search-box input[b-amxxn5etu7]::placeholder {
            color: #9ca3af;
        }

.btn-search[b-amxxn5etu7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

    .btn-search:hover[b-amxxn5etu7] {
        transform: translateX(-4px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

/* Hero Actions */
.hero-actions[b-amxxn5etu7] {
    display: flex;
    justify-content: center;
    gap: 16px;
    animation: slideInUp-b-amxxn5etu7 0.8s ease 0.6s both;
}

.btn-hero[b-amxxn5etu7] {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.btn-outline-secondary[b-amxxn5etu7] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
}

    .btn-outline-secondary:hover[b-amxxn5etu7] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-2px);
    }

/* Categories Section */
.categories-section[b-amxxn5etu7] {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    position: relative;
}

.section-header[b-amxxn5etu7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}

    .section-header h2[b-amxxn5etu7] {
        font-size: 36px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

.view-all[b-amxxn5etu7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

    .view-all:hover[b-amxxn5etu7] {
        gap: 12px;
        color: #764ba2;
    }

/* Categories Slider */
.categories-slider[b-amxxn5etu7] {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 0 24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .categories-slider[b-amxxn5etu7]::-webkit-scrollbar {
        display: none;
    }

.category-card[b-amxxn5etu7] {
    flex: 0 0 180px;
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

    .category-card[b-amxxn5etu7]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .category-card:hover[b-amxxn5etu7] {
        transform: translateY(-8px);
        border-color: #667eea;
        box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
    }

        .category-card:hover[b-amxxn5etu7]::before {
            opacity: 1;
        }

.category-icon[b-amxxn5etu7] {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover .category-icon[b-amxxn5etu7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: scale(1.1) rotate(5deg);
}

.category-icon img[b-amxxn5etu7] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: all 0.3s;
}

.category-card:hover .category-icon img[b-amxxn5etu7] {
    filter: brightness(0) invert(1);
}

.category-icon .fa-box[b-amxxn5etu7] {
    font-size: 36px;
    color: #667eea;
    transition: all 0.3s;
}

.category-card:hover .category-icon .fa-box[b-amxxn5etu7] {
    color: white;
}

.category-card h3[b-amxxn5etu7] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
    transition: all 0.3s;
}

.category-card:hover h3[b-amxxn5etu7] {
    color: #667eea;
}

.product-count[b-amxxn5etu7] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Products Section */
.products-section[b-amxxn5etu7] {
    padding: 80px 0;
    background: #f8fafc;
    position: relative;
}

    .products-section.loading[b-amxxn5etu7] {
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.loading-state[b-amxxn5etu7] {
    text-align: center;
}

.spinner[b-amxxn5etu7] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-amxxn5etu7 0.8s linear infinite;
    margin: 0 auto 24px;
}

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

.loading-state h3[b-amxxn5etu7] {
    font-size: 20px;
    color: #6b7280;
    font-weight: 500;
}

/* Products Tabs */
.products-tabs[b-amxxn5etu7] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.tab[b-amxxn5etu7] {
    padding: 14px 28px;
    background: white;
    border: 2px solid transparent;
    border-radius: 30px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

    .tab:hover[b-amxxn5etu7] {
        border-color: #667eea;
        color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    }

    .tab.active[b-amxxn5etu7] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .tab i[b-amxxn5etu7] {
        font-size: 16px;
    }

/* Products Grid */
.products-grid[b-amxxn5etu7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* Product Card - Premium E-commerce Style */
.product-card[b-amxxn5etu7] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;
    position: relative;
}

    .product-card:hover[b-amxxn5etu7] {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        border-color: #667eea;
    }

    .product-card.same-city[b-amxxn5etu7] {
        border-color: rgba(16, 185, 129, 0.3);
    }

        .product-card.same-city:hover[b-amxxn5etu7] {
            border-color: #10b981;
            box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15);
        }

/* Location Badge */
.location-badge[b-amxxn5etu7] {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    backdrop-filter: blur(10px);
}

    .location-badge.same-city[b-amxxn5etu7] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(52, 211, 153, 0.9) 100%);
        color: white;
    }

    .location-badge.nearby[b-amxxn5etu7] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
        color: white;
    }

/* Product Image */
.product-image[b-amxxn5etu7] {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: #f8fafc;
}

    .product-image img[b-amxxn5etu7] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

.product-card:hover .product-image img[b-amxxn5etu7] {
    transform: scale(1.1);
}

.image-placeholder[b-amxxn5etu7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

    .image-placeholder i[b-amxxn5etu7] {
        font-size: 48px;
        color: #9ca3af;
    }

.badge-sale[b-amxxn5etu7] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    z-index: 10;
}

/* Product Info */
.product-info[b-amxxn5etu7] {
    padding: 24px;
}

.merchant-info[b-amxxn5etu7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}

    .merchant-info i[b-amxxn5etu7] {
        color: #9333ea;
    }

    .merchant-info .city[b-amxxn5etu7] {
        color: #9ca3af;
    }

.product-name[b-amxxn5etu7] {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-rating[b-amxxn5etu7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.stars[b-amxxn5etu7] {
    display: flex;
    gap: 2px;
}

    .stars i[b-amxxn5etu7] {
        font-size: 14px;
        color: #e5e7eb;
    }

        .stars i.filled[b-amxxn5etu7] {
            color: #fbbf24;
        }

.product-rating span[b-amxxn5etu7] {
    font-size: 13px;
    color: #6b7280;
}

.product-price[b-amxxn5etu7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}

.sale-price[b-amxxn5etu7],
.current-price[b-amxxn5etu7] {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.original-price[b-amxxn5etu7] {
    font-size: 18px;
    color: #9ca3af;
    text-decoration: line-through;
}

.btn-add-cart[b-amxxn5etu7] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

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

    .btn-add-cart:hover[b-amxxn5etu7] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

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

    .btn-add-cart:active[b-amxxn5etu7] {
        transform: translateY(0);
    }

/* Section Footer */
.section-footer[b-amxxn5etu7] {
    text-align: center;
    margin-top: 48px;
}

    .section-footer .btn[b-amxxn5etu7] {
        padding: 16px 48px;
        font-size: 16px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 12px;
    }

/* Features Section */
.features-section[b-amxxn5etu7] {
    padding: 80px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

    .features-section[b-amxxn5etu7]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: rotate-b-amxxn5etu7 60s linear infinite;
    }

.features-grid[b-amxxn5etu7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    position: relative;
    z-index: 1;
}

.feature[b-amxxn5etu7] {
    text-align: center;
    padding: 40px 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .feature:hover[b-amxxn5etu7] {
        transform: translateY(-8px);
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .feature i[b-amxxn5etu7] {
        font-size: 48px;
        color: white;
        margin-bottom: 24px;
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
    }

    .feature h3[b-amxxn5etu7] {
        font-size: 20px;
        font-weight: 700;
        color: white;
        margin-bottom: 12px;
    }

    .feature p[b-amxxn5etu7] {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
    }

/* Location Modal */
.modal-backdrop[b-amxxn5etu7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal-content[b-amxxn5etu7] {
    background: white;
    border-radius: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: scaleIn-b-amxxn5etu7 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.modal-header[b-amxxn5etu7] {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .modal-header h3[b-amxxn5etu7] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

.close-modal[b-amxxn5etu7] {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #6b7280;
}

    .close-modal:hover[b-amxxn5etu7] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transform: rotate(90deg);
    }

.modal-body[b-amxxn5etu7] {
    padding: 24px;
    max-height: calc(80vh - 100px);
    overflow-y: auto;
}

.btn-use-current-location[b-amxxn5etu7] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

    .btn-use-current-location:hover[b-amxxn5etu7] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    }

.location-search[b-amxxn5etu7] {
    margin-bottom: 24px;
}

    .location-search input[b-amxxn5etu7] {
        width: 100%;
        padding: 16px 20px;
        background: #f3f4f6;
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 16px;
        transition: all 0.3s;
    }

        .location-search input:focus[b-amxxn5etu7] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.cities-list[b-amxxn5etu7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.city-item[b-amxxn5etu7] {
    padding: 16px 20px;
    background: #f8fafc;
    border: 2px solid transparent;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    color: #4b5563;
    text-align: right;
    width: 100%;
}

    .city-item:hover[b-amxxn5etu7] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-color: #667eea;
        color: #667eea;
        transform: translateX(-4px);
    }

    .city-item i[b-amxxn5etu7] {
        color: #9333ea;
    }

/* Dark Theme Support */
[data-theme="dark"] .home-page[b-amxxn5etu7] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .hero-section[b-amxxn5etu7]::before {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    opacity: 0.05;
}

[data-theme="dark"] .location-active[b-amxxn5etu7],
[data-theme="dark"] .location-prompt[b-amxxn5etu7],
[data-theme="dark"] .search-box[b-amxxn5etu7] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .categories-section[b-amxxn5etu7] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

[data-theme="dark"] .category-card[b-amxxn5etu7],
[data-theme="dark"] .product-card[b-amxxn5etu7] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .products-section[b-amxxn5etu7] {
    background: #0f172a;
}

[data-theme="dark"] .tab[b-amxxn5etu7] {
    background: #1e293b;
    color: #9ca3af;
}

    [data-theme="dark"] .tab:hover[b-amxxn5etu7] {
        color: #a78bfa;
        border-color: #a78bfa;
    }

    [data-theme="dark"] .tab.active[b-amxxn5etu7] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

[data-theme="dark"] .modal-content[b-amxxn5etu7] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .modal-header[b-amxxn5etu7] {
    background: linear-gradient(135deg, rgba(90, 108, 179, 0.1) 0%, rgba(98, 81, 139, 0.1) 100%);
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .location-search input[b-amxxn5etu7] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .city-item[b-amxxn5etu7] {
    background: rgba(71, 85, 105, 0.3);
    color: #cbd5e1;
}

    [data-theme="dark"] .city-item:hover[b-amxxn5etu7] {
        background: linear-gradient(135deg, rgba(90, 108, 179, 0.2) 0%, rgba(98, 81, 139, 0.2) 100%);
        border-color: #a78bfa;
        color: #a78bfa;
    }

[data-theme="dark"] .hero-title[b-amxxn5etu7],
[data-theme="dark"] .stat-value[b-amxxn5etu7] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .hero-subtitle[b-amxxn5etu7] {
    color: #9ca3af;
}

[data-theme="dark"] .location-name[b-amxxn5etu7] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-name[b-amxxn5etu7] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-info .merchant-info[b-amxxn5etu7] {
    color: #9ca3af;
}

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

@media (max-width: 768px) {
    .hero-section[b-amxxn5etu7] {
        padding: 40px 0 60px;
    }

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

    .hero-subtitle[b-amxxn5etu7] {
        font-size: 1.125rem;
    }

    .location-stats[b-amxxn5etu7] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stat[b-amxxn5etu7] {
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: right;
    }

    .stat-value[b-amxxn5etu7] {
        font-size: 24px;
    }

    .hero-actions[b-amxxn5etu7] {
        flex-direction: column;
        width: 100%;
    }

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

    .section-header[b-amxxn5etu7] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

        .section-header h2[b-amxxn5etu7] {
            font-size: 28px;
        }

    .categories-slider[b-amxxn5etu7] {
        gap: 16px;
        padding: 8px 16px 24px;
        margin: 0 -16px;
    }

    .category-card[b-amxxn5etu7] {
        flex: 0 0 140px;
        padding: 24px 16px;
    }

    .category-icon[b-amxxn5etu7] {
        width: 60px;
        height: 60px;
    }

    .products-tabs[b-amxxn5etu7] {
        gap: 8px;
    }

    .tab[b-amxxn5etu7] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .products-grid[b-amxxn5etu7] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }

    .product-info[b-amxxn5etu7] {
        padding: 16px;
    }

    .product-name[b-amxxn5etu7] {
        font-size: 16px;
    }

    .product-price[b-amxxn5etu7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .sale-price[b-amxxn5etu7],
    .current-price[b-amxxn5etu7] {
        font-size: 20px;
    }

    .original-price[b-amxxn5etu7] {
        font-size: 16px;
    }

    .features-grid[b-amxxn5etu7] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .modal-content[b-amxxn5etu7] {
        border-radius: 24px 24px 0 0;
        max-height: 90vh;
    }
}

@media (max-width: 480px) {
    .hero-badge[b-amxxn5etu7] {
        font-size: 12px;
        padding: 8px 16px;
    }

    .location-active[b-amxxn5etu7] {
        padding: 24px 16px;
    }

    .search-box[b-amxxn5etu7] {
        flex-direction: column;
        border-radius: 16px;
        padding: 16px;
        gap: 12px;
    }

        .search-box .fa-search[b-amxxn5etu7] {
            position: static;
            order: -1;
        }

        .search-box input[b-amxxn5etu7] {
            width: 100%;
            padding: 12px 16px;
        }

    .btn-search[b-amxxn5etu7] {
        width: 100%;
    }
}

/* Print Styles */
@media print {
    .home-page[b-amxxn5etu7] {
        background: white !important;
    }

    .hero-section[b-amxxn5etu7],
    .features-section[b-amxxn5etu7],
    .modal-backdrop[b-amxxn5etu7],
    .btn-add-cart[b-amxxn5etu7],
    .products-tabs[b-amxxn5etu7] {
        display: none !important;
    }

    .products-grid[b-amxxn5etu7] {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-card[b-amxxn5etu7] {
        border: 1px solid #e5e7eb !important;
        box-shadow: none !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-amxxn5etu7],
    *[b-amxxn5etu7]::before,
    *[b-amxxn5etu7]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/AddAgent.razor.rz.scp.css */
/* ===================================
   إضافة مندوب - تصميم احترافي حديث
   =================================== */

/* الحاوي الرئيسي */
.add-agent-page[b-7wzzse31to] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .add-agent-page[b-7wzzse31to]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .add-agent-page > *[b-7wzzse31to] {
        position: relative;
        z-index: 1;
    }

/* رأس الصفحة المحسن */
.page-header-enhanced[b-7wzzse31to] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px 32px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content[b-7wzzse31to] {
    flex: 1;
}

/* مسار التنقل الحديث */
.breadcrumb-modern[b-7wzzse31to] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-item[b-7wzzse31to] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 12px;
}

    .breadcrumb-item:hover[b-7wzzse31to] {
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

    .breadcrumb-item i[b-7wzzse31to] {
        font-size: 14px;
    }

.separator[b-7wzzse31to] {
    color: #d1d5db;
    font-weight: 600;
}

.breadcrumb-current[b-7wzzse31to] {
    color: #4c1d95;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 8px 12px;
    border-radius: 12px;
}

/* قسم العنوان */
.header-title-section[b-7wzzse31to] {
    margin-top: 12px;
}

.page-title-modern[b-7wzzse31to] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 16px;
}

.title-icon[b-7wzzse31to] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: white;
    font-size: 24px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.page-subtitle-enhanced[b-7wzzse31to] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* أزرار الإجراءات */
.header-actions[b-7wzzse31to] {
    display: flex;
    gap: 12px;
}

.action-button[b-7wzzse31to] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    font-size: 15px;
    min-height: 48px;
    position: relative;
    overflow: hidden;
}

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

    .action-button:hover[b-7wzzse31to]::before {
        width: 100px;
        height: 100px;
    }

    .action-button.primary[b-7wzzse31to] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    }

        .action-button.primary:hover[b-7wzzse31to] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

    .action-button.secondary[b-7wzzse31to] {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        color: #4b5563;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

        .action-button.secondary:hover[b-7wzzse31to] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        }

/* مؤشر التقدم */
.registration-progress[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-header[b-7wzzse31to] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .progress-header h3[b-7wzzse31to] {
        font-size: 20px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.completion-status[b-7wzzse31to] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .completion-status.complete[b-7wzzse31to] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .completion-status.nearly-complete[b-7wzzse31to] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .completion-status.incomplete[b-7wzzse31to] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.progress-items[b-7wzzse31to] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.progress-item[b-7wzzse31to] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

    .progress-item.complete[b-7wzzse31to] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.1) 0%, rgba(56, 249, 215, 0.1) 100%);
        border-color: rgba(67, 233, 123, 0.3);
    }

        .progress-item.complete i[b-7wzzse31to] {
            color: #059669;
        }

    .progress-item.pending i[b-7wzzse31to] {
        color: #9ca3af;
    }

    .progress-item i[b-7wzzse31to] {
        font-size: 18px;
        min-width: 18px;
    }

    .progress-item span[b-7wzzse31to] {
        font-weight: 500;
        color: #4b5563;
        font-size: 14px;
    }

/* حاوي النموذج */
.form-container-modern[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* أقسام النموذج */
.form-section[b-7wzzse31to] {
    margin-bottom: 48px;
    position: relative;
}

    .form-section:last-child[b-7wzzse31to] {
        margin-bottom: 0;
    }

.section-header[b-7wzzse31to] {
    margin-bottom: 28px;
}

.section-title[b-7wzzse31to] {
    font-size: 24px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    .section-title i[b-7wzzse31to] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 20px;
    }

.section-status[b-7wzzse31to] {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

    .section-status.complete[b-7wzzse31to] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
    }

    .section-status.partial[b-7wzzse31to] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
    }

.section-line[b-7wzzse31to] {
    height: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    opacity: 0.3;
}

.section-info[b-7wzzse31to] {
    margin-top: 16px;
}

.info-box[b-7wzzse31to] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

    .info-box i[b-7wzzse31to] {
        color: #667eea;
        font-size: 18px;
        margin-top: 2px;
    }

    .info-box div[b-7wzzse31to] {
        flex: 1;
    }

    .info-box strong[b-7wzzse31to] {
        color: #4c1d95;
        font-weight: 600;
    }

    .info-box p[b-7wzzse31to] {
        color: #6b7280;
        margin: 4px 0 0 0;
        font-size: 14px;
        line-height: 1.5;
    }

/* شبكة النموذج */
.form-grid[b-7wzzse31to] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.col-span-2[b-7wzzse31to] {
    grid-column: span 2;
}

/* مجموعة النموذج */
.form-group[b-7wzzse31to] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-7wzzse31to] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .form-label.required[b-7wzzse31to]::after {
        content: '*';
        color: #ef4444;
        font-size: 16px;
    }

.optional-badge[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(209, 213, 219, 0.2) 100%);
    color: #6b7280;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* غلاف المدخلات */
.input-wrapper[b-7wzzse31to] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-7wzzse31to] {
    position: absolute;
    left: 16px;
    color: #9333ea;
    font-size: 16px;
    z-index: 2;
}

html[dir="rtl"] .input-icon[b-7wzzse31to] {
    right: 16px;
    left: auto;
}

/* عناصر النموذج مع ::deep */
[b-7wzzse31to] .form-input,
[b-7wzzse31to] .form-select {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 15px;
    color: #374151;
    font-family: inherit;
    outline: none;
}

html[dir="rtl"][b-7wzzse31to]  .form-input,
html[dir="rtl"][b-7wzzse31to]  .form-select {
    padding: 14px 48px 14px 16px;
}

[b-7wzzse31to] .form-input:hover,
[b-7wzzse31to] .form-select:hover {
    border-color: rgba(102, 126, 234, 0.3);
    background: rgba(102, 126, 234, 0.08);
}

[b-7wzzse31to] .form-input:focus,
[b-7wzzse31to] .form-select:focus {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

[b-7wzzse31to] .form-input::placeholder {
    color: #9ca3af;
}

[b-7wzzse31to] .form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 12px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
}

html[dir="rtl"][b-7wzzse31to]  .form-select {
    background-position: right 12px center;
}

[b-7wzzse31to] .form-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f3f4f6;
}

.input-suffix[b-7wzzse31to] {
    position: absolute;
    left: 16px;
    color: #6b7280;
    font-weight: 600;
    font-size: 14px;
    z-index: 2;
}

html[dir="rtl"] .input-suffix[b-7wzzse31to] {
    left: 16px;
    right: auto;
}

.field-hint[b-7wzzse31to] {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
    font-style: italic;
}

/* رسائل التحقق */
[b-7wzzse31to] .validation-message {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    [b-7wzzse31to] .validation-message::before {
        content: '⚠';
        font-size: 14px;
    }

/* محدد نوع المندوب */
.agent-type-selector[b-7wzzse31to] {
    margin-bottom: 24px;
}

.type-cards[b-7wzzse31to] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.type-card[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .type-card[b-7wzzse31to]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .type-card:hover[b-7wzzse31to] {
        transform: translateY(-4px);
        border-color: #667eea;
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
    }

        .type-card:hover[b-7wzzse31to]::before {
            opacity: 1;
        }

    .type-card.selected[b-7wzzse31to] {
        border-color: #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }

.card-icon[b-7wzzse31to] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
    position: relative;
    z-index: 1;
}

.type-card h3[b-7wzzse31to] {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.type-card p[b-7wzzse31to] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* قسم الرفع */
.upload-section[b-7wzzse31to] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.upload-box[b-7wzzse31to] {
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
    background: rgba(102, 126, 234, 0.02);
    position: relative;
}

    .upload-box:hover[b-7wzzse31to] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.05);
    }

    .upload-box.horizontal[b-7wzzse31to] {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 24px;
        text-align: left;
    }

.upload-content[b-7wzzse31to] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .upload-content i[b-7wzzse31to] {
        font-size: 32px;
        color: #667eea;
        margin-bottom: 8px;
    }

    .upload-content p[b-7wzzse31to] {
        font-weight: 600;
        color: #4b5563;
        margin: 0;
    }

.upload-hint[b-7wzzse31to] {
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
}

.upload-button[b-7wzzse31to] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 14px;
}

    .upload-button:hover[b-7wzzse31to] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.upload-preview[b-7wzzse31to] {
    margin-top: 16px;
    position: relative;
}

    .upload-preview img[b-7wzzse31to] {
        width: 100%;
        max-width: 200px;
        height: 120px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.file-info[b-7wzzse31to] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.1) 0%, rgba(56, 249, 215, 0.1) 100%);
    border-radius: 8px;
    border: 1px solid rgba(67, 233, 123, 0.3);
    margin-top: 12px;
}

    .file-info i[b-7wzzse31to] {
        color: #059669;
        font-size: 18px;
    }

    .file-info span[b-7wzzse31to] {
        color: #059669;
        font-weight: 600;
        flex: 1;
    }

.remove-button[b-7wzzse31to] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    top: 8px;
    right: 8px;
}

    .remove-button:hover[b-7wzzse31to] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

/* الإعدادات الإضافية */
.settings-list[b-7wzzse31to] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.setting-item[b-7wzzse31to] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

    .setting-item:hover[b-7wzzse31to] {
        border-color: rgba(102, 126, 234, 0.2);
        background: rgba(102, 126, 234, 0.08);
    }

.setting-info[b-7wzzse31to] {
    flex: 1;
}

    .setting-info h4[b-7wzzse31to] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin: 0 0 4px 0;
    }

    .setting-info p[b-7wzzse31to] {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
        line-height: 1.4;
    }

/* مفتاح التبديل */
/* مفتاح التبديل */
.toggle-switch[b-7wzzse31to] {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
    cursor: pointer;
}

    /* إخفاء الـ checkbox الأصلي */
    .toggle-switch input[type="checkbox"][b-7wzzse31to] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.toggle-slider[b-7wzzse31to] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    transition: 0.3s;
    border-radius: 28px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .toggle-slider[b-7wzzse31to]:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background: white;
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

/* الحالة المحددة */
.toggle-switch input:checked + .toggle-slider[b-7wzzse31to] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

    .toggle-switch input:checked + .toggle-slider[b-7wzzse31to]:before {
        transform: translateX(26px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

/* حالة التركيز */
.toggle-switch input:focus + .toggle-slider[b-7wzzse31to] {
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* حالة التعطيل */
.toggle-switch input:disabled + .toggle-slider[b-7wzzse31to] {
    opacity: 0.6;
    cursor: not-allowed;
}

    .toggle-switch input:disabled + .toggle-slider[b-7wzzse31to]:before {
        cursor: not-allowed;
    }

[b-7wzzse31to] input:checked + .toggle-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

    [b-7wzzse31to] input:checked + .toggle-slider:before {
        transform: translateX(26px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

/* تنبيه التسجيل */
.registration-alert[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 24px;
    margin: 32px 0;
}

.alert-content[b-7wzzse31to] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

    .alert-content i[b-7wzzse31to] {
        color: #d97706;
        font-size: 24px;
        margin-top: 2px;
    }

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

    .alert-content h4[b-7wzzse31to] {
        font-size: 18px;
        font-weight: 700;
        color: #92400e;
        margin: 0 0 8px 0;
    }

    .alert-content p[b-7wzzse31to] {
        color: #78350f;
        margin: 0 0 8px 0;
        line-height: 1.5;
    }

.alert-note[b-7wzzse31to] {
    font-size: 14px;
    color: #a16207 !important;
    font-style: italic;
    margin-top: 8px !important;
}

/* إجراءات النموذج */
.form-actions[b-7wzzse31to] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 32px;
    border-top: 2px solid rgba(102, 126, 234, 0.1);
    margin-top: 32px;
}

/* مؤشر التحميل */
[b-7wzzse31to] .spinner-border {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right-color: white;
    border-radius: 50%;
    animation: spin-b-7wzzse31to 0.8s linear infinite;
}

[b-7wzzse31to] .spinner-border-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

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

/* رسالة عدم الترخيص */
.unauthorized-message[b-7wzzse31to] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .unauthorized-message i[b-7wzzse31to] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-message h3[b-7wzzse31to] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-message p[b-7wzzse31to] {
        font-size: 16px;
        color: #6b7280;
        margin: 0;
    }

/* التصميم المتجاوب */
@media (max-width: 1200px) {
    .form-grid[b-7wzzse31to] {
        grid-template-columns: repeat(2, 1fr);
    }

    .col-span-2[b-7wzzse31to] {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .add-agent-page[b-7wzzse31to] {
        padding: 16px;
    }

    .page-header-enhanced[b-7wzzse31to] {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 20px;
    }

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

    .page-title-modern[b-7wzzse31to] {
        font-size: 28px;
        text-align: center;
    }

    .breadcrumb-modern[b-7wzzse31to] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .form-grid[b-7wzzse31to] {
        grid-template-columns: 1fr;
    }

    .col-span-2[b-7wzzse31to] {
        grid-column: span 1;
    }

    .type-cards[b-7wzzse31to] {
        grid-template-columns: 1fr;
    }

    .upload-section[b-7wzzse31to] {
        grid-template-columns: 1fr;
    }

    .upload-box.horizontal[b-7wzzse31to] {
        flex-direction: column;
        text-align: center;
    }

    .form-actions[b-7wzzse31to] {
        flex-direction: column-reverse;
    }

        .form-actions .action-button[b-7wzzse31to] {
            width: 100%;
            justify-content: center;
        }

    .progress-items[b-7wzzse31to] {
        grid-template-columns: 1fr;
    }

    .setting-item[b-7wzzse31to] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .form-container-modern[b-7wzzse31to] {
        padding: 20px;
    }

    .registration-progress[b-7wzzse31to] {
        padding: 20px;
    }

    .section-title[b-7wzzse31to] {
        font-size: 20px;
        text-align: center;
    }

    .title-icon[b-7wzzse31to] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-7wzzse31to] {
        font-size: 24px;
    }

    .form-container-modern[b-7wzzse31to] {
        padding: 16px;
    }

    .registration-progress[b-7wzzse31to] {
        padding: 16px;
    }

    .alert-content[b-7wzzse31to] {
        flex-direction: column;
        text-align: center;
    }

    .info-box[b-7wzzse31to] {
        flex-direction: column;
        text-align: center;
    }

    [b-7wzzse31to] .form-input,
    [b-7wzzse31to] .form-select {
        padding: 12px 16px 12px 40px;
        font-size: 14px;
    }

    html[dir="rtl"][b-7wzzse31to]  .form-input,
    html[dir="rtl"][b-7wzzse31to]  .form-select {
        padding: 12px 40px 12px 16px;
    }
}

/* دعم الوضع المظلم */
[data-theme="dark"] .add-agent-page[b-7wzzse31to] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .add-agent-page[b-7wzzse31to]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-7wzzse31to],
[data-theme="dark"] .registration-progress[b-7wzzse31to],
[data-theme="dark"] .form-container-modern[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-7wzzse31to] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-7wzzse31to] {
        color: #a78bfa;
        background: rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .breadcrumb-current[b-7wzzse31to] {
    color: #e2e8f0;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(196, 132, 252, 0.1) 100%);
}

[data-theme="dark"] .page-subtitle-enhanced[b-7wzzse31to] {
    color: #9ca3af;
}

[data-theme="dark"] .form-label[b-7wzzse31to] {
    color: #e2e8f0;
}

[data-theme="dark"][b-7wzzse31to]  .form-input,
[data-theme="dark"][b-7wzzse31to]  .form-select {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"][b-7wzzse31to]  .form-input:focus,
    [data-theme="dark"][b-7wzzse31to]  .form-select:focus {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
        box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .type-card[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .type-card:hover[b-7wzzse31to] {
        border-color: #a78bfa;
        box-shadow: 0 8px 25px rgba(167, 139, 250, 0.2);
    }

    [data-theme="dark"] .type-card.selected[b-7wzzse31to] {
        border-color: #a78bfa;
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(196, 132, 252, 0.1) 100%);
        box-shadow: 0 8px 25px rgba(167, 139, 250, 0.3);
    }

    [data-theme="dark"] .type-card h3[b-7wzzse31to] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .type-card p[b-7wzzse31to] {
        color: #9ca3af;
    }

[data-theme="dark"] .info-box[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(196, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.2);
}

    [data-theme="dark"] .info-box i[b-7wzzse31to] {
        color: #a78bfa;
    }

    [data-theme="dark"] .info-box strong[b-7wzzse31to] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .info-box p[b-7wzzse31to] {
        color: #9ca3af;
    }

[data-theme="dark"] .unauthorized-message[b-7wzzse31to] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

    [data-theme="dark"] .unauthorized-message h3[b-7wzzse31to] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .unauthorized-message p[b-7wzzse31to] {
        color: #9ca3af;
    }

/* طباعة الصفحة */
@media print {
    .add-agent-page[b-7wzzse31to] {
        background: white !important;
        padding: 20px !important;
    }

    .header-actions[b-7wzzse31to],
    .form-actions[b-7wzzse31to],
    .action-button[b-7wzzse31to] {
        display: none !important;
    }

    .page-header-enhanced[b-7wzzse31to],
    .registration-progress[b-7wzzse31to],
    .form-container-modern[b-7wzzse31to] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* دعم الحركة المخفضة */
@media (prefers-reduced-motion: reduce) {
    *[b-7wzzse31to] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* دعم التباين العالي */
@media (prefers-contrast: high) {
    .action-button[b-7wzzse31to],
    .type-card[b-7wzzse31to],
    .upload-button[b-7wzzse31to] {
        border: 2px solid currentColor !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/AddCustomer.razor.rz.scp.css */
/* AddCustomer.razor.css - Modern Professional Customer Management Styling */

/* Page Container */
.page-container[b-eit4d4k1wj] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .page-container[b-eit4d4k1wj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .page-container > *[b-eit4d4k1wj] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-eit4d4k1wj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-eit4d4k1wj] {
    flex: 1;
}

.redirect-message[b-eit4d4k1wj] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--primary-light);
    border-radius: 8px;
    text-align: center;
    color: var(--primary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.breadcrumb-modern[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-link[b-eit4d4k1wj] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-eit4d4k1wj] {
        color: #667eea;
    }

.breadcrumb-separator[b-eit4d4k1wj] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-eit4d4k1wj] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-eit4d4k1wj] {
    margin-top: 6px;
}

.page-title-modern[b-eit4d4k1wj] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.title-icon[b-eit4d4k1wj] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-eit4d4k1wj] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-eit4d4k1wj] {
    display: flex;
    gap: 12px;
}

/* Form Container */
.customer-form-container[b-eit4d4k1wj] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
}

/* Form Mode Selector */
.form-mode-selector[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.mode-toggle[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    font-weight: 600;
    color: #4c1d95;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

    .mode-toggle:hover[b-eit4d4k1wj] {
        background: rgba(102, 126, 234, 0.1);
    }

.toggle-label[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-hint[b-eit4d4k1wj] {
    margin-left: 16px;
    color: #6b7280;
    font-style: italic;
}

/* Custom Checkbox */
[b-eit4d4k1wj] .mode-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid #667eea;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

    [b-eit4d4k1wj] .mode-toggle input[type="checkbox"]:checked {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
    }

        [b-eit4d4k1wj] .mode-toggle input[type="checkbox"]:checked::after {
            content: '✓';
            position: absolute;
            color: white;
            font-size: 14px;
            font-weight: bold;
            left: 4px;
            top: 0;
        }

/* Quick Form */
.quick-form-container[b-eit4d4k1wj] {
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    margin-bottom: 32px;
}

.quick-form-header[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: #4c1d95;
    font-size: 18px;
}

    .quick-form-header i[b-eit4d4k1wj] {
        font-size: 24px;
        color: #667eea;
    }

/* Progress Steps */
.form-progress-enhanced[b-eit4d4k1wj] {
    margin-bottom: 32px;
}

.progress-steps[b-eit4d4k1wj] {
    align-items: center;
}

.progress-step[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.3s;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.6);
}

    .progress-step:hover[b-eit4d4k1wj] {
        background: rgba(102, 126, 234, 0.1);
    }

    .progress-step.active[b-eit4d4k1wj] {
        background: rgba(102, 126, 234, 0.1);
        border: 1px solid rgba(102, 126, 234, 0.3);
    }

    .progress-step.completed[b-eit4d4k1wj] {
        color: #667eea;
    }

.step-number[b-eit4d4k1wj] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    border: 2px solid #d1d5db;
    color: #6b7280;
    transition: all 0.3s;
}

.progress-step.active .step-number[b-eit4d4k1wj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.progress-step.completed .step-number[b-eit4d4k1wj] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border-color: transparent;
}

.progress-line[b-eit4d4k1wj] {
    flex: 1;
    height: 3px;
    background: #d1d5db;
    margin: 0 8px;
}

    .progress-line.completed[b-eit4d4k1wj] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

.step-content[b-eit4d4k1wj] {
    display: flex;
    flex-direction: column;
}

.step-label[b-eit4d4k1wj] {
    font-weight: 600;
    color: #1f2937;
}

.step-description[b-eit4d4k1wj] {
    font-size: 12px;
    color: #6b7280;
}

/* Form Content */
.form-content-container[b-eit4d4k1wj] {
    position: relative;
}

.form-step-content[b-eit4d4k1wj] {
    display: none;
}

    .form-step-content.active[b-eit4d4k1wj] {
        display: block;
        animation: fadeIn-b-eit4d4k1wj 0.4s ease;
    }

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

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

.step-header-enhanced[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.step-icon[b-eit4d4k1wj] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}

.step-title-content[b-eit4d4k1wj] {
    flex: 1;
}

    .step-title-content h3[b-eit4d4k1wj] {
        margin: 0 0 4px 0;
        font-weight: 700;
        font-size: 20px;
        color: #1f2937;
    }

    .step-title-content p[b-eit4d4k1wj] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

/* Form Grid */
.form-grid-enhanced[b-eit4d4k1wj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.form-group-enhanced[b-eit4d4k1wj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group-enhanced.full-width[b-eit4d4k1wj] {
        grid-column: 1 / -1;
    }

.form-label-enhanced[b-eit4d4k1wj] {
    font-weight: 600;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.label-icon[b-eit4d4k1wj] {
    color: #667eea;
    font-size: 16px;
}

.required[b-eit4d4k1wj] {
    color: #ef4444;
    font-weight: bold;
    margin-left: 4px;
}

.input-group-enhanced[b-eit4d4k1wj] {
    position: relative;
}

[b-eit4d4k1wj] .form-control-enhanced {
    width: 100%;
    padding: 12px 16px;
    padding-left: 16px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
}

    [b-eit4d4k1wj] .form-control-enhanced:hover {
        border-color: #d1d5db;
    }

    [b-eit4d4k1wj] .form-control-enhanced:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        background: white;
    }

    [b-eit4d4k1wj] .form-control-enhanced.textarea {
        resize: vertical;
        min-height: 100px;
    }

.input-indicator[b-eit4d4k1wj] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s;
}

[b-eit4d4k1wj] .form-control-enhanced:focus + .input-indicator {
    width: 100%;
}

.form-hint-enhanced[b-eit4d4k1wj] {
    color: #6b7280;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Section Divider */
.section-divider[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 32px 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .section-divider h4[b-eit4d4k1wj] {
        margin: 0;
        font-size: 18px;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.section-badge[b-eit4d4k1wj] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

/* Password Section */
.password-section[b-eit4d4k1wj] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.password-options[b-eit4d4k1wj] {
    margin-bottom: 20px;
}

.option-toggle[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

[b-eit4d4k1wj] .password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s;
}

    [b-eit4d4k1wj] .password-toggle:hover {
        color: #667eea;
    }

/* Info Box */
.info-box-enhanced[b-eit4d4k1wj] {
    padding: 16px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1e40af;
    font-size: 14px;
    margin-bottom: 24px;
}

/* Form Actions */
.form-actions-enhanced[b-eit4d4k1wj] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .form-actions-enhanced button[b-eit4d4k1wj] {
        padding: 12px 24px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border: none;
    }

.action-left[b-eit4d4k1wj], .action-right[b-eit4d4k1wj] {
    flex: 1;
}

.action-right[b-eit4d4k1wj] {
    display: flex;
    justify-content: flex-end;
}

.action-center[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-indicator[b-eit4d4k1wj] {
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
    color: #4c1d95;
    font-weight: 600;
    font-size: 14px;
}

/* Loading State */
.loading-modern[b-eit4d4k1wj] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.loading-spinner-container[b-eit4d4k1wj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner-modern[b-eit4d4k1wj] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-eit4d4k1wj 1s linear infinite;
}

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

.loading-text-modern[b-eit4d4k1wj] {
    color: #4c1d95;
    font-weight: 600;
    font-size: 16px;
}

/* Validation Messages */
[b-eit4d4k1wj] .validation-message-enhanced {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    [b-eit4d4k1wj] .validation-message-enhanced::before {
        content: '⚠️';
        font-size: 12px;
    }

/* Success Modal */
.success-modal-backdrop[b-eit4d4k1wj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 1000;
    animation: fadeIn-b-eit4d4k1wj 0.3s ease;
}

.success-modal[b-eit4d4k1wj] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    z-index: 1001;
    animation: scaleIn-b-eit4d4k1wj 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scaleIn-b-eit4d4k1wj {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.success-modal-content[b-eit4d4k1wj] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.success-modal-header[b-eit4d4k1wj] {
    padding: 32px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(59, 201, 104, 0.05) 0%, rgba(50, 209, 183, 0.05) 100%);
}

.success-icon-container[b-eit4d4k1wj] {
    margin-bottom: 16px;
}

.success-icon-circle[b-eit4d4k1wj] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 12px 24px rgba(59, 201, 104, 0.3);
    position: relative;
    overflow: hidden;
}

    .success-icon-circle[b-eit4d4k1wj]::before {
        content: '';
        position: absolute;
        width: 150%;
        height: 150%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(45deg) translateX(-50%);
        animation: shine-b-eit4d4k1wj 2s infinite;
    }

@keyframes shine-b-eit4d4k1wj {
    0% {
        transform: rotate(45deg) translateX(-100%);
    }

    100% {
        transform: rotate(45deg) translateX(100%);
    }
}

.success-icon[b-eit4d4k1wj] {
    font-size: 36px;
    color: white;
}

.success-title[b-eit4d4k1wj] {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.success-message[b-eit4d4k1wj] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.success-modal-body[b-eit4d4k1wj] {
    padding: 24px;
}

.customer-summary[b-eit4d4k1wj] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.summary-item[b-eit4d4k1wj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.05);
}

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

.summary-icon[b-eit4d4k1wj] {
    width: 40px;
    height: 40px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 16px;
}

.summary-details[b-eit4d4k1wj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label[b-eit4d4k1wj] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.summary-value[b-eit4d4k1wj] {
    font-size: 16px;
    color: #1f2937;
    font-weight: 600;
}

.customer-code[b-eit4d4k1wj] {
    color: #4c1d95;
    font-weight: 700;
}

.success-modal-actions[b-eit4d4k1wj] {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(255, 255, 255, 0.5);
}

/* Buttons */
.btn-gradient-primary[b-eit4d4k1wj] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-eit4d4k1wj] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-eit4d4k1wj] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-eit4d4k1wj] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-eit4d4k1wj] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-eit4d4k1wj] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-outline[b-eit4d4k1wj] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-gradient-outline:hover[b-eit4d4k1wj] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-2px);
    }

/* Unauthorized Section */
.unauthorized-container[b-eit4d4k1wj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    gap: 24px;
}

.unauthorized-icon[b-eit4d4k1wj] {
    font-size: 64px;
    color: #ef4444;
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .page-header-enhanced[b-eit4d4k1wj] {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .header-actions[b-eit4d4k1wj] {
        width: 100%;
        justify-content: center;
    }

    .form-grid-enhanced[b-eit4d4k1wj] {
        grid-template-columns: 1fr;
    }

    .form-actions-enhanced[b-eit4d4k1wj] {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .action-left[b-eit4d4k1wj],
    .action-right[b-eit4d4k1wj] {
        width: 100%;
        display: flex;
        justify-content: center;
    }

        .action-right button[b-eit4d4k1wj],
        .action-left button[b-eit4d4k1wj] {
            width: 100%;
        }

    .step-indicator[b-eit4d4k1wj] {
        margin: 16px 0;
    }

    .progress-step[b-eit4d4k1wj] {
        padding: 12px;
    }

    .step-description[b-eit4d4k1wj] {
        display: none;
    }

    .success-modal-actions[b-eit4d4k1wj] {
        flex-direction: column;
    }

        .success-modal-actions button[b-eit4d4k1wj] {
            width: 100%;
        }
}

/* Dark Theme */
[data-theme="dark"] .page-container[b-eit4d4k1wj] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .page-container[b-eit4d4k1wj]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-eit4d4k1wj],
[data-theme="dark"] .customer-form-container[b-eit4d4k1wj],
[data-theme="dark"] .success-modal-content[b-eit4d4k1wj],
[data-theme="dark"] .unauthorized-container[b-eit4d4k1wj] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-link[b-eit4d4k1wj] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-eit4d4k1wj] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-eit4d4k1wj] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle-enhanced[b-eit4d4k1wj] {
    color: #9ca3af;
}

[data-theme="dark"] .form-mode-selector[b-eit4d4k1wj],
[data-theme="dark"] .quick-form-container[b-eit4d4k1wj],
[data-theme="dark"] .password-section[b-eit4d4k1wj] {
    background: rgba(102, 126, 234, 0.05);
    border-color: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .progress-step[b-eit4d4k1wj] {
    background: rgba(30, 41, 59, 0.6);
}

    [data-theme="dark"] .progress-step:hover[b-eit4d4k1wj] {
        background: rgba(102, 126, 234, 0.1);
    }

[data-theme="dark"] .step-number[b-eit4d4k1wj] {
    border-color: #475569;
    color: #9ca3af;
}

[data-theme="dark"] .step-label[b-eit4d4k1wj] {
    color: #e2e8f0;
}

[data-theme="dark"] .step-description[b-eit4d4k1wj] {
    color: #9ca3af;
}

[data-theme="dark"] .form-label-enhanced[b-eit4d4k1wj] {
    color: #e2e8f0;
}

[data-theme="dark"][b-eit4d4k1wj]  .form-control-enhanced {
    background: rgba(30, 41, 59, 0.6);
    border-color: #475569;
    color: #e2e8f0;
}

    [data-theme="dark"][b-eit4d4k1wj]  .form-control-enhanced:hover {
        border-color: #64748b;
    }

    [data-theme="dark"][b-eit4d4k1wj]  .form-control-enhanced:focus {
        background: rgba(30, 41, 59, 0.8);
        border-color: #667eea;
    }

[data-theme="dark"] .form-hint-enhanced[b-eit4d4k1wj] {
    color: #9ca3af;
}

[data-theme="dark"] .success-modal-header[b-eit4d4k1wj] {
    background: linear-gradient(135deg, rgba(59, 201, 104, 0.05) 0%, rgba(50, 209, 183, 0.05) 100%);
}

[data-theme="dark"] .success-title[b-eit4d4k1wj] {
    color: #e2e8f0;
}

[data-theme="dark"] .success-message[b-eit4d4k1wj] {
    color: #9ca3af;
}

[data-theme="dark"] .customer-summary[b-eit4d4k1wj] {
    background: rgba(30, 41, 59, 0.5);
}

[data-theme="dark"] .summary-label[b-eit4d4k1wj] {
    color: #9ca3af;
}

[data-theme="dark"] .summary-value[b-eit4d4k1wj] {
    color: #e2e8f0;
}

[data-theme="dark"] .customer-code[b-eit4d4k1wj] {
    color: #a78bfa;
}

[data-theme="dark"] .info-box-enhanced[b-eit4d4k1wj] {
    background: rgba(59, 130, 246, 0.05);
    color: #60a5fa;
}

[data-theme="dark"] .step-title-content h3[b-eit4d4k1wj] {
    color: #e2e8f0;
}

[data-theme="dark"] .step-title-content p[b-eit4d4k1wj] {
    color: #9ca3af;
}

[data-theme="dark"] .section-divider h4[b-eit4d4k1wj] {
    color: #e2e8f0;
}

[data-theme="dark"] .section-badge[b-eit4d4k1wj] {
    background: rgba(102, 126, 234, 0.1);
    color: #a78bfa;
}

[data-theme="dark"] .spinner-modern[b-eit4d4k1wj] {
    border-color: rgba(102, 126, 234, 0.1);
    border-top-color: #667eea;
}

[data-theme="dark"] .loading-text-modern[b-eit4d4k1wj] {
    color: #e2e8f0;
}
/* _content/Sahelly/Components/Pages/Merchant/AddProduct.razor.rz.scp.css */

/* Add Product Page - Modern Professional Design
   Based on the design system from app.css and Users.razor.css
   ========================================================= */

/* Page Container */
.add-product-page[b-ikxyxiyrr2] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .add-product-page[b-ikxyxiyrr2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .add-product-page > *[b-ikxyxiyrr2] {
        position: relative;
        z-index: 1;
    }

.auto-translate-badge[b-ikxyxiyrr2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 10px;
}

    .auto-translate-badge i[b-ikxyxiyrr2] {
        font-size: 14px;
    }

.translating-indicator[b-ikxyxiyrr2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}

    .translating-indicator .spinner[b-ikxyxiyrr2] {
        width: 12px;
        height: 12px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid #3498db;
        border-radius: 50%;
        animation: spin-b-ikxyxiyrr2 1s linear infinite;
    }

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

    100% {
        transform: rotate(360deg);
    }
}
/* Enhanced Header Section */
.page-header-enhanced[b-ikxyxiyrr2] {
    margin-bottom: 32px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-ikxyxiyrr2] {
    flex: 1;
}

.breadcrumb-modern[b-ikxyxiyrr2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item[b-ikxyxiyrr2] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-ikxyxiyrr2] {
        color: #667eea;
    }

.separator[b-ikxyxiyrr2] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-ikxyxiyrr2] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-ikxyxiyrr2] {
    margin-bottom: 4px;
}

.page-title-modern[b-ikxyxiyrr2] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.title-icon[b-ikxyxiyrr2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-ikxyxiyrr2] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-ikxyxiyrr2] {
    display: flex;
    gap: 12px;
}

.btn-action-secondary[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-action-secondary:hover[b-ikxyxiyrr2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Product Form */
.product-form-modern[b-ikxyxiyrr2] {
    margin-bottom: 30px;
}

/* Form Step Navigation */
.form-progress[b-ikxyxiyrr2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 4px;
    position: relative;
}

.progress-step[b-ikxyxiyrr2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s;
}

    .progress-step:hover .step-number[b-ikxyxiyrr2] {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
    }

.step-number[b-ikxyxiyrr2] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    background: #f3f4f6;
    color: #9ca3af;
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 2px solid #e5e7eb;
}

.progress-line[b-ikxyxiyrr2] {
    height: 4px;
    background: #e5e7eb;
    flex: 1;
    margin: 0 -10px;
    position: relative;
    z-index: 1;
    top: -25px;
    transition: background 0.5s;
}

.progress-step.active .step-number[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    border-color: transparent;
}

.progress-line.active[b-ikxyxiyrr2] {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.step-label[b-ikxyxiyrr2] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.3s;
    text-align: center;
    max-width: 100px;
}

.progress-step.active .step-label[b-ikxyxiyrr2] {
    color: #4c1d95;
}

/* Section Card */
.section-card[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

    .section-card:hover[b-ikxyxiyrr2] {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }

.section-header-modern[b-ikxyxiyrr2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
}

.section-icon[b-ikxyxiyrr2] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 8px 16px rgba(90, 108, 179, 0.2);
}

    .section-icon.pricing[b-ikxyxiyrr2] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        box-shadow: 0 8px 16px rgba(74, 163, 194, 0.2);
    }

    .section-icon.specs[b-ikxyxiyrr2] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        box-shadow: 0 8px 16px rgba(59, 201, 104, 0.2);
    }

    .section-icon.images[b-ikxyxiyrr2] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
        box-shadow: 0 8px 16px rgba(216, 140, 20, 0.2);
    }

.section-title-modern[b-ikxyxiyrr2] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1f2937;
}

.section-subtitle[b-ikxyxiyrr2] {
    color: #6b7280;
    margin: 0;
    font-size: 15px;
}

/* Form Content */
.form-step-content[b-ikxyxiyrr2] {
    display: none;
    animation: fadeIn-b-ikxyxiyrr2 0.5s ease;
}

    .form-step-content.active[b-ikxyxiyrr2] {
        display: block;
    }

/* Form Grid */
.form-grid-modern[b-ikxyxiyrr2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.form-group-modern[b-ikxyxiyrr2] {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

    .form-group-modern.full-width[b-ikxyxiyrr2] {
        grid-column: 1 / -1;
    }

.form-label-modern[b-ikxyxiyrr2] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.required-star[b-ikxyxiyrr2] {
    color: #ef4444;
    margin-left: 4px;
}

.input-wrapper[b-ikxyxiyrr2] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-ikxyxiyrr2] {
    position: absolute;
    left: 14px;
    color: #9333ea;
    font-size: 16px;
    z-index: 2;
}

.form-input-modern[b-ikxyxiyrr2] {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1f2937;
}

    .form-input-modern:focus[b-ikxyxiyrr2] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-input-modern:hover:not(:focus)[b-ikxyxiyrr2] {
        border-color: rgba(102, 126, 234, 0.3);
    }

.input-wrapper.currency[b-ikxyxiyrr2] {
    position: relative;
}

.currency-symbol[b-ikxyxiyrr2] {
    position: absolute;
    right: 14px;
    color: #9333ea;
    font-size: 14px;
    font-weight: 600;
}

.textarea-wrapper[b-ikxyxiyrr2] {
    position: relative;
}

.form-textarea-modern[b-ikxyxiyrr2] {
    width: 100%;
    padding: 14px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    min-height: 120px;
    color: #1f2937;
    resize: vertical;
}

    .form-textarea-modern:focus[b-ikxyxiyrr2] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.char-counter[b-ikxyxiyrr2] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 8px;
    border-radius: 12px;
}

/* Pricing Preview Card */
.pricing-preview-card[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.preview-header[b-ikxyxiyrr2] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
}

    .preview-header i[b-ikxyxiyrr2] {
        color: #667eea;
    }

.pricing-stats[b-ikxyxiyrr2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.stat-item[b-ikxyxiyrr2] {
    background: rgba(255, 255, 255, 0.8);
    padding: 16px;
    border-radius: 12px;
}

    .stat-item label[b-ikxyxiyrr2] {
        display: block;
        font-size: 14px;
        color: #6b7280;
        margin-bottom: 6px;
    }

.stat-value[b-ikxyxiyrr2] {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}

    .stat-value.positive[b-ikxyxiyrr2] {
        color: #10b981;
    }

    .stat-value.negative[b-ikxyxiyrr2] {
        color: #ef4444;
    }

/* Options Section */
.options-section[b-ikxyxiyrr2] {
    margin-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    padding-top: 24px;
}

.options-title[b-ikxyxiyrr2] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #4c1d95;
}

.options-grid-modern[b-ikxyxiyrr2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.option-card[b-ikxyxiyrr2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.3s;
}

    .option-card:hover[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.05);
        border-color: #667eea;
        transform: translateY(-2px);
    }

    .option-card input[type="checkbox"][b-ikxyxiyrr2] {
        width: 20px;
        height: 20px;
        accent-color: #667eea;
    }

    .option-card.active[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
    }

.option-content[b-ikxyxiyrr2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #4c1d95;
}

    .option-content i[b-ikxyxiyrr2] {
        color: #667eea;
        font-size: 18px;
    }

/* Specifications */
.specifications-list[b-ikxyxiyrr2] {
    margin-bottom: 24px;
}

.specification-item[b-ikxyxiyrr2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s;
}

    .specification-item:hover[b-ikxyxiyrr2] {
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border-color: #d1d5db;
    }

    .specification-item.editing[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.05);
        border-color: #667eea;
    }

.spec-number[b-ikxyxiyrr2] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #9333ea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.spec-display[b-ikxyxiyrr2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.spec-content[b-ikxyxiyrr2] {
    flex: 1;
}

.spec-name[b-ikxyxiyrr2] {
    margin-bottom: 4px;
}

.spec-label[b-ikxyxiyrr2] {
    font-weight: 600;
    color: #1f2937;
}

.spec-label-en[b-ikxyxiyrr2] {
    color: #6b7280;
    font-size: 14px;
    margin-left: 6px;
}

.spec-value[b-ikxyxiyrr2] {
    color: #4b5563;
}

.spec-text-en[b-ikxyxiyrr2] {
    color: #9ca3af;
    font-size: 14px;
    margin-left: 6px;
}

.spec-actions[b-ikxyxiyrr2] {
    display: flex;
    gap: 8px;
}

.btn-spec-edit[b-ikxyxiyrr2],
.btn-spec-delete[b-ikxyxiyrr2],
.btn-spec-save[b-ikxyxiyrr2],
.btn-spec-cancel[b-ikxyxiyrr2] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-spec-edit[b-ikxyxiyrr2] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

    .btn-spec-edit:hover[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.2);
    }

.btn-spec-delete[b-ikxyxiyrr2] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

    .btn-spec-delete:hover[b-ikxyxiyrr2] {
        background: rgba(239, 68, 68, 0.2);
    }

.btn-spec-save[b-ikxyxiyrr2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

    .btn-spec-save:hover[b-ikxyxiyrr2] {
        background: rgba(16, 185, 129, 0.2);
    }

.btn-spec-cancel[b-ikxyxiyrr2] {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

    .btn-spec-cancel:hover[b-ikxyxiyrr2] {
        background: rgba(107, 114, 128, 0.2);
    }

.spec-edit-form[b-ikxyxiyrr2] {
    width: 100%;
}

.spec-form-grid[b-ikxyxiyrr2] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: center;
}

.spec-input-group[b-ikxyxiyrr2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spec-input[b-ikxyxiyrr2] {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

    .spec-input:focus[b-ikxyxiyrr2] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.btn-add-specification[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-add-specification:hover[b-ikxyxiyrr2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Empty State */
.empty-state-modern[b-ikxyxiyrr2] {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.empty-icon[b-ikxyxiyrr2] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #9ca3af;
}

/* Image Upload */
.image-upload-section[b-ikxyxiyrr2] {
    margin-bottom: 24px;
}

.upload-zone-modern[b-ikxyxiyrr2] {
    border: 2px dashed #d1d5db;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
    cursor: pointer;
    margin-bottom: 24px;
}

    .upload-zone-modern:hover[b-ikxyxiyrr2] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.05);
    }

.upload-label[b-ikxyxiyrr2] {
    cursor: pointer;
}

.upload-icon-wrapper[b-ikxyxiyrr2] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 2px solid rgba(102, 126, 234, 0.2);
}

    .upload-icon-wrapper i[b-ikxyxiyrr2] {
        font-size: 32px;
        color: #667eea;
    }

.upload-label h4[b-ikxyxiyrr2] {
    font-size: 18px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 8px;
}

.upload-label p[b-ikxyxiyrr2] {
    color: #6b7280;
    margin-bottom: 16px;
}

.upload-hint[b-ikxyxiyrr2] {
    font-size: 13px;
    color: #9ca3af;
    display: block;
}

.uploaded-images-modern[b-ikxyxiyrr2] {
    margin-top: 32px;
}

.images-title[b-ikxyxiyrr2] {
    font-size: 18px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 16px;
}

.images-grid-modern[b-ikxyxiyrr2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.image-item-modern[b-ikxyxiyrr2] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    transition: all 0.3s;
}

    .image-item-modern:hover[b-ikxyxiyrr2] {
        transform: translateY(-4px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }

    .image-item-modern.main-image[b-ikxyxiyrr2] {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3), 0 8px 15px rgba(0, 0, 0, 0.1);
    }

.image-preview[b-ikxyxiyrr2] {
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative;
}

    .image-preview img[b-ikxyxiyrr2] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.main-badge[b-ikxyxiyrr2] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.image-actions[b-ikxyxiyrr2] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 24px 8px 8px;
    display: flex;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}

.image-item-modern:hover .image-actions[b-ikxyxiyrr2] {
    opacity: 1;
}

.btn-image-action[b-ikxyxiyrr2] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-image-action:hover[b-ikxyxiyrr2] {
        background: white;
        transform: scale(1.1);
    }

    .btn-image-action.delete[b-ikxyxiyrr2] {
        color: #ef4444;
    }

        .btn-image-action.delete:hover[b-ikxyxiyrr2] {
            background: #fee2e2;
        }

/* Form Actions */
.form-actions-modern[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 24px;
}

.action-buttons[b-ikxyxiyrr2] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.btn-modern[b-ikxyxiyrr2] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-modern i[b-ikxyxiyrr2] {
        font-size: 16px;
    }

.btn-primary[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-ikxyxiyrr2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-ikxyxiyrr2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

.btn-outline[b-ikxyxiyrr2] {
    background: transparent;
    border: 2px solid #667eea;
    color: #667eea;
}

    .btn-outline:hover[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.1);
        transform: translateY(-2px);
    }

.btn-success[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-success:hover[b-ikxyxiyrr2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Loading States */
.loading-modern[b-ikxyxiyrr2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner-container[b-ikxyxiyrr2] {
    text-align: center;
}

.spinner-modern[b-ikxyxiyrr2] {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-ikxyxiyrr2 1s linear infinite;
    margin-bottom: 12px;
}

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

.loading-text-modern[b-ikxyxiyrr2] {
    color: #6b7280;
    font-weight: 500;
}

.button-spinner[b-ikxyxiyrr2] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-ikxyxiyrr2 0.8s linear infinite;
    margin-right: 8px;
}

/* Error State */
.validation-message[b-ikxyxiyrr2] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
}

/* Unauthorized Access */
.unauthorized-modern[b-ikxyxiyrr2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.unauthorized-content[b-ikxyxiyrr2] {
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

    .unauthorized-content i[b-ikxyxiyrr2] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-ikxyxiyrr2] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-ikxyxiyrr2] {
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Animations */
@keyframes fadeIn-b-ikxyxiyrr2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .add-product-page[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .add-product-page[b-ikxyxiyrr2]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-ikxyxiyrr2],
[data-theme="dark"] .form-actions-modern[b-ikxyxiyrr2],
[data-theme="dark"] .section-card[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .section-title-modern[b-ikxyxiyrr2] {
    color: #e2e8f0;
}

[data-theme="dark"] .breadcrumb-item[b-ikxyxiyrr2] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-ikxyxiyrr2] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-ikxyxiyrr2] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle-enhanced[b-ikxyxiyrr2],
[data-theme="dark"] .section-subtitle[b-ikxyxiyrr2] {
    color: #9ca3af;
}

[data-theme="dark"] .form-label-modern[b-ikxyxiyrr2] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-input-modern[b-ikxyxiyrr2],
[data-theme="dark"] .form-textarea-modern[b-ikxyxiyrr2] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-input-modern:focus[b-ikxyxiyrr2],
    [data-theme="dark"] .form-textarea-modern:focus[b-ikxyxiyrr2] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .option-card[b-ikxyxiyrr2] {
    background: rgba(30, 41, 59, 0.5);
    border-color: #475569;
}

    [data-theme="dark"] .option-card:hover[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
    }

    [data-theme="dark"] .option-card.active[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.2);
        border-color: #667eea;
    }

[data-theme="dark"] .option-content[b-ikxyxiyrr2],
[data-theme="dark"] .upload-label h4[b-ikxyxiyrr2],
[data-theme="dark"] .images-title[b-ikxyxiyrr2],
[data-theme="dark"] .options-title[b-ikxyxiyrr2] {
    color: #e2e8f0;
}

[data-theme="dark"] .upload-label p[b-ikxyxiyrr2],
[data-theme="dark"] .upload-hint[b-ikxyxiyrr2] {
    color: #9ca3af;
}

[data-theme="dark"] .upload-zone-modern[b-ikxyxiyrr2] {
    background: rgba(30, 41, 59, 0.3);
    border-color: #475569;
}

    [data-theme="dark"] .upload-zone-modern:hover[b-ikxyxiyrr2] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

[data-theme="dark"] .upload-icon-wrapper[b-ikxyxiyrr2] {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .specification-item[b-ikxyxiyrr2] {
    background: rgba(30, 41, 59, 0.4);
    border-color: #475569;
}

    [data-theme="dark"] .specification-item:hover[b-ikxyxiyrr2] {
        background: rgba(30, 41, 59, 0.6);
        border-color: #64748b;
    }

    [data-theme="dark"] .specification-item.editing[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
    }

[data-theme="dark"] .spec-label[b-ikxyxiyrr2] {
    color: #e2e8f0;
}

[data-theme="dark"] .spec-label-en[b-ikxyxiyrr2],
[data-theme="dark"] .spec-text-en[b-ikxyxiyrr2] {
    color: #94a3b8;
}

[data-theme="dark"] .spec-value[b-ikxyxiyrr2] {
    color: #cbd5e1;
}

[data-theme="dark"] .spec-input[b-ikxyxiyrr2] {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}

    [data-theme="dark"] .spec-input:focus[b-ikxyxiyrr2] {
        border-color: #667eea;
    }

[data-theme="dark"] .pricing-preview-card[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-color: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .stat-item[b-ikxyxiyrr2] {
    background: rgba(30, 41, 59, 0.6);
}

    [data-theme="dark"] .stat-item label[b-ikxyxiyrr2] {
        color: #94a3b8;
    }

[data-theme="dark"] .stat-value[b-ikxyxiyrr2] {
    color: #e2e8f0;
}

    [data-theme="dark"] .stat-value.positive[b-ikxyxiyrr2] {
        color: #34d399;
    }

    [data-theme="dark"] .stat-value.negative[b-ikxyxiyrr2] {
        color: #f87171;
    }

[data-theme="dark"] .step-number[b-ikxyxiyrr2] {
    background: #334155;
    border-color: #475569;
    color: #94a3b8;
}

[data-theme="dark"] .progress-line[b-ikxyxiyrr2] {
    background: #475569;
}

[data-theme="dark"] .step-label[b-ikxyxiyrr2] {
    color: #94a3b8;
}

[data-theme="dark"] .progress-step.active .step-label[b-ikxyxiyrr2] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-secondary[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .btn-outline[b-ikxyxiyrr2] {
    border-color: #667eea;
    color: #667eea;
}

    [data-theme="dark"] .btn-outline:hover[b-ikxyxiyrr2] {
        background: rgba(102, 126, 234, 0.1);
    }

[data-theme="dark"] .unauthorized-content[b-ikxyxiyrr2] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

    [data-theme="dark"] .unauthorized-content h3[b-ikxyxiyrr2] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .unauthorized-content p[b-ikxyxiyrr2] {
        color: #94a3b8;
    }

/* Responsive Styles */
@media (max-width: 992px) {
    .page-header-enhanced[b-ikxyxiyrr2] {
        flex-direction: column;
    }

    .header-actions[b-ikxyxiyrr2] {
        margin-top: 16px;
        align-self: flex-end;
    }
}

@media (max-width: 768px) {
    .add-product-page[b-ikxyxiyrr2] {
        padding: 16px;
    }

    .section-card[b-ikxyxiyrr2] {
        padding: 20px;
    }

    .form-grid-modern[b-ikxyxiyrr2] {
        grid-template-columns: 1fr;
    }

    .spec-form-grid[b-ikxyxiyrr2] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

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

        .action-buttons button[b-ikxyxiyrr2] {
            width: 100%;
        }

    .step-label[b-ikxyxiyrr2] {
        display: none;
    }

    .progress-step[b-ikxyxiyrr2] {
        padding: 0;
    }

    .progress-line[b-ikxyxiyrr2] {
        margin: 0 -5px;
    }

    .step-number[b-ikxyxiyrr2] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .options-grid-modern[b-ikxyxiyrr2] {
        grid-template-columns: 1fr;
    }

    .images-grid-modern[b-ikxyxiyrr2] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

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

@media (max-width: 576px) {
    .page-title-modern[b-ikxyxiyrr2] {
        font-size: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .section-card[b-ikxyxiyrr2] {
        padding: 16px;
    }
}
/* Enhanced Form Input Styling for Blazor Components */

/* Blazor Input Components - Base Styles */
[b-ikxyxiyrr2] .form-control,
[b-ikxyxiyrr2] .valid,
[b-ikxyxiyrr2] .invalid,
[b-ikxyxiyrr2] input,
[b-ikxyxiyrr2] select,
[b-ikxyxiyrr2] textarea {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1f2937;
    font-family: inherit;
}

    /* Apply the same styling to InputText, InputTextArea, InputSelect, InputNumber */
    [b-ikxyxiyrr2] .form-control:focus,
    [b-ikxyxiyrr2] input:focus,
    [b-ikxyxiyrr2] select:focus,
    [b-ikxyxiyrr2] textarea:focus {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    [b-ikxyxiyrr2] .form-control:hover:not(:focus),
    [b-ikxyxiyrr2] input:hover:not(:focus),
    [b-ikxyxiyrr2] select:hover:not(:focus),
    [b-ikxyxiyrr2] textarea:hover:not(:focus) {
        border-color: rgba(102, 126, 234, 0.3);
    }

/* Textarea specific styles */
[b-ikxyxiyrr2] textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select specific styles */
[b-ikxyxiyrr2] select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239333ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* Number input specific styles */
[b-ikxyxiyrr2] input[type="number"] {
    -moz-appearance: textfield;
}

    [b-ikxyxiyrr2] input[type="number"]::-webkit-outer-spin-button,
    [b-ikxyxiyrr2] input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Validation styling */
[b-ikxyxiyrr2] .invalid {
    border-color: #ef4444;
}

    [b-ikxyxiyrr2] .invalid:focus {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    }

/* Dark theme support for inputs */
[data-theme="dark"][b-ikxyxiyrr2]  .form-control,
[data-theme="dark"][b-ikxyxiyrr2]  input,
[data-theme="dark"][b-ikxyxiyrr2]  select,
[data-theme="dark"][b-ikxyxiyrr2]  textarea {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"][b-ikxyxiyrr2]  .form-control:focus,
    [data-theme="dark"][b-ikxyxiyrr2]  input:focus,
    [data-theme="dark"][b-ikxyxiyrr2]  select:focus,
    [data-theme="dark"][b-ikxyxiyrr2]  textarea:focus {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"][b-ikxyxiyrr2]  select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a78bfa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.price-difference-info[b-ikxyxiyrr2] {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #007bff;
}

.form-input-modern.disabled[b-ikxyxiyrr2] {
    background-color: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.6;
}

.stat-item .stat-value.positive[b-ikxyxiyrr2] {
    color: #28a745;
}

.stat-item .stat-value.negative[b-ikxyxiyrr2] {
    color: #dc3545;
}
/* _content/Sahelly/Components/Pages/Merchant/Agentcommissions.razor.rz.scp.css */
/* ===================================
   Agent Commissions Page - Modern Professional CSS
   Follows app.css architecture and Users.razor.css design patterns
   =================================== */

/* Page Container */
.agent-commissions-page[b-8f0nne6e07] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-commissions-page[b-8f0nne6e07]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-commissions-page > *[b-8f0nne6e07] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-8f0nne6e07] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-8f0nne6e07] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-8f0nne6e07] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-8f0nne6e07] {
        color: #667eea;
    }

.breadcrumb-separator[b-8f0nne6e07] {
    color: #d1d5db;
}

.breadcrumb-current[b-8f0nne6e07] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-8f0nne6e07] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-8f0nne6e07] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Commission Summary Grid */
.commission-summary-grid[b-8f0nne6e07] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.summary-card[b-8f0nne6e07] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-8f0nne6e07]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-8f0nne6e07] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .summary-card:hover[b-8f0nne6e07]::before {
            opacity: 1;
        }

.card-icon[b-8f0nne6e07] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.total-commissions .card-icon[b-8f0nne6e07] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sales-commissions .card-icon[b-8f0nne6e07] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.collection-commissions .card-icon[b-8f0nne6e07] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.pending-commissions .card-icon[b-8f0nne6e07] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.paid-commissions .card-icon[b-8f0nne6e07] {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.total-sales .card-icon[b-8f0nne6e07] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.merchant-profit .card-icon[b-8f0nne6e07] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-content[b-8f0nne6e07] {
    flex: 1;
}

    .card-content h3[b-8f0nne6e07] {
        font-size: 15px;
        color: #6b7280;
        margin: 0 0 8px 0;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .card-content .amount[b-8f0nne6e07] {
        font-size: 32px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .card-content .count[b-8f0nne6e07] {
        font-size: 14px;
        color: #9ca3af;
        font-weight: 500;
    }

/* Commission Section */
.commissions-section[b-8f0nne6e07] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-header[b-8f0nne6e07] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

    .section-header h2[b-8f0nne6e07] {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.filters[b-8f0nne6e07] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

    .date-filter[b-8f0nne6e07],
    .filters select[b-8f0nne6e07] {
        padding: 10px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 14px;
        min-width: 140px;
    }

        .date-filter:focus[b-8f0nne6e07],
        .filters select:focus[b-8f0nne6e07] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.btn-filter[b-8f0nne6e07] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-filter:hover[b-8f0nne6e07] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-export[b-8f0nne6e07] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    box-shadow: 0 4px 10px rgba(67, 233, 123, 0.2);
}

    .btn-export:hover[b-8f0nne6e07] {
        box-shadow: 0 8px 15px rgba(67, 233, 123, 0.3);
    }

/* Commissions Table - Desktop */
.commissions-table[b-8f0nne6e07] {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
}

    .commissions-table table[b-8f0nne6e07] {
        width: 100%;
        border-collapse: collapse;
    }

    .commissions-table th[b-8f0nne6e07] {
        padding: 18px 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
        white-space: nowrap;
    }

    .commissions-table td[b-8f0nne6e07] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
        font-size: 14px;
    }

    .commissions-table tbody tr[b-8f0nne6e07] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .commissions-table tbody tr:hover[b-8f0nne6e07] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

.paid-row[b-8f0nne6e07] {
    opacity: 0.9;
}

.pending-row[b-8f0nne6e07] {
    background: rgba(251, 191, 36, 0.05);
}

/* Commission Type Badge */
.commission-type[b-8f0nne6e07] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .commission-type.sales[b-8f0nne6e07] {
        background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.2) 100%);
        color: #0891b2;
    }

    .commission-type.collection[b-8f0nne6e07] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
    }

/* Products List */
.products-list[b-8f0nne6e07] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-item[b-8f0nne6e07] {
    font-size: 13px;
    color: #4b5563;
}

.more-products[b-8f0nne6e07] {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}

/* Order Link */
.order-link[b-8f0nne6e07] {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

    .order-link:hover[b-8f0nne6e07] {
        color: #764ba2;
        text-decoration: underline;
    }

/* Amount */
.amount[b-8f0nne6e07] {
    font-weight: 700;
    color: #4c1d95;
}

/* Status Badge */
.status-badge[b-8f0nne6e07] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.paid[b-8f0nne6e07] {
        background: linear-gradient(135deg, rgba(48, 207, 208, 0.2) 0%, rgba(51, 8, 103, 0.2) 100%);
        color: #0891b2;
        border: 1px solid rgba(48, 207, 208, 0.3);
    }

    .status-badge.pending[b-8f0nne6e07] {
        background: linear-gradient(135deg, rgba(250, 112, 154, 0.2) 0%, rgba(254, 225, 64, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(250, 112, 154, 0.3);
    }

/* Commission Details Button */
.btn-commission-details[b-8f0nne6e07] {
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: #667eea;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-commission-details:hover[b-8f0nne6e07] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Mobile Cards */
.commissions-cards[b-8f0nne6e07] {
    display: none;
}

.commission-card[b-8f0nne6e07] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .commission-card:hover[b-8f0nne6e07] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    .commission-card.paid-card[b-8f0nne6e07] {
        opacity: 0.9;
    }

    .commission-card.pending-card[b-8f0nne6e07] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(254, 225, 64, 0.05) 100%);
    }

    .commission-card .card-header[b-8f0nne6e07] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .commission-card .commission-date[b-8f0nne6e07] {
        font-size: 13px;
        color: #6b7280;
    }

    .commission-card .card-body[b-8f0nne6e07] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

.customer-name[b-8f0nne6e07] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}

.products-info[b-8f0nne6e07] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}

.products-label[b-8f0nne6e07] {
    color: #6b7280;
    font-weight: 600;
}

.product-name[b-8f0nne6e07] {
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 8px;
    border-radius: 8px;
    color: #667eea;
}

.description[b-8f0nne6e07] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.order-info[b-8f0nne6e07] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.order-label[b-8f0nne6e07] {
    color: #6b7280;
    font-weight: 600;
}

.order-amount[b-8f0nne6e07] {
    color: #9ca3af;
}

.amount-row[b-8f0nne6e07] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Pagination */
.pagination-container[b-8f0nne6e07] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 24px;
}

.pagination-info[b-8f0nne6e07] {
    font-size: 14px;
    color: #4c1d95;
    font-weight: 600;
}

.pagination[b-8f0nne6e07] {
    display: flex;
    gap: 6px;
}

.page-btn[b-8f0nne6e07] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-8f0nne6e07] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-8f0nne6e07] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Customer Summary Section */
.customer-summary-section[b-8f0nne6e07] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .customer-summary-section h2[b-8f0nne6e07] {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 24px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.customer-summary-grid[b-8f0nne6e07] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.customer-summary-card[b-8f0nne6e07] {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .customer-summary-card:hover[b-8f0nne6e07] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
        border-color: #667eea;
    }

.customer-info[b-8f0nne6e07] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .customer-info > i[b-8f0nne6e07] {
        font-size: 32px;
        color: #667eea;
    }

    .customer-info h4[b-8f0nne6e07] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

.customer-type[b-8f0nne6e07] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

    .customer-type i[b-8f0nne6e07] {
        color: #9333ea;
    }

.customer-stats[b-8f0nne6e07] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat[b-8f0nne6e07] {
    text-align: center;
    padding: 12px 8px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
}

.stat-label[b-8f0nne6e07] {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.stat-value[b-8f0nne6e07] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #4c1d95;
}

/* Empty State */
.empty-state[b-8f0nne6e07] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-8f0nne6e07] {
        font-size: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-8f0nne6e07] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-8f0nne6e07] {
        font-size: 18px;
        color: #6b7280;
    }

/* Error State */
.error-state[b-8f0nne6e07] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .error-state i[b-8f0nne6e07] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .error-state h3[b-8f0nne6e07] {
        font-size: 24px;
        color: #1f2937;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .error-state p[b-8f0nne6e07] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-retry[b-8f0nne6e07] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-retry:hover[b-8f0nne6e07] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Loading States */
.loading-container[b-8f0nne6e07] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-container[b-8f0nne6e07] {
    text-align: center;
}

.spinner[b-8f0nne6e07] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-8f0nne6e07 0.8s linear infinite;
    margin: 0 auto 20px;
}

.loading-spinner[b-8f0nne6e07] {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

.spinner-border[b-8f0nne6e07] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-8f0nne6e07 0.8s linear infinite;
}

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

/* Modal Overlay */
.modal-overlay[b-8f0nne6e07] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
    animation: fadeIn-b-8f0nne6e07 0.3s;
}

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

    to {
        opacity: 1;
    }
}

/* Commission Details Modal */
.commission-details-modal[b-8f0nne6e07] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp-b-8f0nne6e07 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.modal-header[b-8f0nne6e07] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-8f0nne6e07] {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

.modal-close[b-8f0nne6e07] {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .modal-close:hover[b-8f0nne6e07] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transform: rotate(90deg);
    }

.modal-body[b-8f0nne6e07] {
    padding: 30px;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
}

.commission-detail-grid[b-8f0nne6e07] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-group[b-8f0nne6e07] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .detail-group.full-width[b-8f0nne6e07] {
        grid-column: 1 / -1;
    }

    .detail-group label[b-8f0nne6e07] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-group .value[b-8f0nne6e07] {
        font-size: 16px;
        color: #1f2937;
        font-weight: 500;
    }

        .detail-group .value.amount[b-8f0nne6e07] {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.products-detail-list[b-8f0nne6e07] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-detail-item[b-8f0nne6e07] {
    font-size: 14px;
    color: #4b5563;
    padding-left: 16px;
}

.modal-footer[b-8f0nne6e07] {
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-secondary[b-8f0nne6e07] {
    padding: 12px 24px;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-secondary:hover[b-8f0nne6e07] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Unauthorized Message */
.unauthorized-message[b-8f0nne6e07] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

    .unauthorized-message i[b-8f0nne6e07] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-message h3[b-8f0nne6e07] {
        font-size: 28px;
        color: #1f2937;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-message p[b-8f0nne6e07] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-primary[b-8f0nne6e07] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-8f0nne6e07] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Dark Theme Support */
[data-theme="dark"] .agent-commissions-page[b-8f0nne6e07] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-commissions-page[b-8f0nne6e07]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-8f0nne6e07],
[data-theme="dark"] .summary-card[b-8f0nne6e07],
[data-theme="dark"] .commissions-section[b-8f0nne6e07],
[data-theme="dark"] .customer-summary-section[b-8f0nne6e07],
[data-theme="dark"] .pagination-container[b-8f0nne6e07],
[data-theme="dark"] .empty-state[b-8f0nne6e07],
[data-theme="dark"] .error-state[b-8f0nne6e07],
[data-theme="dark"] .commission-card[b-8f0nne6e07],
[data-theme="dark"] .unauthorized-message[b-8f0nne6e07] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .commissions-table td[b-8f0nne6e07],
[data-theme="dark"] .customer-summary-card[b-8f0nne6e07] {
    background: #1e293b;
}

[data-theme="dark"] .commission-details-modal[b-8f0nne6e07] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-title[b-8f0nne6e07],
[data-theme="dark"] .section-header h2[b-8f0nne6e07],
[data-theme="dark"] .customer-summary-section h2[b-8f0nne6e07],
[data-theme="dark"] .modal-header h3[b-8f0nne6e07],
[data-theme="dark"] .card-content .amount[b-8f0nne6e07] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-link[b-8f0nne6e07] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-8f0nne6e07] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-8f0nne6e07] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-8f0nne6e07],
[data-theme="dark"] .card-content .count[b-8f0nne6e07],
[data-theme="dark"] .commission-date[b-8f0nne6e07],
[data-theme="dark"] .description[b-8f0nne6e07],
[data-theme="dark"] .order-amount[b-8f0nne6e07],
[data-theme="dark"] .stat-label[b-8f0nne6e07],
[data-theme="dark"] .customer-type[b-8f0nne6e07],
[data-theme="dark"] .detail-group label[b-8f0nne6e07] {
    color: #9ca3af;
}

[data-theme="dark"] .card-content h3[b-8f0nne6e07],
[data-theme="dark"] .products-label[b-8f0nne6e07],
[data-theme="dark"] .order-label[b-8f0nne6e07] {
    color: #e2e8f0;
}

[data-theme="dark"] .customer-name[b-8f0nne6e07],
[data-theme="dark"] .product-item[b-8f0nne6e07],
[data-theme="dark"] .product-detail-item[b-8f0nne6e07],
[data-theme="dark"] .detail-group .value[b-8f0nne6e07] {
    color: #cbd5e1;
}

[data-theme="dark"] .customer-info h4[b-8f0nne6e07],
[data-theme="dark"] .error-state h3[b-8f0nne6e07],
[data-theme="dark"] .unauthorized-message h3[b-8f0nne6e07] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-8f0nne6e07],
[data-theme="dark"] .error-state p[b-8f0nne6e07],
[data-theme="dark"] .unauthorized-message p[b-8f0nne6e07] {
    color: #9ca3af;
}

[data-theme="dark"] .date-filter[b-8f0nne6e07],
[data-theme="dark"] .filters select[b-8f0nne6e07] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .date-filter:focus[b-8f0nne6e07],
    [data-theme="dark"] .filters select:focus[b-8f0nne6e07] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .order-link[b-8f0nne6e07] {
    color: #a78bfa;
}

    [data-theme="dark"] .order-link:hover[b-8f0nne6e07] {
        color: #c084fc;
    }

[data-theme="dark"] .amount[b-8f0nne6e07],
[data-theme="dark"] .stat-value[b-8f0nne6e07],
[data-theme="dark"] .pagination-info[b-8f0nne6e07] {
    color: #c084fc;
}

[data-theme="dark"] .page-btn[b-8f0nne6e07] {
    background: rgba(167, 139, 250, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .modal-close[b-8f0nne6e07] {
    color: #9ca3af;
}

    [data-theme="dark"] .modal-close:hover[b-8f0nne6e07] {
        background: rgba(167, 139, 250, 0.1);
        color: #a78bfa;
    }

[data-theme="dark"] .btn-commission-details[b-8f0nne6e07] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-commission-details:hover[b-8f0nne6e07] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .commissions-table tbody tr:hover[b-8f0nne6e07] {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
}

[data-theme="dark"] .pending-row[b-8f0nne6e07] {
    background: rgba(251, 191, 36, 0.1);
}

[data-theme="dark"] .stat[b-8f0nne6e07] {
    background: rgba(167, 139, 250, 0.1);
}

[data-theme="dark"] .product-name[b-8f0nne6e07] {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .commission-summary-grid[b-8f0nne6e07] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .customer-summary-grid[b-8f0nne6e07] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .agent-commissions-page[b-8f0nne6e07] {
        padding: 16px;
    }

    .page-header[b-8f0nne6e07] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-8f0nne6e07] {
        font-size: 28px;
    }

    .page-subtitle[b-8f0nne6e07] {
        font-size: 16px;
    }

    .commission-summary-grid[b-8f0nne6e07] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-card[b-8f0nne6e07] {
        padding: 20px;
    }

    .card-icon[b-8f0nne6e07] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .card-content .amount[b-8f0nne6e07] {
        font-size: 24px;
    }

    .commissions-section[b-8f0nne6e07],
    .customer-summary-section[b-8f0nne6e07] {
        padding: 20px;
        margin-bottom: 20px;
    }

    .section-header[b-8f0nne6e07] {
        flex-direction: column;
        align-items: stretch;
    }

    .filters[b-8f0nne6e07] {
        flex-direction: column;
        width: 100%;
    }

        .date-filter[b-8f0nne6e07],
        .filters select[b-8f0nne6e07],
        .btn-filter[b-8f0nne6e07] {
            width: 100%;
        }

    /* Hide desktop table, show mobile cards */
    .desktop-only[b-8f0nne6e07] {
        display: none !important;
    }

    .mobile-only[b-8f0nne6e07] {
        display: block !important;
    }

    .commissions-cards[b-8f0nne6e07] {
        display: block;
    }

    .customer-summary-grid[b-8f0nne6e07] {
        grid-template-columns: 1fr;
    }

    .commission-detail-grid[b-8f0nne6e07] {
        grid-template-columns: 1fr;
    }

    .pagination-container[b-8f0nne6e07] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .pagination[b-8f0nne6e07] {
        justify-content: center;
    }

    .pagination-info[b-8f0nne6e07] {
        text-align: center;
    }

    .modal-overlay[b-8f0nne6e07] {
        padding: 16px;
    }

    .commission-details-modal[b-8f0nne6e07] {
        margin: 0;
    }

    .modal-header[b-8f0nne6e07] {
        padding: 20px;
    }

        .modal-header h3[b-8f0nne6e07] {
            font-size: 20px;
        }

    .modal-body[b-8f0nne6e07] {
        padding: 20px;
        max-height: calc(100vh - 160px);
    }

    .modal-footer[b-8f0nne6e07] {
        padding: 16px 20px;
    }

    .empty-state[b-8f0nne6e07],
    .error-state[b-8f0nne6e07] {
        padding: 60px 20px;
    }

        .empty-state i[b-8f0nne6e07] {
            font-size: 60px;
        }

        .empty-state h3[b-8f0nne6e07],
        .error-state h3[b-8f0nne6e07] {
            font-size: 22px;
        }

    .customer-stats[b-8f0nne6e07] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-title[b-8f0nne6e07] {
        font-size: 24px;
    }

    .breadcrumb[b-8f0nne6e07] {
        font-size: 12px;
    }

    .commission-card[b-8f0nne6e07] {
        padding: 16px;
    }

    .page-btn[b-8f0nne6e07] {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .agent-commissions-page[b-8f0nne6e07] {
        background: white !important;
    }

    .filters[b-8f0nne6e07],
    .btn-filter[b-8f0nne6e07],
    .btn-commission-details[b-8f0nne6e07],
    .pagination-container[b-8f0nne6e07],
    .modal-overlay[b-8f0nne6e07] {
        display: none !important;
    }

    .commissions-table[b-8f0nne6e07] {
        font-size: 12px;
    }

    .summary-card[b-8f0nne6e07] {
        break-inside: avoid;
    }
}

/* Accessibility */
*:focus[b-8f0nne6e07] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-8f0nne6e07],
.btn-filter:focus[b-8f0nne6e07],
.btn-commission-details:focus[b-8f0nne6e07] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-filter[b-8f0nne6e07],
    .btn-export[b-8f0nne6e07],
    .btn-retry[b-8f0nne6e07],
    .btn-primary[b-8f0nne6e07],
    .btn-secondary[b-8f0nne6e07] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-8f0nne6e07] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/AgentDetails.razor.rz.scp.css */
/* Agent Details Page - Professional Design
   Based on the design system from AddProduct.razor.css
   ========================================================= */

/* Page Container */
.agent-details-page[b-hd2f2jilr0] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-details-page[b-hd2f2jilr0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-details-page > *[b-hd2f2jilr0] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Header Section */
.page-header-enhanced[b-hd2f2jilr0] {
    margin-bottom: 32px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-hd2f2jilr0] {
    flex: 1;
}

.breadcrumb-modern[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item[b-hd2f2jilr0] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-hd2f2jilr0] {
        color: #667eea;
    }

.separator[b-hd2f2jilr0] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-hd2f2jilr0] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-hd2f2jilr0] {
    margin-bottom: 4px;
}

.page-title-modern[b-hd2f2jilr0] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.title-icon[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-hd2f2jilr0] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-hd2f2jilr0] {
    display: flex;
    gap: 12px;
}

.btn-action-secondary[b-hd2f2jilr0] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-action-secondary:hover[b-hd2f2jilr0] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-action-danger[b-hd2f2jilr0] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-action-danger:hover[b-hd2f2jilr0] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(239, 68, 68, 0.3);
    }

.btn-action-success[b-hd2f2jilr0] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-action-success:hover[b-hd2f2jilr0] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
    }

/* Details Grid Layout */
.details-grid[b-hd2f2jilr0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.details-column[b-hd2f2jilr0] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Section Card */
.section-card[b-hd2f2jilr0] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

    .section-card:hover[b-hd2f2jilr0] {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }

.section-header-modern[b-hd2f2jilr0] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.section-icon[b-hd2f2jilr0] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

    .section-icon.info[b-hd2f2jilr0] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
    }

    .section-icon.pricing[b-hd2f2jilr0] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
        box-shadow: 0 8px 16px rgba(74, 163, 194, 0.2);
    }

    .section-icon.wallet[b-hd2f2jilr0] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
        box-shadow: 0 8px 16px rgba(59, 201, 104, 0.2);
    }

    .section-icon.location[b-hd2f2jilr0] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
        box-shadow: 0 8px 16px rgba(245, 158, 11, 0.2);
    }

    .section-icon.documents[b-hd2f2jilr0] {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: white;
        box-shadow: 0 8px 16px rgba(139, 92, 246, 0.2);
    }

.section-title-modern[b-hd2f2jilr0] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #1f2937;
}

.section-subtitle[b-hd2f2jilr0] {
    color: #6b7280;
    margin: 0;
    font-size: 14px;
}

/* Info Grid */
.info-grid[b-hd2f2jilr0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item[b-hd2f2jilr0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .info-item label[b-hd2f2jilr0] {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }

    .info-item span[b-hd2f2jilr0] {
        font-size: 15px;
        color: #1f2937;
        font-weight: 600;
    }

/* Status Badge */
.status-badge[b-hd2f2jilr0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    width: fit-content;
}

    .status-badge.active[b-hd2f2jilr0] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .status-badge.inactive[b-hd2f2jilr0] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .status-badge.paid[b-hd2f2jilr0] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .status-badge.pending[b-hd2f2jilr0] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

/* Compensation Details */
.compensation-details[b-hd2f2jilr0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.agent-type-badge[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    font-size: 16px;
    font-weight: 600;
    color: #4c1d95;
}

.compensation-info[b-hd2f2jilr0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comp-item[b-hd2f2jilr0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
}

    .comp-item label[b-hd2f2jilr0] {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
    }

    .comp-item .amount[b-hd2f2jilr0] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .comp-item .percentage[b-hd2f2jilr0] {
        font-size: 24px;
        font-weight: 700;
        color: #667eea;
    }

/* Wallet Stats */
.wallet-stats[b-hd2f2jilr0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.wallet-stat[b-hd2f2jilr0] {
    padding: 16px;
    background: rgba(59, 201, 104, 0.05);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .wallet-stat.full-width[b-hd2f2jilr0] {
        grid-column: 1 / -1;
    }

    .wallet-stat label[b-hd2f2jilr0] {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }

.wallet-number[b-hd2f2jilr0] {
    font-family: monospace;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 600;
}

.stat-value[b-hd2f2jilr0] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

    .stat-value.positive[b-hd2f2jilr0] {
        color: #10b981;
    }

/* Address Details */
.address-details[b-hd2f2jilr0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.address-item[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(245, 158, 11, 0.05);
    border-radius: 10px;
}

    .address-item i[b-hd2f2jilr0] {
        width: 20px;
        color: #f59e0b;
        font-size: 16px;
    }

    .address-item span[b-hd2f2jilr0] {
        color: #1f2937;
        font-size: 14px;
    }

/* Location Tracking */
.location-tracking[b-hd2f2jilr0] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tracking-title[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.last-location[b-hd2f2jilr0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
}

.location-info[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

.coordinates[b-hd2f2jilr0] {
    font-family: monospace;
    font-size: 14px;
    color: #4c1d95;
    padding-left: 24px;
}

.location-time[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.btn-view-map[b-hd2f2jilr0] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

    .btn-view-map:hover[b-hd2f2jilr0] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Documents Grid */
.documents-grid[b-hd2f2jilr0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.document-item[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.1);
    transition: all 0.2s;
}

    .document-item:hover[b-hd2f2jilr0] {
        background: rgba(139, 92, 246, 0.1);
        transform: translateY(-2px);
    }

.document-icon[b-hd2f2jilr0] {
    width: 48px;
    height: 48px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5cf6;
    font-size: 20px;
}

.document-info[b-hd2f2jilr0] {
    flex: 1;
}

    .document-info h4[b-hd2f2jilr0] {
        margin: 0 0 8px 0;
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
    }

.btn-view-doc[b-hd2f2jilr0] {
    background: transparent;
    border: 1px solid #8b5cf6;
    color: #8b5cf6;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .btn-view-doc:hover[b-hd2f2jilr0] {
        background: #8b5cf6;
        color: white;
    }

/* Tabs Section */
.tabs-section[b-hd2f2jilr0] {
    margin-top: 24px;
}

.tabs-header[b-hd2f2jilr0] {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid #e5e7eb;
}

.tab-button[b-hd2f2jilr0] {
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tab-button:hover[b-hd2f2jilr0] {
        color: #667eea;
    }

    .tab-button.active[b-hd2f2jilr0] {
        color: #667eea;
    }

        .tab-button.active[b-hd2f2jilr0]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        }

.tab-content[b-hd2f2jilr0] {
    min-height: 400px;
}

/* Performance Stats */
.performance-stats[b-hd2f2jilr0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stat-card[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

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

.stat-icon[b-hd2f2jilr0] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

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

    .stat-icon.orders[b-hd2f2jilr0] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        color: white;
    }

    .stat-icon.commission[b-hd2f2jilr0] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
    }

    .stat-icon.profit[b-hd2f2jilr0] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
    }

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

    .stat-content label[b-hd2f2jilr0] {
        display: block;
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 4px;
    }

    .stat-content .stat-value[b-hd2f2jilr0] {
        font-size: 22px;
        font-weight: 700;
        color: #1f2937;
    }

/* Data Table */
.table-container[b-hd2f2jilr0] {
    overflow-x: auto;
}

.data-table[b-hd2f2jilr0] {
    width: 100%;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .data-table thead[b-hd2f2jilr0] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .data-table th[b-hd2f2jilr0] {
        padding: 16px;
        text-align: right;
        font-size: 13px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

    .data-table td[b-hd2f2jilr0] {
        padding: 16px;
        font-size: 14px;
        color: #1f2937;
        border-bottom: 1px solid #f3f4f6;
    }

    .data-table tbody tr:hover[b-hd2f2jilr0] {
        background: rgba(102, 126, 234, 0.02);
    }

.product-info[b-hd2f2jilr0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-thumb[b-hd2f2jilr0] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.quantity-badge[b-hd2f2jilr0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 8px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 20px;
    font-weight: 600;
}

.order-link[b-hd2f2jilr0] {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

    .order-link:hover[b-hd2f2jilr0] {
        color: #764ba2;
    }

.amount[b-hd2f2jilr0] {
    font-weight: 600;
    color: #10b981;
}

.btn-pay[b-hd2f2jilr0] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .btn-pay:hover[b-hd2f2jilr0] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

.paid-date[b-hd2f2jilr0] {
    font-size: 13px;
    color: #6b7280;
}

/* Mobile Cards */
.cards-container[b-hd2f2jilr0] {
    display: none;
}

.inventory-card[b-hd2f2jilr0],
.commission-card[b-hd2f2jilr0] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .inventory-card:hover[b-hd2f2jilr0],
    .commission-card:hover[b-hd2f2jilr0] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

.card-header[b-hd2f2jilr0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.product-image[b-hd2f2jilr0] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.product-details[b-hd2f2jilr0] {
    flex: 1;
    margin-left: 12px;
}

    .product-details h4[b-hd2f2jilr0] {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

.sku[b-hd2f2jilr0] {
    font-size: 13px;
    color: #6b7280;
}

.card-body[b-hd2f2jilr0] {
    padding: 16px;
}

.info-row[b-hd2f2jilr0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

    .info-row:last-child[b-hd2f2jilr0] {
        margin-bottom: 0;
    }

    .info-row.full-width[b-hd2f2jilr0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .info-row label[b-hd2f2jilr0] {
        font-size: 13px;
        color: #6b7280;
    }

    .info-row span[b-hd2f2jilr0] {
        font-size: 14px;
        font-weight: 500;
        color: #1f2937;
    }

.card-footer[b-hd2f2jilr0] {
    padding: 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.commission-card.paid .card-header[b-hd2f2jilr0] {
    background: rgba(16, 185, 129, 0.05);
}

.commission-card.pending .card-header[b-hd2f2jilr0] {
    background: rgba(245, 158, 11, 0.05);
}

/* Empty State */
.empty-state[b-hd2f2jilr0] {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

    .empty-state i[b-hd2f2jilr0] {
        font-size: 48px;
        margin-bottom: 16px;
        color: #9ca3af;
    }

    .empty-state h3[b-hd2f2jilr0] {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #4b5563;
    }

    .empty-state p[b-hd2f2jilr0] {
        font-size: 14px;
        margin: 0;
    }

.empty-state-container[b-hd2f2jilr0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

    .empty-state-container i[b-hd2f2jilr0] {
        font-size: 64px;
        color: #9ca3af;
        margin-bottom: 24px;
    }

.btn-primary[b-hd2f2jilr0] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-primary:hover[b-hd2f2jilr0] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

/* Loading States */
.loading-container[b-hd2f2jilr0] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.spinner-container[b-hd2f2jilr0] {
    text-align: center;
}

.spinner[b-hd2f2jilr0] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-hd2f2jilr0 0.8s linear infinite;
    margin: 0 auto 16px;
}

.loading-spinner[b-hd2f2jilr0] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.loading-text[b-hd2f2jilr0] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

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

/* Unauthorized */
.unauthorized-container[b-hd2f2jilr0] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.unauthorized-content[b-hd2f2jilr0] {
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

    .unauthorized-content i[b-hd2f2jilr0] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-hd2f2jilr0] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-hd2f2jilr0] {
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Dark Theme Support */
[data-theme="dark"] .agent-details-page[b-hd2f2jilr0] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-details-page[b-hd2f2jilr0]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-hd2f2jilr0],
[data-theme="dark"] .section-card[b-hd2f2jilr0] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .section-title-modern[b-hd2f2jilr0] {
    color: #e2e8f0;
}

[data-theme="dark"] .breadcrumb-item[b-hd2f2jilr0] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-hd2f2jilr0] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-hd2f2jilr0] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle-enhanced[b-hd2f2jilr0],
[data-theme="dark"] .section-subtitle[b-hd2f2jilr0] {
    color: #9ca3af;
}

[data-theme="dark"] .info-item label[b-hd2f2jilr0],
[data-theme="dark"] .comp-item label[b-hd2f2jilr0],
[data-theme="dark"] .wallet-stat label[b-hd2f2jilr0] {
    color: #9ca3af;
}

[data-theme="dark"] .info-item span[b-hd2f2jilr0],
[data-theme="dark"] .address-item span[b-hd2f2jilr0],
[data-theme="dark"] .stat-value[b-hd2f2jilr0] {
    color: #e2e8f0;
}

[data-theme="dark"] .data-table[b-hd2f2jilr0] {
    background: #1e293b;
}

    [data-theme="dark"] .data-table thead[b-hd2f2jilr0] {
        background: rgba(102, 126, 234, 0.1);
    }

    [data-theme="dark"] .data-table th[b-hd2f2jilr0] {
        color: #a78bfa;
    }

    [data-theme="dark"] .data-table td[b-hd2f2jilr0] {
        color: #e2e8f0;
        border-bottom-color: #334155;
    }

    [data-theme="dark"] .data-table tbody tr:hover[b-hd2f2jilr0] {
        background: rgba(102, 126, 234, 0.05);
    }

[data-theme="dark"] .inventory-card[b-hd2f2jilr0],
[data-theme="dark"] .commission-card[b-hd2f2jilr0] {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .card-footer[b-hd2f2jilr0] {
    background: #0f172a;
    border-top-color: #334155;
}

[data-theme="dark"] .empty-state h3[b-hd2f2jilr0],
[data-theme="dark"] .unauthorized-content h3[b-hd2f2jilr0] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-hd2f2jilr0],
[data-theme="dark"] .unauthorized-content p[b-hd2f2jilr0] {
    color: #9ca3af;
}

[data-theme="dark"] .unauthorized-content[b-hd2f2jilr0] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .details-grid[b-hd2f2jilr0] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .agent-details-page[b-hd2f2jilr0] {
        padding: 16px;
    }

    .page-header-enhanced[b-hd2f2jilr0] {
        flex-direction: column;
        padding: 20px;
    }

    .header-actions[b-hd2f2jilr0] {
        margin-top: 16px;
        width: 100%;
        flex-direction: column;
    }

        .header-actions button[b-hd2f2jilr0] {
            width: 100%;
        }

    .page-title-modern[b-hd2f2jilr0] {
        font-size: 24px;
    }

    .title-icon[b-hd2f2jilr0] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .section-card[b-hd2f2jilr0] {
        padding: 20px;
    }

    .section-header-modern[b-hd2f2jilr0] {
        flex-direction: column;
        text-align: center;
    }

    .section-icon[b-hd2f2jilr0] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

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

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

    .documents-grid[b-hd2f2jilr0] {
        grid-template-columns: 1fr;
    }

    .tabs-header[b-hd2f2jilr0] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .tabs-header[b-hd2f2jilr0]::-webkit-scrollbar {
            display: none;
        }

    .tab-button[b-hd2f2jilr0] {
        white-space: nowrap;
        padding: 12px 16px;
        font-size: 13px;
    }

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

    .desktop-only[b-hd2f2jilr0] {
        display: none;
    }

    .mobile-only[b-hd2f2jilr0] {
        display: block;
    }

    .cards-container[b-hd2f2jilr0] {
        display: block;
    }

    .breadcrumb-modern[b-hd2f2jilr0] {
        font-size: 12px;
    }

    .location-time[b-hd2f2jilr0] {
        font-size: 12px;
    }

    .coordinates[b-hd2f2jilr0] {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-hd2f2jilr0] {
        font-size: 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .section-title-modern[b-hd2f2jilr0] {
        font-size: 18px;
    }

    .stat-content .stat-value[b-hd2f2jilr0] {
        font-size: 18px;
    }

    .comp-item .amount[b-hd2f2jilr0],
    .comp-item .percentage[b-hd2f2jilr0] {
        font-size: 20px;
    }
}

/* Print Styles */
@media print {
    .header-actions[b-hd2f2jilr0],
    .tabs-header[b-hd2f2jilr0],
    .btn-view-map[b-hd2f2jilr0],
    .btn-view-doc[b-hd2f2jilr0],
    .btn-pay[b-hd2f2jilr0] {
        display: none !important;
    }

    .agent-details-page[b-hd2f2jilr0] {
        background: white;
        padding: 0;
    }

    .section-card[b-hd2f2jilr0] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/AgentPartnerProfits.razor.rz.scp.css */

/* ===================================
   Agent Partner Profits Page - Modern Professional CSS
   صفحة أرباح الشريك المندوب - تصميم حديث احترافي
   =================================== */

/* Page Container - Following app.css architecture */
.agent-profits-page[b-z0q7rmhnkc] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
    font-family: var(--font-primary);
}

    .agent-profits-page[b-z0q7rmhnkc]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-profits-page > *[b-z0q7rmhnkc] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header - Following Users.razor.css style */
.page-header-enhanced[b-z0q7rmhnkc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    gap: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px 32px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content[b-z0q7rmhnkc] {
    flex: 1;
}

/* Modern Breadcrumb - Enhanced Design */
.breadcrumb-modern[b-z0q7rmhnkc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item[b-z0q7rmhnkc] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(102, 126, 234, 0.05);
}

    .breadcrumb-item:hover[b-z0q7rmhnkc] {
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
        transform: translateY(-1px);
    }

    .breadcrumb-item i[b-z0q7rmhnkc] {
        font-size: 16px;
    }

    .breadcrumb-item.separator[b-z0q7rmhnkc],
    .separator[b-z0q7rmhnkc] {
        color: #d1d5db;
        background: none;
        padding: 0;
        font-weight: 400;
    }

        .separator:hover[b-z0q7rmhnkc] {
            background: none;
            transform: none;
        }

.breadcrumb-current[b-z0q7rmhnkc] {
    color: #4c1d95;
    font-weight: 600;
    background: rgba(76, 29, 149, 0.1);
    padding: 6px 12px;
    border-radius: 8px;
}

/* Header Title Section */
.header-title-section[b-z0q7rmhnkc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-title-modern[b-z0q7rmhnkc] {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 16px;
}

.title-icon[b-z0q7rmhnkc] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    animation: float-b-z0q7rmhnkc 6s ease-in-out infinite;
}

/* Agent Info Header */
.agent-info-header[b-z0q7rmhnkc] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.avatar-circle-lg[b-z0q7rmhnkc] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

    .avatar-circle-lg[b-z0q7rmhnkc]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        animation: shimmer-b-z0q7rmhnkc 3s infinite;
    }

.agent-info-header h2[b-z0q7rmhnkc] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1f2937;
}

.type-badge[b-z0q7rmhnkc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

    .type-badge.partner[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

        .type-badge.partner:hover[b-z0q7rmhnkc] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(67, 233, 123, 0.3);
        }

/* Header Actions */
.header-actions[b-z0q7rmhnkc] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.action-button[b-z0q7rmhnkc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

    .action-button:hover[b-z0q7rmhnkc]::before {
        width: 300px;
        height: 300px;
    }

    .action-button.primary[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

        .action-button.primary:hover[b-z0q7rmhnkc] {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

    .action-button.secondary[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        color: #4b5563;
    }

        .action-button.secondary:hover[b-z0q7rmhnkc] {
            background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }

/* Statistics Cards - Enhanced Grid */
.statistics-cards[b-z0q7rmhnkc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-z0q7rmhnkc]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-z0q7rmhnkc] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-z0q7rmhnkc]::before {
            opacity: 1;
        }

.stat-icon[b-z0q7rmhnkc] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

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

.stat-card.success .stat-icon[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-card.danger .stat-icon[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
}

.stat-card.warning .stat-icon[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-card.info .stat-icon[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.purple .stat-icon[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

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

    .stat-content h3[b-z0q7rmhnkc] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 4px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

    .stat-content p[b-z0q7rmhnkc] {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Period Filter Section */
.period-filter-section[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .period-filter-section h3[b-z0q7rmhnkc] {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 20px 0;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .period-filter-section h3[b-z0q7rmhnkc]::before {
            content: '📊';
            font-size: 24px;
        }

.filter-controls[b-z0q7rmhnkc] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: end;
}

.date-range[b-z0q7rmhnkc] {
    display: flex;
    gap: 16px;
    align-items: end;
}

.date-input[b-z0q7rmhnkc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
}

    .date-input label[b-z0q7rmhnkc] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .date-input input[b-z0q7rmhnkc] {
        padding: 12px 16px;
        border: 2px solid transparent;
        border-radius: 12px;
        background: rgba(102, 126, 234, 0.05);
        color: #1f2937;
        font-weight: 500;
        transition: all 0.3s;
        font-size: 14px;
    }

        .date-input input:focus[b-z0q7rmhnkc] {
            outline: none;
            border-color: #667eea;
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.quick-filters[b-z0q7rmhnkc] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn[b-z0q7rmhnkc] {
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    border-radius: 12px;
    color: #667eea;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .filter-btn:hover[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Profit Details Section */
.profit-details-section[b-z0q7rmhnkc] {
    margin-bottom: 32px;
}

    .profit-details-section > h3[b-z0q7rmhnkc] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

/* Calculation Cards */
.calculation-card[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

    .calculation-card:hover[b-z0q7rmhnkc] {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    }

    .calculation-card h4[b-z0q7rmhnkc] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #1f2937;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .calculation-card h4[b-z0q7rmhnkc]::before {
            content: '💰';
            font-size: 20px;
        }

    .calculation-card.highlight[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border: 2px solid rgba(102, 126, 234, 0.2);
    }

        .calculation-card.highlight h4[b-z0q7rmhnkc]::before {
            content: '🎯';
        }

/* Calculation Table */
.calculation-table[b-z0q7rmhnkc] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .calculation-table td[b-z0q7rmhnkc] {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        font-weight: 500;
    }

        .calculation-table td:first-child[b-z0q7rmhnkc] {
            color: #4b5563;
            font-weight: 600;
        }

        .calculation-table td:last-child[b-z0q7rmhnkc] {
            text-align: left;
            font-weight: 700;
        }

.amount[b-z0q7rmhnkc] {
    font-family: 'Inter', monospace;
    font-size: 16px;
    letter-spacing: 0.5px;
}

    .amount.positive[b-z0q7rmhnkc] {
        color: #059669;
    }

    .amount.negative[b-z0q7rmhnkc] {
        color: #dc2626;
    }

.total-row td[b-z0q7rmhnkc] {
    border-top: 2px solid rgba(102, 126, 234, 0.2);
    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
    background: rgba(102, 126, 234, 0.05);
    font-weight: 700;
    font-size: 16px;
    padding: 16px;
}

.net-profit-row td[b-z0q7rmhnkc],
.agent-profit-row td[b-z0q7rmhnkc] {
    border-top: 3px solid #667eea;
    border-bottom: 3px solid #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    font-weight: 800;
    font-size: 18px;
    padding: 20px 16px;
}

.divider td[b-z0q7rmhnkc] {
    border-bottom: 1px dashed rgba(102, 126, 234, 0.3);
    padding: 8px 0;
}

/* Monthly Trend Section */
.monthly-trend-section[b-z0q7rmhnkc] {
    margin-top: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .monthly-trend-section h4[b-z0q7rmhnkc] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #1f2937;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .monthly-trend-section h4[b-z0q7rmhnkc]::before {
            content: '📈';
            font-size: 20px;
        }

.trend-chart[b-z0q7rmhnkc] {
    display: flex;
    gap: 12px;
    align-items: end;
    justify-content: space-between;
    min-height: 200px;
    padding: 20px 0;
    overflow-x: auto;
}

.month-bar[b-z0q7rmhnkc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    gap: 8px;
}

.bar[b-z0q7rmhnkc] {
    background: linear-gradient(to top, #667eea 0%, #764ba2 100%);
    border-radius: 6px 6px 0 0;
    min-height: 20px;
    width: 40px;
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
}

    .bar:hover[b-z0q7rmhnkc] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

    .bar .value[b-z0q7rmhnkc] {
        position: absolute;
        top: -25px;
        font-size: 11px;
        font-weight: 600;
        color: #1f2937;
        white-space: nowrap;
        background: white;
        padding: 2px 6px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

.month-label[b-z0q7rmhnkc] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
}

/* Distribution History Section */
.distribution-history-section[b-z0q7rmhnkc] {
    margin-bottom: 32px;
}

    .distribution-history-section > h3[b-z0q7rmhnkc] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

/* Distributions Table */
.distributions-table[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.table[b-z0q7rmhnkc] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

    .table th[b-z0q7rmhnkc] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 700;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    }

    .table td[b-z0q7rmhnkc] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
        font-weight: 500;
        transition: all 0.3s;
    }

    .table tbody tr[b-z0q7rmhnkc] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .table tbody tr:hover[b-z0q7rmhnkc] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

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

/* Status Badge */
.status-badge[b-z0q7rmhnkc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.success[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.warning[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .status-badge.danger[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .status-badge.secondary[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(209, 213, 219, 0.2) 100%);
        color: #6b7280;
        border: 1px solid rgba(156, 163, 175, 0.3);
    }

/* Action Buttons in Table */
.btn[b-z0q7rmhnkc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 6px;
    min-height: 36px;
}

.btn-sm[b-z0q7rmhnkc] {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 32px;
}

.btn-info[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
}

    .btn-info:hover[b-z0q7rmhnkc] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(79, 172, 254, 0.4);
    }

/* Empty State */
.empty-state[b-z0q7rmhnkc] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .empty-state i[b-z0q7rmhnkc] {
        font-size: 64px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 16px;
        display: block;
    }

    .empty-state p[b-z0q7rmhnkc] {
        font-size: 16px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Modal Styles */
.modal-backdrop[b-z0q7rmhnkc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-z0q7rmhnkc 0.3s ease;
}

.modal-dialog[b-z0q7rmhnkc] {
    width: calc(100% - 2rem);
    max-width: 600px;
    animation: slideUp-b-z0q7rmhnkc 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .modal-dialog.modal-lg[b-z0q7rmhnkc] {
        max-width: 800px;
    }

.modal-content[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-z0q7rmhnkc] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-z0q7rmhnkc] {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.close-btn[b-z0q7rmhnkc] {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-btn:hover[b-z0q7rmhnkc] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-z0q7rmhnkc] {
    padding: 30px;
}

.modal-footer[b-z0q7rmhnkc] {
    padding: 24px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Distribution Summary */
.distribution-summary[b-z0q7rmhnkc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.summary-item[b-z0q7rmhnkc] {
    text-align: center;
}

    .summary-item label[b-z0q7rmhnkc] {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .summary-item h4[b-z0q7rmhnkc] {
        font-size: 24px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .summary-item.highlight[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-radius: 12px;
        padding: 16px;
        border: 2px solid rgba(102, 126, 234, 0.2);
    }

/* Form Styles */
.form-group[b-z0q7rmhnkc] {
    margin-bottom: 20px;
}

    .form-group label[b-z0q7rmhnkc] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-control[b-z0q7rmhnkc] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.05);
    color: #1f2937;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 15px;
    font-family: inherit;
}

    .form-control:focus[b-z0q7rmhnkc] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

select.form-control[b-z0q7rmhnkc] {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

textarea.form-control[b-z0q7rmhnkc] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* Button Variants */
.btn-secondary[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
}

    .btn-secondary:hover[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-success[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(67, 233, 123, 0.3);
}

    .btn-success:hover[b-z0q7rmhnkc] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(67, 233, 123, 0.4);
    }

/* Spinner */
.spinner-border[b-z0q7rmhnkc] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-right-color: currentColor;
    border-radius: 50%;
    animation: spin-b-z0q7rmhnkc 0.8s linear infinite;
}

.spinner-border-sm[b-z0q7rmhnkc] {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}

/* Unauthorized Container */
.unauthorized-container[b-z0q7rmhnkc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .unauthorized-container i[b-z0q7rmhnkc] {
        color: #9ca3af;
        margin-bottom: 16px;
    }

    .unauthorized-container h3[b-z0q7rmhnkc] {
        color: #4c1d95;
        margin-bottom: 8px;
        font-weight: 700;
    }

    .unauthorized-container p[b-z0q7rmhnkc] {
        color: #6b7280;
        margin: 0;
    }

/* Font Weight Utilities */
.fw-bold[b-z0q7rmhnkc] {
    font-weight: 700 !important;
}

.me-2[b-z0q7rmhnkc] {
    margin-left: 8px !important;
}

html[dir="ltr"] .me-2[b-z0q7rmhnkc] {
    margin-right: 8px !important;
    margin-left: 0 !important;
}

/* Animations */
@keyframes fadeIn-b-z0q7rmhnkc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

/* Dark Theme Support */
[data-theme="dark"] .agent-profits-page[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-profits-page[b-z0q7rmhnkc]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-z0q7rmhnkc],
[data-theme="dark"] .period-filter-section[b-z0q7rmhnkc],
[data-theme="dark"] .stat-card[b-z0q7rmhnkc],
[data-theme="dark"] .calculation-card[b-z0q7rmhnkc],
[data-theme="dark"] .monthly-trend-section[b-z0q7rmhnkc],
[data-theme="dark"] .distributions-table[b-z0q7rmhnkc],
[data-theme="dark"] .empty-state[b-z0q7rmhnkc],
[data-theme="dark"] .unauthorized-container[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-z0q7rmhnkc] {
    color: #9ca3af;
    background: rgba(167, 139, 250, 0.1);
}

    [data-theme="dark"] .breadcrumb-item:hover[b-z0q7rmhnkc] {
        color: #a78bfa;
        background: rgba(167, 139, 250, 0.2);
    }

[data-theme="dark"] .breadcrumb-current[b-z0q7rmhnkc] {
    color: #e2e8f0;
    background: rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .agent-info-header h2[b-z0q7rmhnkc],
[data-theme="dark"] .stat-content h3[b-z0q7rmhnkc],
[data-theme="dark"] .period-filter-section h3[b-z0q7rmhnkc],
[data-theme="dark"] .calculation-card h4[b-z0q7rmhnkc],
[data-theme="dark"] .monthly-trend-section h4[b-z0q7rmhnkc] {
    color: #e2e8f0;
}

[data-theme="dark"] .date-input label[b-z0q7rmhnkc],
[data-theme="dark"] .form-group label[b-z0q7rmhnkc] {
    color: #e2e8f0;
}

[data-theme="dark"] .date-input input[b-z0q7rmhnkc],
[data-theme="dark"] .form-control[b-z0q7rmhnkc] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .date-input input:focus[b-z0q7rmhnkc],
    [data-theme="dark"] .form-control:focus[b-z0q7rmhnkc] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .filter-btn[b-z0q7rmhnkc] {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

    [data-theme="dark"] .filter-btn:hover[b-z0q7rmhnkc] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

[data-theme="dark"] .calculation-table td:first-child[b-z0q7rmhnkc] {
    color: #9ca3af;
}

[data-theme="dark"] .month-label[b-z0q7rmhnkc] {
    color: #9ca3af;
}

[data-theme="dark"] .table th[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.5) 0%, rgba(51, 65, 85, 0.5) 100%);
    color: #a78bfa;
}

[data-theme="dark"] .table td[b-z0q7rmhnkc] {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
}

[data-theme="dark"] .table tbody tr:hover[b-z0q7rmhnkc] {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.1) 0%, rgba(196, 181, 253, 0.1) 100%);
}

[data-theme="dark"] .modal-content[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-header[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
}

[data-theme="dark"] .modal-footer[b-z0q7rmhnkc] {
    background: rgba(71, 85, 105, 0.1);
}

[data-theme="dark"] .close-btn[b-z0q7rmhnkc] {
    color: #9ca3af;
}

    [data-theme="dark"] .close-btn:hover[b-z0q7rmhnkc] {
        background: rgba(167, 139, 250, 0.2);
        color: #e2e8f0;
    }

[data-theme="dark"] .distribution-summary[b-z0q7rmhnkc] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .summary-item label[b-z0q7rmhnkc] {
    color: #9ca3af;
}

[data-theme="dark"] .empty-state p[b-z0q7rmhnkc],
[data-theme="dark"] .unauthorized-container p[b-z0q7rmhnkc] {
    color: #9ca3af;
}

[data-theme="dark"] .unauthorized-container h3[b-z0q7rmhnkc] {
    color: #e2e8f0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .statistics-cards[b-z0q7rmhnkc] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-controls[b-z0q7rmhnkc] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .date-range[b-z0q7rmhnkc] {
        justify-content: center;
    }

    .quick-filters[b-z0q7rmhnkc] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .agent-profits-page[b-z0q7rmhnkc] {
        padding: 16px;
    }

    .page-header-enhanced[b-z0q7rmhnkc] {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        gap: 16px;
    }

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

    .page-title-modern[b-z0q7rmhnkc] {
        font-size: 28px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .title-icon[b-z0q7rmhnkc] {
        width: 48px;
        height: 48px;
        font-size: 20px;
        align-self: center;
    }

    .agent-info-header[b-z0q7rmhnkc] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .avatar-circle-lg[b-z0q7rmhnkc] {
        width: 64px;
        height: 64px;
        font-size: 24px;
        align-self: center;
    }

    .statistics-cards[b-z0q7rmhnkc] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-z0q7rmhnkc] {
        padding: 20px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .stat-icon[b-z0q7rmhnkc] {
        width: 48px;
        height: 48px;
        font-size: 20px;
        align-self: center;
    }

    .period-filter-section[b-z0q7rmhnkc] {
        padding: 20px;
    }

    .date-range[b-z0q7rmhnkc] {
        flex-direction: column;
        gap: 12px;
    }

    .quick-filters[b-z0q7rmhnkc] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-btn[b-z0q7rmhnkc] {
        font-size: 12px;
        padding: 8px 12px;
    }

    .calculation-card[b-z0q7rmhnkc] {
        padding: 16px;
    }

    .calculation-table td[b-z0q7rmhnkc] {
        padding: 8px 12px;
        font-size: 14px;
    }

    .trend-chart[b-z0q7rmhnkc] {
        min-height: 150px;
        gap: 8px;
        padding: 16px 0;
    }

    .month-bar[b-z0q7rmhnkc] {
        min-width: 60px;
    }

    .bar[b-z0q7rmhnkc] {
        width: 32px;
    }

    .table th[b-z0q7rmhnkc],
    .table td[b-z0q7rmhnkc] {
        padding: 12px 8px;
        font-size: 14px;
    }

    .modal-dialog[b-z0q7rmhnkc] {
        width: calc(100% - 1rem);
        margin: 0.5rem;
    }

    .modal-header[b-z0q7rmhnkc],
    .modal-body[b-z0q7rmhnkc],
    .modal-footer[b-z0q7rmhnkc] {
        padding: 20px;
    }

    .distribution-summary[b-z0q7rmhnkc] {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .summary-item h4[b-z0q7rmhnkc] {
        font-size: 20px;
    }

    .breadcrumb-modern[b-z0q7rmhnkc] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .breadcrumb-item[b-z0q7rmhnkc] {
        font-size: 13px;
        padding: 4px 8px;
    }

        .breadcrumb-item span[b-z0q7rmhnkc] {
            display: none;
        }

    .action-button[b-z0q7rmhnkc] {
        padding: 10px 16px;
        font-size: 13px;
    }

        .action-button span[b-z0q7rmhnkc] {
            display: none;
        }
}

@media (max-width: 480px) {
    .page-title-modern[b-z0q7rmhnkc] {
        font-size: 24px;
    }

    .stat-content h3[b-z0q7rmhnkc] {
        font-size: 20px;
    }

    .calculation-card h4[b-z0q7rmhnkc],
    .monthly-trend-section h4[b-z0q7rmhnkc] {
        font-size: 16px;
    }

    .amount[b-z0q7rmhnkc] {
        font-size: 14px;
    }

    .total-row td[b-z0q7rmhnkc],
    .net-profit-row td[b-z0q7rmhnkc],
    .agent-profit-row td[b-z0q7rmhnkc] {
        font-size: 14px;
        padding: 12px 8px;
    }

    .bar .value[b-z0q7rmhnkc] {
        font-size: 10px;
        top: -20px;
    }

    .month-label[b-z0q7rmhnkc] {
        font-size: 11px;
    }

    .btn[b-z0q7rmhnkc] {
        font-size: 12px;
        padding: 6px 8px;
    }

    .status-badge[b-z0q7rmhnkc] {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Print Styles */
@media print {
    .agent-profits-page[b-z0q7rmhnkc] {
        background: white !important;
        padding: 0;
    }

    .page-header-enhanced[b-z0q7rmhnkc] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc;
    }

    .header-actions[b-z0q7rmhnkc],
    .period-filter-section[b-z0q7rmhnkc],
    .action-button[b-z0q7rmhnkc],
    .btn[b-z0q7rmhnkc] {
        display: none !important;
    }

    .statistics-cards[b-z0q7rmhnkc],
    .calculation-card[b-z0q7rmhnkc],
    .distributions-table[b-z0q7rmhnkc] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .page-title-modern[b-z0q7rmhnkc],
    .stat-content h3[b-z0q7rmhnkc] {
        color: black !important;
        -webkit-text-fill-color: black !important;
    }

    .trend-chart[b-z0q7rmhnkc] {
        break-inside: avoid;
    }
}

/* Focus States for Accessibility */
*:focus[b-z0q7rmhnkc] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.action-button:focus[b-z0q7rmhnkc],
.btn:focus[b-z0q7rmhnkc],
.filter-btn:focus[b-z0q7rmhnkc] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

.form-control:focus[b-z0q7rmhnkc],
.date-input input:focus[b-z0q7rmhnkc] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .action-button[b-z0q7rmhnkc],
    .btn[b-z0q7rmhnkc],
    .filter-btn[b-z0q7rmhnkc] {
        border: 2px solid currentColor;
    }

    .stat-card[b-z0q7rmhnkc],
    .calculation-card[b-z0q7rmhnkc] {
        border: 2px solid #000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-z0q7rmhnkc] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .title-icon[b-z0q7rmhnkc] {
        animation: none;
    }

    .avatar-circle-lg[b-z0q7rmhnkc]::before {
        animation: none;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/AgentReportDetails.razor.rz.scp.css */

/* AgentReportDetails - Modern Professional CSS
   Aligns with app.css variables and resembles Users.razor.css */

/* Page Container */
.agents-reports-page[b-celhnmvopd] {
    padding: 24px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    min-height: 100vh;
    position: relative;
}

    .agents-reports-page[b-celhnmvopd]::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 360px;
        background: var(--gradient-primary);
        opacity: 0.07;
        border-radius: 0 0 50% 50%;
        z-index: 0;
    }

    .agents-reports-page > *[b-celhnmvopd] {
        position: relative;
        z-index: 1;
    }

/* Header */
.page-header-enhanced[b-celhnmvopd] {
    margin-bottom: 28px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.header-content[b-celhnmvopd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.breadcrumb-modern[b-celhnmvopd] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.breadcrumb-item[b-celhnmvopd] {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

    .breadcrumb-item:hover[b-celhnmvopd] {
        color: var(--primary-color);
    }

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

.breadcrumb-current[b-celhnmvopd] {
    color: var(--text-primary);
    font-weight: 700;
}

.header-title-section[b-celhnmvopd] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.page-title-modern[b-celhnmvopd] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

    .page-title-modern .title-icon[b-celhnmvopd] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: white;
        background: var(--gradient-primary);
        box-shadow: var(--shadow-md);
    }

.page-subtitle-enhanced[b-celhnmvopd] {
    color: var(--text-secondary);
    margin: 0;
}

.header-actions[b-celhnmvopd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* Buttons */
.btn-action-secondary[b-celhnmvopd] {
    background: var(--gradient-success);
    color: var(--text-inverse);
    border: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-secondary:hover[b-celhnmvopd] {
        transform: translateY(-2px);
        box-shadow: var(--glow-secondary), var(--shadow-xl);
    }

.btn-apply-filter[b-celhnmvopd] {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    border: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-apply-filter:hover[b-celhnmvopd] {
        transform: translateY(-2px);
        box-shadow: var(--glow-primary), var(--shadow-xl);
    }

.btn-reset-filter[b-celhnmvopd] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-reset-filter:hover[b-celhnmvopd] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

/* Filters Card */
.filters-section[b-celhnmvopd] {
    margin-bottom: 20px;
}

.filters-card[b-celhnmvopd] {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.filters-title[b-celhnmvopd] {
    padding: 16px 20px;
    margin: 0;
    border-bottom: 1px solid rgba(102,126,234,0.12);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4c1d95;
    font-weight: 800;
}

.filters-grid[b-celhnmvopd] {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.filter-group[b-celhnmvopd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-celhnmvopd] {
    font-size: 14px;
    font-weight: 700;
    color: #4c1d95;
}

.filter-input[b-celhnmvopd],
.filter-select[b-celhnmvopd] {
    width: 100%;
    padding: 12px 14px;
    background: rgba(102,126,234,0.06);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all var(--transition-fast);
    font-size: 15px;
    color: var(--text-primary);
}

    .filter-input:focus[b-celhnmvopd],
    .filter-select:focus[b-celhnmvopd] {
        outline: none;
        background: #fff;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
    }

.filter-actions[b-celhnmvopd] {
    display: flex;
    align-items: end;
    gap: 10px;
}

/* Quick Filters */
.quick-filters[b-celhnmvopd] {
    display: flex;
    gap: 8px;
    padding: 0 20px 20px 20px;
    flex-wrap: wrap;
}

.quick-filter-btn[b-celhnmvopd] {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(102,126,234,0.08);
    border: 1px solid rgba(102,126,234,0.18);
    color: #4c1d95;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .quick-filter-btn:hover[b-celhnmvopd] {
        background: rgba(102,126,234,0.15);
    }

    .quick-filter-btn.active[b-celhnmvopd] {
        background: var(--gradient-primary);
        color: white;
        border-color: transparent;
        box-shadow: var(--shadow-md);
    }

/* Summary Cards */
.summary-cards-grid[b-celhnmvopd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.summary-card[b-celhnmvopd] {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.88) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

    .summary-card[b-celhnmvopd]::before {
        content: '';
        position: absolute;
        top: -60%;
        right: -60%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102,126,234,0.12) 0%, transparent 60%);
        transform: rotate(25deg);
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .summary-card:hover[b-celhnmvopd] {
        transform: translateY(-4px) scale(1.01);
        box-shadow: var(--shadow-xl);
        border-color: var(--primary-color);
    }

        .summary-card:hover[b-celhnmvopd]::before {
            opacity: 1;
        }

.card-icon[b-celhnmvopd] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
    background: var(--gradient-primary);
}

.summary-card.sales .card-icon[b-celhnmvopd] {
    background: var(--gradient-primary);
}

.summary-card.collections .card-icon[b-celhnmvopd] {
    background: var(--gradient-success);
}

.summary-card.commissions .card-icon[b-celhnmvopd] {
    background: var(--gradient-secondary);
}

.summary-card.performance .card-icon[b-celhnmvopd] {
    background: var(--gradient-cool);
}

.card-content h4[b-celhnmvopd] {
    margin: 0 0 6px 0;
    font-weight: 800;
    color: #4c1d95;
    font-size: 16px;
}

.card-value[b-celhnmvopd] {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.card-subtitle[b-celhnmvopd] {
    display: block;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
}

/* Sections */
.report-section[b-celhnmvopd] {
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
    overflow: hidden;
}

.section-header[b-celhnmvopd] {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(102,126,234,0.12);
    background: linear-gradient(135deg, rgba(102,126,234,0.06) 0%, rgba(118,75,162,0.06) 100%);
}

.section-title[b-celhnmvopd] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
    font-weight: 800;
    font-size: 18px;
}

.chart-container[b-celhnmvopd] {
    padding: 20px;
}

/* Loading */
.loading-modern[b-celhnmvopd] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 360px;
}

.loading-spinner-container[b-celhnmvopd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.spinner-modern[b-celhnmvopd] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102,126,234,0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-celhnmvopd 0.9s linear infinite;
}

.loading-text-modern[b-celhnmvopd] {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Empty State */
.no-data-container[b-celhnmvopd] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.no-data-content i[b-celhnmvopd] {
    font-size: 72px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.no-data-content h3[b-celhnmvopd] {
    margin: 8px 0;
    color: #4c1d95;
    font-weight: 800;
}

.no-data-content p[b-celhnmvopd] {
    color: var(--text-secondary);
}

/* RTL */
html[dir="rtl"] .breadcrumb-modern[b-celhnmvopd] {
    direction: rtl;
}

html[dir="rtl"] .section-title[b-celhnmvopd],
html[dir="rtl"] .page-title-modern[b-celhnmvopd] {
    direction: rtl;
}

/* Dark Theme */
[data-theme="dark"] .page-header-enhanced[b-celhnmvopd],
[data-theme="dark"] .filters-card[b-celhnmvopd],
[data-theme="dark"] .report-section[b-celhnmvopd],
[data-theme="dark"] .summary-card[b-celhnmvopd],
[data-theme="dark"] .no-data-container[b-celhnmvopd] {
    background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(30,41,59,0.9) 100%);
    border: 1px solid rgba(71,85,105,0.3);
}

[data-theme="dark"] .filters-title[b-celhnmvopd],
[data-theme="dark"] .section-title[b-celhnmvopd] {
    color: #e2e8f0;
}

[data-theme="dark"] .filter-input[b-celhnmvopd],
[data-theme="dark"] .filter-select[b-celhnmvopd] {
    background: rgba(71,85,105,0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-input:focus[b-celhnmvopd],
    [data-theme="dark"] .filter-select:focus[b-celhnmvopd] {
        background: rgba(71,85,105,0.5);
        border-color: var(--primary-color);
    }

[data-theme="dark"] .card-content h4[b-celhnmvopd],
[data-theme="dark"] .breadcrumb-current[b-celhnmvopd] {
    color: #e2e8f0;
}

[data-theme="dark"] .quick-filter-btn[b-celhnmvopd] {
    background: rgba(102,126,234,0.15);
    border-color: rgba(102,126,234,0.25);
    color: #e2e8f0;
}

/* Responsive */
@media (max-width: 992px) {
    .summary-cards-grid[b-celhnmvopd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .agents-reports-page[b-celhnmvopd] {
        padding: 16px;
    }

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

    .summary-cards-grid[b-celhnmvopd] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .header-title-section[b-celhnmvopd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .header-actions[b-celhnmvopd] {
        width: 100%;
        flex-wrap: wrap;
    }

    .btn-action-secondary[b-celhnmvopd], .btn-apply-filter[b-celhnmvopd], .btn-reset-filter[b-celhnmvopd] {
        width: 100%;
        justify-content: center;
    }
}

@keyframes spin-b-celhnmvopd {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Sahelly/Components/Pages/Merchant/AgentsPerformance.razor.rz.scp.css */
/* Agents Performance Page Styles
   Modern Professional Design Following app.css patterns
   ===================================================== */

/* Page Container */
.agents-performance-page[b-486ynekaxm] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agents-performance-page[b-486ynekaxm]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agents-performance-page > *[b-486ynekaxm] {
        position: relative;
        z-index: 1;
    }

/* Page Header Enhanced */
.page-header-enhanced[b-486ynekaxm] {
    margin-bottom: 32px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-486ynekaxm] {
    flex: 1;
}

.breadcrumb-modern[b-486ynekaxm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item[b-486ynekaxm] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-486ynekaxm] {
        color: #667eea;
    }

.separator[b-486ynekaxm] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-486ynekaxm] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-486ynekaxm] {
    margin-bottom: 4px;
}

.page-title-modern[b-486ynekaxm] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.title-icon[b-486ynekaxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-486ynekaxm] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-486ynekaxm] {
    display: flex;
    gap: 12px;
}

.btn-action-secondary[b-486ynekaxm] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-action-secondary:hover[b-486ynekaxm] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Filters Card */
.filters-card[b-486ynekaxm] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.filters-header[b-486ynekaxm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filters-title[b-486ynekaxm] {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

    .filters-title i[b-486ynekaxm] {
        color: #667eea;
    }

.btn-reset[b-486ynekaxm] {
    background: transparent;
    border: 2px solid #e5e7eb;
    color: #6b7280;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .btn-reset:hover[b-486ynekaxm] {
        border-color: #667eea;
        color: #667eea;
        background: rgba(102, 126, 234, 0.05);
    }

.filters-grid[b-486ynekaxm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: end;
}

.filter-item[b-486ynekaxm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-486ynekaxm] {
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
}

.date-range-picker[b-486ynekaxm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input[b-486ynekaxm] {
    flex: 1;
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    transition: all 0.3s;
    font-size: 14px;
    color: #1f2937;
}

    .date-input:focus[b-486ynekaxm] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.date-separator[b-486ynekaxm] {
    color: #9ca3af;
    font-weight: 500;
}

.filter-select[b-486ynekaxm] {
    padding: 10px 36px 10px 14px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    transition: all 0.3s;
    font-size: 14px;
    color: #1f2937;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239333ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 16px 12px;
}

    .filter-select:focus[b-486ynekaxm] {
        outline: none;
        background-color: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.filter-actions[b-486ynekaxm] {
    display: flex;
    align-items: end;
}

.btn-apply-filter[b-486ynekaxm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-apply-filter:hover[b-486ynekaxm] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Overview Cards */
.overview-cards[b-486ynekaxm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.overview-card[b-486ynekaxm] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .overview-card:hover[b-486ynekaxm] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

.overview-icon[b-486ynekaxm] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

    .overview-icon.sales[b-486ynekaxm] {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .overview-icon.orders[b-486ynekaxm] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .overview-icon.commission[b-486ynekaxm] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .overview-icon.profit[b-486ynekaxm] {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    }

.overview-content[b-486ynekaxm] {
    flex: 1;
}

    .overview-content h4[b-486ynekaxm] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
        margin: 0 0 8px 0;
    }

.overview-value[b-486ynekaxm] {
    font-size: 28px;
    font-weight: 800;
    color: #1f2937;
    margin: 0;
    line-height: 1;
}

.overview-trend[b-486ynekaxm] {
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

    .overview-trend.positive[b-486ynekaxm] {
        color: #10b981;
    }

    .overview-trend.negative[b-486ynekaxm] {
        color: #ef4444;
    }

/* Performance Container */
.performance-container[b-486ynekaxm] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Loading & Empty States */
.loading-state[b-486ynekaxm],
.empty-state[b-486ynekaxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.spinner[b-486ynekaxm] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.1);
    border-left-color: #667eea;
    border-radius: 50%;
    animation: spin-b-486ynekaxm 1s linear infinite;
}

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

.loading-state p[b-486ynekaxm],
.empty-state p[b-486ynekaxm] {
    color: #6b7280;
    font-size: 16px;
    margin-top: 16px;
}

.empty-state i[b-486ynekaxm] {
    font-size: 64px;
    color: #9ca3af;
    margin-bottom: 16px;
}

.empty-state h3[b-486ynekaxm] {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

/* Desktop Table */
.desktop-table[b-486ynekaxm] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.performance-table[b-486ynekaxm] {
    width: 100%;
    border-collapse: collapse;
}

    .performance-table thead[b-486ynekaxm] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .performance-table th[b-486ynekaxm] {
        padding: 16px;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        color: #4b5563;
        white-space: nowrap;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

    .performance-table tbody tr[b-486ynekaxm] {
        border-bottom: 1px solid #e5e7eb;
        transition: all 0.2s;
    }

        .performance-table tbody tr:hover[b-486ynekaxm] {
            background: rgba(102, 126, 234, 0.02);
        }

        .performance-table tbody tr.high-performer[b-486ynekaxm] {
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%);
        }

    .performance-table td[b-486ynekaxm] {
        padding: 16px;
        font-size: 14px;
        color: #1f2937;
    }

/* Table Cells */
.agent-cell[b-486ynekaxm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar[b-486ynekaxm] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid rgba(102, 126, 234, 0.1);
}

.agent-info[b-486ynekaxm] {
    display: flex;
    flex-direction: column;
}

.agent-name[b-486ynekaxm] {
    font-weight: 600;
    color: #1f2937;
}

.agent-code[b-486ynekaxm] {
    font-size: 12px;
    color: #9ca3af;
}

.agent-type-badge[b-486ynekaxm] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

    .agent-type-badge.type-commission[b-486ynekaxm] {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

    .agent-type-badge.type-salary[b-486ynekaxm] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .agent-type-badge.type-partner[b-486ynekaxm] {
        background: rgba(139, 92, 246, 0.1);
        color: #7c3aed;
    }

.text-center[b-486ynekaxm] {
    text-align: center;
}

.text-right[b-486ynekaxm] {
    text-align: right;
}

.orders-count[b-486ynekaxm] {
    font-weight: 600;
    color: #059669;
}

.sales-amount[b-486ynekaxm],
.collections-amount[b-486ynekaxm],
.commission-amount[b-486ynekaxm] {
    font-weight: 600;
    color: #1f2937;
}

.profit-margin-cell[b-486ynekaxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.profit-value[b-486ynekaxm] {
    font-weight: 700;
    font-size: 16px;
}

    .profit-value.positive[b-486ynekaxm] {
        color: #059669;
    }

    .profit-value.negative[b-486ynekaxm] {
        color: #ef4444;
    }

.profit-bar[b-486ynekaxm] {
    width: 80px;
    height: 6px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.profit-fill[b-486ynekaxm] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.5s ease;
}

.performance-rating[b-486ynekaxm] {
    display: flex;
    gap: 2px;
}

    .performance-rating i[b-486ynekaxm] {
        color: #fbbf24;
        font-size: 14px;
    }

        .performance-rating i.far[b-486ynekaxm] {
            color: #e5e7eb;
        }

.actions-cell[b-486ynekaxm] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-view-details[b-486ynekaxm],
.btn-send-report[b-486ynekaxm] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-view-details[b-486ynekaxm] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

    .btn-view-details:hover[b-486ynekaxm] {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
    }

.btn-send-report[b-486ynekaxm] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

    .btn-send-report:hover[b-486ynekaxm] {
        background: #10b981;
        color: white;
        transform: translateY(-2px);
    }

/* Mobile Cards */
.mobile-cards[b-486ynekaxm] {
    display: none;
    gap: 16px;
}

.agent-performance-card[b-486ynekaxm] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid transparent;
    transition: all 0.3s;
}

    .agent-performance-card:hover[b-486ynekaxm] {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        border-color: rgba(102, 126, 234, 0.1);
    }

    .agent-performance-card.high-performer[b-486ynekaxm] {
        border-color: rgba(16, 185, 129, 0.2);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, white 100%);
    }

.card-header[b-486ynekaxm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.agent-summary[b-486ynekaxm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar-large[b-486ynekaxm] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(102, 126, 234, 0.1);
}

.agent-details h4[b-486ynekaxm] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.card-stats[b-486ynekaxm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-row[b-486ynekaxm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label[b-486ynekaxm] {
    font-size: 14px;
    color: #6b7280;
}

.stat-value[b-486ynekaxm] {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.profit-margin-mobile[b-486ynekaxm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .profit-margin-mobile .profit-bar[b-486ynekaxm] {
        flex: 1;
        max-width: 100px;
    }

.card-actions[b-486ynekaxm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.btn-card-action[b-486ynekaxm] {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-card-action.primary[b-486ynekaxm] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

        .btn-card-action.primary:hover[b-486ynekaxm] {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
        }

    .btn-card-action.secondary[b-486ynekaxm] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

        .btn-card-action.secondary:hover[b-486ynekaxm] {
            background: rgba(102, 126, 234, 0.2);
        }

/* Unauthorized Container */
.unauthorized-container[b-486ynekaxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 48px 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

    .unauthorized-container i[b-486ynekaxm] {
        font-size: 64px;
        color: #9333ea;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-486ynekaxm] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .unauthorized-container p[b-486ynekaxm] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .unauthorized-container .btn[b-486ynekaxm] {
        padding: 12px 24px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 600;
        border: none;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }

        .unauthorized-container .btn:hover[b-486ynekaxm] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

/* Dark Theme Support */
[data-theme="dark"] .agents-performance-page[b-486ynekaxm] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .page-header-enhanced[b-486ynekaxm],
[data-theme="dark"] .filters-card[b-486ynekaxm],
[data-theme="dark"] .overview-card[b-486ynekaxm],
[data-theme="dark"] .performance-container[b-486ynekaxm],
[data-theme="dark"] .agent-performance-card[b-486ynekaxm] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-subtitle-enhanced[b-486ynekaxm],
[data-theme="dark"] .filter-label[b-486ynekaxm],
[data-theme="dark"] .stat-label[b-486ynekaxm] {
    color: #9ca3af;
}

[data-theme="dark"] .filters-title[b-486ynekaxm],
[data-theme="dark"] .overview-value[b-486ynekaxm],
[data-theme="dark"] .agent-name[b-486ynekaxm],
[data-theme="dark"] .stat-value[b-486ynekaxm],
[data-theme="dark"] .performance-table td[b-486ynekaxm] {
    color: #e2e8f0;
}

[data-theme="dark"] .date-input[b-486ynekaxm],
[data-theme="dark"] .filter-select[b-486ynekaxm] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .date-input:focus[b-486ynekaxm],
    [data-theme="dark"] .filter-select:focus[b-486ynekaxm] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .performance-table thead[b-486ynekaxm] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(71, 85, 105, 0.2) 100%);
}

[data-theme="dark"] .performance-table th[b-486ynekaxm] {
    color: #9ca3af;
    border-bottom-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .performance-table tbody tr[b-486ynekaxm] {
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .performance-table tbody tr:hover[b-486ynekaxm] {
        background: rgba(102, 126, 234, 0.05);
    }

/* Responsive Design */
@media (max-width: 992px) {
    .page-header-enhanced[b-486ynekaxm] {
        flex-direction: column;
    }

    .header-actions[b-486ynekaxm] {
        margin-top: 16px;
        align-self: flex-end;
    }

    .filters-grid[b-486ynekaxm] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .agents-performance-page[b-486ynekaxm] {
        padding: 16px;
    }

    .page-header-enhanced[b-486ynekaxm],
    .filters-card[b-486ynekaxm],
    .performance-container[b-486ynekaxm] {
        padding: 20px;
    }

    .page-title-modern[b-486ynekaxm] {
        font-size: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .title-icon[b-486ynekaxm] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .overview-cards[b-486ynekaxm] {
        grid-template-columns: 1fr;
    }

    .desktop-table[b-486ynekaxm] {
        display: none;
    }

    .mobile-cards[b-486ynekaxm] {
        display: flex;
        flex-direction: column;
    }

    .filter-actions[b-486ynekaxm] {
        width: 100%;
    }

    .btn-apply-filter[b-486ynekaxm] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .date-range-picker[b-486ynekaxm] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-separator[b-486ynekaxm] {
        text-align: center;
        margin: 4px 0;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/AgentsReports.razor.rz.scp.css */

/* Agent Reports Page - Modern Professional CSS
   Based on app.css architecture and Users.razor.css styling */

/* Page Container */
.commission-details[b-79x9zm04dd] {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    margin-top: 4px;
}

    .commission-details small[b-79x9zm04dd] {
        line-height: 1.2;
    }

.agents-reports-page[b-79x9zm04dd] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agents-reports-page[b-79x9zm04dd]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agents-reports-page > *[b-79x9zm04dd] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-79x9zm04dd] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header-content[b-79x9zm04dd] {
    flex: 1;
}

.breadcrumb-modern[b-79x9zm04dd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-item[b-79x9zm04dd] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-79x9zm04dd] {
        color: #667eea;
    }

.separator[b-79x9zm04dd] {
    color: #d1d5db;
}

.breadcrumb-current[b-79x9zm04dd] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-79x9zm04dd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title-modern[b-79x9zm04dd] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 16px;
}

.title-icon[b-79x9zm04dd] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(90, 108, 179, 0.2);
}

.page-subtitle-enhanced[b-79x9zm04dd] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-79x9zm04dd] {
    display: flex;
    gap: 12px;
}

/* Modern Buttons */
.btn-action-secondary[b-79x9zm04dd] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-secondary:hover[b-79x9zm04dd] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Filters Section */
.filters-section[b-79x9zm04dd] {
    margin-bottom: 32px;
}

.filters-card[b-79x9zm04dd] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.filters-title[b-79x9zm04dd] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.filters-grid[b-79x9zm04dd] {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.filter-group[b-79x9zm04dd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-79x9zm04dd] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
}

.filter-select[b-79x9zm04dd],
.filter-input[b-79x9zm04dd] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1f2937;
}

    .filter-select:focus[b-79x9zm04dd],
    .filter-input:focus[b-79x9zm04dd] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.filter-actions[b-79x9zm04dd] {
    display: flex;
    gap: 10px;
    align-self: flex-end;
}

.btn-apply-filter[b-79x9zm04dd] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-apply-filter:hover[b-79x9zm04dd] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-reset-filter[b-79x9zm04dd] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-reset-filter:hover[b-79x9zm04dd] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Quick Filters */
.quick-filters[b-79x9zm04dd] {
    display: flex;
    gap: 10px;
    padding: 0 24px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.quick-filter-btn[b-79x9zm04dd] {
    background: rgba(102, 126, 234, 0.1);
    color: #4c1d95;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap;
}

    .quick-filter-btn:hover[b-79x9zm04dd] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

    .quick-filter-btn.active[b-79x9zm04dd] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Report Container */
.report-container[b-79x9zm04dd] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Summary Cards */
.summary-cards-grid[b-79x9zm04dd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.summary-card[b-79x9zm04dd] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-79x9zm04dd]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-79x9zm04dd] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .summary-card:hover[b-79x9zm04dd]::before {
            opacity: 1;
        }

.card-icon[b-79x9zm04dd] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-card.sales .card-icon[b-79x9zm04dd] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.summary-card.collections .card-icon[b-79x9zm04dd] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.summary-card.commissions .card-icon[b-79x9zm04dd] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.summary-card.performance .card-icon[b-79x9zm04dd] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

.card-content[b-79x9zm04dd] {
    flex: 1;
}

    .card-content h4[b-79x9zm04dd] {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 8px 0;
        color: #4b5563;
    }

.card-value[b-79x9zm04dd] {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-subtitle[b-79x9zm04dd] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Report Sections */
.report-section[b-79x9zm04dd] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-header[b-79x9zm04dd] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.section-title[b-79x9zm04dd] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4c1d95;
}

/* Table Styles */
.table-container[b-79x9zm04dd] {
    overflow-x: auto;
    padding: 0 0 16px 0;
}

.performance-table[b-79x9zm04dd] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}

    .performance-table thead th[b-79x9zm04dd] {
        padding: 18px 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.95);
        z-index: 10;
    }

html[dir="rtl"] .performance-table thead th[b-79x9zm04dd] {
    text-align: right;
}

.performance-table tbody tr[b-79x9zm04dd] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .performance-table tbody tr:hover[b-79x9zm04dd] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        transform: scale(1.01);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

.performance-table td[b-79x9zm04dd] {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
}

.performance-table tr:last-child td[b-79x9zm04dd] {
    border-bottom: none;
}

.performance-table .top-performer[b-79x9zm04dd] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

/* Rank Badge */
.rank-badge[b-79x9zm04dd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rank-1[b-79x9zm04dd] {
    background: linear-gradient(135deg, #ffd700 0%, #e6b800 100%);
}

.rank-2[b-79x9zm04dd] {
    background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
}

.rank-3[b-79x9zm04dd] {
    background: linear-gradient(135deg, #cd7f32 0%, #b36a2c 100%);
}

/* Agent Info */
.agent-info[b-79x9zm04dd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .agent-info i[b-79x9zm04dd] {
        font-size: 24px;
        color: #6366f1;
    }

.agent-name[b-79x9zm04dd] {
    font-weight: 600;
    color: #1f2937;
}

/* Agent Type Badge */
.agent-type-badge[b-79x9zm04dd] {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .agent-type-badge.field[b-79x9zm04dd] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
        color: #059669;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .agent-type-badge.store[b-79x9zm04dd] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
        color: #2563eb;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .agent-type-badge.online[b-79x9zm04dd] {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
        color: #7c3aed;
        border: 1px solid rgba(139, 92, 246, 0.3);
    }

    .agent-type-badge.partner[b-79x9zm04dd] {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%);
        color: #ea580c;
        border: 1px solid rgba(249, 115, 22, 0.3);
    }

/* Metric Value */
.metric-value[b-79x9zm04dd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .metric-value .primary[b-79x9zm04dd] {
        font-weight: 700;
        color: #1f2937;
    }

    .metric-value .secondary[b-79x9zm04dd] {
        font-size: 13px;
        color: #6b7280;
    }

.numeric[b-79x9zm04dd] {
    text-align: right;
}

html[dir="rtl"] .numeric[b-79x9zm04dd] {
    text-align: left;
}

/* Score Display */
.score-display[b-79x9zm04dd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.score-bar[b-79x9zm04dd] {
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.score-fill[b-79x9zm04dd] {
    height: 100%;
    border-radius: 4px;
}

    .score-fill.excellent[b-79x9zm04dd] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .score-fill.good[b-79x9zm04dd] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .score-fill.average[b-79x9zm04dd] {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    }

    .score-fill.poor[b-79x9zm04dd] {
        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    }

.score-text[b-79x9zm04dd] {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
}

/* Table Actions */
.btn-table-action[b-79x9zm04dd] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}

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

/* Top Performers Grid */
.top-performers-grid[b-79x9zm04dd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 24px;
}

.performer-card[b-79x9zm04dd] {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .performer-card:hover[b-79x9zm04dd] {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

    .performer-card.rank-1[b-79x9zm04dd] {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(230, 184, 0, 0.1) 100%);
        border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .performer-card.rank-2[b-79x9zm04dd] {
        background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(168, 168, 168, 0.1) 100%);
        border: 1px solid rgba(192, 192, 192, 0.3);
    }

    .performer-card.rank-3[b-79x9zm04dd] {
        background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(179, 106, 44, 0.1) 100%);
        border: 1px solid rgba(205, 127, 50, 0.3);
    }

.performer-rank[b-79x9zm04dd] {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 14px;
}

.performer-card.rank-1 .performer-rank[b-79x9zm04dd] {
    color: #e6b800;
}

.performer-card.rank-2 .performer-rank[b-79x9zm04dd] {
    color: #a8a8a8;
}

.performer-card.rank-3 .performer-rank[b-79x9zm04dd] {
    color: #b36a2c;
}

.performer-info[b-79x9zm04dd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .performer-info h4[b-79x9zm04dd] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: #1f2937;
    }

.performer-metric[b-79x9zm04dd] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.performer-value[b-79x9zm04dd] {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.growth-indicator[b-79x9zm04dd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

    .growth-indicator.positive[b-79x9zm04dd] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .growth-indicator.negative[b-79x9zm04dd] {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

/* Chart Container */
.chart-container[b-79x9zm04dd] {
    padding: 24px;
    height: 300px;
}

/* Loading State */
.loading-modern[b-79x9zm04dd] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner-container[b-79x9zm04dd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner-modern[b-79x9zm04dd] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-79x9zm04dd 1s linear infinite;
}

.loading-text-modern[b-79x9zm04dd] {
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
}

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

/* No Data State */
.no-data-container[b-79x9zm04dd] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.no-data-content[b-79x9zm04dd] {
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .no-data-content i[b-79x9zm04dd] {
        font-size: 60px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
    }

    .no-data-content h3[b-79x9zm04dd] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #4c1d95;
    }

    .no-data-content p[b-79x9zm04dd] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 0;
    }

/* Unauthorized State */
.unauthorized-container[b-79x9zm04dd] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.unauthorized-content[b-79x9zm04dd] {
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-79x9zm04dd] {
        font-size: 60px;
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-79x9zm04dd] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #dc2626;
    }

    .unauthorized-content p[b-79x9zm04dd] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 20px;
    }

/* Dark Theme Support */
[data-theme="dark"] .agents-reports-page[b-79x9zm04dd] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agents-reports-page[b-79x9zm04dd]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-79x9zm04dd],
[data-theme="dark"] .filters-card[b-79x9zm04dd],
[data-theme="dark"] .summary-card[b-79x9zm04dd],
[data-theme="dark"] .report-section[b-79x9zm04dd],
[data-theme="dark"] .performer-card[b-79x9zm04dd],
[data-theme="dark"] .no-data-content[b-79x9zm04dd],
[data-theme="dark"] .unauthorized-content[b-79x9zm04dd] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-79x9zm04dd] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-79x9zm04dd] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-79x9zm04dd] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title-modern[b-79x9zm04dd],
[data-theme="dark"] .card-value[b-79x9zm04dd],
[data-theme="dark"] .performer-value[b-79x9zm04dd] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle-enhanced[b-79x9zm04dd],
[data-theme="dark"] .card-subtitle[b-79x9zm04dd],
[data-theme="dark"] .metric-value .secondary[b-79x9zm04dd],
[data-theme="dark"] .performer-metric[b-79x9zm04dd] {
    color: #9ca3af;
}

[data-theme="dark"] .filters-title[b-79x9zm04dd],
[data-theme="dark"] .section-title[b-79x9zm04dd],
[data-theme="dark"] .filter-label[b-79x9zm04dd],
[data-theme="dark"] .no-data-content h3[b-79x9zm04dd] {
    color: #e2e8f0;
}

[data-theme="dark"] .filter-select[b-79x9zm04dd],
[data-theme="dark"] .filter-input[b-79x9zm04dd] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-select:focus[b-79x9zm04dd],
    [data-theme="dark"] .filter-input:focus[b-79x9zm04dd] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .card-content h4[b-79x9zm04dd] {
    color: #e2e8f0;
}

[data-theme="dark"] .performance-table thead th[b-79x9zm04dd] {
    background: rgba(30, 41, 59, 0.95);
    color: #a78bfa;
}

[data-theme="dark"] .performance-table tbody tr:hover[b-79x9zm04dd],
[data-theme="dark"] .performance-table .top-performer[b-79x9zm04dd] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .quick-filter-btn[b-79x9zm04dd] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

    [data-theme="dark"] .quick-filter-btn:hover[b-79x9zm04dd] {
        background: rgba(102, 126, 234, 0.3);
    }

[data-theme="dark"] .metric-value .primary[b-79x9zm04dd],
[data-theme="dark"] .score-text[b-79x9zm04dd],
[data-theme="dark"] .performer-info h4[b-79x9zm04dd] {
    color: #e2e8f0;
}

[data-theme="dark"] .no-data-content i[b-79x9zm04dd] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .no-data-content p[b-79x9zm04dd] {
    color: #9ca3af;
}

[data-theme="dark"] .loading-text-modern[b-79x9zm04dd] {
    color: #a78bfa;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .summary-cards-grid[b-79x9zm04dd] {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-performers-grid[b-79x9zm04dd] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .page-header-enhanced[b-79x9zm04dd] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-79x9zm04dd] {
        align-self: flex-start;
        margin-top: 16px;
    }

    .top-performers-grid[b-79x9zm04dd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .agents-reports-page[b-79x9zm04dd] {
        padding: 16px;
    }

    .page-title-modern[b-79x9zm04dd] {
        font-size: 28px;
    }

    .title-icon[b-79x9zm04dd] {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .summary-cards-grid[b-79x9zm04dd] {
        grid-template-columns: 1fr;
    }

    .top-performers-grid[b-79x9zm04dd] {
        grid-template-columns: 1fr;
    }

    .filters-grid[b-79x9zm04dd] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-79x9zm04dd] {
        flex-direction: column;
        width: 100%;
    }

    .btn-apply-filter[b-79x9zm04dd],
    .btn-reset-filter[b-79x9zm04dd] {
        width: 100%;
        justify-content: center;
    }

    .quick-filters[b-79x9zm04dd] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 16px;
    }

    .card-icon[b-79x9zm04dd] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .card-value[b-79x9zm04dd] {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    .page-header-enhanced[b-79x9zm04dd] {
        padding: 16px;
    }

    .breadcrumb-modern[b-79x9zm04dd] {
        font-size: 12px;
    }

    .page-title-modern[b-79x9zm04dd] {
        font-size: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-subtitle-enhanced[b-79x9zm04dd] {
        font-size: 16px;
    }

    .summary-card[b-79x9zm04dd] {
        padding: 20px;
    }

    .performer-value[b-79x9zm04dd] {
        font-size: 18px;
    }

    .performer-card[b-79x9zm04dd] {
        padding: 16px;
    }

    .performer-rank[b-79x9zm04dd] {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 8px;
    }
}

/* Print Styles */
@media print {
    .agents-reports-page[b-79x9zm04dd] {
        background: white !important;
        padding: 0;
    }

        .agents-reports-page[b-79x9zm04dd]::before {
            display: none;
        }

    .page-header-enhanced[b-79x9zm04dd] {
        box-shadow: none;
        background: none;
        border: none;
        margin-bottom: 20px;
    }

    .btn-action-secondary[b-79x9zm04dd],
    .filters-section[b-79x9zm04dd],
    .quick-filters[b-79x9zm04dd],
    .btn-table-action[b-79x9zm04dd] {
        display: none !important;
    }

    .summary-card[b-79x9zm04dd],
    .report-section[b-79x9zm04dd] {
        background: none;
        box-shadow: none;
        border: 1px solid #e2e8f0;
        break-inside: avoid;
    }

    .chart-container[b-79x9zm04dd] {
        height: 250px;
    }

    .performance-table th[b-79x9zm04dd] {
        background: #f8fafc !important;
        color: black !important;
    }
}

/* Focus States for Accessibility */
*:focus[b-79x9zm04dd] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-79x9zm04dd] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/AgentTracking.razor.rz.scp.css */

/* ===================================
   Agent Tracking - Modern Professional CSS
   ���� ��������� - ��� ������� ����
   =================================== */

/* Page Container & Layout */
.agent-tracking-container[b-urz2h53rdt] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-tracking-container[b-urz2h53rdt]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-tracking-container > *[b-urz2h53rdt] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.tracking-header[b-urz2h53rdt] {
    margin-bottom: 32px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-urz2h53rdt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.header-title h1[b-urz2h53rdt] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-title .subtitle[b-urz2h53rdt] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* View Mode Controls */
.view-controls[b-urz2h53rdt] {
    display: flex;
    align-items: center;
}

.btn-group-modern[b-urz2h53rdt] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.btn-modern[b-urz2h53rdt] {
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

    .btn-modern:hover[b-urz2h53rdt] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .btn-modern.active[b-urz2h53rdt] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

/* Connection Status */
.connection-status[b-urz2h53rdt] {
    margin-top: 16px;
}

.status-card[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    animation: slideDown-b-urz2h53rdt 0.3s ease;
}

.status-connecting[b-urz2h53rdt] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
}

.status-error[b-urz2h53rdt] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.status-icon[b-urz2h53rdt] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 24px;
}

.status-connecting .status-icon[b-urz2h53rdt] {
    color: #667eea;
}

.status-error .status-icon[b-urz2h53rdt] {
    color: #ef4444;
}

.status-text[b-urz2h53rdt] {
    flex: 1;
}

    .status-text h6[b-urz2h53rdt] {
        margin: 0 0 4px 0;
        font-size: 18px;
        font-weight: 600;
    }

    .status-text small[b-urz2h53rdt] {
        color: #6b7280;
    }

.retry-btn[b-urz2h53rdt] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

    .retry-btn:hover[b-urz2h53rdt] {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
    }

    .retry-btn:disabled[b-urz2h53rdt] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.spinner[b-urz2h53rdt], .btn-spinner[b-urz2h53rdt] {
    width: 20px;
    height: 20px;
    border: 3px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-urz2h53rdt 1s linear infinite;
}

.spinner[b-urz2h53rdt] {
    width: 32px;
    height: 32px;
    border-width: 4px;
}

/* Main Content Layout */
.tracking-content[b-urz2h53rdt] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
}

/* Map Section */
.map-section[b-urz2h53rdt] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    grid-column: 1;
}

    .map-section.expanded[b-urz2h53rdt] {
        grid-column: 1 / -1;
    }

.map-container[b-urz2h53rdt] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.map-header[b-urz2h53rdt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.map-title[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
}

    .map-title i[b-urz2h53rdt] {
        color: #667eea;
    }

.map-controls[b-urz2h53rdt] {
    display: flex;
    gap: 8px;
}

.map-control-btn[b-urz2h53rdt] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

    .map-control-btn:hover[b-urz2h53rdt] {
        background: rgba(102, 126, 234, 0.2);
        color: #4c1d95;
    }

.map-wrapper[b-urz2h53rdt] {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.tracking-map[b-urz2h53rdt] {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.map-overlay-controls[b-urz2h53rdt] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1000;
}

.overlay-btn[b-urz2h53rdt] {
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
}

    .overlay-btn:hover[b-urz2h53rdt] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

/* Side Panel */
.side-panel[b-urz2h53rdt] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .side-panel.hidden[b-urz2h53rdt] {
        display: none;
    }

/* Panel Cards */
.panel-card[b-urz2h53rdt] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
}

.panel-header[b-urz2h53rdt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .panel-header.danger[b-urz2h53rdt] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
        border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    }

.panel-title[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #4c1d95;
}

.panel-header.danger .panel-title[b-urz2h53rdt] {
    color: #b91c1c;
}

.panel-title i[b-urz2h53rdt] {
    color: #667eea;
}

.panel-header.danger .panel-title i[b-urz2h53rdt] {
    color: #ef4444;
}

.panel-badge[b-urz2h53rdt] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    color: #4c1d95;
    border-radius: 12px;
    padding: 6px 12px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

    .panel-badge.danger[b-urz2h53rdt] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
        color: #b91c1c;
    }

    .panel-badge .online-count[b-urz2h53rdt] {
        font-size: 18px;
        font-weight: 700;
    }

    .panel-badge small[b-urz2h53rdt] {
        font-size: 12px;
        opacity: 0.8;
    }

.panel-content[b-urz2h53rdt] {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    max-height: 500px;
}

/* Agent List */
.agents-list[b-urz2h53rdt] {
    padding: 12px;
    overflow-y: auto;
    max-height: 500px;
}

.agent-card[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid transparent;
}

    .agent-card:hover[b-urz2h53rdt] {
        background: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        border-color: rgba(102, 126, 234, 0.3);
    }

    .agent-card.selected[b-urz2h53rdt] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border: 1px solid rgba(102, 126, 234, 0.5);
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
    }

    .agent-card.offline[b-urz2h53rdt] {
        opacity: 0.7;
    }

.agent-avatar[b-urz2h53rdt] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    position: relative;
}

.status-indicator[b-urz2h53rdt] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border: 2px solid white;
}

    .status-indicator.online[b-urz2h53rdt] {
        background: #10b981;
    }

    .status-indicator.offline[b-urz2h53rdt] {
        background: #6b7280;
    }

.agent-info[b-urz2h53rdt] {
    flex: 1;
    min-width: 0;
}

.agent-name[b-urz2h53rdt] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-status[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-text[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

    .status-text.online[b-urz2h53rdt] {
        color: #10b981;
    }

    .status-text.offline[b-urz2h53rdt] {
        color: #6b7280;
    }

    .status-text i[b-urz2h53rdt] {
        font-size: 8px;
    }

.speed-info[b-urz2h53rdt], .last-seen[b-urz2h53rdt] {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.agent-actions[b-urz2h53rdt] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.activity-badge[b-urz2h53rdt] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

    .activity-badge.moving[b-urz2h53rdt] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .activity-badge.stationary[b-urz2h53rdt] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

.battery-indicator[b-urz2h53rdt] {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.empty-state[b-urz2h53rdt] {
    padding: 60px 0;
    text-align: center;
    color: #6b7280;
}

    .empty-state i[b-urz2h53rdt] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

/* History Panel */
.date-range[b-urz2h53rdt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.form-label[b-urz2h53rdt] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
}

.form-select[b-urz2h53rdt], .form-control[b-urz2h53rdt] {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    transition: all 0.3s;
}

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

.history-info[b-urz2h53rdt] {
    margin-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    padding-top: 20px;
}

.info-card[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(102, 126, 234, 0.1);
    color: #4c1d95;
    margin-bottom: 16px;
}

    .info-card i[b-urz2h53rdt] {
        color: #667eea;
    }

.playback-controls[b-urz2h53rdt] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    padding: 16px;
}

.control-buttons[b-urz2h53rdt] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.control-btn[b-urz2h53rdt] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

    .control-btn:hover:not(:disabled)[b-urz2h53rdt] {
        transform: scale(1.1);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

.speed-control[b-urz2h53rdt] {
    text-align: center;
}

    .speed-control label[b-urz2h53rdt] {
        display: block;
        margin-bottom: 8px;
        color: #4c1d95;
        font-weight: 500;
    }

.speed-slider[b-urz2h53rdt] {
    width: 100%;
    height: 6px;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 3px;
    appearance: none;
    outline: none;
}

    .speed-slider[b-urz2h53rdt]::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        cursor: pointer;
    }

/* Statistics Panel */
.statistics-grid[b-urz2h53rdt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.stat-card[b-urz2h53rdt] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .stat-card:hover[b-urz2h53rdt] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

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

.stat-icon[b-urz2h53rdt] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

    .stat-icon.distance[b-urz2h53rdt] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.time[b-urz2h53rdt] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .stat-icon.speed[b-urz2h53rdt] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .stat-icon.max-speed[b-urz2h53rdt] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

.stat-content[b-urz2h53rdt] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.stat-value[b-urz2h53rdt] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-urz2h53rdt] {
    font-size: 14px;
    color: #6b7280;
}

.work-time[b-urz2h53rdt] {
    width: 100%;
    padding: 16px;
}

    .work-time h6[b-urz2h53rdt] {
        margin: 0 0 12px 0;
        font-size: 16px;
        color: #4c1d95;
    }

.time-range[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 18px;
    color: #1f2937;
}

.no-data[b-urz2h53rdt] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px;
    color: #6b7280;
}

    .no-data i[b-urz2h53rdt] {
        font-size: 36px;
        color: #ef4444;
        margin-bottom: 12px;
    }

/* SOS Alerts */
.sos-alerts[b-urz2h53rdt] {
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.sos-alert[b-urz2h53rdt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    border-left: 4px solid #ef4444;
    animation: pulse-b-urz2h53rdt 2s infinite;
}

.sos-icon[b-urz2h53rdt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.sos-content[b-urz2h53rdt] {
    flex: 1;
    min-width: 0;
}

    .sos-content h6[b-urz2h53rdt] {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

    .sos-content p[b-urz2h53rdt] {
        margin: 0 0 4px 0;
        color: #4c1d95;
    }

    .sos-content small[b-urz2h53rdt] {
        color: #6b7280;
        font-size: 12px;
    }

.sos-action[b-urz2h53rdt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

    .sos-action:hover[b-urz2h53rdt] {
        background: #ef4444;
        color: white;
        transform: scale(1.1);
    }

/* Gradient Buttons */
.btn-gradient-primary[b-urz2h53rdt] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-gradient-primary:hover:not(:disabled)[b-urz2h53rdt] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .btn-gradient-primary:disabled[b-urz2h53rdt] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-gradient-success[b-urz2h53rdt] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-gradient-success:hover:not(:disabled)[b-urz2h53rdt] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

    .btn-gradient-success:disabled[b-urz2h53rdt] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.w-100[b-urz2h53rdt] {
    width: 100%;
}

/* Unauthorized Page */
.unauthorized-container[b-urz2h53rdt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
    padding: 0 24px;
}

    .unauthorized-container i[b-urz2h53rdt] {
        font-size: 64px;
        margin-bottom: 24px;
        color: #ef4444;
    }

    .unauthorized-container h2[b-urz2h53rdt] {
        font-size: 32px;
        margin-bottom: 16px;
        color: #1f2937;
    }

    .unauthorized-container p[b-urz2h53rdt] {
        font-size: 18px;
        margin-bottom: 32px;
        color: #6b7280;
    }

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

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

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

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

    50% {
        opacity: 0.8;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .agent-tracking-container[b-urz2h53rdt] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-tracking-container[b-urz2h53rdt]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .tracking-header[b-urz2h53rdt],
[data-theme="dark"] .map-container[b-urz2h53rdt],
[data-theme="dark"] .panel-card[b-urz2h53rdt] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .header-title .subtitle[b-urz2h53rdt],
[data-theme="dark"] .status-text small[b-urz2h53rdt],
[data-theme="dark"] .speed-info[b-urz2h53rdt],
[data-theme="dark"] .last-seen[b-urz2h53rdt],
[data-theme="dark"] .battery-indicator[b-urz2h53rdt],
[data-theme="dark"] .stat-label[b-urz2h53rdt],
[data-theme="dark"] .sos-content small[b-urz2h53rdt] {
    color: #94a3b8;
}

[data-theme="dark"] .agent-card[b-urz2h53rdt] {
    background: rgba(30, 41, 59, 0.5);
}

    [data-theme="dark"] .agent-card:hover[b-urz2h53rdt] {
        background: rgba(30, 41, 59, 0.8);
    }

    [data-theme="dark"] .agent-card.selected[b-urz2h53rdt] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        border: 1px solid rgba(102, 126, 234, 0.3);
    }

[data-theme="dark"] .agent-name[b-urz2h53rdt],
[data-theme="dark"] .unauthorized-container h2[b-urz2h53rdt] {
    color: #f1f5f9;
}

[data-theme="dark"] .panel-title[b-urz2h53rdt],
[data-theme="dark"] .form-label[b-urz2h53rdt],
[data-theme="dark"] .work-time h6[b-urz2h53rdt] {
    color: #e2e8f0;
}

[data-theme="dark"] .map-header[b-urz2h53rdt],
[data-theme="dark"] .panel-header[b-urz2h53rdt] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-select[b-urz2h53rdt],
[data-theme="dark"] .form-control[b-urz2h53rdt] {
    background-color: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-select:focus[b-urz2h53rdt],
    [data-theme="dark"] .form-control:focus[b-urz2h53rdt] {
        border-color: #818cf8;
        box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
    }

[data-theme="dark"] .sos-alert[b-urz2h53rdt],
[data-theme="dark"] .stat-card[b-urz2h53rdt] {
    background: rgba(30, 41, 59, 0.7);
}

[data-theme="dark"] .time-range[b-urz2h53rdt] {
    color: #e2e8f0;
}

/* Responsive Design */
@media (max-width: 992px) {
    .tracking-content[b-urz2h53rdt] {
        grid-template-columns: 1fr;
    }

    .map-section[b-urz2h53rdt] {
        grid-column: 1;
    }

    .tracking-map[b-urz2h53rdt] {
        height: 450px;
    }
}

@media (max-width: 768px) {
    .header-content[b-urz2h53rdt] {
        flex-direction: column;
        align-items: stretch;
    }

    .view-controls[b-urz2h53rdt] {
        justify-content: center;
    }

    .btn-group-modern[b-urz2h53rdt] {
        width: 100%;
    }

    .btn-modern[b-urz2h53rdt] {
        flex: 1;
        justify-content: center;
    }

    .agent-tracking-container[b-urz2h53rdt] {
        padding: 16px;
    }

    .tracking-header[b-urz2h53rdt] {
        padding: 16px;
        margin-bottom: 16px;
    }

    .header-title h1[b-urz2h53rdt] {
        font-size: 28px;
        text-align: center;
        justify-content: center;
    }

    .header-title .subtitle[b-urz2h53rdt] {
        text-align: center;
    }

    .statistics-grid[b-urz2h53rdt] {
        grid-template-columns: 1fr;
    }

    .date-range[b-urz2h53rdt] {
        grid-template-columns: 1fr;
    }

    .tracking-map[b-urz2h53rdt] {
        height: 350px;
    }

    .side-panel[b-urz2h53rdt] {
        margin-top: 16px;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/Component/AgentCollectionReport.razor.rz.scp.css */

/* _content/Sahelly/Components/Pages/Merchant/Component/AgentCommissionReport.razor.rz.scp.css */

/* _content/Sahelly/Components/Pages/Merchant/Component/AgentComparisonReport.razor.rz.scp.css */

/* _content/Sahelly/Components/Pages/Merchant/Component/AgentInventory.razor.rz.scp.css */

/* Agent Inventory Component - Modern Professional Style */

.agent-inventory-container[b-lbo1p1r4bx] {
    padding: 20px;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.component-loading[b-lbo1p1r4bx] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Agent Selection Section */
.agent-selection-section[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-label[b-lbo1p1r4bx] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
}

.form-control[b-lbo1p1r4bx] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-lbo1p1r4bx] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.agent-select[b-lbo1p1r4bx] {
    font-weight: 500;
}

/* Agent Summary Cards */
.agent-summary-cards[b-lbo1p1r4bx] {
    display: flex;
    gap: 16px;
    height: 100%;
}

.mini-card[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

    .mini-card i[b-lbo1p1r4bx] {
        font-size: 24px;
        color: #667eea;
        width: 40px;
        text-align: center;
    }

.card-content[b-lbo1p1r4bx] {
    display: flex;
    flex-direction: column;
}

.value[b-lbo1p1r4bx] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.label[b-lbo1p1r4bx] {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Agents Overview */
.agents-overview[b-lbo1p1r4bx] {
    margin-bottom: 24px;
}

.section-title[b-lbo1p1r4bx] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title i[b-lbo1p1r4bx] {
        color: #667eea;
    }

.agents-grid[b-lbo1p1r4bx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.agent-card[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.agent-header[b-lbo1p1r4bx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.agent-info[b-lbo1p1r4bx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar[b-lbo1p1r4bx] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.agent-details[b-lbo1p1r4bx] {
    display: flex;
    flex-direction: column;
}

    .agent-details h5[b-lbo1p1r4bx] {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .agent-details small[b-lbo1p1r4bx] {
        color: #667eea;
        font-size: 12px;
        font-weight: 500;
    }

.btn-view[b-lbo1p1r4bx] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .btn-view:hover[b-lbo1p1r4bx] {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

.agent-stats[b-lbo1p1r4bx] {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.stat-item[b-lbo1p1r4bx] {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value[b-lbo1p1r4bx] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label[b-lbo1p1r4bx] {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.agent-products-preview[b-lbo1p1r4bx] {
    padding: 16px;
}

.preview-title[b-lbo1p1r4bx] {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
}

.preview-list[b-lbo1p1r4bx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-chip[b-lbo1p1r4bx] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Agent Detailed View */
.agent-detailed-view[b-lbo1p1r4bx] {
    margin-top: 16px;
}

.agent-info-header[b-lbo1p1r4bx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.agent-profile[b-lbo1p1r4bx] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.agent-avatar-large[b-lbo1p1r4bx] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.agent-info[b-lbo1p1r4bx] {
    display: flex;
    flex-direction: column;
}

    .agent-info h4[b-lbo1p1r4bx] {
        margin: 0 0 4px 0;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .agent-info p[b-lbo1p1r4bx] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 14px;
    }

.agent-actions[b-lbo1p1r4bx] {
    display: flex;
    gap: 12px;
}

.btn-transfer[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-transfer:hover[b-lbo1p1r4bx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-return[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-return:hover[b-lbo1p1r4bx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Agent Inventory Table */
.agent-inventory-table-wrapper[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.agent-inventory-table[b-lbo1p1r4bx] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .agent-inventory-table th[b-lbo1p1r4bx] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .agent-inventory-table td[b-lbo1p1r4bx] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .agent-inventory-table tbody tr[b-lbo1p1r4bx] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }

        .agent-inventory-table tbody tr:hover[b-lbo1p1r4bx] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

.product-info[b-lbo1p1r4bx] {
    display: flex;
    flex-direction: column;
}

.product-name[b-lbo1p1r4bx] {
    font-weight: 600;
    color: var(--text-primary);
}

.quantity-badge[b-lbo1p1r4bx] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.available-badge[b-lbo1p1r4bx] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.reserved-badge[b-lbo1p1r4bx] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

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

.btn-action[b-lbo1p1r4bx] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    margin: 0 2px;
}

    .btn-action:hover[b-lbo1p1r4bx] {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

.no-data[b-lbo1p1r4bx] {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-tertiary);
}

    .no-data i[b-lbo1p1r4bx] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-data p[b-lbo1p1r4bx] {
        font-size: 16px;
        font-weight: 500;
    }

/* Mobile View */
.agent-inventory-mobile-view[b-lbo1p1r4bx] {
    display: none;
}

.agent-inventory-card[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

    .card-header h5[b-lbo1p1r4bx] {
        margin: 0 0 4px 0;
        font-size: 16px;
        color: var(--text-primary);
    }

    .card-header small[b-lbo1p1r4bx] {
        color: var(--text-tertiary);
        font-size: 12px;
    }

.card-body[b-lbo1p1r4bx] {
    padding: 16px;
}

.info-grid[b-lbo1p1r4bx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-item[b-lbo1p1r4bx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .info-item .label[b-lbo1p1r4bx] {
        color: var(--text-secondary);
        font-size: 12px;
    }

    .info-item .value[b-lbo1p1r4bx] {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 16px;
    }

.card-actions[b-lbo1p1r4bx] {
    display: flex;
    padding: 16px;
    gap: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

    .card-actions .btn[b-lbo1p1r4bx] {
        flex: 1;
    }

/* Responsive */
@media (max-width: 992px) {
    .agent-inventory-table-wrapper[b-lbo1p1r4bx] {
        display: none;
    }

    .agent-inventory-mobile-view[b-lbo1p1r4bx] {
        display: block;
    }

    .agent-info-header[b-lbo1p1r4bx] {
        flex-direction: column;
        gap: 16px;
    }

    .agent-actions[b-lbo1p1r4bx] {
        width: 100%;
    }

        .agent-actions .btn[b-lbo1p1r4bx] {
            flex: 1;
        }
}

@media (max-width: 768px) {
    .agent-selection-section .agent-summary-cards[b-lbo1p1r4bx] {
        flex-direction: column;
    }

    .agent-selection-section .col-md-8[b-lbo1p1r4bx] {
        margin-top: 16px;
    }

    .agents-grid[b-lbo1p1r4bx] {
        grid-template-columns: 1fr;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .agent-inventory-container[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
}

[data-theme="dark"] .agent-selection-section[b-lbo1p1r4bx],
[data-theme="dark"] .mini-card[b-lbo1p1r4bx],
[data-theme="dark"] .agent-card[b-lbo1p1r4bx],
[data-theme="dark"] .agent-info-header[b-lbo1p1r4bx],
[data-theme="dark"] .agent-inventory-table-wrapper[b-lbo1p1r4bx],
[data-theme="dark"] .agent-inventory-card[b-lbo1p1r4bx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .agent-inventory-table tbody tr[b-lbo1p1r4bx] {
    background: #1e293b;
}

    [data-theme="dark"] .agent-inventory-table tbody tr:hover[b-lbo1p1r4bx] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .form-control[b-lbo1p1r4bx] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-lbo1p1r4bx] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .form-label[b-lbo1p1r4bx] {
    color: #e2e8f0;
}

[data-theme="dark"] .section-title[b-lbo1p1r4bx] {
    color: #e2e8f0;
}

[data-theme="dark"] .agent-details h5[b-lbo1p1r4bx],
[data-theme="dark"] .agent-info h4[b-lbo1p1r4bx],
[data-theme="dark"] .card-header h5[b-lbo1p1r4bx],
[data-theme="dark"] .product-name[b-lbo1p1r4bx],
[data-theme="dark"] .value[b-lbo1p1r4bx],
[data-theme="dark"] .stat-value[b-lbo1p1r4bx],
[data-theme="dark"] .info-item .value[b-lbo1p1r4bx] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-chip[b-lbo1p1r4bx] {
    background: rgba(102, 126, 234, 0.2);
}
/* _content/Sahelly/Components/Pages/Merchant/Component/AgentInventoryManager.razor.rz.scp.css */

/* Agent Inventory Manager - Modern Professional Design */
.agent-inventory-manager[b-g7lmzy7ufg] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agent-inventory-manager[b-g7lmzy7ufg]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agent-inventory-manager > *[b-g7lmzy7ufg] {
        position: relative;
        z-index: 1;
    }

/* Section Header */
.section-header[b-g7lmzy7ufg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-info[b-g7lmzy7ufg] {
    flex: 1;
}

    .header-info h3[b-g7lmzy7ufg] {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .header-info h3 i[b-g7lmzy7ufg] {
            font-size: 24px;
        }

    .header-info p[b-g7lmzy7ufg] {
        font-size: 16px;
        color: #6b7280;
        margin: 0;
    }

.header-actions[b-g7lmzy7ufg] {
    display: flex;
    gap: 16px;
}

/* Modern Action Buttons */
.btn-action-modern[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action-modern:hover[b-g7lmzy7ufg] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .btn-action-modern i[b-g7lmzy7ufg] {
        font-size: 16px;
    }

/* Search and Filter Bar */
.search-filter-bar[b-g7lmzy7ufg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.search-box[b-g7lmzy7ufg] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

    .search-box i[b-g7lmzy7ufg] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
    }

    .search-box input[b-g7lmzy7ufg] {
        width: 100%;
        padding: 12px 16px 12px 44px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .search-box input:focus[b-g7lmzy7ufg] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .search-box input[b-g7lmzy7ufg]::placeholder {
            color: #9ca3af;
        }

.filter-options[b-g7lmzy7ufg] {
    display: flex;
    gap: 12px;
}

.filter-select[b-g7lmzy7ufg] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    min-width: 180px;
}

    .filter-select:focus[b-g7lmzy7ufg] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Loading Section */
.loading-section[b-g7lmzy7ufg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner-modern[b-g7lmzy7ufg] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-g7lmzy7ufg 0.8s linear infinite;
    margin-bottom: 24px;
}

.loading-section p[b-g7lmzy7ufg] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

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

/* Agents Inventory Grid */
.agents-inventory-grid[b-g7lmzy7ufg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Agent Inventory Card */
.agent-inventory-card[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .agent-inventory-card:hover[b-g7lmzy7ufg] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

/* Agent Header */
.agent-header[b-g7lmzy7ufg] {
    padding: 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.agent-info[b-g7lmzy7ufg] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.agent-avatar[b-g7lmzy7ufg] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
}

    .agent-avatar:hover[b-g7lmzy7ufg] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

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

.agent-details[b-g7lmzy7ufg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .agent-details h4[b-g7lmzy7ufg] {
        font-weight: 700;
        font-size: 18px;
        color: #1f2937;
        margin: 0;
    }

    .agent-details p[b-g7lmzy7ufg] {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
    }

.agent-type[b-g7lmzy7ufg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    align-self: flex-start;
}

.badge-info[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-primary[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.15) 100%);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.badge-success[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-secondary[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.15) 100%);
    color: #4b5563;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Agent Stats */
.agent-stats[b-g7lmzy7ufg] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.stat[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
}

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

.stat-value[b-g7lmzy7ufg] {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
    display: block;
}

.stat-label[b-g7lmzy7ufg] {
    font-size: 12px;
    color: #6b7280;
    display: block;
    margin-top: 4px;
}

/* Agent Inventory Items */
.agent-inventory-items[b-g7lmzy7ufg] {
    padding: 20px 24px;
}

.items-header[b-g7lmzy7ufg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .items-header h5[b-g7lmzy7ufg] {
        font-size: 16px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
    }

.btn-link[b-g7lmzy7ufg] {
    background: none;
    border: none;
    color: #667eea;
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s;
}

    .btn-link:hover[b-g7lmzy7ufg] {
        background: rgba(102, 126, 234, 0.1);
        color: #4f46e5;
    }

.items-list[b-g7lmzy7ufg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Inventory Item */
.inventory-item[b-g7lmzy7ufg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s;
}

    .inventory-item:hover[b-g7lmzy7ufg] {
        transform: translateX(5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border-color: #667eea;
    }

.item-image[b-g7lmzy7ufg] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    font-size: 20px;
}

    .item-image img[b-g7lmzy7ufg] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.item-info[b-g7lmzy7ufg] {
    flex: 1;
}

    .item-info h6[b-g7lmzy7ufg] {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 4px 0;
    }

    .item-info p[b-g7lmzy7ufg] {
        font-size: 12px;
        color: #6b7280;
        margin: 0;
    }

.item-quantity[b-g7lmzy7ufg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
}

.quantity[b-g7lmzy7ufg] {
    font-size: 16px;
    font-weight: 700;
    color: #4c1d95;
}

.unit[b-g7lmzy7ufg] {
    font-size: 11px;
    color: #6b7280;
}

.item-actions[b-g7lmzy7ufg] {
    display: flex;
    gap: 8px;
}

.btn-icon-small[b-g7lmzy7ufg] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-icon-small:hover[b-g7lmzy7ufg] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

/* Empty Inventory */
.empty-inventory[b-g7lmzy7ufg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: #9ca3af;
    text-align: center;
}

    .empty-inventory i[b-g7lmzy7ufg] {
        font-size: 40px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-inventory p[b-g7lmzy7ufg] {
        font-size: 16px;
        margin: 0;
    }

/* Recent Movements */
.recent-movements[b-g7lmzy7ufg] {
    padding: 20px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
}

    .recent-movements h5[b-g7lmzy7ufg] {
        font-size: 16px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0 0 16px 0;
    }

.movements-list[b-g7lmzy7ufg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.movement-item[b-g7lmzy7ufg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #4b5563;
}

    .movement-item i[b-g7lmzy7ufg] {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
    }

.text-info[b-g7lmzy7ufg] {
    color: #3b82f6 !important;
}

.text-warning[b-g7lmzy7ufg] {
    color: #f59e0b !important;
}

.text-success[b-g7lmzy7ufg] {
    color: #10b981 !important;
}

.text-primary[b-g7lmzy7ufg] {
    color: #6366f1 !important;
}

.text-secondary[b-g7lmzy7ufg] {
    color: #6b7280 !important;
}

.movement-desc[b-g7lmzy7ufg] {
    flex: 1;
}

    .movement-desc .quantity[b-g7lmzy7ufg] {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
    }

.movement-date[b-g7lmzy7ufg] {
    font-size: 12px;
    color: #9ca3af;
}

/* Empty State */
.empty-state[b-g7lmzy7ufg] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-g7lmzy7ufg] {
        font-size: 60px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h4[b-g7lmzy7ufg] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-g7lmzy7ufg] {
        font-size: 16px;
        color: #6b7280;
        max-width: 600px;
        margin: 0 auto;
    }

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

@media (max-width: 768px) {
    .section-header[b-g7lmzy7ufg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }

    .header-actions[b-g7lmzy7ufg] {
        width: 100%;
    }

    .btn-action-modern[b-g7lmzy7ufg] {
        flex: 1;
        justify-content: center;
    }

    .agents-inventory-grid[b-g7lmzy7ufg] {
        grid-template-columns: 1fr;
    }

    .search-filter-bar[b-g7lmzy7ufg] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .search-box[b-g7lmzy7ufg] {
        max-width: none;
    }

    .agent-inventory-card[b-g7lmzy7ufg] {
        margin: 0 -8px;
    }

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

    .agent-header[b-g7lmzy7ufg] {
        padding: 16px;
    }

    .agent-inventory-items[b-g7lmzy7ufg],
    .recent-movements[b-g7lmzy7ufg] {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .agent-info[b-g7lmzy7ufg] {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .agent-avatar[b-g7lmzy7ufg] {
        margin: 0 auto 12px;
    }

    .agent-details[b-g7lmzy7ufg] {
        width: 100%;
        align-items: center;
    }

    .inventory-item[b-g7lmzy7ufg] {
        flex-wrap: wrap;
    }

    .item-image[b-g7lmzy7ufg] {
        width: 40px;
        height: 40px;
    }

    .item-actions[b-g7lmzy7ufg] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .agent-inventory-manager[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agent-inventory-manager[b-g7lmzy7ufg]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .section-header[b-g7lmzy7ufg],
[data-theme="dark"] .search-filter-bar[b-g7lmzy7ufg],
[data-theme="dark"] .agent-inventory-card[b-g7lmzy7ufg],
[data-theme="dark"] .loading-section[b-g7lmzy7ufg],
[data-theme="dark"] .empty-state[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .header-info h3[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .header-info p[b-g7lmzy7ufg],
[data-theme="dark"] .empty-inventory p[b-g7lmzy7ufg],
[data-theme="dark"] .empty-state p[b-g7lmzy7ufg],
[data-theme="dark"] .loading-section p[b-g7lmzy7ufg] {
    color: #9ca3af;
}

[data-theme="dark"] .agent-header[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .agent-details h4[b-g7lmzy7ufg],
[data-theme="dark"] .item-info h6[b-g7lmzy7ufg] {
    color: #e2e8f0;
}

[data-theme="dark"] .agent-details p[b-g7lmzy7ufg],
[data-theme="dark"] .item-info p[b-g7lmzy7ufg],
[data-theme="dark"] .stat-label[b-g7lmzy7ufg],
[data-theme="dark"] .movement-desc[b-g7lmzy7ufg],
[data-theme="dark"] .unit[b-g7lmzy7ufg] {
    color: #9ca3af;
}

[data-theme="dark"] .empty-state h4[b-g7lmzy7ufg],
[data-theme="dark"] .items-header h5[b-g7lmzy7ufg],
[data-theme="dark"] .recent-movements h5[b-g7lmzy7ufg] {
    color: #e2e8f0;
}

[data-theme="dark"] .search-box input[b-g7lmzy7ufg],
[data-theme="dark"] .filter-select[b-g7lmzy7ufg] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-g7lmzy7ufg],
    [data-theme="dark"] .filter-select:focus[b-g7lmzy7ufg] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .empty-state i[b-g7lmzy7ufg] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .inventory-item[b-g7lmzy7ufg] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat[b-g7lmzy7ufg] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-value[b-g7lmzy7ufg] {
    color: #a78bfa;
}

[data-theme="dark"] .movement-date[b-g7lmzy7ufg] {
    color: #64748b;
}

[data-theme="dark"] .btn-icon-small[b-g7lmzy7ufg] {
    background: rgba(71, 85, 105, 0.3);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-icon-small:hover[b-g7lmzy7ufg] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .recent-movements[b-g7lmzy7ufg] {
    background: rgba(71, 85, 105, 0.1);
    border-top: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .movement-item i[b-g7lmzy7ufg] {
    background: rgba(71, 85, 105, 0.3);
}
/* _content/Sahelly/Components/Pages/Merchant/Component/AgentInventoryReportView.razor.rz.scp.css */
/* Inventory Report View Styles */
.inventory-report-view[b-6tcktxih68] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Report Header */
.report-header[b-6tcktxih68] {
    margin-bottom: 32px;
}

.report-title-section[b-6tcktxih68] {
    text-align: center;
    margin-bottom: 24px;
}

.report-title[b-6tcktxih68] {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 8px 0;
}

    .report-title i[b-6tcktxih68] {
        color: #667eea;
    }

.report-date[b-6tcktxih68] {
    font-size: 16px;
    color: #6b7280;
}

/* Summary Cards */
.report-summary[b-6tcktxih68] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.summary-card[b-6tcktxih68] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

    .summary-card:hover[b-6tcktxih68] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

.summary-icon[b-6tcktxih68] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
}

.summary-content h4[b-6tcktxih68] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 4px 0;
}

.summary-value[b-6tcktxih68] {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

/* Table Section */
.report-table-section[b-6tcktxih68] {
    margin-top: 32px;
}

.table-title[b-6tcktxih68] {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
}

.table-responsive[b-6tcktxih68] {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.report-table[b-6tcktxih68] {
    width: 100%;
    background: white;
    border-collapse: collapse;
}

    .report-table thead[b-6tcktxih68] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .report-table th[b-6tcktxih68] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        color: #4c1d95;
        border-bottom: 2px solid #e5e7eb;
        white-space: nowrap;
    }

    .report-table td[b-6tcktxih68] {
        padding: 16px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
    }

    .report-table tbody tr[b-6tcktxih68] {
        transition: all 0.2s;
    }

        .report-table tbody tr:hover[b-6tcktxih68] {
            background: rgba(102, 126, 234, 0.05);
        }

.text-center[b-6tcktxih68] {
    text-align: center;
}

.text-right[b-6tcktxih68] {
    text-align: left;
}

/* Row States */
.critical-row[b-6tcktxih68] {
    background: rgba(239, 68, 68, 0.05);
}

    .critical-row:hover[b-6tcktxih68] {
        background: rgba(239, 68, 68, 0.1) !important;
    }

.warning-row[b-6tcktxih68] {
    background: rgba(245, 158, 11, 0.05);
}

    .warning-row:hover[b-6tcktxih68] {
        background: rgba(245, 158, 11, 0.1) !important;
    }

/* Status Badge */
.status-badge[b-6tcktxih68] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

    .status-badge.critical[b-6tcktxih68] {
        background: #fee2e2;
        color: #dc2626;
    }

    .status-badge.low[b-6tcktxih68] {
        background: #fef3c7;
        color: #d97706;
    }

    .status-badge.normal[b-6tcktxih68] {
        background: #d1fae5;
        color: #059669;
    }

    .status-badge.overstocked[b-6tcktxih68] {
        background: #dbeafe;
        color: #2563eb;
    }

/* Alert Section */
.alert-section[b-6tcktxih68] {
    margin-top: 24px;
}

.alert[b-6tcktxih68] {
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

    .alert i[b-6tcktxih68] {
        font-size: 24px;
        margin-top: 2px;
    }

.alert-warning[b-6tcktxih68] {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #92400e;
}

    .alert-warning i[b-6tcktxih68] {
        color: #f59e0b;
    }

.alert-content h4[b-6tcktxih68] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.alert-content p[b-6tcktxih68] {
    margin: 0;
    font-size: 14px;
}

/* RTL Support */
[dir="rtl"] .report-table th[b-6tcktxih68],
[dir="rtl"] .report-table td[b-6tcktxih68] {
    text-align: right;
}

[dir="rtl"] .text-right[b-6tcktxih68] {
    text-align: right;
}

[dir="rtl"] .summary-card[b-6tcktxih68] {
    flex-direction: row-reverse;
}
/* _content/Sahelly/Components/Pages/Merchant/Component/CurrentInventory.razor.rz.scp.css */

/* Current Inventory Component - Modern Professional Style */

.current-inventory-container[b-mqgt9wma9s] {
    padding: 20px;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.component-loading[b-mqgt9wma9s] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Summary Cards */
.inventory-summary[b-mqgt9wma9s] {
    margin-bottom: 32px;
}

.summary-card[b-mqgt9wma9s] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-mqgt9wma9s]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-mqgt9wma9s] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

        .summary-card:hover[b-mqgt9wma9s]::before {
            opacity: 1;
        }

.card-icon[b-mqgt9wma9s] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-card.total .card-icon[b-mqgt9wma9s] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

.summary-card.value .card-icon[b-mqgt9wma9s] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.summary-card.warning .card-icon[b-mqgt9wma9s] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.summary-card.info .card-icon[b-mqgt9wma9s] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.card-content[b-mqgt9wma9s] {
    flex: 1;
}

.card-value[b-mqgt9wma9s] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.card-label[b-mqgt9wma9s] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
    font-weight: 500;
}

.card-change[b-mqgt9wma9s] {
    font-size: 13px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .card-change.positive[b-mqgt9wma9s] {
        color: #10b981;
    }

    .card-change.negative[b-mqgt9wma9s] {
        color: #ef4444;
    }

/* Inventory Controls */
.inventory-controls[b-mqgt9wma9s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.search-section[b-mqgt9wma9s] {
    flex: 1;
    min-width: 300px;
}

.search-input-wrapper[b-mqgt9wma9s] {
    position: relative;
}

    .search-input-wrapper i[b-mqgt9wma9s] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
    }

.search-input[b-mqgt9wma9s] {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: rgba(var(--primary-color-rgb), 0.05);
    transition: all 0.3s;
}

    .search-input:focus[b-mqgt9wma9s] {
        outline: none;
        border-color: var(--primary-color);
        background: white;
        box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1);
    }

.filter-section[b-mqgt9wma9s] {
    display: flex;
    gap: 12px;
}

.filter-select[b-mqgt9wma9s] {
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: rgba(var(--primary-color-rgb), 0.05);
    min-width: 200px;
    transition: all 0.3s;
}

    .filter-select:focus[b-mqgt9wma9s] {
        outline: none;
        border-color: var(--primary-color);
        background: white;
        box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1);
    }

/* Inventory Table */
.inventory-table-wrapper[b-mqgt9wma9s] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.inventory-table[b-mqgt9wma9s] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .inventory-table th[b-mqgt9wma9s] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .inventory-table td[b-mqgt9wma9s] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .inventory-table tbody tr[b-mqgt9wma9s] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }

        .inventory-table tbody tr:hover[b-mqgt9wma9s] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .inventory-table tbody tr.low-stock-row[b-mqgt9wma9s] {
            background-color: rgba(251, 191, 36, 0.1);
        }

        .inventory-table tbody tr.out-of-stock-row[b-mqgt9wma9s] {
            background-color: rgba(239, 68, 68, 0.1);
        }

        .inventory-table tbody tr:last-child td[b-mqgt9wma9s] {
            border-bottom: none;
        }

.product-info[b-mqgt9wma9s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-mqgt9wma9s] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.product-thumb-placeholder[b-mqgt9wma9s] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.product-name[b-mqgt9wma9s] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}

.category-badge[b-mqgt9wma9s] {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.quantity-badge[b-mqgt9wma9s] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.reserved-badge[b-mqgt9wma9s] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.available-badge[b-mqgt9wma9s] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

    .available-badge.danger[b-mqgt9wma9s] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.status-badge[b-mqgt9wma9s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

    .status-badge.in-stock[b-mqgt9wma9s] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .status-badge.low-stock[b-mqgt9wma9s] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .status-badge.out-of-stock[b-mqgt9wma9s] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    .status-badge.needs-reorder[b-mqgt9wma9s] {
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
        border: 1px solid rgba(99, 102, 241, 0.2);
    }

.btn-action[b-mqgt9wma9s] {
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-action:hover[b-mqgt9wma9s] {
        background: var(--primary-color);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(var(--primary-color-rgb), 0.3);
    }

.no-data[b-mqgt9wma9s] {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-tertiary);
}

    .no-data i[b-mqgt9wma9s] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-data p[b-mqgt9wma9s] {
        font-size: 16px;
        font-weight: 500;
    }

/* Mobile View */
.inventory-mobile-view[b-mqgt9wma9s] {
    display: none;
}

.inventory-card[b-mqgt9wma9s] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .inventory-card.low-stock[b-mqgt9wma9s] {
        border-left: 4px solid #f59e0b;
    }

    .inventory-card.out-of-stock[b-mqgt9wma9s] {
        border-left: 4px solid #ef4444;
    }

.card-header[b-mqgt9wma9s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.product-image[b-mqgt9wma9s] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
}

.product-image-placeholder[b-mqgt9wma9s] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 20px;
}

.product-details[b-mqgt9wma9s] {
    flex: 1;
    margin-left: 12px;
}

    .product-details h5[b-mqgt9wma9s] {
        margin: 0 0 4px 0;
        font-size: 16px;
    }

    .product-details small[b-mqgt9wma9s] {
        color: var(--text-tertiary);
        font-size: 12px;
    }

.card-body[b-mqgt9wma9s] {
    padding: 16px;
}

.info-row[b-mqgt9wma9s] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .info-row:last-child[b-mqgt9wma9s] {
        border-bottom: none;
    }

    .info-row .label[b-mqgt9wma9s] {
        color: var(--text-secondary);
        font-weight: 500;
    }

    .info-row .value[b-mqgt9wma9s] {
        font-weight: 600;
        color: var(--text-primary);
    }

.card-actions[b-mqgt9wma9s] {
    display: flex;
    padding: 16px;
    gap: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

    .card-actions .btn[b-mqgt9wma9s] {
        flex: 1;
    }

/* Responsive */
@media (max-width: 992px) {
    .inventory-table-wrapper[b-mqgt9wma9s] {
        display: none;
    }

    .inventory-mobile-view[b-mqgt9wma9s] {
        display: block;
    }
}

@media (max-width: 768px) {
    .inventory-controls[b-mqgt9wma9s] {
        flex-direction: column;
    }

    .search-section[b-mqgt9wma9s], .filter-section[b-mqgt9wma9s] {
        width: 100%;
    }

    .filter-section[b-mqgt9wma9s] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .summary-card[b-mqgt9wma9s] {
        padding: 16px;
    }

    .card-icon[b-mqgt9wma9s] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .card-value[b-mqgt9wma9s] {
        font-size: 24px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .current-inventory-container[b-mqgt9wma9s] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
}

[data-theme="dark"] .summary-card[b-mqgt9wma9s],
[data-theme="dark"] .inventory-table-wrapper[b-mqgt9wma9s],
[data-theme="dark"] .inventory-card[b-mqgt9wma9s] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .inventory-table tbody tr[b-mqgt9wma9s] {
    background: #1e293b;
}

    [data-theme="dark"] .inventory-table tbody tr:hover[b-mqgt9wma9s] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .search-input[b-mqgt9wma9s],
[data-theme="dark"] .filter-select[b-mqgt9wma9s] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-mqgt9wma9s],
    [data-theme="dark"] .filter-select:focus[b-mqgt9wma9s] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .product-thumb-placeholder[b-mqgt9wma9s],
[data-theme="dark"] .product-image-placeholder[b-mqgt9wma9s] {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    color: #94a3b8;
}

[data-theme="dark"] .inventory-table tbody tr.low-stock-row[b-mqgt9wma9s] {
    background-color: rgba(251, 191, 36, 0.15);
}

[data-theme="dark"] .inventory-table tbody tr.out-of-stock-row[b-mqgt9wma9s] {
    background-color: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .product-name[b-mqgt9wma9s] {
    color: #e2e8f0;
}
/* _content/Sahelly/Components/Pages/Merchant/Component/Expense.razor.rz.scp.css */
/* Expense Form - Modern Professional Style */
.expense-form-container[b-yfc6j323sv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .expense-form-container[b-yfc6j323sv] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.expense-form-container[b-yfc6j323sv]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: opacity 0.3s;
    opacity: 0;
}

.expense-form-container:hover[b-yfc6j323sv]::before {
    opacity: 1;
}

/* Form Groups */
.form-group[b-yfc6j323sv] {
    margin-bottom: 28px;
    position: relative;
}

/* Form Labels */
.form-label[b-yfc6j323sv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

    .form-label i[b-yfc6j323sv] {
        color: var(--primary-color);
        width: 16px;
        text-align: center;
    }

/* Required Field Indicator */
.required[b-yfc6j323sv] {
    color: var(--danger-color);
    margin-left: 4px;
}

/* Input Fields - Fix for Blazor InputText, InputSelect, InputNumber, etc. */
.form-input[b-yfc6j323sv],
.form-select[b-yfc6j323sv],
.form-textarea[b-yfc6j323sv],
input[type="text"][b-yfc6j323sv],
input[type="number"][b-yfc6j323sv],
input[type="date"][b-yfc6j323sv],
select[b-yfc6j323sv],
textarea[b-yfc6j323sv] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: var(--text-primary);
}

/* Target Blazor specific inputs */
[b-yfc6j323sv] input,
[b-yfc6j323sv] select,
[b-yfc6j323sv] textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: var(--text-primary);
}

[data-theme="dark"] .form-input[b-yfc6j323sv],
[data-theme="dark"] .form-select[b-yfc6j323sv],
[data-theme="dark"] .form-textarea[b-yfc6j323sv],
[data-theme="dark"] input[type="text"][b-yfc6j323sv],
[data-theme="dark"] input[type="number"][b-yfc6j323sv],
[data-theme="dark"] input[type="date"][b-yfc6j323sv],
[data-theme="dark"] select[b-yfc6j323sv],
[data-theme="dark"] textarea[b-yfc6j323sv] {
    background: rgba(71, 85, 105, 0.3);
    color: var(--text-light);
}

[data-theme="dark"][b-yfc6j323sv]  input,
[data-theme="dark"][b-yfc6j323sv]  select,
[data-theme="dark"][b-yfc6j323sv]  textarea {
    background: rgba(71, 85, 105, 0.3);
    color: var(--text-light);
}

.form-input:focus[b-yfc6j323sv],
.form-select:focus[b-yfc6j323sv],
.form-textarea:focus[b-yfc6j323sv],
input[type="text"]:focus[b-yfc6j323sv],
input[type="number"]:focus[b-yfc6j323sv],
input[type="date"]:focus[b-yfc6j323sv],
select:focus[b-yfc6j323sv],
textarea:focus[b-yfc6j323sv],
[b-yfc6j323sv] input:focus,
[b-yfc6j323sv] select:focus,
[b-yfc6j323sv] textarea:focus {
    outline: none;
    background: var(--surface-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-textarea[b-yfc6j323sv],
textarea[b-yfc6j323sv],
[b-yfc6j323sv] textarea {
    min-height: 100px;
    resize: vertical;
}

/* Target specific input components by adding these selectors */
[b-yfc6j323sv] .input-text,
[b-yfc6j323sv] .input-number,
[b-yfc6j323sv] .input-date,
[b-yfc6j323sv] .input-select,
[b-yfc6j323sv] .input-textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: var(--text-primary);
}

/* Input with Currency */
.input-with-currency[b-yfc6j323sv] {
    position: relative;
}

    .input-with-currency .form-input[b-yfc6j323sv],
    .input-with-currency[b-yfc6j323sv]  input {
        padding-right: 60px;
    }

.currency-label[b-yfc6j323sv] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-weight: 500;
    font-size: 14px;
    z-index: 2;
}

/* Checkbox Styling */
.checkbox-label[b-yfc6j323sv] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
}

.form-checkbox[b-yfc6j323sv],
[b-yfc6j323sv] input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.checkbox-text[b-yfc6j323sv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-primary);
}

    .checkbox-text i[b-yfc6j323sv] {
        color: var(--primary-color);
    }

/* Recurrence Options */
.recurrence-options[b-yfc6j323sv] {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.recurrence-option[b-yfc6j323sv] {
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    color: var(--text-secondary);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .recurrence-option:hover[b-yfc6j323sv] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

    .recurrence-option.active[b-yfc6j323sv] {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        transform: translateY(-2px);
    }

.custom-period[b-yfc6j323sv] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input-small[b-yfc6j323sv],
[b-yfc6j323sv] .form-input-small {
    width: 100px;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s;
    font-size: 14px;
}

    .form-input-small:focus[b-yfc6j323sv],
    [b-yfc6j323sv] .form-input-small:focus {
        outline: none;
        background: var(--surface-color);
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* File Upload Area */
.file-upload-area[b-yfc6j323sv] {
    margin-top: 8px;
}

.file-input[b-yfc6j323sv],
[b-yfc6j323sv] input[type="file"] {
    display: none;
}

.file-upload-label[b-yfc6j323sv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

    .file-upload-label:hover[b-yfc6j323sv] {
        background: rgba(102, 126, 234, 0.1);
        border-color: var(--primary-color);
    }

    .file-upload-label i[b-yfc6j323sv] {
        font-size: 36px;
        margin-bottom: 12px;
        color: var(--primary-color);
    }

    .file-upload-label span[b-yfc6j323sv] {
        font-weight: 600;
        margin-bottom: 4px;
        color: var(--text-primary);
    }

    .file-upload-label small[b-yfc6j323sv] {
        color: var(--text-tertiary);
        font-size: 12px;
    }

.uploaded-file[b-yfc6j323sv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    margin-top: 16px;
}

    .uploaded-file i[b-yfc6j323sv] {
        color: var(--primary-color);
        font-size: 18px;
    }

    .uploaded-file span[b-yfc6j323sv] {
        flex: 1;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.remove-file[b-yfc6j323sv] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .remove-file:hover[b-yfc6j323sv] {
        background: rgba(239, 68, 68, 0.2);
        transform: rotate(90deg);
    }

/* Expense Summary */
.expense-summary[b-yfc6j323sv] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 20px 24px;
    margin: 32px 0;
}

    .expense-summary h4[b-yfc6j323sv] {
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 700;
        color: var(--primary-color);
    }

.summary-items[b-yfc6j323sv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.summary-item[b-yfc6j323sv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

    .summary-item span[b-yfc6j323sv] {
        color: var(--text-secondary);
    }

    .summary-item strong[b-yfc6j323sv] {
        font-weight: 600;
        color: var(--text-primary);
    }

        .summary-item strong.amount[b-yfc6j323sv] {
            font-size: 16px;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

/* Form Actions */
.form-actions[b-yfc6j323sv] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.btn-save[b-yfc6j323sv] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-yfc6j323sv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .btn-save:disabled[b-yfc6j323sv] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-cancel[b-yfc6j323sv] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-cancel:hover:not(:disabled)[b-yfc6j323sv] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .btn-cancel:disabled[b-yfc6j323sv] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Loading Spinner */
.spinner-small[b-yfc6j323sv] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-yfc6j323sv 0.8s linear infinite;
}

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

/* Validation Messages */
.validation-message[b-yfc6j323sv] {
    color: var(--danger-color);
    font-size: 13px;
    margin-top: 4px;
}

/* Fix for InputNumber, InputDate and other Blazor components */
[b-yfc6j323sv] .form-control[type="number"],
[b-yfc6j323sv] .form-control[type="date"],
[b-yfc6j323sv] .form-control[type="text"],
[b-yfc6j323sv] .form-select,
[b-yfc6j323sv] .form-control {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .expense-form-container[b-yfc6j323sv] {
        padding: 24px;
        border-radius: 16px;
    }

    .summary-items[b-yfc6j323sv] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-yfc6j323sv] {
        flex-direction: column-reverse;
    }

    .btn-save[b-yfc6j323sv],
    .btn-cancel[b-yfc6j323sv] {
        width: 100%;
        justify-content: center;
    }

    .recurrence-options[b-yfc6j323sv] {
        flex-direction: column;
    }

    .recurrence-option[b-yfc6j323sv] {
        width: 100%;
        text-align: center;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .form-label[b-yfc6j323sv] {
    color: #e2e8f0;
}

[data-theme="dark"] .checkbox-text[b-yfc6j323sv] {
    color: #e2e8f0;
}

[data-theme="dark"] .recurrence-option[b-yfc6j323sv] {
    background: rgba(71, 85, 105, 0.3);
    color: #cbd5e1;
}

    [data-theme="dark"] .recurrence-option:hover[b-yfc6j323sv] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .file-upload-label[b-yfc6j323sv] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.6);
}

    [data-theme="dark"] .file-upload-label:hover[b-yfc6j323sv] {
        background: rgba(71, 85, 105, 0.5);
        border-color: var(--primary-color);
    }

[data-theme="dark"][b-yfc6j323sv]  .form-control[type="number"],
[data-theme="dark"][b-yfc6j323sv]  .form-control[type="date"],
[data-theme="dark"][b-yfc6j323sv]  .form-control[type="text"],
[data-theme="dark"][b-yfc6j323sv]  .form-select,
[data-theme="dark"][b-yfc6j323sv]  .form-control {
    background: rgba(71, 85, 105, 0.3);
    color: var(--text-light);
}

[data-theme="dark"] .expense-summary[b-yfc6j323sv] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

    [data-theme="dark"] .expense-summary h4[b-yfc6j323sv] {
        color: #a78bfa;
    }

[data-theme="dark"] .summary-item span[b-yfc6j323sv] {
    color: #cbd5e1;
}

[data-theme="dark"] .summary-item strong[b-yfc6j323sv] {
    color: #e2e8f0;
}

    [data-theme="dark"] .summary-item strong.amount[b-yfc6j323sv] {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

[data-theme="dark"] .uploaded-file[b-yfc6j323sv] {
    background: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-actions[b-yfc6j323sv] {
    border-top-color: rgba(71, 85, 105, 0.6);
}

[data-theme="dark"] .btn-cancel[b-yfc6j323sv] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-cancel:hover:not(:disabled)[b-yfc6j323sv] {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    }

/* RTL Support */
html[dir="rtl"] .currency-label[b-yfc6j323sv] {
    right: auto;
    left: 16px;
}

html[dir="rtl"] .form-actions[b-yfc6j323sv] {
    flex-direction: row-reverse;
}

/* Focus States for Accessibility */
.form-input:focus-visible[b-yfc6j323sv],
.form-select:focus-visible[b-yfc6j323sv],
.form-textarea:focus-visible[b-yfc6j323sv],
.form-checkbox:focus-visible[b-yfc6j323sv],
.form-input-small:focus-visible[b-yfc6j323sv],
.btn-save:focus-visible[b-yfc6j323sv],
.btn-cancel:focus-visible[b-yfc6j323sv],
.recurrence-option:focus-visible[b-yfc6j323sv],
[b-yfc6j323sv] input:focus-visible,
[b-yfc6j323sv] select:focus-visible,
[b-yfc6j323sv] textarea:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* _content/Sahelly/Components/Pages/Merchant/Component/InstallmentCalculatorDialog.razor.rz.scp.css */
/* ===============================
   Installment Calculator Dialog
   Modern Professional Design
   =============================== */

/* Dialog Overlay and Container */
.installment-dialog-overlay[b-pmlkql5v7y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

    .installment-dialog-overlay.show[b-pmlkql5v7y] {
        opacity: 1;
        visibility: visible;
    }

.installment-dialog[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9);
    opacity: 0;
    transition: all var(--transition-base);
    border: 1px solid var(--border-color);
    position: relative;
}

[data-theme="dark"] .installment-dialog[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.installment-dialog.show[b-pmlkql5v7y] {
    transform: scale(1);
    opacity: 1;
}

/* Dialog Header */
.installment-header[b-pmlkql5v7y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

[data-theme="dark"] .installment-header[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

.header-left[b-pmlkql5v7y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

    .header-left i[b-pmlkql5v7y] {
        font-size: 24px;
        color: var(--primary-color);
    }

    .header-left h3[b-pmlkql5v7y] {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.btn-close[b-pmlkql5v7y] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

    .btn-close:hover[b-pmlkql5v7y] {
        background-color: var(--hover-background);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Dialog Body */
.installment-body[b-pmlkql5v7y] {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

/* Calculation Method Section */
.calculation-method-section[b-pmlkql5v7y] {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .calculation-method-section[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.section-title[b-pmlkql5v7y] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.method-toggle[b-pmlkql5v7y] {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.method-btn[b-pmlkql5v7y] {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .method-btn[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.method-btn:hover[b-pmlkql5v7y] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.method-btn.active[b-pmlkql5v7y] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .method-btn.active:hover[b-pmlkql5v7y] {
        transform: translateY(-2px);
        box-shadow: var(--glow-primary), var(--shadow-lg);
    }

/* Input Sections */
.input-section[b-pmlkql5v7y] {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .input-section[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.form-grid[b-pmlkql5v7y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.form-group[b-pmlkql5v7y] {
    margin-bottom: var(--spacing-md);
}

.form-label[b-pmlkql5v7y] {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

    .form-label i[b-pmlkql5v7y] {
        color: var(--primary-color);
    }

.input-wrapper[b-pmlkql5v7y] {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-wrapper.readonly[b-pmlkql5v7y] {
        opacity: 0.8;
    }

.form-control[b-pmlkql5v7y] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    padding-right: 60px;
}

[data-theme="dark"] .form-control[b-pmlkql5v7y] {
    background: rgba(71, 85, 105, 0.3);
}

.form-control:hover[b-pmlkql5v7y] {
    border-color: var(--border-hover);
}

.form-control:focus[b-pmlkql5v7y] {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--surface-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.input-suffix[b-pmlkql5v7y] {
    position: absolute;
    right: var(--spacing-md);
    color: var(--text-muted);
    font-weight: 600;
    pointer-events: none;
}

.form-text[b-pmlkql5v7y] {
    margin-top: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Payment Tiers Section */
.payment-tiers-section[b-pmlkql5v7y] {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .payment-tiers-section[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.section-header[b-pmlkql5v7y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.tiers-list[b-pmlkql5v7y] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.payment-tier[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all var(--transition-fast);
}

[data-theme="dark"] .payment-tier[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.2) 0%, rgba(51, 65, 85, 0.2) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.payment-tier:hover[b-pmlkql5v7y] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.tier-header[b-pmlkql5v7y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.tier-number[b-pmlkql5v7y] {
    font-weight: 700;
    color: var(--primary-color);
}

.btn-remove-tier[b-pmlkql5v7y] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

    .btn-remove-tier:hover[b-pmlkql5v7y] {
        background-color: var(--danger-light);
        color: var(--danger-color);
    }

.tier-inputs[b-pmlkql5v7y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.tier-field[b-pmlkql5v7y] {
    flex: 1;
    min-width: 120px;
}

    .tier-field label[b-pmlkql5v7y] {
        display: block;
        margin-bottom: var(--spacing-xs);
        font-weight: 500;
        color: var(--text-secondary);
        font-size: 0.85rem;
    }

    .tier-field input[b-pmlkql5v7y] {
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.95rem;
        color: var(--text-primary);
        background-color: var(--bg-tertiary);
        border: 2px solid transparent;
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
    }

[data-theme="dark"] .tier-field input[b-pmlkql5v7y] {
    background: rgba(71, 85, 105, 0.3);
}

.tier-field input:hover[b-pmlkql5v7y] {
    border-color: var(--border-hover);
}

.tier-field input:focus[b-pmlkql5v7y] {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--surface-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.empty-tiers[b-pmlkql5v7y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) 0;
    color: var(--text-tertiary);
}

    .empty-tiers i[b-pmlkql5v7y] {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-md);
    }

/* Manual Calculation Section */
.manual-calculation-section[b-pmlkql5v7y] {
    margin-bottom: var(--spacing-xl);
}

.formula-section[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

[data-theme="dark"] .formula-section[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.formula-instructions[b-pmlkql5v7y] {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .formula-instructions[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.formula-instructions i[b-pmlkql5v7y] {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.formula-instructions p[b-pmlkql5v7y] {
    margin: 0.3rem 0;
    color: var(--text-secondary);
}

.formula-instructions code[b-pmlkql5v7y] {
    background: var(--primary-color);
    color: white;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-family: monospace;
}

.formula-input[b-pmlkql5v7y] {
    font-family: monospace;
    text-align: center;
    letter-spacing: 1px;
}

.quick-examples[b-pmlkql5v7y] {
    margin-top: var(--spacing-md);
}

.example-buttons[b-pmlkql5v7y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

/* Calculate Section */
.calculate-section[b-pmlkql5v7y] {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.btn-calculate[b-pmlkql5v7y] {
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all var(--transition-base);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-calculate:hover:not(:disabled)[b-pmlkql5v7y] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

    .btn-calculate:disabled[b-pmlkql5v7y] {
        opacity: 0.6;
        cursor: not-allowed;
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    }

/* Alert Message */
.alert[b-pmlkql5v7y] {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.alert-warning[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: var(--accent-color);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.alert i[b-pmlkql5v7y] {
    font-size: 1.2rem;
}

/* Results Section */
.results-summary[b-pmlkql5v7y] {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .results-summary[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.summary-grid[b-pmlkql5v7y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.summary-item[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .summary-item[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.2) 0%, rgba(51, 65, 85, 0.2) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.summary-item.warning[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.summary-item.success[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.summary-label[b-pmlkql5v7y] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--spacing-xs);
}

.summary-value[b-pmlkql5v7y] {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-primary);
}

/* Installment Schedule */
.installment-schedule[b-pmlkql5v7y] {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .installment-schedule[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.table-wrapper[b-pmlkql5v7y] {
    overflow-x: auto;
    max-height: 350px;
    overflow-y: auto;
}

.installment-table[b-pmlkql5v7y] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .installment-table th[b-pmlkql5v7y] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        padding: var(--spacing-md);
        text-align: right;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 1;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-color);
    }

[data-theme="dark"] .installment-table th[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
}

.installment-table td[b-pmlkql5v7y] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.installment-table tbody tr:hover[b-pmlkql5v7y] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.month-number[b-pmlkql5v7y] {
    font-weight: 600;
    color: var(--primary-color);
}

.payment-date[b-pmlkql5v7y] {
    color: var(--text-secondary);
}

.payment-amount[b-pmlkql5v7y] {
    font-weight: 600;
    color: var(--success-color);
}

.remaining-balance[b-pmlkql5v7y] {
    color: var(--danger-color);
    font-weight: 500;
}

    .remaining-balance.zero-balance[b-pmlkql5v7y] {
        color: var(--success-color);
        font-weight: 700;
    }

/* Notes Section */
.notes-section[b-pmlkql5v7y] {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .notes-section[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.notes-textarea[b-pmlkql5v7y] {
    resize: vertical;
    min-height: 100px;
}

/* Dialog Footer */
.installment-footer[b-pmlkql5v7y] {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-lg) var(--spacing-xl);
    gap: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

[data-theme="dark"] .installment-footer[b-pmlkql5v7y] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-top: 1px solid rgba(71, 85, 105, 0.3);
}

.btn[b-pmlkql5v7y] {
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border: none;
    cursor: pointer;
}

.btn-sm[b-pmlkql5v7y] {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.875rem;
}

.btn-primary[b-pmlkql5v7y] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-pmlkql5v7y] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-pmlkql5v7y] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-secondary[b-pmlkql5v7y] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: var(--text-light);
}

.btn-secondary:hover[b-pmlkql5v7y] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

    .btn-outline-primary:hover[b-pmlkql5v7y] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .installment-dialog[b-pmlkql5v7y] {
        width: 95%;
        max-height: 90vh;
    }

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

    .tier-inputs[b-pmlkql5v7y] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .summary-grid[b-pmlkql5v7y] {
        grid-template-columns: 1fr;
    }

    .installment-header[b-pmlkql5v7y] {
        padding: var(--spacing-md);
    }

    .installment-body[b-pmlkql5v7y] {
        padding: var(--spacing-md);
    }

    .installment-footer[b-pmlkql5v7y] {
        padding: var(--spacing-md);
    }

    .btn[b-pmlkql5v7y] {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .header-left h3[b-pmlkql5v7y] {
        font-size: 1.25rem;
    }

    .method-toggle[b-pmlkql5v7y] {
        flex-direction: column;
    }

    .example-buttons[b-pmlkql5v7y] {
        flex-direction: column;
        align-items: stretch;
    }

    .installment-table th[b-pmlkql5v7y],
    .installment-table td[b-pmlkql5v7y] {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .installment-header[b-pmlkql5v7y] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .btn-close[b-pmlkql5v7y] {
        position: absolute;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }

    .installment-footer[b-pmlkql5v7y] {
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
    }

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

/* Print styles */
@media print {
    .installment-dialog-overlay[b-pmlkql5v7y],
    .installment-dialog[b-pmlkql5v7y] {
        position: static;
        overflow: visible;
        background: white;
        box-shadow: none;
        transform: none;
    }

    .installment-header[b-pmlkql5v7y],
    .calculation-method-section[b-pmlkql5v7y],
    .input-section[b-pmlkql5v7y],
    .payment-tiers-section[b-pmlkql5v7y],
    .manual-calculation-section[b-pmlkql5v7y],
    .calculate-section[b-pmlkql5v7y],
    .installment-footer[b-pmlkql5v7y],
    .btn-close[b-pmlkql5v7y] {
        display: none;
    }

    .installment-body[b-pmlkql5v7y] {
        overflow: visible;
        padding: 0;
    }

    .installment-table th[b-pmlkql5v7y] {
        background: #f3f4f6;
        color: black;
    }

    .table-wrapper[b-pmlkql5v7y] {
        max-height: none;
        overflow: visible;
    }
}

/* Focus States for Accessibility */
.method-btn:focus[b-pmlkql5v7y],
.btn:focus[b-pmlkql5v7y],
.form-control:focus[b-pmlkql5v7y],
.tier-field input:focus[b-pmlkql5v7y] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .header-left h3[b-pmlkql5v7y] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .tier-number[b-pmlkql5v7y] {
    color: var(--primary-hover);
}

[data-theme="dark"] .month-number[b-pmlkql5v7y] {
    color: var(--primary-hover);
}

[data-theme="dark"] .btn-primary[b-pmlkql5v7y] {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}

[data-theme="dark"] .btn-calculate[b-pmlkql5v7y] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

/* RTL Support */
html[dir="rtl"] .installment-table th[b-pmlkql5v7y],
html[dir="rtl"] .installment-table td[b-pmlkql5v7y] {
    text-align: left;
}

html[dir="rtl"] .input-suffix[b-pmlkql5v7y] {
    right: auto;
    left: var(--spacing-md);
}

html[dir="rtl"] .btn-close[b-pmlkql5v7y] {
    margin-left: 0;
    margin-right: auto;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .method-btn.active[b-pmlkql5v7y],
    .btn-primary[b-pmlkql5v7y],
    .btn-calculate[b-pmlkql5v7y] {
        border: 2px solid currentColor;
    }

    .form-control[b-pmlkql5v7y] {
        border: 2px solid var(--border-color);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-pmlkql5v7y] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.calculation-method-section[b-pmlkql5v7y] {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.method-toggle[b-pmlkql5v7y] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.method-btn[b-pmlkql5v7y] {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid #dee2e6;
    background-color: white;
    color: #495057;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
}

    .method-btn:hover[b-pmlkql5v7y] {
        background-color: #f8f9fa;
        border-color: #6c757d;
    }

    .method-btn.active[b-pmlkql5v7y] {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

.manual-calculation-section[b-pmlkql5v7y] {
    margin-top: 20px;
}

.formula-section[b-pmlkql5v7y] {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.formula-instructions[b-pmlkql5v7y] {
    background-color: #e3f2fd;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    color: #1976d2;
}

    .formula-instructions i[b-pmlkql5v7y] {
        font-size: 24px;
        margin-top: 5px;
    }

    .formula-instructions p[b-pmlkql5v7y] {
        margin: 5px 0;
    }

    .formula-instructions code[b-pmlkql5v7y] {
        background-color: #1976d2;
        color: white;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: monospace;
    }

.formula-input[b-pmlkql5v7y] {
    font-size: 18px;
    font-family: monospace;
    text-align: center;
    letter-spacing: 1px;
}

.quick-examples[b-pmlkql5v7y] {
    margin-top: 20px;
}

.example-buttons[b-pmlkql5v7y] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.btn-outline-primary[b-pmlkql5v7y] {
    border: 1px solid #007bff;
    color: #007bff;
    background-color: white;
}

    .btn-outline-primary:hover[b-pmlkql5v7y] {
        background-color: #007bff;
        color: white;
    }
/* _content/Sahelly/Components/Pages/Merchant/Component/InventoryMovement.razor.rz.scp.css */

/* Inventory Movement Component - Modern Professional Style */

.inventory-movement-container[b-o2qqkpiazb] {
    padding: 20px;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.component-loading[b-o2qqkpiazb] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Movement Filters */
.movement-filters[b-o2qqkpiazb] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-control[b-o2qqkpiazb] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-o2qqkpiazb] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.form-label[b-o2qqkpiazb] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
}

/* Movement Summary */
.movement-summary[b-o2qqkpiazb] {
    margin-bottom: 32px;
}

.summary-card[b-o2qqkpiazb] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-o2qqkpiazb]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-o2qqkpiazb] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

        .summary-card:hover[b-o2qqkpiazb]::before {
            opacity: 1;
        }

.card-icon[b-o2qqkpiazb] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-card.purchases .card-icon[b-o2qqkpiazb] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

.summary-card.sales .card-icon[b-o2qqkpiazb] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.summary-card.returns .card-icon[b-o2qqkpiazb] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.summary-card.adjustments .card-icon[b-o2qqkpiazb] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.card-content[b-o2qqkpiazb] {
    flex: 1;
}

.card-value[b-o2qqkpiazb] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.card-label[b-o2qqkpiazb] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
    font-weight: 500;
}

.card-detail[b-o2qqkpiazb] {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Movement Table */
.movement-table-wrapper[b-o2qqkpiazb] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.movement-table[b-o2qqkpiazb] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .movement-table th[b-o2qqkpiazb] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .movement-table td[b-o2qqkpiazb] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .movement-table tbody tr[b-o2qqkpiazb] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }

        .movement-table tbody tr:hover[b-o2qqkpiazb] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

/* Movement Type Row Styles */
.movement-purchase[b-o2qqkpiazb] {
    border-left: 4px solid #5a6cb3;
}

.movement-sale[b-o2qqkpiazb] {
    border-left: 4px solid #3bc968;
}

.movement-return[b-o2qqkpiazb] {
    border-left: 4px solid #d88c14;
}

.movement-transfer[b-o2qqkpiazb] {
    border-left: 4px solid #4aa3c2;
}

.movement-adjustment[b-o2qqkpiazb] {
    border-left: 4px solid #8b5cf6;
}

.movement-damage[b-o2qqkpiazb] {
    border-left: 4px solid #ef4444;
}

.date-time[b-o2qqkpiazb] {
    display: flex;
    flex-direction: column;
}

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

.time[b-o2qqkpiazb] {
    color: var(--text-tertiary);
    font-size: 12px;
}

.product-info-compact[b-o2qqkpiazb] {
    display: flex;
    flex-direction: column;
}

.product-name[b-o2qqkpiazb] {
    font-weight: 600;
    color: var(--text-primary);
}

.movement-type-badge[b-o2qqkpiazb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.badge-purchase[b-o2qqkpiazb] {
    background: rgba(90, 108, 179, 0.1);
    color: #5a6cb3;
    border: 1px solid rgba(90, 108, 179, 0.2);
}

.badge-sale[b-o2qqkpiazb] {
    background: rgba(59, 201, 104, 0.1);
    color: #3bc968;
    border: 1px solid rgba(59, 201, 104, 0.2);
}

.badge-return[b-o2qqkpiazb] {
    background: rgba(216, 140, 20, 0.1);
    color: #d88c14;
    border: 1px solid rgba(216, 140, 20, 0.2);
}

.badge-transfer[b-o2qqkpiazb] {
    background: rgba(74, 163, 194, 0.1);
    color: #4aa3c2;
    border: 1px solid rgba(74, 163, 194, 0.2);
}

.badge-adjustment[b-o2qqkpiazb] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.badge-damage[b-o2qqkpiazb] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.quantity-change[b-o2qqkpiazb] {
    font-weight: 700;
    border-radius: 20px;
    padding: 6px 12px;
    display: inline-block;
}

    .quantity-change.positive[b-o2qqkpiazb] {
        background: rgba(59, 201, 104, 0.1);
        color: #3bc968;
    }

    .quantity-change.negative[b-o2qqkpiazb] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.reference-info[b-o2qqkpiazb], .notes-text[b-o2qqkpiazb] {
    color: var(--text-secondary);
    font-size: 13px;
}

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

.no-data[b-o2qqkpiazb] {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-tertiary);
}

    .no-data i[b-o2qqkpiazb] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-data p[b-o2qqkpiazb] {
        font-size: 16px;
        font-weight: 500;
    }

/* Mobile View */
.movement-mobile-view[b-o2qqkpiazb] {
    display: none;
}

.movement-card[b-o2qqkpiazb] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .movement-card.movement-purchase[b-o2qqkpiazb] {
        border-left: 4px solid #5a6cb3;
    }

    .movement-card.movement-sale[b-o2qqkpiazb] {
        border-left: 4px solid #3bc968;
    }

    .movement-card.movement-return[b-o2qqkpiazb] {
        border-left: 4px solid #d88c14;
    }

    .movement-card.movement-transfer[b-o2qqkpiazb] {
        border-left: 4px solid #4aa3c2;
    }

    .movement-card.movement-adjustment[b-o2qqkpiazb] {
        border-left: 4px solid #8b5cf6;
    }

    .movement-card.movement-damage[b-o2qqkpiazb] {
        border-left: 4px solid #ef4444;
    }

.card-header[b-o2qqkpiazb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.movement-date[b-o2qqkpiazb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body[b-o2qqkpiazb] {
    padding: 16px;
}

    .card-body h5[b-o2qqkpiazb] {
        margin: 0 0 12px 0;
        font-size: 16px;
        color: var(--text-primary);
    }

.movement-details[b-o2qqkpiazb] {
    display: grid;
    gap: 8px;
}

.detail-row[b-o2qqkpiazb] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

    .detail-row .label[b-o2qqkpiazb] {
        color: var(--text-secondary);
        font-weight: 500;
    }

    .detail-row .value[b-o2qqkpiazb] {
        font-weight: 600;
        color: var(--text-primary);
    }

/* Responsive */
@media (max-width: 992px) {
    .movement-table-wrapper[b-o2qqkpiazb] {
        display: none;
    }

    .movement-mobile-view[b-o2qqkpiazb] {
        display: block;
    }
}

@media (max-width: 768px) {
    .summary-card[b-o2qqkpiazb] {
        padding: 16px;
    }

    .card-icon[b-o2qqkpiazb] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .card-value[b-o2qqkpiazb] {
        font-size: 24px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .inventory-movement-container[b-o2qqkpiazb] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
}

[data-theme="dark"] .movement-filters[b-o2qqkpiazb],
[data-theme="dark"] .summary-card[b-o2qqkpiazb],
[data-theme="dark"] .movement-table-wrapper[b-o2qqkpiazb],
[data-theme="dark"] .movement-card[b-o2qqkpiazb] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .movement-table tbody tr[b-o2qqkpiazb] {
    background: #1e293b;
}

    [data-theme="dark"] .movement-table tbody tr:hover[b-o2qqkpiazb] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .form-control[b-o2qqkpiazb] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-o2qqkpiazb] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .form-label[b-o2qqkpiazb] {
    color: #e2e8f0;
}

[data-theme="dark"] .date[b-o2qqkpiazb],
[data-theme="dark"] .product-name[b-o2qqkpiazb],
[data-theme="dark"] .card-body h5[b-o2qqkpiazb] {
    color: #e2e8f0;
}

[data-theme="dark"] .detail-row .value[b-o2qqkpiazb] {
    color: #e2e8f0;
}
/* _content/Sahelly/Components/Pages/Merchant/Component/InventoryReportView.razor.rz.scp.css */
/* Inventory Report View Styles */
.inventory-report-view[b-nfbp4xmqku] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Report Header */
.report-header[b-nfbp4xmqku] {
    margin-bottom: 32px;
}

.report-title-section[b-nfbp4xmqku] {
    text-align: center;
    margin-bottom: 24px;
}

.report-title[b-nfbp4xmqku] {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 8px 0;
}

    .report-title i[b-nfbp4xmqku] {
        color: #667eea;
    }

.report-date[b-nfbp4xmqku] {
    font-size: 16px;
    color: #6b7280;
}

/* Summary Cards */
.report-summary[b-nfbp4xmqku] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.summary-card[b-nfbp4xmqku] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

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

.summary-icon[b-nfbp4xmqku] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
}

.summary-content h4[b-nfbp4xmqku] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 4px 0;
}

.summary-value[b-nfbp4xmqku] {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

/* Table Section */
.report-table-section[b-nfbp4xmqku] {
    margin-top: 32px;
}

.table-title[b-nfbp4xmqku] {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
}

.table-responsive[b-nfbp4xmqku] {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.report-table[b-nfbp4xmqku] {
    width: 100%;
    background: white;
    border-collapse: collapse;
}

    .report-table thead[b-nfbp4xmqku] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .report-table th[b-nfbp4xmqku] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        color: #4c1d95;
        border-bottom: 2px solid #e5e7eb;
        white-space: nowrap;
    }

    .report-table td[b-nfbp4xmqku] {
        padding: 16px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
    }

    .report-table tbody tr[b-nfbp4xmqku] {
        transition: all 0.2s;
    }

        .report-table tbody tr:hover[b-nfbp4xmqku] {
            background: rgba(102, 126, 234, 0.05);
        }

.text-center[b-nfbp4xmqku] {
    text-align: center;
}

.text-right[b-nfbp4xmqku] {
    text-align: left;
}

/* Row States */
.critical-row[b-nfbp4xmqku] {
    background: rgba(239, 68, 68, 0.05);
}

    .critical-row:hover[b-nfbp4xmqku] {
        background: rgba(239, 68, 68, 0.1) !important;
    }

.warning-row[b-nfbp4xmqku] {
    background: rgba(245, 158, 11, 0.05);
}

    .warning-row:hover[b-nfbp4xmqku] {
        background: rgba(245, 158, 11, 0.1) !important;
    }

/* Status Badge */
.status-badge[b-nfbp4xmqku] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

    .status-badge.critical[b-nfbp4xmqku] {
        background: #fee2e2;
        color: #dc2626;
    }

    .status-badge.low[b-nfbp4xmqku] {
        background: #fef3c7;
        color: #d97706;
    }

    .status-badge.normal[b-nfbp4xmqku] {
        background: #d1fae5;
        color: #059669;
    }

    .status-badge.overstocked[b-nfbp4xmqku] {
        background: #dbeafe;
        color: #2563eb;
    }

/* Alert Section */
.alert-section[b-nfbp4xmqku] {
    margin-top: 24px;
}

.alert[b-nfbp4xmqku] {
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

    .alert i[b-nfbp4xmqku] {
        font-size: 24px;
        margin-top: 2px;
    }

.alert-warning[b-nfbp4xmqku] {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #92400e;
}

    .alert-warning i[b-nfbp4xmqku] {
        color: #f59e0b;
    }

.alert-content h4[b-nfbp4xmqku] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.alert-content p[b-nfbp4xmqku] {
    margin: 0;
    font-size: 14px;
}

/* RTL Support */
[dir="rtl"] .report-table th[b-nfbp4xmqku],
[dir="rtl"] .report-table td[b-nfbp4xmqku] {
    text-align: right;
}

[dir="rtl"] .text-right[b-nfbp4xmqku] {
    text-align: right;
}

[dir="rtl"] .summary-card[b-nfbp4xmqku] {
    flex-direction: row-reverse;
}
/* _content/Sahelly/Components/Pages/Merchant/Component/InventoryTransferModals.razor.rz.scp.css */

/* ===================================
   Inventory Transfer Modals - Modern Professional CSS
   تصميم عصري لنوافذ نقل المخزون
   =================================== */

/* Modal Backdrop - Modern Glass Effect */
.modal-backdrop[b-f6kj7w9ilh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    animation: fadeIn-b-f6kj7w9ilh var(--transition-base);
}

/* Modern Modal Content Container */
.modal-content-modern[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    width: 90%;
    max-width: 550px;
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid var(--border-color);
    animation: zoomIn-b-f6kj7w9ilh 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Dark Theme Support */
[data-theme="dark"] .modal-content-modern[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

/* Modal Header */
.modal-header[b-f6kj7w9ilh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

[data-theme="dark"] .modal-header[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

.modal-header h4[b-f6kj7w9ilh] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .modal-header h4[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-header h4 i[b-f6kj7w9ilh] {
    font-size: 20px;
}

/* Close Button */
.close-btn[b-f6kj7w9ilh] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

    .close-btn:hover[b-f6kj7w9ilh] {
        background-color: var(--hover-background);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

[data-theme="dark"] .close-btn[b-f6kj7w9ilh] {
    color: #9ca3af;
}

    [data-theme="dark"] .close-btn:hover[b-f6kj7w9ilh] {
        color: #e2e8f0;
        background: rgba(102, 126, 234, 0.1);
    }

/* Modal Body */
.modal-body[b-f6kj7w9ilh] {
    padding: var(--spacing-xl);
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Form Group - Modern Style */
.form-group-modern[b-f6kj7w9ilh] {
    margin-bottom: var(--spacing-lg);
}

    .form-group-modern label[b-f6kj7w9ilh] {
        display: block;
        margin-bottom: var(--spacing-sm);
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

[data-theme="dark"] .form-group-modern label[b-f6kj7w9ilh] {
    color: #e2e8f0;
}

.form-control-modern[b-f6kj7w9ilh] {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    -webkit-appearance: none;
    min-height: 44px;
}

    .form-control-modern:hover[b-f6kj7w9ilh] {
        border-color: var(--border-hover);
    }

    .form-control-modern:focus[b-f6kj7w9ilh] {
        outline: none;
        border-color: var(--primary-color);
        background-color: var(--surface-color);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    }

[data-theme="dark"] .form-control-modern[b-f6kj7w9ilh] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control-modern:focus[b-f6kj7w9ilh] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

.form-control-modern[b-f6kj7w9ilh]::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

/* Text Area */
textarea.form-control-modern[b-f6kj7w9ilh] {
    resize: vertical;
    min-height: 100px;
}

/* Modal Footer */
.modal-footer[b-f6kj7w9ilh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .modal-footer[b-f6kj7w9ilh] {
    background: rgba(30, 41, 59, 0.8);
    border-top: 1px solid rgba(71, 85, 105, 0.3);
}

/* Button Styles */
.btn-primary[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover[b-f6kj7w9ilh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-secondary:hover[b-f6kj7w9ilh] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

[data-theme="dark"] .btn-secondary[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-secondary:hover[b-f6kj7w9ilh] {
        background: linear-gradient(135deg, #475569 0%, #334155 100%);
    }

/* Alert Styles */
.alert[b-f6kj7w9ilh] {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    position: relative;
    overflow: hidden;
    border: none;
    font-weight: 500;
}

    .alert[b-f6kj7w9ilh]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: currentColor;
    }

.alert-info[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
    color: var(--primary-color);
}

[data-theme="dark"] .alert-info[b-f6kj7w9ilh] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(129, 140, 248, 0.2) 100%);
    color: #a78bfa;
}

.alert i[b-f6kj7w9ilh] {
    font-size: 20px;
}

/* Validation Styles */
.validation-message[b-f6kj7w9ilh] {
    color: #ef4444 !important;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

/* Spinner */
.spinner-border-sm[b-f6kj7w9ilh] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-f6kj7w9ilh 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

/* Small Text */
.text-muted[b-f6kj7w9ilh] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Animations */
@keyframes fadeIn-b-f6kj7w9ilh {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .modal-content-modern[b-f6kj7w9ilh] {
        width: 95%;
        max-width: 100%;
        margin: 0 16px;
    }

    .modal-header[b-f6kj7w9ilh] {
        padding: var(--spacing-md);
    }

    .modal-body[b-f6kj7w9ilh] {
        padding: var(--spacing-md);
    }

    .modal-footer[b-f6kj7w9ilh] {
        padding: var(--spacing-md);
        flex-direction: column;
    }

        .modal-footer button[b-f6kj7w9ilh] {
            width: 100%;
        }

    .modal-header h4[b-f6kj7w9ilh] {
        font-size: 20px;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .modal-content-modern[b-f6kj7w9ilh] {
        border: 2px solid black;
    }

    .form-control-modern[b-f6kj7w9ilh] {
        border: 2px solid black;
    }

    .btn-primary[b-f6kj7w9ilh], .btn-secondary[b-f6kj7w9ilh] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-f6kj7w9ilh] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/Component/InventoryValuation.razor.rz.scp.css */

/* Inventory Valuation Component - Modern Professional Style */

.inventory-valuation-container[b-vsvso3eupi] {
    padding: 20px;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.component-loading[b-vsvso3eupi] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Valuation Settings */
.valuation-settings[b-vsvso3eupi] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-control[b-vsvso3eupi] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-vsvso3eupi] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.form-label[b-vsvso3eupi] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
}

.btn-primary[b-vsvso3eupi] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover[b-vsvso3eupi] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Valuation Summary */
.valuation-summary[b-vsvso3eupi] {
    margin-bottom: 32px;
}

.summary-card[b-vsvso3eupi] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-vsvso3eupi]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-vsvso3eupi] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

        .summary-card:hover[b-vsvso3eupi]::before {
            opacity: 1;
        }

.card-icon[b-vsvso3eupi] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-card.total-value .card-icon[b-vsvso3eupi] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

.summary-card.market-value .card-icon[b-vsvso3eupi] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.summary-card.margin .card-icon[b-vsvso3eupi] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.summary-card.items .card-icon[b-vsvso3eupi] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.card-content[b-vsvso3eupi] {
    flex: 1;
}

.card-value[b-vsvso3eupi] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.card-label[b-vsvso3eupi] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
    font-weight: 500;
}

.card-detail[b-vsvso3eupi] {
    font-size: 13px;
    color: var(--text-tertiary);
}

    .card-detail.positive[b-vsvso3eupi] {
        color: #10b981;
    }

    .card-detail.negative[b-vsvso3eupi] {
        color: #ef4444;
    }

/* Category Breakdown */
.category-breakdown[b-vsvso3eupi] {
    margin-bottom: 32px;
}

.section-title[b-vsvso3eupi] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title i[b-vsvso3eupi] {
        color: #667eea;
    }

.category-chart-container[b-vsvso3eupi] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 300px;
}

.category-table-wrapper[b-vsvso3eupi] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.category-table[b-vsvso3eupi] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .category-table th[b-vsvso3eupi] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .category-table td[b-vsvso3eupi] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .category-table tbody tr[b-vsvso3eupi] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }

        .category-table tbody tr:hover[b-vsvso3eupi] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

.category-info[b-vsvso3eupi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-color[b-vsvso3eupi] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.value-share[b-vsvso3eupi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.share-bar[b-vsvso3eupi] {
    width: 100%;
    height: 8px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.share-fill[b-vsvso3eupi] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

.share-text[b-vsvso3eupi] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Detailed Valuation */
.detailed-valuation[b-vsvso3eupi] {
    margin-bottom: 32px;
}

.btn-export[b-vsvso3eupi] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-export:hover[b-vsvso3eupi] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.valuation-table-wrapper[b-vsvso3eupi] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.valuation-table[b-vsvso3eupi] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .valuation-table th[b-vsvso3eupi] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .valuation-table td[b-vsvso3eupi] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .valuation-table tbody tr[b-vsvso3eupi] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }

        .valuation-table tbody tr:hover[b-vsvso3eupi] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

.product-info-compact[b-vsvso3eupi] {
    display: flex;
    flex-direction: column;
}

.product-name[b-vsvso3eupi] {
    font-weight: 600;
    color: var(--text-primary);
}

.category-badge[b-vsvso3eupi] {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.margin-badge[b-vsvso3eupi] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

    .margin-badge.high[b-vsvso3eupi] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .margin-badge.medium[b-vsvso3eupi] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .margin-badge.low[b-vsvso3eupi] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.total-row[b-vsvso3eupi] {
    background: rgba(102, 126, 234, 0.05) !important;
    font-weight: 700;
}

    .total-row td[b-vsvso3eupi] {
        border-top: 2px solid rgba(102, 126, 234, 0.1);
    }

.no-data[b-vsvso3eupi] {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-tertiary);
}

    .no-data i[b-vsvso3eupi] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-data p[b-vsvso3eupi] {
        font-size: 16px;
        font-weight: 500;
    }

/* Mobile View */
.valuation-mobile-view[b-vsvso3eupi] {
    display: none;
}

.mobile-summary[b-vsvso3eupi] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .mobile-summary h5[b-vsvso3eupi] {
        margin: 0 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
    }

.summary-item[b-vsvso3eupi] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

    .summary-item span[b-vsvso3eupi] {
        color: var(--text-secondary);
    }

    .summary-item strong[b-vsvso3eupi] {
        font-weight: 700;
        color: var(--text-primary);
    }

/* Responsive */
@media (max-width: 992px) {
    .category-table-wrapper[b-vsvso3eupi],
    .valuation-table-wrapper[b-vsvso3eupi] {
        display: none;
    }

    .valuation-mobile-view[b-vsvso3eupi] {
        display: block;
    }
}

@media (max-width: 768px) {
    .summary-card[b-vsvso3eupi] {
        padding: 16px;
    }

    .card-icon[b-vsvso3eupi] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .card-value[b-vsvso3eupi] {
        font-size: 24px;
    }

    .category-chart-container[b-vsvso3eupi] {
        height: 250px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .inventory-valuation-container[b-vsvso3eupi] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
}

[data-theme="dark"] .valuation-settings[b-vsvso3eupi],
[data-theme="dark"] .summary-card[b-vsvso3eupi],
[data-theme="dark"] .category-chart-container[b-vsvso3eupi],
[data-theme="dark"] .category-table-wrapper[b-vsvso3eupi],
[data-theme="dark"] .valuation-table-wrapper[b-vsvso3eupi],
[data-theme="dark"] .mobile-summary[b-vsvso3eupi] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .category-table tbody tr[b-vsvso3eupi],
[data-theme="dark"] .valuation-table tbody tr[b-vsvso3eupi] {
    background: #1e293b;
}

    [data-theme="dark"] .category-table tbody tr:hover[b-vsvso3eupi],
    [data-theme="dark"] .valuation-table tbody tr:hover[b-vsvso3eupi] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .form-control[b-vsvso3eupi] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-vsvso3eupi] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .form-label[b-vsvso3eupi] {
    color: #e2e8f0;
}

[data-theme="dark"] .section-title[b-vsvso3eupi] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-name[b-vsvso3eupi],
[data-theme="dark"] .card-value[b-vsvso3eupi],
[data-theme="dark"] .mobile-summary h5[b-vsvso3eupi],
[data-theme="dark"] .summary-item strong[b-vsvso3eupi] {
    color: #e2e8f0;
}

[data-theme="dark"] .share-bar[b-vsvso3eupi] {
    background: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .category-badge[b-vsvso3eupi] {
    background: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .total-row[b-vsvso3eupi] {
    background: rgba(102, 126, 234, 0.1) !important;
}

    [data-theme="dark"] .total-row td[b-vsvso3eupi] {
        border-top: 2px solid rgba(102, 126, 234, 0.2);
    }

[data-theme="dark"] .summary-item[b-vsvso3eupi] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}
/* _content/Sahelly/Components/Pages/Merchant/Component/PrintPreviewComponent.razor.rz.scp.css */
/* Print Preview Component - Modern Professional Style */
.print-preview-modal[b-4c7d01pysh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--spacing-lg);
    animation: fadeIn-b-4c7d01pysh var(--transition-base);
}

.print-preview-content[b-4c7d01pysh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-radius: var(--radius-2xl);
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: zoomIn-b-4c7d01pysh 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

[data-theme="dark"] .print-preview-content[b-4c7d01pysh] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.print-preview-header[b-4c7d01pysh] {
    padding: var(--spacing-xl) var(--spacing-2xl);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

    .print-preview-header h3[b-4c7d01pysh] {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.print-preview-body[b-4c7d01pysh] {
    flex: 1;
    overflow: hidden;
    padding: var(--spacing-xl);
    position: relative;
}

    .print-preview-body iframe[b-4c7d01pysh] {
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        transition: all var(--transition-base);
    }

.print-preview-footer[b-4c7d01pysh] {
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
}

[data-theme="dark"] .print-preview-footer[b-4c7d01pysh] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(30, 41, 59, 0.7) 100%);
}

.btn-close[b-4c7d01pysh] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .btn-close:hover[b-4c7d01pysh] {
        color: #4c1d95;
        transform: rotate(90deg);
        background-color: rgba(102, 126, 234, 0.1);
    }

[data-theme="dark"] .btn-close[b-4c7d01pysh] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-4c7d01pysh] {
        color: #e2e8f0;
        background-color: rgba(102, 126, 234, 0.2);
    }

/* Button Styles */
.btn[b-4c7d01pysh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: var(--spacing-sm);
    min-width: 120px;
    border: none;
    cursor: pointer;
}

.btn-primary[b-4c7d01pysh] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-4c7d01pysh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-4c7d01pysh] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-4c7d01pysh] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

[data-theme="dark"] .btn-secondary[b-4c7d01pysh] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-secondary:hover[b-4c7d01pysh] {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    }

/* Animations */
@keyframes fadeIn-b-4c7d01pysh {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn-b-4c7d01pysh {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

/* Responsive Design */
@media (max-width: 768px) {
    .print-preview-content[b-4c7d01pysh] {
        width: 95%;
        max-height: 95vh;
    }

    .print-preview-header[b-4c7d01pysh] {
        padding: var(--spacing-lg);
    }

    .print-preview-body[b-4c7d01pysh] {
        padding: var(--spacing-md);
    }

    .print-preview-footer[b-4c7d01pysh] {
        padding: var(--spacing-lg);
        flex-direction: column-reverse;
    }

    .btn[b-4c7d01pysh] {
        width: 100%;
    }

    .print-preview-header h3[b-4c7d01pysh] {
        font-size: 20px;
    }
}

/* RTL Support */
html[dir="rtl"] .print-preview-footer[b-4c7d01pysh] {
    justify-content: flex-start;
}

html[dir="rtl"] .print-preview-header h3[b-4c7d01pysh] {
    margin-left: auto;
    margin-right: 0;
}
/* _content/Sahelly/Components/Pages/Merchant/Component/ReceiptDataTableComponent.razor.rz.scp.css */
/* Loading States */
.loading-container[b-p8j58qfbkm] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: #f8f9fa;
    border-radius: 12px;
    margin: 20px 0;
}

.spinner-container[b-p8j58qfbkm] {
    text-align: center;
}

.spinner[b-p8j58qfbkm] {
    width: 40px;
    height: 40px;
    border: 4px solid #e3f2fd;
    border-top: 4px solid #2196f3;
    border-radius: 50%;
    animation: spin-b-p8j58qfbkm 1s linear infinite;
    margin: 0 auto 16px;
}

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

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

.loading-text[b-p8j58qfbkm] {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* Empty State */
.empty-state[b-p8j58qfbkm] {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin: 20px 0;
}

.empty-icon[b-p8j58qfbkm] {
    font-size: 64px;
    color: #ccc;
    margin-bottom: 20px;
}

.empty-state h3[b-p8j58qfbkm] {
    color: #333;
    margin-bottom: 8px;
    font-size: 24px;
}

.empty-state p[b-p8j58qfbkm] {
    color: #666;
    margin: 0;
}

/* Desktop Table */
.table-container[b-p8j58qfbkm] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 20px 0;
}

.desktop-table[b-p8j58qfbkm] {
    display: block;
}

.data-table[b-p8j58qfbkm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
}

    .data-table thead[b-p8j58qfbkm] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .data-table th[b-p8j58qfbkm] {
        padding: 16px 12px;
        text-align: right;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e0e0e0;
    }

        .data-table th.select-column[b-p8j58qfbkm] {
            width: 50px;
            text-align: center;
        }

    .data-table tbody tr[b-p8j58qfbkm] {
        border-bottom: 1px solid #f0f0f0;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .data-table tbody tr:hover[b-p8j58qfbkm] {
            background: #f8f9fa;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .data-table tbody tr.selected-row[b-p8j58qfbkm] {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
        }

        .data-table tbody tr.last-month-row[b-p8j58qfbkm] {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
        }

    .data-table td[b-p8j58qfbkm] {
        padding: 16px 12px;
        vertical-align: top;
        border-bottom: 1px solid #f0f0f0;
    }

        .data-table td.select-column[b-p8j58qfbkm] {
            text-align: center;
            width: 50px;
        }

/* Checkbox Styling */
.checkbox-input[b-p8j58qfbkm] {
    width: 18px;
    height: 18px;
    accent-color: #2196f3;
    cursor: pointer;
    margin: 0;
}

/* Customer Info */
.customer-info[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-details h4[b-p8j58qfbkm] {
    margin: 0 0 4px 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.customer-code[b-p8j58qfbkm] {
    margin: 0 0 4px 0;
    color: #666;
    font-size: 12px;
}

.customer-location[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.location-item[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #666;
    font-size: 11px;
}

    .location-item i[b-p8j58qfbkm] {
        color: #2196f3;
    }

/* Product Info */
.product-info .product-name[b-p8j58qfbkm] {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

/* Date Info */
.date-info[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-row[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-label[b-p8j58qfbkm] {
    color: #666;
    font-size: 11px;
    min-width: 60px;
}

.date-value[b-p8j58qfbkm] {
    color: #333;
    font-size: 12px;
    font-weight: 500;
}

/* Agents Info */
.agents-info[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-row[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-label[b-p8j58qfbkm] {
    color: #666;
    font-size: 11px;
    min-width: 60px;
}

.agent-name[b-p8j58qfbkm] {
    color: #333;
    font-size: 12px;
    font-weight: 500;
}

/* Financial Info */
.financial-info[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amount-row[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.amount-label[b-p8j58qfbkm] {
    color: #666;
    font-size: 11px;
    min-width: 60px;
}

.amount-value[b-p8j58qfbkm] {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.amount-row.positive .amount-value[b-p8j58qfbkm] {
    color: #4caf50;
}

.amount-row.negative .amount-value[b-p8j58qfbkm] {
    color: #f44336;
}

/* Installment Info */
.installment-info[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.installment-progress[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-text[b-p8j58qfbkm] {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.progress-bar[b-p8j58qfbkm] {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-p8j58qfbkm] {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #2196f3);
    transition: width 0.3s ease;
}

.installment-details[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.installment-value[b-p8j58qfbkm] {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.installment-months[b-p8j58qfbkm] {
    font-size: 11px;
    color: #666;
}

/* Contact Info */
.contact-info[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.phone-link[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #2196f3;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.3s ease;
}

    .phone-link:hover[b-p8j58qfbkm] {
        color: #1976d2;
    }

.job-info[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.job-title[b-p8j58qfbkm] {
    font-size: 11px;
    color: #333;
    font-weight: 500;
}

.workplace[b-p8j58qfbkm] {
    font-size: 10px;
    color: #666;
}

/* Mobile Cards */
.mobile-cards[b-p8j58qfbkm] {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.receipt-card[b-p8j58qfbkm] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

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

    .receipt-card.selected[b-p8j58qfbkm] {
        border-left: 4px solid #2196f3;
        background: #e3f2fd;
    }

    .receipt-card.last-month[b-p8j58qfbkm] {
        border-left: 4px solid #ff9800;
        background: #fff3e0;
    }

.card-header[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.card-select[b-p8j58qfbkm] {
    flex-shrink: 0;
}

.customer-name[b-p8j58qfbkm] {
    margin: 0 0 4px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.card-actions[b-p8j58qfbkm] {
    display: flex;
    gap: 8px;
}

.action-btn[b-p8j58qfbkm] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .action-btn.phone[b-p8j58qfbkm] {
        background: #2196f3;
        color: white;
    }

        .action-btn.phone:hover[b-p8j58qfbkm] {
            background: #1976d2;
        }

.card-body[b-p8j58qfbkm] {
    padding: 16px;
}

.info-section[b-p8j58qfbkm] {
    margin-bottom: 16px;
}

    .info-section:last-child[b-p8j58qfbkm] {
        margin-bottom: 0;
    }

.section-title[b-p8j58qfbkm] {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-row[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 4px 0;
}

    .info-row:last-child[b-p8j58qfbkm] {
        margin-bottom: 0;
    }

.info-label[b-p8j58qfbkm] {
    color: #666;
    font-size: 12px;
    font-weight: 500;
}

.info-value[b-p8j58qfbkm] {
    color: #333;
    font-size: 12px;
    font-weight: 600;
}

    .info-value.amount[b-p8j58qfbkm] {
        color: #333;
    }

        .info-value.amount.positive[b-p8j58qfbkm] {
            color: #4caf50;
        }

        .info-value.amount.negative[b-p8j58qfbkm] {
            color: #f44336;
        }

/* Products List */
.products-list[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-item[b-p8j58qfbkm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
}

.product-quantity[b-p8j58qfbkm] {
    font-weight: 600;
    color: #666;
}

/* Print Actions */
.print-actions[b-p8j58qfbkm] {
    margin-bottom: 1rem;
    text-align: right;
}

.btn-print[b-p8j58qfbkm] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s;
}

    .btn-print:hover[b-p8j58qfbkm] {
        background-color: #0056b3;
    }

/* Summary Section Styles */
.summary-section[b-p8j58qfbkm] {
    display: none;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.company-header[b-p8j58qfbkm] {
    text-align: center;
    margin-bottom: 0.75rem;
}

.company-name[b-p8j58qfbkm] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.financial-summary[b-p8j58qfbkm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.summary-card[b-p8j58qfbkm] {
    background: white;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-icon[b-p8j58qfbkm] {
    width: 28px;
    height: 28px;
    background-color: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .summary-icon i[b-p8j58qfbkm] {
        font-size: 0.875rem;
        color: #5a67d8;
    }

.summary-content[b-p8j58qfbkm] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.summary-label[b-p8j58qfbkm] {
    font-size: 0.625rem;
    color: #6b7280;
    font-weight: 500;
}

.summary-value[b-p8j58qfbkm] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    font-family: system-ui, -apple-system, sans-serif;
}

.selected-count[b-p8j58qfbkm] {
    text-align: center;
    color: #6b7280;
    font-size: 0.625rem;
    margin-top: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .desktop-table[b-p8j58qfbkm] {
        display: none;
    }

    .mobile-cards[b-p8j58qfbkm] {
        display: flex;
    }

    .table-container[b-p8j58qfbkm] {
        margin: 16px 0;
    }

    .receipt-card[b-p8j58qfbkm] {
        margin: 0 8px;
    }

    .card-header[b-p8j58qfbkm] {
        padding: 12px;
    }

    .card-body[b-p8j58qfbkm] {
        padding: 12px;
    }

    .info-section[b-p8j58qfbkm] {
        margin-bottom: 12px;
    }

    .section-title[b-p8j58qfbkm] {
        font-size: 13px;
    }

    .info-section .info-value[b-p8j58qfbkm] {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .receipt-card[b-p8j58qfbkm] {
        margin: 0 4px;
    }

    .customer-name[b-p8j58qfbkm] {
        font-size: 14px;
    }

    .customer-code[b-p8j58qfbkm] {
        font-size: 12px;
    }

    .info-row[b-p8j58qfbkm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .info-label[b-p8j58qfbkm] {
        font-size: 11px;
    }

    .info-value[b-p8j58qfbkm] {
        font-size: 11px;
    }

    .installment-progress[b-p8j58qfbkm] {
        width: 100%;
    }

    .progress-bar[b-p8j58qfbkm] {
        width: 100%;
    }
}

/* Mobile responsive styles for summary (hidden on screen) */
@media screen and (max-width: 768px) {
    .summary-section[b-p8j58qfbkm] {
        display: none !important;
    }
}

/* Desktop screen styles (hidden on screen) */
@media screen and (min-width: 769px) {
    .summary-section[b-p8j58qfbkm] {
        display: none !important;
    }
}

/* Print Styles */
@media print {
    /* Hide non-printable elements */
    .print-actions[b-p8j58qfbkm],
    .mobile-cards[b-p8j58qfbkm],
    .no-print[b-p8j58qfbkm],
    .loading-container[b-p8j58qfbkm],
    .empty-state[b-p8j58qfbkm],
    .select-column[b-p8j58qfbkm],
    input[type="checkbox"][b-p8j58qfbkm] {
        display: none !important;
    }

    /* Reset page margins and center content */
    @page {
        margin: 1cm;
        size: A4 portrait;
    }

    body[b-p8j58qfbkm] {
        margin: 0;
        padding: 0;
    }

    /* Show summary section only in print */
    .summary-section[b-p8j58qfbkm] {
        display: block !important;
        page-break-after: avoid;
        margin: 0 auto 0.75rem auto;
        background-color: white !important;
        border: 1px solid #e0e0e0;
        padding: 0.5rem;
        width: 100%;
    }

    .company-header[b-p8j58qfbkm] {
        border-bottom: 1px solid #2c3e50;
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .company-name[b-p8j58qfbkm] {
        font-size: 1.125rem;
        color: black !important;
        text-align: center;
    }

    .financial-summary[b-p8j58qfbkm] {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.375rem;
        margin-bottom: 0.5rem;
    }

    .summary-card[b-p8j58qfbkm] {
        border: 1px solid #e0e0e0;
        page-break-inside: avoid;
        padding: 0.375rem;
    }

    .summary-icon[b-p8j58qfbkm] {
        background-color: #f8f9fa !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        width: 24px;
        height: 24px;
    }

        .summary-icon i[b-p8j58qfbkm] {
            color: #4a5568 !important;
            font-size: 0.75rem;
        }

    .summary-label[b-p8j58qfbkm] {
        color: black !important;
        font-weight: 600;
        font-size: 0.5625rem;
    }

    .summary-value[b-p8j58qfbkm] {
        color: black !important;
        font-size: 0.75rem;
    }

    .selected-count[b-p8j58qfbkm] {
        font-weight: 600;
        color: black !important;
        border-top: 1px solid #e0e0e0;
        padding-top: 0.375rem;
        font-size: 0.5625rem;
    }

    /* Center and style the table container */
    .table-container[b-p8j58qfbkm] {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        box-shadow: none;
        border: none;
        background: white;
    }

    .desktop-table[b-p8j58qfbkm] {
        display: block !important;
    }

    /* Table styling for print */
    .data-table[b-p8j58qfbkm] {
        width: 100%;
        margin: 0 auto;
        border-collapse: collapse;
        font-size: 9px;
        page-break-inside: auto;
        table-layout: fixed;
    }

        .data-table th[b-p8j58qfbkm],
        .data-table td[b-p8j58qfbkm] {
            border: 1px solid #000;
            padding: 4px 6px;
            text-align: right;
            page-break-inside: avoid;
            vertical-align: top;
            word-wrap: break-word;
            overflow: hidden;
        }

        .data-table th[b-p8j58qfbkm] {
            background-color: #f5f5f5 !important;
            font-weight: bold;
            text-align: center;
            font-size: 10px;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .data-table tr[b-p8j58qfbkm] {
            page-break-inside: avoid;
            page-break-after: auto;
        }

        .data-table thead[b-p8j58qfbkm] {
            display: table-header-group;
        }

        .data-table tbody[b-p8j58qfbkm] {
            display: table-row-group;
        }

        /* Adjust column widths for A4 */
        .data-table th:nth-child(2)[b-p8j58qfbkm],
        .data-table td:nth-child(2)[b-p8j58qfbkm] { /* Customer */
            width: 18%;
        }

        .data-table th:nth-child(3)[b-p8j58qfbkm],
        .data-table td:nth-child(3)[b-p8j58qfbkm] { /* Product */
            width: 15%;
        }

        .data-table th:nth-child(4)[b-p8j58qfbkm],
        .data-table td:nth-child(4)[b-p8j58qfbkm] { /* Dates */
            width: 12%;
        }

        .data-table th:nth-child(5)[b-p8j58qfbkm],
        .data-table td:nth-child(5)[b-p8j58qfbkm] { /* Agents */
            width: 15%;
        }

        .data-table th:nth-child(6)[b-p8j58qfbkm],
        .data-table td:nth-child(6)[b-p8j58qfbkm] { /* Financial */
            width: 15%;
        }

        .data-table th:nth-child(7)[b-p8j58qfbkm],
        .data-table td:nth-child(7)[b-p8j58qfbkm] { /* Installment */
            width: 13%;
        }

        .data-table th:nth-child(8)[b-p8j58qfbkm],
        .data-table td:nth-child(8)[b-p8j58qfbkm] { /* Contact */
            width: 12%;
        }

    /* Simplify complex elements for print */
    .progress-bar[b-p8j58qfbkm] {
        display: none;
    }

    .phone-link[b-p8j58qfbkm] {
        text-decoration: none;
        color: black !important;
    }

    .customer-info h4[b-p8j58qfbkm] {
        margin: 0;
        font-size: 11px;
    }

    .customer-info p[b-p8j58qfbkm] {
        margin: 0;
        font-size: 9px;
    }

    /* Colors for print */
    .amount-row.positive .amount-value[b-p8j58qfbkm] {
        color: #28a745 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .amount-row.negative .amount-value[b-p8j58qfbkm] {
        color: #dc3545 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Compact spacing */
    .date-info[b-p8j58qfbkm],
    .agents-info[b-p8j58qfbkm],
    .financial-info[b-p8j58qfbkm],
    .installment-info[b-p8j58qfbkm],
    .contact-info[b-p8j58qfbkm] {
        margin: 0;
        padding: 0;
    }

    .date-row[b-p8j58qfbkm],
    .agent-row[b-p8j58qfbkm],
    .amount-row[b-p8j58qfbkm] {
        margin: 2px 0;
    }

    /* Force background colors to print */
    *[b-p8j58qfbkm] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/Component/ReceiptPrintGenerator.razor.rz.scp.css */
/* Print Preview Component - Modern Professional Style */
.print-preview-modal[b-spqxddez4g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--spacing-lg);
    animation: fadeIn-b-spqxddez4g var(--transition-base);
}

.print-preview-content[b-spqxddez4g] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-radius: var(--radius-2xl);
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: zoomIn-b-spqxddez4g 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

[data-theme="dark"] .print-preview-content[b-spqxddez4g] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.print-preview-header[b-spqxddez4g] {
    padding: var(--spacing-xl) var(--spacing-2xl);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

    .print-preview-header h3[b-spqxddez4g] {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.print-preview-body[b-spqxddez4g] {
    flex: 1;
    overflow: hidden;
    padding: var(--spacing-xl);
    position: relative;
}

    .print-preview-body iframe[b-spqxddez4g] {
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        transition: all var(--transition-base);
    }

.print-preview-footer[b-spqxddez4g] {
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
}

[data-theme="dark"] .print-preview-footer[b-spqxddez4g] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(30, 41, 59, 0.7) 100%);
}

.btn-close[b-spqxddez4g] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .btn-close:hover[b-spqxddez4g] {
        color: #4c1d95;
        transform: rotate(90deg);
        background-color: rgba(102, 126, 234, 0.1);
    }

[data-theme="dark"] .btn-close[b-spqxddez4g] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-spqxddez4g] {
        color: #e2e8f0;
        background-color: rgba(102, 126, 234, 0.2);
    }

/* Button Styles */
.btn[b-spqxddez4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: var(--spacing-sm);
    min-width: 120px;
    border: none;
    cursor: pointer;
}

.btn-primary[b-spqxddez4g] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-spqxddez4g] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-spqxddez4g] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-secondary:hover[b-spqxddez4g] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

[data-theme="dark"] .btn-secondary[b-spqxddez4g] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-secondary:hover[b-spqxddez4g] {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    }

/* Animations */
@keyframes fadeIn-b-spqxddez4g {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

/* Responsive Design */
@media (max-width: 768px) {
    .print-preview-content[b-spqxddez4g] {
        width: 95%;
        max-height: 95vh;
    }

    .print-preview-header[b-spqxddez4g] {
        padding: var(--spacing-lg);
    }

    .print-preview-body[b-spqxddez4g] {
        padding: var(--spacing-md);
    }

    .print-preview-footer[b-spqxddez4g] {
        padding: var(--spacing-lg);
        flex-direction: column-reverse;
    }

    .btn[b-spqxddez4g] {
        width: 100%;
    }

    .print-preview-header h3[b-spqxddez4g] {
        font-size: 20px;
    }
}

/* RTL Support */
html[dir="rtl"] .print-preview-footer[b-spqxddez4g] {
    justify-content: flex-start;
}

html[dir="rtl"] .print-preview-header h3[b-spqxddez4g] {
    margin-left: auto;
    margin-right: 0;
}
/* _content/Sahelly/Components/Pages/Merchant/Component/SlowMovingStock.razor.rz.scp.css */

/* Slow Moving Stock Component - Modern Professional Style */

.slow-moving-stock-container[b-4mbdy4pq62] {
    padding: 20px;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.component-loading[b-4mbdy4pq62] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Analysis Settings */
.analysis-settings[b-4mbdy4pq62] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-control[b-4mbdy4pq62] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-4mbdy4pq62] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.form-label[b-4mbdy4pq62] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
}

.input-group[b-4mbdy4pq62] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group-text[b-4mbdy4pq62] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 2px solid transparent;
    border-radius: 0 12px 12px 0;
}

.input-group .form-control[b-4mbdy4pq62] {
    border-radius: 12px 0 0 12px;
    flex: 1 1 auto;
    width: 1%;
}

.btn-primary[b-4mbdy4pq62] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover[b-4mbdy4pq62] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Summary Cards */
.slow-stock-summary[b-4mbdy4pq62] {
    margin-bottom: 32px;
}

.summary-card[b-4mbdy4pq62] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-4mbdy4pq62]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-4mbdy4pq62] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

        .summary-card:hover[b-4mbdy4pq62]::before {
            opacity: 1;
        }

.card-icon[b-4mbdy4pq62] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-card.warning .card-icon[b-4mbdy4pq62] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.summary-card.danger .card-icon[b-4mbdy4pq62] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
}

.summary-card.value .card-icon[b-4mbdy4pq62] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.summary-card.info .card-icon[b-4mbdy4pq62] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.card-content[b-4mbdy4pq62] {
    flex: 1;
}

.card-value[b-4mbdy4pq62] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.card-label[b-4mbdy4pq62] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
    font-weight: 500;
}

.card-detail[b-4mbdy4pq62] {
    font-size: 13px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .card-detail.positive[b-4mbdy4pq62] {
        color: #10b981;
    }

    .card-detail.negative[b-4mbdy4pq62] {
        color: #ef4444;
    }

/* Recommendations Section */
.recommendations-section[b-4mbdy4pq62] {
    margin-bottom: 24px;
}

.section-title[b-4mbdy4pq62] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title i[b-4mbdy4pq62] {
        color: #667eea;
    }

.recommendations-grid[b-4mbdy4pq62] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.recommendation-card[b-4mbdy4pq62] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

    .recommendation-card:hover[b-4mbdy4pq62] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

    .recommendation-card i[b-4mbdy4pq62] {
        font-size: 32px;
        margin-bottom: 16px;
        display: inline-block;
    }

    .recommendation-card h5[b-4mbdy4pq62] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .recommendation-card p[b-4mbdy4pq62] {
        font-size: 15px;
        color: var(--text-secondary);
        margin-bottom: 20px;
    }

    .recommendation-card.discount i[b-4mbdy4pq62] {
        color: #f59e0b;
    }

    .recommendation-card.bundle i[b-4mbdy4pq62] {
        color: #8b5cf6;
    }

    .recommendation-card.liquidate i[b-4mbdy4pq62] {
        color: #ef4444;
    }

.btn-action[b-4mbdy4pq62] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-action:hover[b-4mbdy4pq62] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Slow Moving Items Table */
.slow-stock-table-wrapper[b-4mbdy4pq62] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.slow-stock-table[b-4mbdy4pq62] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .slow-stock-table th[b-4mbdy4pq62] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .slow-stock-table td[b-4mbdy4pq62] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .slow-stock-table tbody tr[b-4mbdy4pq62] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }

        .slow-stock-table tbody tr:hover[b-4mbdy4pq62] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

/* Risk Levels */
.risk-low[b-4mbdy4pq62] {
    border-left: 4px solid #10b981;
}

.risk-medium[b-4mbdy4pq62] {
    border-left: 4px solid #f59e0b;
}

.risk-high[b-4mbdy4pq62] {
    border-left: 4px solid #ef4444;
}

.risk-critical[b-4mbdy4pq62] {
    border-left: 4px solid #d04e5f;
    background-color: rgba(208, 78, 95, 0.05);
}

.product-info[b-4mbdy4pq62] {
    display: flex;
    flex-direction: column;
}

.product-name[b-4mbdy4pq62] {
    font-weight: 600;
    color: var(--text-primary);
}

.product-sku[b-4mbdy4pq62] {
    color: var(--text-tertiary);
    font-size: 12px;
}

.category-badge[b-4mbdy4pq62] {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.quantity-badge[b-4mbdy4pq62] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.days-badge[b-4mbdy4pq62] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

    .days-badge.warning[b-4mbdy4pq62] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .days-badge.danger[b-4mbdy4pq62] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.turnover-badge[b-4mbdy4pq62] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.risk-badge[b-4mbdy4pq62] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-secondary[b-4mbdy4pq62] {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
    border: 1px solid rgba(156, 163, 175, 0.2);
}

.badge-info[b-4mbdy4pq62] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.badge-warning[b-4mbdy4pq62] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-danger[b-4mbdy4pq62] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

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

.btn-sm[b-4mbdy4pq62] {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 8px;
}

.no-data[b-4mbdy4pq62] {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-tertiary);
}

    .no-data i[b-4mbdy4pq62] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-data p[b-4mbdy4pq62] {
        font-size: 16px;
        font-weight: 500;
    }

/* Mobile View */
.slow-stock-mobile-view[b-4mbdy4pq62] {
    display: none;
}

.slow-stock-card[b-4mbdy4pq62] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header[b-4mbdy4pq62] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .card-header h5[b-4mbdy4pq62] {
        margin: 0 0 4px 0;
        font-size: 16px;
        color: var(--text-primary);
    }

    .card-header small[b-4mbdy4pq62] {
        color: var(--text-tertiary);
        font-size: 12px;
    }

.card-body[b-4mbdy4pq62] {
    padding: 16px;
}

.info-grid[b-4mbdy4pq62] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-item[b-4mbdy4pq62] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .info-item .label[b-4mbdy4pq62] {
        color: var(--text-secondary);
        font-size: 12px;
    }

    .info-item .value[b-4mbdy4pq62] {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 16px;
    }

.card-footer[b-4mbdy4pq62] {
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recommendation[b-4mbdy4pq62] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 992px) {
    .slow-stock-table-wrapper[b-4mbdy4pq62] {
        display: none;
    }

    .slow-stock-mobile-view[b-4mbdy4pq62] {
        display: block;
    }
}

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

    .summary-card[b-4mbdy4pq62] {
        padding: 16px;
    }

    .card-icon[b-4mbdy4pq62] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .card-value[b-4mbdy4pq62] {
        font-size: 24px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .slow-moving-stock-container[b-4mbdy4pq62] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
}

[data-theme="dark"] .analysis-settings[b-4mbdy4pq62],
[data-theme="dark"] .summary-card[b-4mbdy4pq62],
[data-theme="dark"] .recommendation-card[b-4mbdy4pq62],
[data-theme="dark"] .slow-stock-table-wrapper[b-4mbdy4pq62],
[data-theme="dark"] .slow-stock-card[b-4mbdy4pq62] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .input-group-text[b-4mbdy4pq62] {
    background: rgba(71, 85, 105, 0.3);
    color: #a78bfa;
}

[data-theme="dark"] .slow-stock-table tbody tr[b-4mbdy4pq62] {
    background: #1e293b;
}

    [data-theme="dark"] .slow-stock-table tbody tr:hover[b-4mbdy4pq62] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .form-control[b-4mbdy4pq62] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-4mbdy4pq62] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .form-label[b-4mbdy4pq62] {
    color: #e2e8f0;
}

[data-theme="dark"] .section-title[b-4mbdy4pq62] {
    color: #e2e8f0;
}

[data-theme="dark"] .card-header h5[b-4mbdy4pq62],
[data-theme="dark"] .product-name[b-4mbdy4pq62],
[data-theme="dark"] .card-value[b-4mbdy4pq62],
[data-theme="dark"] .recommendation-card h5[b-4mbdy4pq62],
[data-theme="dark"] .info-item .value[b-4mbdy4pq62] {
    color: #e2e8f0;
}

[data-theme="dark"] .risk-critical[b-4mbdy4pq62] {
    background-color: rgba(208, 78, 95, 0.15);
}

[data-theme="dark"] .category-badge[b-4mbdy4pq62] {
    background: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .recommendation-card p[b-4mbdy4pq62] {
    color: #94a3b8;
}
/* _content/Sahelly/Components/Pages/Merchant/CouponStatistics.razor.rz.scp.css */
/* ===================================
   Coupon Statistics Page - Modern Professional CSS
   Following Users.razor.css Design Architecture
   =================================== */

/* Page Container */
.statistics-container[b-dvotejadw4] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .statistics-container[b-dvotejadw4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .statistics-container > *[b-dvotejadw4] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-dvotejadw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content h1[b-dvotejadw4] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .header-content h1 i[b-dvotejadw4] {
        font-size: 32px;
        -webkit-text-fill-color: #667eea;
    }

.breadcrumb[b-dvotejadw4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-top: 8px;
}

    .breadcrumb a[b-dvotejadw4] {
        color: #6b7280;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s;
    }

        .breadcrumb a:hover[b-dvotejadw4] {
            color: #667eea;
        }

    .breadcrumb span[b-dvotejadw4] {
        color: #d1d5db;
    }

        .breadcrumb span:last-child[b-dvotejadw4] {
            color: #4c1d95;
            font-weight: 600;
        }

.header-actions[b-dvotejadw4] {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn-primary[b-dvotejadw4],
.btn-secondary[b-dvotejadw4] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary[b-dvotejadw4] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-dvotejadw4] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-dvotejadw4] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(79, 172, 254, 0.2);
}

    .btn-secondary:hover[b-dvotejadw4] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(79, 172, 254, 0.3);
    }

.btn-link[b-dvotejadw4] {
    background: transparent;
    border: none;
    color: #667eea;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-link:hover[b-dvotejadw4] {
        color: #764ba2;
        transform: translateX(4px);
    }

    .btn-link:disabled[b-dvotejadw4] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Coupon Info Card */
.coupon-info-card[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .coupon-info-card[b-dvotejadw4]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
        animation: rotate-b-dvotejadw4 30s linear infinite;
    }

@keyframes rotate-b-dvotejadw4 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.info-header[b-dvotejadw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.code-section[b-dvotejadw4] {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .code-section i[b-dvotejadw4] {
        font-size: 36px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .code-section h2[b-dvotejadw4] {
        font-size: 32px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.validity-period[b-dvotejadw4] {
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
}

.info-details[b-dvotejadw4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 1;
}

.detail-item[b-dvotejadw4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .detail-item .label[b-dvotejadw4] {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
    }

    .detail-item .value[b-dvotejadw4] {
        font-size: 18px;
        color: #1f2937;
        font-weight: 700;
    }

/* Badges */
.badge[b-dvotejadw4] {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.badge-active[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.badge-inactive[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
    color: #dc2626;
    border: 1px solid rgba(245, 87, 108, 0.3);
}

.badge-expired[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(107, 114, 128, 0.2) 100%);
    color: #6b7280;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

/* Statistics Overview */
.stats-overview[b-dvotejadw4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-dvotejadw4]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-dvotejadw4] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-dvotejadw4]::before {
            opacity: 1;
        }

.stat-icon[b-dvotejadw4] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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

.stat-card.success .stat-icon[b-dvotejadw4] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-card.warning .stat-icon[b-dvotejadw4] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-card.info .stat-icon[b-dvotejadw4] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

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

.stat-value[b-dvotejadw4] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.stat-label[b-dvotejadw4] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Charts Section */
.charts-section[b-dvotejadw4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.chart-card[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.chart-header[b-dvotejadw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .chart-header h3[b-dvotejadw4] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: #4c1d95;
    }

.chart-filter[b-dvotejadw4] {
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    color: #4c1d95;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .chart-filter:focus[b-dvotejadw4] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.chart-content[b-dvotejadw4] {
    padding: 28px;
    min-height: 300px;
}

.simple-chart[b-dvotejadw4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 250px;
    gap: 8px;
    padding: 0 16px;
}

.chart-bar-container[b-dvotejadw4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.chart-bar[b-dvotejadw4] {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px 8px 0 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 4px;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .chart-bar:hover[b-dvotejadw4] {
        transform: scaleY(1.05);
        box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
    }

    .chart-bar.revenue[b-dvotejadw4] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

.chart-label[b-dvotejadw4] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    font-weight: 500;
}

/* Tables Section */
.tables-section[b-dvotejadw4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.table-card[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.table-header[b-dvotejadw4] {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .table-header h3[b-dvotejadw4] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .table-header h3 i[b-dvotejadw4] {
            color: #667eea;
        }

.table-content[b-dvotejadw4] {
    padding: 24px;
}

.data-table[b-dvotejadw4] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-dvotejadw4] {
        padding: 12px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .data-table td[b-dvotejadw4] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        color: #1f2937;
    }

    .data-table tbody tr[b-dvotejadw4] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .data-table tbody tr:hover[b-dvotejadw4] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
        }

        .data-table tbody tr:last-child td[b-dvotejadw4] {
            border-bottom: none;
        }

/* Recent Usages Section */
.recent-usages-section[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-header[b-dvotejadw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .section-header h3[b-dvotejadw4] {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .section-header h3 i[b-dvotejadw4] {
            color: #667eea;
        }

.usages-list[b-dvotejadw4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.usage-item[b-dvotejadw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .usage-item:hover[b-dvotejadw4] {
        transform: translateX(8px);
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
        border-color: #667eea;
    }

.usage-info[b-dvotejadw4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customer-info[b-dvotejadw4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .customer-info i[b-dvotejadw4] {
        color: #667eea;
        font-size: 18px;
    }

.customer-name[b-dvotejadw4] {
    font-weight: 600;
    color: #1f2937;
    font-size: 16px;
}

.customer-phone[b-dvotejadw4] {
    color: #6b7280;
    font-size: 14px;
}

.order-info[b-dvotejadw4] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-number[b-dvotejadw4] {
    font-size: 14px;
    color: #8b5cf6;
    font-weight: 500;
}

.order-amount[b-dvotejadw4] {
    font-size: 16px;
    color: #1f2937;
    font-weight: 600;
}

.usage-details[b-dvotejadw4] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.discount-amount[b-dvotejadw4] {
    font-size: 18px;
    font-weight: 700;
    color: #ef4444;
}

.usage-date[b-dvotejadw4] {
    font-size: 13px;
    color: #6b7280;
}

/* Loading & Empty States */
.loading-container[b-dvotejadw4],
.error-container[b-dvotejadw4],
.unauthorized-content[b-dvotejadw4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 40px;
}

.no-data[b-dvotejadw4] {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

    .no-data i[b-dvotejadw4] {
        margin-bottom: 16px;
    }

    .no-data p[b-dvotejadw4] {
        font-size: 16px;
        margin: 0;
    }

.spinner-border[b-dvotejadw4] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-dvotejadw4 0.8s linear infinite;
}

.spinner-border-sm[b-dvotejadw4] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

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

/* Dark Theme Support */
[data-theme="dark"] .statistics-container[b-dvotejadw4] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .statistics-container[b-dvotejadw4]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-dvotejadw4],
[data-theme="dark"] .coupon-info-card[b-dvotejadw4],
[data-theme="dark"] .stat-card[b-dvotejadw4],
[data-theme="dark"] .chart-card[b-dvotejadw4],
[data-theme="dark"] .table-card[b-dvotejadw4],
[data-theme="dark"] .recent-usages-section[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .chart-header[b-dvotejadw4],
[data-theme="dark"] .table-header[b-dvotejadw4] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .header-content h1[b-dvotejadw4],
[data-theme="dark"] .code-section h2[b-dvotejadw4],
[data-theme="dark"] .stat-value[b-dvotejadw4] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb a[b-dvotejadw4] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb a:hover[b-dvotejadw4] {
        color: #a78bfa;
    }

[data-theme="dark"] .detail-item .value[b-dvotejadw4],
[data-theme="dark"] .customer-name[b-dvotejadw4],
[data-theme="dark"] .order-amount[b-dvotejadw4],
[data-theme="dark"] .data-table td[b-dvotejadw4] {
    color: #e2e8f0;
}

[data-theme="dark"] .validity-period[b-dvotejadw4],
[data-theme="dark"] .detail-item .label[b-dvotejadw4],
[data-theme="dark"] .stat-label[b-dvotejadw4],
[data-theme="dark"] .chart-label[b-dvotejadw4],
[data-theme="dark"] .customer-phone[b-dvotejadw4],
[data-theme="dark"] .usage-date[b-dvotejadw4] {
    color: #9ca3af;
}

[data-theme="dark"] .usage-item[b-dvotejadw4] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .usage-item:hover[b-dvotejadw4] {
        border-color: #a78bfa;
    }

[data-theme="dark"] .chart-filter[b-dvotejadw4],
[data-theme="dark"] select[b-dvotejadw4] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .chart-filter:focus[b-dvotejadw4],
    [data-theme="dark"] select:focus[b-dvotejadw4] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .data-table tbody tr:hover[b-dvotejadw4] {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .charts-section[b-dvotejadw4],
    .tables-section[b-dvotejadw4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .statistics-container[b-dvotejadw4] {
        padding: 16px;
    }

    .page-header[b-dvotejadw4] {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

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

    .header-content h1[b-dvotejadw4] {
        font-size: 28px;
    }

    .stats-overview[b-dvotejadw4] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-dvotejadw4] {
        padding: 20px;
    }

    .stat-icon[b-dvotejadw4] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-dvotejadw4] {
        font-size: 24px;
    }

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

    .code-section h2[b-dvotejadw4] {
        font-size: 24px;
    }

    .simple-chart[b-dvotejadw4] {
        height: 200px;
        gap: 4px;
        padding: 0;
    }

    .chart-label[b-dvotejadw4] {
        font-size: 10px;
    }

    .usage-item[b-dvotejadw4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .usage-details[b-dvotejadw4] {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .data-table[b-dvotejadw4] {
        font-size: 14px;
    }

        .data-table th[b-dvotejadw4],
        .data-table td[b-dvotejadw4] {
            padding: 12px 8px;
        }
}

@media (max-width: 480px) {
    .header-content h1[b-dvotejadw4] {
        font-size: 24px;
    }

    .breadcrumb[b-dvotejadw4] {
        font-size: 12px;
    }

    .btn-primary[b-dvotejadw4],
    .btn-secondary[b-dvotejadw4] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .coupon-info-card[b-dvotejadw4] {
        padding: 20px;
    }

    .code-section[b-dvotejadw4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .recent-usages-section[b-dvotejadw4] {
        padding: 20px;
    }
}

/* RTL Support */
html[dir="rtl"] .data-table th[b-dvotejadw4],
html[dir="rtl"] .data-table td[b-dvotejadw4] {
    text-align: left;
}

html[dir="rtl"] .usage-item:hover[b-dvotejadw4] {
    transform: translateX(-8px);
}

html[dir="rtl"] .usage-details[b-dvotejadw4] {
    align-items: flex-start;
}

/* Print Styles */
@media print {
    .statistics-container[b-dvotejadw4] {
        background: white !important;
    }

    .header-actions[b-dvotejadw4],
    .btn-link[b-dvotejadw4],
    .chart-filter[b-dvotejadw4] {
        display: none !important;
    }

    .stat-card[b-dvotejadw4],
    .chart-card[b-dvotejadw4],
    .table-card[b-dvotejadw4] {
        break-inside: avoid;
    }

    .badge[b-dvotejadw4] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Focus States for Accessibility */
*:focus[b-dvotejadw4] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-dvotejadw4],
.btn-primary:focus[b-dvotejadw4],
.btn-secondary:focus[b-dvotejadw4],
.btn-link:focus[b-dvotejadw4] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-primary[b-dvotejadw4],
    .btn-secondary[b-dvotejadw4] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-dvotejadw4] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/CustomerDetails.razor.rz.scp.css */
/* Customer Details Page - Modern Professional Design
   Based on the design system from MerchantDashboard and MerchantAgents
   ========================================================= */

/* Page Container */
.customer-details-page[b-jh9yryiw5j] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .customer-details-page[b-jh9yryiw5j]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .customer-details-page > *[b-jh9yryiw5j] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Header Section */
.page-header-enhanced[b-jh9yryiw5j] {
    margin-bottom: 32px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-jh9yryiw5j] {
    flex: 1;
}

.breadcrumb-modern[b-jh9yryiw5j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item[b-jh9yryiw5j] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-jh9yryiw5j] {
        color: #667eea;
    }

.separator[b-jh9yryiw5j] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-jh9yryiw5j] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-jh9yryiw5j] {
    margin-bottom: 4px;
}

.page-title-modern[b-jh9yryiw5j] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.title-icon[b-jh9yryiw5j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-jh9yryiw5j] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

    .page-subtitle-enhanced strong[b-jh9yryiw5j] {
        color: #4c1d95;
        font-weight: 600;
    }

.header-actions[b-jh9yryiw5j] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Action Buttons */
.btn-action-primary[b-jh9yryiw5j],
.btn-action-secondary[b-jh9yryiw5j],
.btn-action-success[b-jh9yryiw5j],
.btn-action-warning[b-jh9yryiw5j],
.btn-action-danger[b-jh9yryiw5j] {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-action-primary[b-jh9yryiw5j] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-action-primary:hover[b-jh9yryiw5j] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
    }

.btn-action-secondary[b-jh9yryiw5j] {
    background: #f3f4f6;
    color: #4b5563;
    border: 2px solid #e5e7eb;
}

    .btn-action-secondary:hover[b-jh9yryiw5j] {
        background: #e5e7eb;
        border-color: #d1d5db;
    }

.btn-action-success[b-jh9yryiw5j] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
}

.btn-action-warning[b-jh9yryiw5j] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
}

.btn-action-danger[b-jh9yryiw5j] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
}

.btn-sm-primary[b-jh9yryiw5j] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Loading Container */
.loading-container[b-jh9yryiw5j] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-container[b-jh9yryiw5j] {
    text-align: center;
}

.spinner[b-jh9yryiw5j] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-jh9yryiw5j 0.8s linear infinite;
    margin: 0 auto 20px;
}

.loading-text[b-jh9yryiw5j] {
    color: #4c1d95;
    font-weight: 600;
    font-size: 18px;
}

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

/* Error & Unauthorized Containers */
.error-container[b-jh9yryiw5j],
.unauthorized-container[b-jh9yryiw5j] {
    background: white;
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 40px auto;
}

    .error-container i[b-jh9yryiw5j],
    .unauthorized-container i[b-jh9yryiw5j] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .unauthorized-container i[b-jh9yryiw5j] {
        color: #f59e0b;
    }

    .error-container h3[b-jh9yryiw5j],
    .unauthorized-container h3[b-jh9yryiw5j] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .error-container p[b-jh9yryiw5j],
    .unauthorized-container p[b-jh9yryiw5j] {
        color: #6b7280;
        margin-bottom: 24px;
    }

    .error-container .btn[b-jh9yryiw5j],
    .unauthorized-container .btn[b-jh9yryiw5j] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        text-decoration: none;
        display: inline-block;
        font-weight: 600;
        transition: all 0.3s ease;
    }

/* Information Grid */
.info-grid[b-jh9yryiw5j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Information Cards */
.info-card[b-jh9yryiw5j] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .info-card:hover[b-jh9yryiw5j] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

.card-header[b-jh9yryiw5j] {
    padding: 20px;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-jh9yryiw5j] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .card-title i[b-jh9yryiw5j] {
        color: #667eea;
        font-size: 20px;
    }

.status-badge[b-jh9yryiw5j] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

    .status-badge.active[b-jh9yryiw5j] {
        background: #d1fae5;
        color: #065f46;
    }

    .status-badge.inactive[b-jh9yryiw5j] {
        background: #fee2e2;
        color: #991b1b;
    }

.btn-icon[b-jh9yryiw5j] {
    width: 36px;
    height: 36px;
    border: none;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #6b7280;
    font-size: 16px;
}

    .btn-icon:hover[b-jh9yryiw5j] {
        background: #667eea;
        color: white;
        transform: scale(1.1);
    }

.card-content[b-jh9yryiw5j] {
    padding: 20px;
}

.info-row[b-jh9yryiw5j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .info-row:last-child[b-jh9yryiw5j] {
        border-bottom: none;
    }

.info-label[b-jh9yryiw5j] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.info-value[b-jh9yryiw5j] {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
    text-align: right;
}

.phone-link[b-jh9yryiw5j],
.email-link[b-jh9yryiw5j] {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

    .phone-link:hover[b-jh9yryiw5j],
    .email-link:hover[b-jh9yryiw5j] {
        color: #764ba2;
    }

.code-badge[b-jh9yryiw5j] {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    padding: 4px 12px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    color: #4c1d95;
}

.text-muted[b-jh9yryiw5j] {
    color: #9ca3af;
    font-style: italic;
}

.amount[b-jh9yryiw5j] {
    font-family: monospace;
    font-size: 15px;
}

    .amount.available[b-jh9yryiw5j] {
        color: #10b981;
    }

    .amount.success[b-jh9yryiw5j] {
        color: #10b981;
    }

    .amount.danger[b-jh9yryiw5j] {
        color: #ef4444;
    }

.empty-message[b-jh9yryiw5j] {
    text-align: center;
    color: #6b7280;
    padding: 20px;
    font-style: italic;
}

/* Agent Information */
.agent-info[b-jh9yryiw5j] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.agent-avatar[b-jh9yryiw5j] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

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

.agent-details h4[b-jh9yryiw5j] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.agent-type[b-jh9yryiw5j] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.agent-phone[b-jh9yryiw5j] {
    color: #667eea;
    text-decoration: none;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Statistics Section */
.statistics-section[b-jh9yryiw5j] {
    margin-bottom: 32px;
}

.section-title[b-jh9yryiw5j] {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .section-title i[b-jh9yryiw5j] {
        color: #667eea;
    }

.stats-grid[b-jh9yryiw5j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-card[b-jh9yryiw5j] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .stat-card:hover[b-jh9yryiw5j] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

.stat-icon[b-jh9yryiw5j] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

    .stat-icon.orders[b-jh9yryiw5j] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.purchases[b-jh9yryiw5j] {
        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    }

    .stat-icon.completed[b-jh9yryiw5j] {
        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    }

    .stat-icon.pending[b-jh9yryiw5j] {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    }

    .stat-icon.payments[b-jh9yryiw5j] {
        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    }

    .stat-icon.late[b-jh9yryiw5j] {
        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    }

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

.stat-value[b-jh9yryiw5j] {
    font-size: 24px;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.stat-label[b-jh9yryiw5j] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Orders Section */
.orders-section[b-jh9yryiw5j] {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 32px;
}

.section-header[b-jh9yryiw5j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.view-all-link[b-jh9yryiw5j] {
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

    .view-all-link:hover[b-jh9yryiw5j] {
        color: #764ba2;
    }

/* Table Styles */
.table-container[b-jh9yryiw5j] {
    overflow-x: auto;
}

.data-table[b-jh9yryiw5j] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-jh9yryiw5j] {
        text-align: left;
        padding: 12px;
        font-weight: 600;
        color: #6b7280;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #e5e7eb;
        background: #f9fafb;
    }

    .data-table td[b-jh9yryiw5j] {
        padding: 16px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-jh9yryiw5j] {
        background: #f9fafb;
    }

.order-number-link[b-jh9yryiw5j] {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

    .order-number-link:hover[b-jh9yryiw5j] {
        color: #764ba2;
        text-decoration: underline;
    }

/* Order Status Badges */
.status-badge[b-jh9yryiw5j] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

    .status-badge.pending[b-jh9yryiw5j] {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.confirmed[b-jh9yryiw5j] {
        background: #dbeafe;
        color: #1e40af;
    }

    .status-badge.processing[b-jh9yryiw5j] {
        background: #e0e7ff;
        color: #3730a3;
    }

    .status-badge.shipped[b-jh9yryiw5j] {
        background: #cffafe;
        color: #155e75;
    }

    .status-badge.delivered[b-jh9yryiw5j] {
        background: #d1fae5;
        color: #065f46;
    }

    .status-badge.cancelled[b-jh9yryiw5j] {
        background: #fee2e2;
        color: #991b1b;
    }

.payment-status[b-jh9yryiw5j] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

    .payment-status.pending[b-jh9yryiw5j] {
        background: #fef3c7;
        color: #92400e;
    }

    .payment-status.paid[b-jh9yryiw5j] {
        background: #d1fae5;
        color: #065f46;
    }

    .payment-status.partial[b-jh9yryiw5j] {
        background: #e0e7ff;
        color: #3730a3;
    }

    .payment-status.refunded[b-jh9yryiw5j] {
        background: #fee2e2;
        color: #991b1b;
    }

/* Mobile Styles */
.desktop-table[b-jh9yryiw5j] {
    display: block;
}

.mobile-cards[b-jh9yryiw5j] {
    display: none;
}

/* Empty State */
.empty-state[b-jh9yryiw5j] {
    text-align: center;
    padding: 60px 20px;
}

    .empty-state i[b-jh9yryiw5j] {
        font-size: 64px;
        color: #e5e7eb;
        margin-bottom: 20px;
    }

    .empty-state h3[b-jh9yryiw5j] {
        font-size: 20px;
        font-weight: 700;
        color: #4b5563;
        margin-bottom: 8px;
    }

    .empty-state p[b-jh9yryiw5j] {
        color: #9ca3af;
    }

/* Action Buttons Section */
.action-buttons[b-jh9yryiw5j] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .info-grid[b-jh9yryiw5j] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .customer-details-page[b-jh9yryiw5j] {
        padding: 16px;
    }

    .page-header-enhanced[b-jh9yryiw5j] {
        padding: 20px;
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-jh9yryiw5j] {
        width: 100%;
        justify-content: flex-start;
    }

    .page-title-modern[b-jh9yryiw5j] {
        font-size: 24px;
    }

    .title-icon[b-jh9yryiw5j] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .info-grid[b-jh9yryiw5j] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stats-grid[b-jh9yryiw5j] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-card[b-jh9yryiw5j] {
        padding: 16px;
    }

    .stat-icon[b-jh9yryiw5j] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .stat-value[b-jh9yryiw5j] {
        font-size: 20px;
    }

    /* Hide desktop table and show mobile cards */
    .desktop-table[b-jh9yryiw5j] {
        display: none;
    }

    .mobile-cards[b-jh9yryiw5j] {
        display: block;
    }

    .order-card[b-jh9yryiw5j] {
        background: #f9fafb;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .order-card:hover[b-jh9yryiw5j] {
            background: #f3f4f6;
            transform: translateY(-2px);
        }

    .order-header[b-jh9yryiw5j] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .order-number[b-jh9yryiw5j] {
        font-weight: 700;
        color: #667eea;
        font-size: 15px;
    }

    .order-date[b-jh9yryiw5j] {
        font-size: 13px;
        color: #6b7280;
    }

    .order-content[b-jh9yryiw5j] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

    .order-info[b-jh9yryiw5j] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .order-info .label[b-jh9yryiw5j] {
            font-size: 12px;
            color: #9ca3af;
        }

        .order-info .value[b-jh9yryiw5j] {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
        }

    .order-footer[b-jh9yryiw5j] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

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

    .btn-action-primary[b-jh9yryiw5j],
    .btn-action-secondary[b-jh9yryiw5j],
    .btn-action-success[b-jh9yryiw5j],
    .btn-action-warning[b-jh9yryiw5j],
    .btn-action-danger[b-jh9yryiw5j] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .breadcrumb-modern[b-jh9yryiw5j] {
        font-size: 12px;
    }

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

    .section-title[b-jh9yryiw5j] {
        font-size: 20px;
    }

    .card-title[b-jh9yryiw5j] {
        font-size: 16px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .customer-details-page[b-jh9yryiw5j] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .customer-details-page[b-jh9yryiw5j]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-jh9yryiw5j],
[data-theme="dark"] .info-card[b-jh9yryiw5j],
[data-theme="dark"] .orders-section[b-jh9yryiw5j],
[data-theme="dark"] .action-buttons[b-jh9yryiw5j],
[data-theme="dark"] .error-container[b-jh9yryiw5j],
[data-theme="dark"] .unauthorized-container[b-jh9yryiw5j] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-subtitle-enhanced[b-jh9yryiw5j],
[data-theme="dark"] .info-label[b-jh9yryiw5j],
[data-theme="dark"] .stat-label[b-jh9yryiw5j],
[data-theme="dark"] .empty-message[b-jh9yryiw5j] {
    color: #9ca3af;
}

[data-theme="dark"] .card-title[b-jh9yryiw5j],
[data-theme="dark"] .info-value[b-jh9yryiw5j],
[data-theme="dark"] .stat-value[b-jh9yryiw5j],
[data-theme="dark"] .section-title[b-jh9yryiw5j],
[data-theme="dark"] .agent-details h4[b-jh9yryiw5j] {
    color: #e2e8f0;
}

[data-theme="dark"] .card-header[b-jh9yryiw5j] {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.5) 0%, rgba(55, 65, 81, 0.3) 100%);
    border-bottom-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .info-row[b-jh9yryiw5j] {
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-card[b-jh9yryiw5j] {
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .btn-icon[b-jh9yryiw5j] {
    background: rgba(55, 65, 81, 0.5);
    color: #9ca3af;
}

    [data-theme="dark"] .btn-icon:hover[b-jh9yryiw5j] {
        background: #667eea;
        color: white;
    }

[data-theme="dark"] .btn-action-secondary[b-jh9yryiw5j] {
    background: rgba(55, 65, 81, 0.5);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .data-table th[b-jh9yryiw5j] {
    background: rgba(55, 65, 81, 0.3);
    color: #9ca3af;
    border-bottom-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .data-table td[b-jh9yryiw5j] {
    border-bottom-color: rgba(71, 85, 105, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .data-table tbody tr:hover[b-jh9yryiw5j] {
    background: rgba(55, 65, 81, 0.2);
}

[data-theme="dark"] .order-card[b-jh9yryiw5j] {
    background: rgba(55, 65, 81, 0.3);
}

    [data-theme="dark"] .order-card:hover[b-jh9yryiw5j] {
        background: rgba(55, 65, 81, 0.5);
    }

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

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

.info-card[b-jh9yryiw5j],
.stat-card[b-jh9yryiw5j],
.order-card[b-jh9yryiw5j] {
    animation: fadeIn-b-jh9yryiw5j 0.5s ease-out;
}

/* Print Styles */
@media print {
    .customer-details-page[b-jh9yryiw5j] {
        background: white;
        padding: 20px;
    }

        .customer-details-page[b-jh9yryiw5j]::before {
            display: none;
        }

    .header-actions[b-jh9yryiw5j],
    .btn-icon[b-jh9yryiw5j],
    .action-buttons[b-jh9yryiw5j],
    .view-all-link[b-jh9yryiw5j] {
        display: none !important;
    }

    .info-card[b-jh9yryiw5j],
    .orders-section[b-jh9yryiw5j] {
        box-shadow: none;
        border: 1px solid #e5e7eb;
        page-break-inside: avoid;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/CustomerInstallments.razor.rz.scp.css */
/* ===================================
   Installments Management Page - Modern Professional CSS
   ���� ����� ����� ������ ������� ������ �� ������ ������� �����������
   =================================== */
/* ����� ����� CSS ������� ������� */
/* ������ ������ ������� ������� */
.collection-list[b-daaog9by3l] {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

.customer-collection-item[b-daaog9by3l] {
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    background-color: #f8f9fa;
    transition: all 0.2s;
}

    .customer-collection-item:hover[b-daaog9by3l] {
        background-color: #e9ecef;
    }

    .customer-collection-item .form-check[b-daaog9by3l] {
        margin-bottom: 0.5rem;
    }

.installment-summary[b-daaog9by3l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1.5rem;
}

    .installment-summary .badge[b-daaog9by3l] {
        font-size: 0.75rem;
    }

    .installment-summary .total-amount[b-daaog9by3l] {
        margin-left: auto;
        font-weight: bold;
        color: #dc3545;
    }

.selected-summary[b-daaog9by3l] {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
}

.modal-footer[b-daaog9by3l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Page Container */
.installments-page[b-daaog9by3l] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .installments-page[b-daaog9by3l]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .installments-page > *[b-daaog9by3l] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-daaog9by3l] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-content[b-daaog9by3l] {
    flex: 1;
}

    .header-content h1[b-daaog9by3l] {
        font-size: 32px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 8px;
        line-height: 1.2;
    }

    .header-content .subtitle[b-daaog9by3l] {
        font-size: 16px;
        color: #6b7280;
        margin: 0;
    }

.header-actions[b-daaog9by3l] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Statistics Cards */
.stats-cards[b-daaog9by3l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.stat-card[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-daaog9by3l]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-daaog9by3l] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-daaog9by3l]::before {
            opacity: 1;
        }

.stat-icon[b-daaog9by3l] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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

    .stat-icon.bg-success[b-daaog9by3l] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-icon.bg-warning[b-daaog9by3l] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .stat-icon.bg-info[b-daaog9by3l] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

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

    .stat-content h3[b-daaog9by3l] {
        font-size: 32px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-content p[b-daaog9by3l] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Toolbar */
.toolbar[b-daaog9by3l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 16px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

.search-box[b-daaog9by3l] {
    position: relative;
    flex: 1;
    max-width: 500px;
}

    .search-box i[b-daaog9by3l] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
    }

    .search-box input[b-daaog9by3l] {
        width: 100%;
        padding: 12px 16px;
        padding-left: 40px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .search-box input:focus[b-daaog9by3l] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* View Toggle */
.view-toggle[b-daaog9by3l] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .view-toggle button[b-daaog9by3l] {
        padding: 10px 14px;
        background: transparent;
        border: none;
        color: #667eea;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 16px;
    }

        .view-toggle button:hover[b-daaog9by3l] {
            color: #764ba2;
            background: rgba(102, 126, 234, 0.1);
        }

        .view-toggle button.active[b-daaog9by3l] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

/* Date Filter */
.date-filter[b-daaog9by3l] {
    margin-right: 12px;
}

.date-range-selector[b-daaog9by3l] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.date-input-group[b-daaog9by3l] {
    display: flex;
    flex-direction: column;
}

    .date-input-group label[b-daaog9by3l] {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 3px;
        color: #4c1d95;
    }

    .date-input-group input[b-daaog9by3l] {
        width: 140px;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid rgba(102, 126, 234, 0.2);
        background: rgba(102, 126, 234, 0.05);
        transition: all 0.3s;
    }

        .date-input-group input:focus[b-daaog9by3l] {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

/* Loading Container */
.loading-container[b-daaog9by3l] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.spinner-border[b-daaog9by3l] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-daaog9by3l 0.8s linear infinite;
}

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

/* Plans View */
.plans-view[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Table Styling */
.table-responsive[b-daaog9by3l] {
    overflow-x: auto;
}

.table[b-daaog9by3l] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th[b-daaog9by3l] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background: rgba(102, 126, 234, 0.05);
    }

    .table td[b-daaog9by3l] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .table tbody tr[b-daaog9by3l] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .table tbody tr:hover[b-daaog9by3l] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: translateY(-2px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

/* Customer Info */
.customer-info[b-daaog9by3l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.customer-name[b-daaog9by3l] {
    font-weight: 600;
    color: #1f2937;
}

.customer-phone[b-daaog9by3l] {
    font-size: 13px;
    color: #6b7280;
}

/* Progress Bar */
.progress-container[b-daaog9by3l] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.progress[b-daaog9by3l] {
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-daaog9by3l] {
    height: 100%;
    border-radius: 4px;
}

    .progress-bar.bg-success[b-daaog9by3l] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .progress-bar.bg-info[b-daaog9by3l] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .progress-bar.bg-warning[b-daaog9by3l] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .progress-bar.bg-danger[b-daaog9by3l] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

.progress-text[b-daaog9by3l] {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    font-weight: 500;
}

/* Badges */
.badge[b-daaog9by3l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.badge-success[b-daaog9by3l] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.badge-warning[b-daaog9by3l] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
}

.badge-danger[b-daaog9by3l] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
}

.badge-secondary[b-daaog9by3l] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.badge-info[b-daaog9by3l] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
}

/* Action Buttons */
.action-buttons[b-daaog9by3l] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

    .action-buttons .btn[b-daaog9by3l] {
        padding: 8px 12px;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

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

        .action-buttons .btn:hover[b-daaog9by3l]::before {
            width: 100px;
            height: 100px;
        }

/* Pagination */
.pagination-container[b-daaog9by3l] {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.pagination[b-daaog9by3l] {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-item[b-daaog9by3l] {
    display: inline-flex;
}

.page-link[b-daaog9by3l] {
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .page-link:hover:not(:disabled)[b-daaog9by3l] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
    }

    .page-link:disabled[b-daaog9by3l] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.page-item.active .page-link[b-daaog9by3l] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Mobile Card View */
.plans-cards[b-daaog9by3l] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
}

.plan-card[b-daaog9by3l] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

    .plan-card:hover[b-daaog9by3l] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

.plan-card-header[b-daaog9by3l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.plan-number[b-daaog9by3l] {
    font-weight: 700;
    font-size: 16px;
    color: #4c1d95;
}

.plan-card-body[b-daaog9by3l] {
    padding: 16px;
}

.customer-section[b-daaog9by3l] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

    .customer-section i[b-daaog9by3l] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 50%;
        font-size: 16px;
    }

.info-row[b-daaog9by3l] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .info-row .amount[b-daaog9by3l] {
        font-weight: 600;
        color: #4c1d95;
    }

.progress-section[b-daaog9by3l] {
    margin-top: 16px;
}

.progress-info[b-daaog9by3l] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.plan-card-footer[b-daaog9by3l] {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(102, 126, 234, 0.05);
}

/* Installments View */
.installments-view[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Quick Filters */
.quick-filters[b-daaog9by3l] {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.filter-btn[b-daaog9by3l] {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: white;
    color: #4c1d95;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .filter-btn:hover[b-daaog9by3l] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

    .filter-btn.active[b-daaog9by3l] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Empty State */
.empty-state[b-daaog9by3l] {
    text-align: center;
    padding: 80px 20px;
}

    .empty-state i[b-daaog9by3l] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-daaog9by3l] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-daaog9by3l] {
        font-size: 16px;
        color: #6b7280;
    }

/* Selected Row */
tr.selected td[b-daaog9by3l] {
    background-color: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
}

/* Bulk Actions */
.bulk-actions[b-daaog9by3l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-top: 1px solid rgba(102, 126, 234, 0.3);
}

    .bulk-actions span[b-daaog9by3l] {
        font-weight: 600;
        color: #4c1d95;
    }

    .bulk-actions button[b-daaog9by3l] {
        margin-left: 8px;
    }

/* Date Info */
.date-info[b-daaog9by3l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .date-info small[b-daaog9by3l] {
        font-size: 12px;
    }

/* Calendar View */
.calendar-view[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 24px;
}

.calendar-header[b-daaog9by3l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

    .calendar-header h3[b-daaog9by3l] {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .calendar-header button[b-daaog9by3l] {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: white;
        border: 1px solid rgba(102, 126, 234, 0.2);
        color: #667eea;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
    }

        .calendar-header button:hover[b-daaog9by3l] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateY(-2px);
        }

.calendar-grid[b-daaog9by3l] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.calendar-weekdays[b-daaog9by3l] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.weekday[b-daaog9by3l] {
    text-align: center;
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
}

.calendar-days[b-daaog9by3l] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: rgba(0, 0, 0, 0.05);
}

.calendar-day[b-daaog9by3l] {
    background: white;
    min-height: 100px;
    padding: 8px;
    position: relative;
}

.day-number[b-daaog9by3l] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 6px;
}

.calendar-day.other-month[b-daaog9by3l] {
    background: #f8fafc;
}

    .calendar-day.other-month .day-number[b-daaog9by3l] {
        color: #94a3b8;
    }

.calendar-day.today[b-daaog9by3l] {
    background: rgba(102, 126, 234, 0.1);
}

    .calendar-day.today .day-number[b-daaog9by3l] {
        color: #667eea;
        font-weight: 700;
    }

.day-installments[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 6px;
    border-radius: 6px;
    font-size: 12px;
}

.installment-count[b-daaog9by3l] {
    color: #4c1d95;
    font-weight: 600;
    margin-bottom: 2px;
}

.installment-amount[b-daaog9by3l] {
    color: #667eea;
    font-weight: 700;
}

/* Modal Styling */
.modal[b-daaog9by3l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow-y: auto;
}

.modal-backdrop[b-daaog9by3l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1049;
}

.modal-dialog[b-daaog9by3l] {
    margin: 1.5rem auto;
    max-width: 600px;
    width: calc(100% - 2rem);
    animation: zoomIn-b-daaog9by3l 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1051;
}

.modal-dialog-centered[b-daaog9by3l] {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3rem);
}

.modal-content[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-daaog9by3l] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-daaog9by3l] {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.btn-close[b-daaog9by3l] {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6b7280;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .btn-close:hover[b-daaog9by3l] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-daaog9by3l] {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer[b-daaog9by3l] {
    padding: 16px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(102, 126, 234, 0.05);
}

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

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

/* Form Styling */
.form-group[b-daaog9by3l] {
    margin-bottom: 20px;
}

    .form-group label[b-daaog9by3l] {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        font-size: 14px;
        color: #4c1d95;
    }

.form-control[b-daaog9by3l] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.05);
    transition: all 0.3s;
    font-size: 16px;
}

    .form-control:focus[b-daaog9by3l] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        background: white;
    }

select.form-control[b-daaog9by3l] {
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234c1d95' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Installment Info */
.installment-info[b-daaog9by3l] {
    background: rgba(102, 126, 234, 0.05);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .installment-info h6[b-daaog9by3l] {
        margin-top: 0;
        margin-bottom: 12px;
        color: #4c1d95;
        font-size: 16px;
        font-weight: 600;
    }

.info-grid[b-daaog9by3l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

    .info-grid div[b-daaog9by3l] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .info-grid div label[b-daaog9by3l] {
            font-size: 12px;
            color: #6b7280;
            margin: 0;
        }

        .info-grid div span[b-daaog9by3l] {
            font-weight: 600;
            color: #4c1d95;
        }

            .info-grid div span.amount[b-daaog9by3l] {
                font-size: 18px;
                font-weight: 700;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

/* Payment Form */
.payment-form[b-daaog9by3l], .modify-form[b-daaog9by3l], .manual-close-form[b-daaog9by3l] {
    margin-top: 10px;
}

.current-amount[b-daaog9by3l] {
    margin-bottom: 20px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .current-amount label[b-daaog9by3l] {
        font-weight: 600;
        color: #4c1d95;
        margin: 0;
    }

/* Advanced Payment Options */
.advanced-payment-options[b-daaog9by3l] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.form-check[b-daaog9by3l] {
    align-items: center;
    gap: 8px;
}

.form-check-input[b-daaog9by3l] {
    width: 20px;
    height: 20px;
    accent-color: #667eea;
    border-radius: 5px;
}

.form-check-label[b-daaog9by3l] {
    margin: 0;
    font-weight: 500;
    color: #4c1d95;
}

/* Alert Styling */
.alert[b-daaog9by3l] {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-warning[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #d97706;
}

    .alert-warning i[b-daaog9by3l] {
        color: #d97706;
        font-size: 20px;
    }

.alert-danger[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

/* Dark Theme Support */
[data-theme="dark"] .installments-page[b-daaog9by3l] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .installments-page[b-daaog9by3l]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

/* Dark theme for all cards, sections, and tables */
[data-theme="dark"] .page-header[b-daaog9by3l],
[data-theme="dark"] .stat-card[b-daaog9by3l],
[data-theme="dark"] .toolbar[b-daaog9by3l],
[data-theme="dark"] .plans-view[b-daaog9by3l],
[data-theme="dark"] .installments-view[b-daaog9by3l],
[data-theme="dark"] .calendar-view[b-daaog9by3l],
[data-theme="dark"] .pagination-container[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-content h3[b-daaog9by3l] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .header-content h1[b-daaog9by3l],
[data-theme="dark"] .calendar-header h3[b-daaog9by3l],
[data-theme="dark"] .modal-title[b-daaog9by3l] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .empty-state i[b-daaog9by3l] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .header-content .subtitle[b-daaog9by3l],
[data-theme="dark"] .stat-content p[b-daaog9by3l] {
    color: #9ca3af;
}

[data-theme="dark"] .search-box input[b-daaog9by3l],
[data-theme="dark"] .form-control[b-daaog9by3l],
[data-theme="dark"] .date-input-group input[b-daaog9by3l] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-daaog9by3l],
    [data-theme="dark"] .form-control:focus[b-daaog9by3l],
    [data-theme="dark"] .date-input-group input:focus[b-daaog9by3l] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .view-toggle[b-daaog9by3l] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .table td[b-daaog9by3l] {
    background: #1e293b;
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .table th[b-daaog9by3l] {
    color: #a78bfa;
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .filter-btn[b-daaog9by3l] {
    background: #1e293b;
    color: #a78bfa;
}

[data-theme="dark"] .customer-name[b-daaog9by3l] {
    color: #e2e8f0;
}

[data-theme="dark"] .customer-phone[b-daaog9by3l] {
    color: #9ca3af;
}

[data-theme="dark"] .modal-content[b-daaog9by3l] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
}

[data-theme="dark"] .modal-header[b-daaog9by3l],
[data-theme="dark"] .modal-footer[b-daaog9by3l] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .btn-close[b-daaog9by3l] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-daaog9by3l] {
        color: #e2e8f0;
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .form-group label[b-daaog9by3l],
[data-theme="dark"] .form-check-label[b-daaog9by3l],
[data-theme="dark"] .day-number[b-daaog9by3l] {
    color: #e2e8f0;
}

[data-theme="dark"] .calendar-grid[b-daaog9by3l] {
    background: #1e293b;
}

[data-theme="dark"] .calendar-day[b-daaog9by3l] {
    background: #334155;
    border-color: #1e293b;
}

    [data-theme="dark"] .calendar-day.other-month[b-daaog9by3l] {
        background: #1e293b;
    }

        [data-theme="dark"] .calendar-day.other-month .day-number[b-daaog9by3l] {
            color: #64748b;
        }

    [data-theme="dark"] .calendar-day.today[b-daaog9by3l] {
        background: rgba(102, 126, 234, 0.2);
    }

[data-theme="dark"] .weekday[b-daaog9by3l] {
    color: #a78bfa;
}

/* Responsive Design */
@media (max-width: 992px) {
    .stats-cards[b-daaog9by3l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .toolbar[b-daaog9by3l] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-daaog9by3l] {
        max-width: none;
    }

    .view-toggle[b-daaog9by3l] {
        align-self: flex-end;
    }
}

@media (max-width: 768px) {
    .page-header[b-daaog9by3l] {
        flex-direction: column;
        align-items: flex-start;
    }

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

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

    .date-range-selector[b-daaog9by3l] {
        flex-wrap: wrap;
    }

    .date-input-group[b-daaog9by3l] {
        flex-basis: 45%;
    }

    .calendar-days[b-daaog9by3l] {
        font-size: 12px;
    }

    .calendar-day[b-daaog9by3l] {
        min-height: 80px;
        padding: 4px;
    }

    .installment-count[b-daaog9by3l], .installment-amount[b-daaog9by3l] {
        font-size: 10px;
    }

    .modal-dialog[b-daaog9by3l] {
        margin: 0.5rem;
        width: calc(100% - 1rem);
    }
}

@media (max-width: 576px) {
    .installments-page[b-daaog9by3l] {
        padding: 16px;
    }

    .plan-card-footer[b-daaog9by3l],
    .action-buttons[b-daaog9by3l] {
        flex-wrap: wrap;
    }

        .plan-card-footer .btn[b-daaog9by3l],
        .action-buttons .btn[b-daaog9by3l] {
            flex: 1;
            min-width: 0;
            padding: 8px;
        }

    .view-toggle[b-daaog9by3l] {
        width: 100%;
    }

        .view-toggle button[b-daaog9by3l] {
            flex: 1;
            padding: 8px;
        }

    .bulk-actions[b-daaog9by3l] {
        flex-direction: column;
        gap: 16px;
    }

        .bulk-actions button[b-daaog9by3l] {
            width: 100%;
            margin: 4px 0;
        }

    .info-grid[b-daaog9by3l] {
        grid-template-columns: 1fr;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/CustomerInstallmentsDetails.razor.rz.scp.css */

/* Customer Installments Details Page - Modern UI Design
   Based on the Sahelly design system */

.installment-details-page[b-p9bz3v2pmg] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .installment-details-page[b-p9bz3v2pmg]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .installment-details-page > *[b-p9bz3v2pmg] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-p9bz3v2pmg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content h1[b-p9bz3v2pmg] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-content .subtitle[b-p9bz3v2pmg] {
    color: #6b7280;
    margin: 0;
    font-size: 16px;
}

.header-actions[b-p9bz3v2pmg] {
    display: flex;
    gap: 12px;
}

/* Summary Cards Section */
.summary-cards[b-p9bz3v2pmg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.summary-card[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-p9bz3v2pmg]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-p9bz3v2pmg] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .summary-card:hover[b-p9bz3v2pmg]::before {
            opacity: 1;
        }

.card-icon[b-p9bz3v2pmg] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.bg-primary-light[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
}

.bg-success-light[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(59, 201, 104, 0.2) 0%, rgba(50, 209, 183, 0.2) 100%);
}

.bg-warning-light[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(216, 140, 20, 0.2) 0%, rgba(197, 59, 59, 0.2) 100%);
}

.bg-info-light[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(74, 163, 194, 0.2) 0%, rgba(41, 104, 178, 0.2) 100%);
}

.text-primary[b-p9bz3v2pmg] {
    color: #5a6cb3;
}

.text-success[b-p9bz3v2pmg] {
    color: #3bc968;
}

.text-warning[b-p9bz3v2pmg] {
    color: #d88c14;
}

.text-info[b-p9bz3v2pmg] {
    color: #4aa3c2;
}

.card-content[b-p9bz3v2pmg] {
    flex: 1;
}

    .card-content h3[b-p9bz3v2pmg] {
        font-size: 28px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .card-content p[b-p9bz3v2pmg] {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Tabs Navigation */
.tabs-container[b-p9bz3v2pmg] {
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.nav-tabs[b-p9bz3v2pmg] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
    gap: 8px;
}

.nav-item[b-p9bz3v2pmg] {
    flex: 1;
}

.nav-link[b-p9bz3v2pmg] {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: transparent;
    position: relative;
    overflow: hidden;
}

    .nav-link:hover[b-p9bz3v2pmg] {
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

    .nav-link.active[b-p9bz3v2pmg] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .nav-link i[b-p9bz3v2pmg] {
        margin-right: 8px;
    }

/* Tab Content */
.tab-content[b-p9bz3v2pmg] {
    margin-bottom: 32px;
}

/* Installments Table Section */
.installments-section[b-p9bz3v2pmg] {
    margin-bottom: 32px;
}

.installments-table[b-p9bz3v2pmg] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .installments-table th[b-p9bz3v2pmg] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .installments-table td[b-p9bz3v2pmg] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
    }

    .installments-table tbody tr[b-p9bz3v2pmg] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .installments-table tbody tr:hover[b-p9bz3v2pmg] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

    .installments-table .table-success td[b-p9bz3v2pmg] {
        background: linear-gradient(90deg, rgba(59, 201, 104, 0.05) 0%, rgba(50, 209, 183, 0.05) 100%);
        border-left: 3px solid #3bc968;
    }

    .installments-table .table-danger td[b-p9bz3v2pmg] {
        background: linear-gradient(90deg, rgba(208, 78, 95, 0.05) 0%, rgba(205, 125, 219, 0.05) 100%);
        border-left: 3px solid #d04e5f;
    }

    .installments-table .table-warning td[b-p9bz3v2pmg] {
        background: linear-gradient(90deg, rgba(216, 140, 20, 0.05) 0%, rgba(197, 59, 59, 0.05) 100%);
        border-left: 3px solid #d88c14;
    }

.installment-number[b-p9bz3v2pmg] {
    font-weight: 700;
    color: #4c1d95;
}

.date-info[b-p9bz3v2pmg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Status Badges */
.badge[b-p9bz3v2pmg] {
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bg-success[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
}

.bg-danger[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
}

.bg-warning[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
}

.bg-info[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
}

.bg-secondary[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
}

.bg-dark[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: white;
}

/* Mobile Installment Cards */
.installment-card[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .installment-card.paid[b-p9bz3v2pmg] {
        border-left: 5px solid #3bc968;
    }

    .installment-card.overdue[b-p9bz3v2pmg] {
        border-left: 5px solid #d04e5f;
    }

    .installment-card.partial[b-p9bz3v2pmg] {
        border-left: 5px solid #d88c14;
    }

    .installment-card .card-header[b-p9bz3v2pmg] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: rgba(102, 126, 234, 0.05);
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .installment-card .card-body[b-p9bz3v2pmg] {
        padding: 16px;
    }

    .installment-card .card-footer[b-p9bz3v2pmg] {
        padding: 16px;
        border-top: 1px solid rgba(102, 126, 234, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

.info-row[b-p9bz3v2pmg] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

    .info-row .label[b-p9bz3v2pmg] {
        color: #6b7280;
        font-weight: 500;
    }

    .info-row .value[b-p9bz3v2pmg] {
        font-weight: 600;
        color: #1f2937;
    }

/* Payments Table Section */
.payments-section[b-p9bz3v2pmg] {
    margin-bottom: 32px;
}

.payments-table[b-p9bz3v2pmg] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    overflow: hidden;
}

    .payments-table th[b-p9bz3v2pmg] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        background: rgba(102, 126, 234, 0.05);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .payments-table td[b-p9bz3v2pmg] {
        padding: 16px;
        border-top: 1px solid rgba(102, 126, 234, 0.1);
        background: white;
    }

/* Empty State */
.empty-state[b-p9bz3v2pmg] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-p9bz3v2pmg] {
        font-size: 64px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 16px;
    }

    .empty-state h3[b-p9bz3v2pmg] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-p9bz3v2pmg] {
        font-size: 16px;
        color: #6b7280;
    }

/* Details Section */
.details-section[b-p9bz3v2pmg] {
    margin-bottom: 32px;
}

.details-card[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .details-card h5[b-p9bz3v2pmg] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

.detail-item[b-p9bz3v2pmg] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .detail-item label[b-p9bz3v2pmg] {
        color: #6b7280;
        font-weight: 500;
    }

    .detail-item span[b-p9bz3v2pmg] {
        font-weight: 600;
        color: #1f2937;
    }

/* Payment Modal */
.modal-content[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-header[b-p9bz3v2pmg] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
}

.modal-title[b-p9bz3v2pmg] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-body[b-p9bz3v2pmg] {
    padding: 30px;
}

.payment-form[b-p9bz3v2pmg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.installment-info[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 24px;
}

    .installment-info h6[b-p9bz3v2pmg] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 16px;
    }

.info-grid[b-p9bz3v2pmg] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

    .info-grid div[b-p9bz3v2pmg] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .info-grid label[b-p9bz3v2pmg] {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }

    .info-grid span[b-p9bz3v2pmg] {
        font-weight: 600;
        color: #1f2937;
    }

        .info-grid span.amount[b-p9bz3v2pmg] {
            font-size: 18px;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.form-section[b-p9bz3v2pmg] {
    padding: 20px 0;
}

.form-label[b-p9bz3v2pmg] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 8px;
}

.form-control[b-p9bz3v2pmg] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-p9bz3v2pmg] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.form-select[b-p9bz3v2pmg] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-select:focus[b-p9bz3v2pmg] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.modal-footer[b-p9bz3v2pmg] {
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Button Styles */
.btn[b-p9bz3v2pmg] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: none;
}

.btn-sm[b-p9bz3v2pmg] {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 10px;
}

.btn:hover[b-p9bz3v2pmg] {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
}

.btn-secondary[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

.btn-success[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
}

.btn-outline-secondary[b-p9bz3v2pmg] {
    background: transparent;
    border: 2px solid #d1d5db;
    color: #4b5563;
}

    .btn-outline-secondary:hover[b-p9bz3v2pmg] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        color: #667eea;
    }

/* Dark Theme Support */
[data-theme="dark"] .installment-details-page[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .installment-details-page[b-p9bz3v2pmg]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-p9bz3v2pmg],
[data-theme="dark"] .summary-card[b-p9bz3v2pmg],
[data-theme="dark"] .tabs-container[b-p9bz3v2pmg],
[data-theme="dark"] .installment-card[b-p9bz3v2pmg],
[data-theme="dark"] .details-card[b-p9bz3v2pmg],
[data-theme="dark"] .empty-state[b-p9bz3v2pmg],
[data-theme="dark"] .modal-content[b-p9bz3v2pmg] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .header-content .subtitle[b-p9bz3v2pmg],
    [data-theme="dark"] .card-content p[b-p9bz3v2pmg],
    [data-theme="dark"] .info-row .label[b-p9bz3v2pmg],
    [data-theme="dark"] .empty-state p[b-p9bz3v2pmg] {
        color: #94a3b8;
    }

[data-theme="dark"] .info-row .value[b-p9bz3v2pmg],
[data-theme="dark"] .detail-item span[b-p9bz3v2pmg] {
    color: #e2e8f0;
}

[data-theme="dark"] .detail-item label[b-p9bz3v2pmg] {
    color: #94a3b8;
}

[data-theme="dark"] .installments-table td[b-p9bz3v2pmg],
[data-theme="dark"] .payments-table td[b-p9bz3v2pmg] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .installments-table .table-success td[b-p9bz3v2pmg] {
    background: rgba(59, 201, 104, 0.1);
}

[data-theme="dark"] .installments-table .table-danger td[b-p9bz3v2pmg] {
    background: rgba(208, 78, 95, 0.1);
}

[data-theme="dark"] .installments-table .table-warning td[b-p9bz3v2pmg] {
    background: rgba(216, 140, 20, 0.1);
}

[data-theme="dark"] .form-control[b-p9bz3v2pmg],
[data-theme="dark"] .form-select[b-p9bz3v2pmg] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-p9bz3v2pmg],
    [data-theme="dark"] .form-select:focus[b-p9bz3v2pmg] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .summary-cards[b-p9bz3v2pmg] {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .installment-details-page[b-p9bz3v2pmg] {
        padding: 16px;
    }

    .page-header[b-p9bz3v2pmg] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        align-items: flex-start;
    }

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

    .summary-cards[b-p9bz3v2pmg] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .nav-tabs[b-p9bz3v2pmg] {
        flex-direction: column;
        gap: 8px;
    }

    .nav-link[b-p9bz3v2pmg] {
        text-align: left;
        display: flex;
        align-items: center;
    }

    .installments-table th:nth-child(3)[b-p9bz3v2pmg],
    .installments-table td:nth-child(3)[b-p9bz3v2pmg],
    .installments-table th:nth-child(6)[b-p9bz3v2pmg],
    .installments-table td:nth-child(6)[b-p9bz3v2pmg] {
        display: none;
    }
}

@media (max-width: 480px) {
    .page-header[b-p9bz3v2pmg] {
        margin-bottom: 20px;
    }

    .header-content h1[b-p9bz3v2pmg] {
        font-size: 22px;
    }

    .header-content .subtitle[b-p9bz3v2pmg] {
        font-size: 14px;
    }

    .btn[b-p9bz3v2pmg] {
        padding: 10px 16px;
        font-size: 14px;
    }

    .card-icon[b-p9bz3v2pmg] {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .card-content h3[b-p9bz3v2pmg] {
        font-size: 22px;
    }
}

/* Print Styles */
@media print {
    .installment-details-page[b-p9bz3v2pmg] {
        background: white !important;
        padding: 0 !important;
    }

    .header-actions[b-p9bz3v2pmg],
    .modal[b-p9bz3v2pmg],
    .tab-content[b-p9bz3v2pmg] {
        display: none !important;
    }

    .page-header[b-p9bz3v2pmg],
    .summary-cards[b-p9bz3v2pmg],
    .installment-card[b-p9bz3v2pmg],
    .details-card[b-p9bz3v2pmg] {
        box-shadow: none !important;
        background: white !important;
    }

    .installments-table[b-p9bz3v2pmg] {
        border: 1px solid #eee !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/EditAgent.razor.rz.scp.css */

/* Agent Edit Page - Professional Modern Design
   Following Sahelly Design System */

/* Page Layout */
.page-container[b-c372q983h3] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .page-container[b-c372q983h3]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .page-container > *[b-c372q983h3] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-c372q983h3] {
    margin-bottom: 32px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

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

.page-title[b-c372q983h3] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title i[b-c372q983h3] {
        font-size: 1.8rem;
    }

.btn-back[b-c372q983h3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: #4c1d95;
    font-weight: 600;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-back:hover[b-c372q983h3] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

/* Form Sections */
.form-section[b-c372q983h3] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .form-section:hover[b-c372q983h3] {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        transform: translateY(-3px);
    }

.section-header[b-c372q983h3] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .section-header h3[b-c372q983h3] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .section-header h3 i[b-c372q983h3] {
            color: #667eea;
        }

.form-grid[b-c372q983h3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 24px;
}

/* Form Controls */
.form-group[b-c372q983h3] {
    margin-bottom: 0;
}

    .form-group.full-width[b-c372q983h3] {
        grid-column: 1 / -1;
    }

    .form-group label[b-c372q983h3] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

.form-control[b-c372q983h3] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: var(--text-primary);
}

    .form-control:focus[b-c372q983h3] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control:disabled[b-c372q983h3] {
        background: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.7;
    }

select.form-control[b-c372q983h3] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234c1d95' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px;
}

.required[b-c372q983h3] {
    color: #ef4444;
    margin-left: 4px;
}

/* Input Group */
.input-group[b-c372q983h3] {
    position: relative;
    display: flex;
}

    .input-group .form-control[b-c372q983h3] {
        flex: 1;
        border-radius: 12px 0 0 12px;
    }

.input-addon[b-c372q983h3] {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 0 12px 12px 0;
    font-weight: 600;
    color: #4c1d95;
}

/* Toggle Switch */
.settings-grid[b-c372q983h3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 24px;
}

.setting-item[b-c372q983h3] {
    display: flex;
    align-items: center;
}

.switch-label[b-c372q983h3] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}

.switch-input[b-c372q983h3] {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider[b-c372q983h3] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
    background: #e5e7eb;
    border-radius: 34px;
    transition: all 0.3s;
}

    .switch-slider[b-c372q983h3]:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        transition: all 0.3s;
    }

.switch-input:checked + .switch-slider[b-c372q983h3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .switch-input:checked + .switch-slider[b-c372q983h3]:before {
        transform: translateX(26px);
    }

.switch-text[b-c372q983h3] {
    font-weight: 600;
    color: #4b5563;
}

/* Form Actions */
.form-actions[b-c372q983h3] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-top: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.btn[b-c372q983h3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    font-size: 15px;
    min-width: 160px;
}

    .btn i[b-c372q983h3] {
        font-size: 16px;
        transition: transform 0.3s;
    }

    .btn:hover i[b-c372q983h3] {
        transform: translateX(3px);
    }

.btn-primary[b-c372q983h3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-c372q983h3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-c372q983h3] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

    .btn-secondary:hover[b-c372q983h3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

.btn:disabled[b-c372q983h3] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Loading States */
.loading-container[b-c372q983h3] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-wrapper[b-c372q983h3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner[b-c372q983h3] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-c372q983h3 0.8s linear infinite;
}

.spinner-small[b-c372q983h3] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right-color: white;
    border-radius: 50%;
    animation: spin-b-c372q983h3 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

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

/* Error Container */
.error-container[b-c372q983h3] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .error-container i[b-c372q983h3] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .error-container p[b-c372q983h3] {
        font-size: 18px;
        color: #4b5563;
        margin-bottom: 24px;
    }

/* Validation Styling */
.validation-message[b-c372q983h3] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

/* Unauthorized Container */
.unauthorized-container[b-c372q983h3] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 60px auto;
    max-width: 600px;
}

    .unauthorized-container i[b-c372q983h3] {
        font-size: 80px;
        color: #f59e0b;
        margin-bottom: 30px;
    }

    .unauthorized-container p[b-c372q983h3] {
        font-size: 24px;
        color: #4b5563;
    }

/* Mobile Design */
.mobile-form-container[b-c372q983h3] {
    display: none;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .page-container[b-c372q983h3] {
        padding: 16px;
        display: none;
    }

    .mobile-form-container[b-c372q983h3] {
        display: block;
        padding: 16px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
    }

    .mobile-form-card[b-c372q983h3] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

        .mobile-form-card h4[b-c372q983h3] {
            margin: 0 0 16px;
            font-size: 18px;
            font-weight: 700;
            color: #4c1d95;
            display: flex;
            align-items: center;
            gap: 8px;
        }

    .mobile-form-group[b-c372q983h3] {
        margin-bottom: 16px;
    }

        .mobile-form-group label[b-c372q983h3] {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #4c1d95;
            margin-bottom: 6px;
        }

        .mobile-form-group input[b-c372q983h3],
        .mobile-form-group select[b-c372q983h3] {
            width: 100%;
            padding: 12px;
            background: rgba(102, 126, 234, 0.05);
            border: 2px solid transparent;
            border-radius: 10px;
            font-size: 15px;
        }

            .mobile-form-group input:focus[b-c372q983h3],
            .mobile-form-group select:focus[b-c372q983h3] {
                outline: none;
                border-color: #667eea;
                background: white;
            }

    .mobile-input-group[b-c372q983h3] {
        display: flex;
        background: rgba(102, 126, 234, 0.05);
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid transparent;
    }

        .mobile-input-group input[b-c372q983h3] {
            flex: 1;
            border: none;
            background: transparent;
            padding: 12px;
            border-radius: 0;
            width: auto;
        }

        .mobile-input-group span[b-c372q983h3] {
            display: flex;
            align-items: center;
            padding: 0 12px;
            background: rgba(102, 126, 234, 0.1);
            font-weight: 600;
            color: #4c1d95;
        }

    .mobile-toggle-group[b-c372q983h3] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-toggle[b-c372q983h3] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .mobile-toggle input[b-c372q983h3] {
            position: absolute;
            opacity: 0;
        }

    .toggle-slider[b-c372q983h3] {
        position: relative;
        width: 46px;
        height: 24px;
        background: #e5e7eb;
        border-radius: 34px;
        transition: all 0.3s;
    }

        .toggle-slider[b-c372q983h3]:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            border-radius: 50%;
            transition: all 0.3s;
        }

    .mobile-toggle input:checked + .toggle-slider[b-c372q983h3] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

        .mobile-toggle input:checked + .toggle-slider[b-c372q983h3]:before {
            transform: translateX(22px);
        }

    .mobile-form-actions[b-c372q983h3] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    .mobile-btn-primary[b-c372q983h3],
    .mobile-btn-secondary[b-c372q983h3] {
        padding: 12px;
        border-radius: 10px;
        font-weight: 600;
        border: none;
        font-size: 15px;
    }

    .mobile-btn-primary[b-c372q983h3] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .mobile-btn-secondary[b-c372q983h3] {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        color: #4b5563;
    }

    .mobile-loading[b-c372q983h3] {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh;
    }

        .mobile-loading .spinner[b-c372q983h3] {
            width: 50px;
            height: 50px;
        }
}

/* Dark Theme Support */
[data-theme="dark"] .page-container[b-c372q983h3] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .page-container[b-c372q983h3]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-c372q983h3],
[data-theme="dark"] .form-section[b-c372q983h3],
[data-theme="dark"] .form-actions[b-c372q983h3],
[data-theme="dark"] .error-container[b-c372q983h3],
[data-theme="dark"] .unauthorized-container[b-c372q983h3] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .section-header[b-c372q983h3] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .section-header h3[b-c372q983h3],
    [data-theme="dark"] .form-group label[b-c372q983h3],
    [data-theme="dark"] .switch-text[b-c372q983h3] {
        color: #e2e8f0;
    }

[data-theme="dark"] .form-control[b-c372q983h3] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-c372q983h3] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .input-addon[b-c372q983h3] {
    background: rgba(71, 85, 105, 0.4);
    color: #e2e8f0;
}

[data-theme="dark"] .switch-slider[b-c372q983h3] {
    background: #475569;
}

[data-theme="dark"] .btn-secondary[b-c372q983h3] {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .error-container p[b-c372q983h3],
[data-theme="dark"] .unauthorized-container p[b-c372q983h3] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-back[b-c372q983h3] {
    color: #e2e8f0;
    background: rgba(102, 126, 234, 0.2);
}

    [data-theme="dark"] .btn-back:hover[b-c372q983h3] {
        background: rgba(102, 126, 234, 0.3);
    }

/* Print Styles */
@media print {
    .page-container[b-c372q983h3] {
        background: white !important;
        padding: 20px !important;
    }

        .page-container[b-c372q983h3]::before {
            display: none !important;
        }

    .form-section[b-c372q983h3],
    .page-header[b-c372q983h3],
    .form-actions[b-c372q983h3] {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid !important;
    }

    .btn-back[b-c372q983h3],
    .btn[b-c372q983h3] {
        display: none !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/EditCustomer.razor.rz.scp.css */

/* EditCustomer.razor.css - Modern Professional E-Commerce Platform Styling */

/* Page Container */
.edit-customer-page[b-3fv27ljvbw] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .edit-customer-page[b-3fv27ljvbw]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .edit-customer-page > *[b-3fv27ljvbw] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Header Section */
.page-header-enhanced[b-3fv27ljvbw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-3fv27ljvbw] {
    flex: 1;
}

.breadcrumb-modern[b-3fv27ljvbw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-item[b-3fv27ljvbw] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-3fv27ljvbw] {
        color: #667eea;
    }

.separator[b-3fv27ljvbw] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-3fv27ljvbw] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
}

.page-title-modern[b-3fv27ljvbw] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-icon[b-3fv27ljvbw] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-3fv27ljvbw] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-3fv27ljvbw] {
    display: flex;
    gap: 12px;
}

.btn-action-secondary[b-3fv27ljvbw] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-action-secondary:hover[b-3fv27ljvbw] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Loading Container */
.loading-container[b-3fv27ljvbw] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner-container[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner[b-3fv27ljvbw] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-3fv27ljvbw 0.8s linear infinite;
}

.loading-text[b-3fv27ljvbw] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 600;
}

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

/* Error Container */
.error-container[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .error-container i[b-3fv27ljvbw] {
        font-size: 80px;
        color: #f59e0b;
        margin-bottom: 24px;
    }

    .error-container h3[b-3fv27ljvbw] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .error-container p[b-3fv27ljvbw] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
        max-width: 600px;
    }

    .error-container .btn[b-3fv27ljvbw] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .error-container .btn:hover[b-3fv27ljvbw] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

/* Form Container */
.form-container[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Form Section */
.form-section[b-3fv27ljvbw] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .form-section:hover[b-3fv27ljvbw] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

.section-header[b-3fv27ljvbw] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.section-title[b-3fv27ljvbw] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4c1d95;
}

    .section-title i[b-3fv27ljvbw] {
        color: #667eea;
        font-size: 20px;
    }

.form-grid[b-3fv27ljvbw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 24px;
}

/* Form Groups and Controls */
.form-group[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label[b-3fv27ljvbw] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.form-control[b-3fv27ljvbw] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-3fv27ljvbw] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

select.form-control[b-3fv27ljvbw] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234c1d95'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 40px;
}

.required[b-3fv27ljvbw] {
    color: #ef4444;
    margin-left: 4px;
}

/* Checkbox Styling */
.checkbox-wrapper[b-3fv27ljvbw] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .checkbox-wrapper input[type="checkbox"][b-3fv27ljvbw] {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        accent-color: #667eea;
        cursor: pointer;
    }

/* Location Container */
.location-container[b-3fv27ljvbw] {
    padding: 0 24px 24px;
}

    .location-container h4[b-3fv27ljvbw] {
        font-size: 16px;
        color: #4c1d95;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .location-container h4 i[b-3fv27ljvbw] {
            color: #667eea;
        }

.coordinates-group[b-3fv27ljvbw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.btn-pick-location[b-3fv27ljvbw] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: fit-content;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-pick-location:hover[b-3fv27ljvbw] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Input with icon */
.input-with-icon[b-3fv27ljvbw] {
    position: relative;
}

    .input-with-icon .form-control[b-3fv27ljvbw] {
        padding-right: 60px;
    }

.input-icon[b-3fv27ljvbw] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-weight: 500;
    font-size: 14px;
}

/* Form Actions */
.form-actions[b-3fv27ljvbw] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 16px;
}

.btn-cancel[b-3fv27ljvbw] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-cancel:hover[b-3fv27ljvbw] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
    }

.btn-save[b-3fv27ljvbw] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-save:hover[b-3fv27ljvbw] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Validation Styles */
.validation-message[b-3fv27ljvbw] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
}

[b-3fv27ljvbw] .validation-summary {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

    [b-3fv27ljvbw] .validation-summary ul {
        margin: 0;
        padding-left: 20px;
    }

/* Unauthorized Styles */
.unauthorized-container[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-height: 400px;
}

    .unauthorized-container i[b-3fv27ljvbw] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-3fv27ljvbw] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-container p[b-3fv27ljvbw] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
        max-width: 600px;
    }

    .unauthorized-container .btn[b-3fv27ljvbw] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        display: inline-block;
    }

        .unauthorized-container .btn:hover[b-3fv27ljvbw] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

/* Edit Form */
.edit-form[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Dark Theme Support */
[data-theme="dark"] .edit-customer-page[b-3fv27ljvbw] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .edit-customer-page[b-3fv27ljvbw]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-3fv27ljvbw],
[data-theme="dark"] .form-section[b-3fv27ljvbw],
[data-theme="dark"] .loading-container[b-3fv27ljvbw],
[data-theme="dark"] .error-container[b-3fv27ljvbw],
[data-theme="dark"] .unauthorized-container[b-3fv27ljvbw] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .section-header[b-3fv27ljvbw] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .breadcrumb-item[b-3fv27ljvbw] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-3fv27ljvbw] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-3fv27ljvbw] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title-modern[b-3fv27ljvbw] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .page-subtitle-enhanced[b-3fv27ljvbw] {
    color: #9ca3af;
}

[data-theme="dark"] .section-title[b-3fv27ljvbw] {
    color: #e2e8f0;
}

    [data-theme="dark"] .section-title i[b-3fv27ljvbw] {
        color: #a78bfa;
    }

[data-theme="dark"] .form-group label[b-3fv27ljvbw] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-3fv27ljvbw] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-3fv27ljvbw] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] select.form-control[b-3fv27ljvbw] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2e8f0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .location-container h4[b-3fv27ljvbw] {
    color: #e2e8f0;
}

    [data-theme="dark"] .location-container h4 i[b-3fv27ljvbw] {
        color: #a78bfa;
    }

[data-theme="dark"] .input-icon[b-3fv27ljvbw] {
    color: #9ca3af;
}

[data-theme="dark"] .loading-text[b-3fv27ljvbw] {
    color: #e2e8f0;
}

[data-theme="dark"] .error-container h3[b-3fv27ljvbw],
[data-theme="dark"] .unauthorized-container h3[b-3fv27ljvbw] {
    color: #e2e8f0;
}

[data-theme="dark"] .error-container p[b-3fv27ljvbw],
[data-theme="dark"] .unauthorized-container p[b-3fv27ljvbw] {
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-header-enhanced[b-3fv27ljvbw] {
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-3fv27ljvbw] {
        width: 100%;
    }

    .btn-action-secondary[b-3fv27ljvbw] {
        width: 100%;
        justify-content: center;
    }

    .form-grid[b-3fv27ljvbw] {
        grid-template-columns: 1fr;
    }

    .coordinates-group[b-3fv27ljvbw] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-3fv27ljvbw] {
        flex-direction: column-reverse;
    }

    .btn-cancel[b-3fv27ljvbw], .btn-save[b-3fv27ljvbw] {
        width: 100%;
        justify-content: center;
    }

    .page-title-modern[b-3fv27ljvbw] {
        font-size: 24px;
    }

    .title-icon[b-3fv27ljvbw] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .edit-customer-page[b-3fv27ljvbw] {
        padding: 16px;
    }

    .page-header-enhanced[b-3fv27ljvbw] {
        padding: 16px;
    }

    .form-section[b-3fv27ljvbw] {
        border-radius: 16px;
    }

    .section-header[b-3fv27ljvbw] {
        padding: 16px;
    }

    .form-grid[b-3fv27ljvbw] {
        padding: 16px;
    }

    .breadcrumb-modern[b-3fv27ljvbw] {
        font-size: 12px;
    }

    .page-title-modern[b-3fv27ljvbw] {
        font-size: 22px;
    }
}

.form-control-static[b-3fv27ljvbw] {
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
}

.status-badge[b-3fv27ljvbw] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    .status-badge.active[b-3fv27ljvbw] {
        background-color: #d4edda;
        color: #155724;
    }

    .status-badge.inactive[b-3fv27ljvbw] {
        background-color: #f8d7da;
        color: #721c24;
    }

.verification-badge[b-3fv27ljvbw] {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    .verification-badge.verified[b-3fv27ljvbw] {
        background-color: #cce5ff;
        color: #004085;
    }

    .verification-badge.unverified[b-3fv27ljvbw] {
        background-color: #fff3cd;
        color: #856404;
    }

.form-group.full-width[b-3fv27ljvbw] {
    grid-column: 1 / -1;
}

/* Work Information Section Styles */
.section-description[b-3fv27ljvbw] {
    margin-top: 0.5rem;
}

.description-text[b-3fv27ljvbw] {
    font-size: 0.875rem;
    color: #6c757d;
    font-style: italic;
}

.form-hint[b-3fv27ljvbw] {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.work-info-notice[b-3fv27ljvbw] {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.notice-header[b-3fv27ljvbw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #1976d2;
    margin-bottom: 0.5rem;
}

.notice-content p[b-3fv27ljvbw] {
    margin: 0 0 0.75rem 0;
    color: #424242;
    font-size: 0.9rem;
    background: white;
    padding: 0.5rem;
    border-radius: 4px;
    border-left: 3px solid #2196f3;
}

.notice-actions[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-transfer[b-3fv27ljvbw] {
    background: #2196f3;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    transition: background-color 0.2s;
}

    .btn-transfer:hover[b-3fv27ljvbw] {
        background: #1976d2;
    }

.notice-hint[b-3fv27ljvbw] {
    color: #757575;
    font-size: 0.75rem;
}

.work-summary[b-3fv27ljvbw] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

    .work-summary h4[b-3fv27ljvbw] {
        margin: 0 0 0.75rem 0;
        color: #495057;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .work-summary h4[b-3fv27ljvbw]::before {
            content: '\f0b1';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: #6c757d;
        }

.summary-content[b-3fv27ljvbw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-item[b-3fv27ljvbw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

    .summary-item i[b-3fv27ljvbw] {
        color: #6c757d;
        width: 1.2rem;
        text-align: center;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .work-info-notice[b-3fv27ljvbw] {
        padding: 0.75rem;
    }

    .notice-content p[b-3fv27ljvbw] {
        font-size: 0.85rem;
    }

    .btn-transfer[b-3fv27ljvbw] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/EditDeliveredOrder.razor.rz.scp.css */

/* EditDeliveredOrder.razor.css - Modern Professional Redesign
   Based on app.css architecture and Users.razor.css design patterns
   ============================================================== */

/* Container Styles */
.pos-container[b-d9fj9yxbgo] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .pos-container[b-d9fj9yxbgo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .pos-container > *[b-d9fj9yxbgo] {
        position: relative;
        z-index: 1;
    }

/* Header Styles */
.pos-header[b-d9fj9yxbgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-left[b-d9fj9yxbgo] {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .header-left h1[b-d9fj9yxbgo] {
        font-size: 28px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

.header-right .date-time[b-d9fj9yxbgo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
}

.btn-icon[b-d9fj9yxbgo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

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

/* Content Layout */
.pos-content[b-d9fj9yxbgo] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
}

/* Products Section */
.products-section[b-d9fj9yxbgo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Category Filters */
.category-filters[b-d9fj9yxbgo] {
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    padding-bottom: 16px;
    overflow: hidden;
}

.category-scroll[b-d9fj9yxbgo] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #667eea rgba(102, 126, 234, 0.1);
}

    .category-scroll[b-d9fj9yxbgo]::-webkit-scrollbar {
        height: 6px;
    }

    .category-scroll[b-d9fj9yxbgo]::-webkit-scrollbar-track {
        background: rgba(102, 126, 234, 0.1);
        border-radius: 10px;
    }

    .category-scroll[b-d9fj9yxbgo]::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 10px;
    }

.category-btn[b-d9fj9yxbgo] {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .category-btn:hover[b-d9fj9yxbgo] {
        background: rgba(102, 126, 234, 0.2);
        color: #667eea;
        transform: translateY(-2px);
    }

    .category-btn.active[b-d9fj9yxbgo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

/* Product Search */
.product-search[b-d9fj9yxbgo] {
    position: relative;
}

    .product-search input[b-d9fj9yxbgo] {
        width: 100%;
        padding: 14px 16px 14px 46px;
        border-radius: 12px;
        border: 2px solid transparent;
        background: rgba(102, 126, 234, 0.05);
        font-size: 16px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .product-search input:focus[b-d9fj9yxbgo] {
            border-color: #667eea;
            background: white;
            outline: none;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

    .product-search i[b-d9fj9yxbgo] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
        font-size: 18px;
    }

/* Products Grid */
.products-grid[b-d9fj9yxbgo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #667eea rgba(102, 126, 234, 0.1);
}

    .products-grid[b-d9fj9yxbgo]::-webkit-scrollbar {
        width: 6px;
    }

    .products-grid[b-d9fj9yxbgo]::-webkit-scrollbar-track {
        background: rgba(102, 126, 234, 0.1);
        border-radius: 10px;
    }

    .products-grid[b-d9fj9yxbgo]::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 10px;
    }

.product-card[b-d9fj9yxbgo] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
}

    .product-card:hover[b-d9fj9yxbgo] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        border-color: #667eea;
    }

    .product-card.in-cart[b-d9fj9yxbgo] {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
    }

.product-image[b-d9fj9yxbgo] {
    height: 140px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .product-image img[b-d9fj9yxbgo] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

.product-card:hover .product-image img[b-d9fj9yxbgo] {
    transform: scale(1.1);
}

.no-image[b-d9fj9yxbgo] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 32px;
}

.stock-badge[b-d9fj9yxbgo] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

    .stock-badge.low[b-d9fj9yxbgo] {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    }

    .stock-badge.out-of-stock[b-d9fj9yxbgo] {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    }

.product-info[b-d9fj9yxbgo] {
    padding: 12px;
}

    .product-info h4[b-d9fj9yxbgo] {
        font-size: 15px;
        font-weight: 600;
        margin: 0 0 8px 0;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.product-meta[b-d9fj9yxbgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price[b-d9fj9yxbgo] {
    font-weight: 700;
    font-size: 16px;
    color: #667eea;
}

    .price small[b-d9fj9yxbgo] {
        font-size: 11px;
    }

.product-stock[b-d9fj9yxbgo] {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.in-cart-indicator[b-d9fj9yxbgo] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.empty-products[b-d9fj9yxbgo] {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
}

    .empty-products i[b-d9fj9yxbgo] {
        font-size: 48px;
        margin-bottom: 16px;
        color: #d1d5db;
    }

    .empty-products p[b-d9fj9yxbgo] {
        font-size: 16px;
        font-weight: 500;
    }

/* Cart Section */
.cart-section[b-d9fj9yxbgo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.customer-selection[b-d9fj9yxbgo],
.agent-section[b-d9fj9yxbgo],
.cart-items-container[b-d9fj9yxbgo],
.order-footer[b-d9fj9yxbgo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

    /* Customer Info */
    .customer-selection h3[b-d9fj9yxbgo],
    .agent-section h3[b-d9fj9yxbgo],
    .cart-items-container h3[b-d9fj9yxbgo] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 16px 0;
        color: #4c1d95;
    }

.selected-customer[b-d9fj9yxbgo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customer-info[b-d9fj9yxbgo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
}

    .customer-info i[b-d9fj9yxbgo] {
        font-size: 36px;
        color: #667eea;
    }

    .customer-info h4[b-d9fj9yxbgo] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
    }

    .customer-info span[b-d9fj9yxbgo] {
        color: #6b7280;
        font-size: 14px;
    }

.payment-badge[b-d9fj9yxbgo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
}

/* Cart Items */
.cart-items-container[b-d9fj9yxbgo] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.changes-summary[b-d9fj9yxbgo] {
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.changes-badge[b-d9fj9yxbgo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #f59e0b;
}

    .changes-badge i[b-d9fj9yxbgo] {
        font-size: 16px;
    }

.cart-items[b-d9fj9yxbgo] {
    flex: 1;
    overflow: hidden;
}

.items-list[b-d9fj9yxbgo] {
    overflow-y: auto;
    max-height: calc(100vh - 500px);
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #667eea rgba(102, 126, 234, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .items-list[b-d9fj9yxbgo]::-webkit-scrollbar {
        width: 6px;
    }

    .items-list[b-d9fj9yxbgo]::-webkit-scrollbar-track {
        background: rgba(102, 126, 234, 0.1);
        border-radius: 10px;
    }

    .items-list[b-d9fj9yxbgo]::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 10px;
    }

.cart-item[b-d9fj9yxbgo] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .cart-item[b-d9fj9yxbgo]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 4px;
        border-radius: 0 12px 12px 0;
    }

    .cart-item:hover[b-d9fj9yxbgo] {
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    .cart-item.new-item[b-d9fj9yxbgo] {
        border-color: #10b981;
    }

        .cart-item.new-item[b-d9fj9yxbgo]::before {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }

    .cart-item.modified[b-d9fj9yxbgo] {
        border-color: #f97316;
    }

        .cart-item.modified[b-d9fj9yxbgo]::before {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        }

.item-info[b-d9fj9yxbgo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .item-info h5[b-d9fj9yxbgo] {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
    }

    .item-info .badge[b-d9fj9yxbgo] {
        align-self: flex-start;
        font-size: 10px;
        padding: 3px 8px;
    }

    .item-info small[b-d9fj9yxbgo] {
        font-size: 12px;
    }

.price-control[b-d9fj9yxbgo] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.price-label[b-d9fj9yxbgo] {
    font-size: 13px;
    font-weight: 600;
    color: #4c1d95;
}

.price-input[b-d9fj9yxbgo] {
    width: 80px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    text-align: right;
}

    .price-input:focus[b-d9fj9yxbgo] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.price-currency[b-d9fj9yxbgo] {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.item-controls[b-d9fj9yxbgo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quantity-control[b-d9fj9yxbgo] {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    height: 36px;
}

    .quantity-control input[b-d9fj9yxbgo] {
        width: 40px;
        height: 100%;
        border: none;
        background: transparent;
        text-align: center;
        font-weight: 600;
        color: #1e293b;
    }

        .quantity-control input:focus[b-d9fj9yxbgo] {
            outline: none;
        }

.qty-btn[b-d9fj9yxbgo] {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .qty-btn:hover[b-d9fj9yxbgo] {
        background: rgba(102, 126, 234, 0.2);
    }

    .qty-btn:active[b-d9fj9yxbgo] {
        transform: scale(0.95);
    }

.btn-remove[b-d9fj9yxbgo] {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-d9fj9yxbgo] {
        background: rgba(239, 68, 68, 0.2);
        transform: rotate(15deg);
    }

.item-total[b-d9fj9yxbgo] {
    font-weight: 700;
    font-size: 16px;
    color: #4c1d95;
    text-align: right;
}

.empty-cart[b-d9fj9yxbgo] {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .empty-cart i[b-d9fj9yxbgo] {
        font-size: 48px;
        margin-bottom: 16px;
        color: #d1d5db;
    }

    .empty-cart p[b-d9fj9yxbgo] {
        font-size: 16px;
        font-weight: 500;
    }

/* Agent Section */
.agent-section[b-d9fj9yxbgo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .agent-section label[b-d9fj9yxbgo] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        display: block;
        margin-bottom: 6px;
    }

.selected-agents[b-d9fj9yxbgo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-chip[b-d9fj9yxbgo] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Order Footer */
.order-footer[b-d9fj9yxbgo] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-summary[b-d9fj9yxbgo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
}

.summary-row[b-d9fj9yxbgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #4b5563;
}

    .summary-row.total[b-d9fj9yxbgo] {
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid rgba(102, 126, 234, 0.1);
    }

    .summary-row.discount[b-d9fj9yxbgo] {
        color: #ef4444;
    }

    .summary-row.difference[b-d9fj9yxbgo] {
        font-weight: 600;
    }

.text-success[b-d9fj9yxbgo] {
    color: #10b981 !important;
}

.text-danger[b-d9fj9yxbgo] {
    color: #ef4444 !important;
}

.order-notes[b-d9fj9yxbgo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .order-notes label[b-d9fj9yxbgo] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

    .order-notes textarea[b-d9fj9yxbgo] {
        padding: 12px;
        border-radius: 12px;
        border: 1px solid #d1d5db;
        resize: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 15px;
    }

        .order-notes textarea:focus[b-d9fj9yxbgo] {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

.action-buttons[b-d9fj9yxbgo] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

.btn-clear[b-d9fj9yxbgo],
.btn-process[b-d9fj9yxbgo] {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-clear[b-d9fj9yxbgo] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

    .btn-clear:hover[b-d9fj9yxbgo] {
        background: rgba(239, 68, 68, 0.2);
        transform: translateY(-2px);
    }

.btn-process[b-d9fj9yxbgo] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-process:hover:not(:disabled)[b-d9fj9yxbgo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

    .btn-process:disabled[b-d9fj9yxbgo] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .btn-process.installment[b-d9fj9yxbgo] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
    }

        .btn-process.installment:hover:not(:disabled)[b-d9fj9yxbgo] {
            box-shadow: 0 8px 20px rgba(240, 147, 251, 0.4);
        }

/* Warning Alert */
.alert[b-d9fj9yxbgo] {
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    margin-bottom: 24px;
    border-left: 4px solid;
}

.alert-warning[b-d9fj9yxbgo] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-left-color: #f59e0b;
}

    .alert-warning h5[b-d9fj9yxbgo] {
        color: #d97706;
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 18px;
    }

    .alert-warning p[b-d9fj9yxbgo], .alert-warning li[b-d9fj9yxbgo] {
        color: #92400e;
    }

.alert i[b-d9fj9yxbgo] {
    font-size: 22px;
    color: #f59e0b;
}

/* Loading & Error States */
.loading-container[b-d9fj9yxbgo], .unauthorized-container[b-d9fj9yxbgo], .not-found-container[b-d9fj9yxbgo], .not-allowed-container[b-d9fj9yxbgo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner-border[b-d9fj9yxbgo] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-d9fj9yxbgo 0.8s linear infinite;
}

.spinner-border-sm[b-d9fj9yxbgo] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

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

.unauthorized-container h3[b-d9fj9yxbgo], .not-found-container h3[b-d9fj9yxbgo], .not-allowed-container h3[b-d9fj9yxbgo] {
    font-size: 24px;
    margin: 16px 0 8px;
    font-weight: 700;
    color: #1e293b;
}

.unauthorized-container p[b-d9fj9yxbgo], .not-found-container p[b-d9fj9yxbgo], .not-allowed-container p[b-d9fj9yxbgo] {
    color: #6b7280;
    margin-bottom: 24px;
    font-size: 16px;
}

.unauthorized-container i[b-d9fj9yxbgo], .not-found-container i[b-d9fj9yxbgo], .not-allowed-container i[b-d9fj9yxbgo] {
    font-size: 48px;
    color: #d1d5db;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pos-content[b-d9fj9yxbgo] {
        grid-template-columns: 1fr 350px;
    }
}

@media (max-width: 992px) {
    .pos-content[b-d9fj9yxbgo] {
        grid-template-columns: 1fr;
    }

    .products-grid[b-d9fj9yxbgo] {
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    .pos-container[b-d9fj9yxbgo] {
        padding: 16px;
    }

    .pos-header[b-d9fj9yxbgo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .header-right[b-d9fj9yxbgo] {
        width: 100%;
    }

    .products-grid[b-d9fj9yxbgo] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .product-info h4[b-d9fj9yxbgo] {
        font-size: 13px;
    }

    .cart-item[b-d9fj9yxbgo] {
        grid-template-columns: 1fr;
    }

    .item-controls[b-d9fj9yxbgo] {
        justify-content: space-between;
        margin: 8px 0;
    }

    .item-total[b-d9fj9yxbgo] {
        text-align: left;
    }

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

/* Dark Theme Support */
[data-theme="dark"] .pos-container[b-d9fj9yxbgo] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .pos-container[b-d9fj9yxbgo]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .pos-header[b-d9fj9yxbgo],
[data-theme="dark"] .products-section[b-d9fj9yxbgo],
[data-theme="dark"] .customer-selection[b-d9fj9yxbgo],
[data-theme="dark"] .agent-section[b-d9fj9yxbgo],
[data-theme="dark"] .cart-items-container[b-d9fj9yxbgo],
[data-theme="dark"] .order-footer[b-d9fj9yxbgo],
[data-theme="dark"] .loading-container[b-d9fj9yxbgo],
[data-theme="dark"] .unauthorized-container[b-d9fj9yxbgo],
[data-theme="dark"] .not-found-container[b-d9fj9yxbgo],
[data-theme="dark"] .not-allowed-container[b-d9fj9yxbgo] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .cart-item[b-d9fj9yxbgo] {
    background: #1e293b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .product-card[b-d9fj9yxbgo] {
    background: #1e293b;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .customer-info[b-d9fj9yxbgo],
[data-theme="dark"] .payment-badge[b-d9fj9yxbgo],
[data-theme="dark"] .order-summary[b-d9fj9yxbgo] {
    background: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .header-left h1[b-d9fj9yxbgo] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .customer-selection h3[b-d9fj9yxbgo],
[data-theme="dark"] .agent-section h3[b-d9fj9yxbgo],
[data-theme="dark"] .cart-items-container h3[b-d9fj9yxbgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-container h3[b-d9fj9yxbgo],
[data-theme="dark"] .not-found-container h3[b-d9fj9yxbgo],
[data-theme="dark"] .not-allowed-container h3[b-d9fj9yxbgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-container p[b-d9fj9yxbgo],
[data-theme="dark"] .not-found-container p[b-d9fj9yxbgo],
[data-theme="dark"] .not-allowed-container p[b-d9fj9yxbgo] {
    color: #94a3b8;
}

[data-theme="dark"] .product-info h4[b-d9fj9yxbgo],
[data-theme="dark"] .customer-info h4[b-d9fj9yxbgo],
[data-theme="dark"] .summary-row.total[b-d9fj9yxbgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .header-right .date-time[b-d9fj9yxbgo],
[data-theme="dark"] .price-currency[b-d9fj9yxbgo],
[data-theme="dark"] .summary-row[b-d9fj9yxbgo],
[data-theme="dark"] .customer-info span[b-d9fj9yxbgo],
[data-theme="dark"] .product-stock[b-d9fj9yxbgo] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-icon[b-d9fj9yxbgo],
[data-theme="dark"] .category-btn[b-d9fj9yxbgo],
[data-theme="dark"] .product-search input[b-d9fj9yxbgo],
[data-theme="dark"] .agent-chip[b-d9fj9yxbgo],
[data-theme="dark"] .price-control input[b-d9fj9yxbgo],
[data-theme="dark"] .quantity-control[b-d9fj9yxbgo] {
    background: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .product-search input:focus[b-d9fj9yxbgo] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .price[b-d9fj9yxbgo] {
    color: #a78bfa;
}

[data-theme="dark"] .price-label[b-d9fj9yxbgo],
[data-theme="dark"] .order-notes label[b-d9fj9yxbgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .order-notes textarea[b-d9fj9yxbgo] {
    background: rgba(71, 85, 105, 0.3);
    border-color: #475569;
    color: #e2e8f0;
}

    [data-theme="dark"] .order-notes textarea:focus[b-d9fj9yxbgo] {
        border-color: #a78bfa;
        box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
    }

[data-theme="dark"] .alert-warning[b-d9fj9yxbgo] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
}

    [data-theme="dark"] .alert-warning h5[b-d9fj9yxbgo] {
        color: #fbbf24;
    }

    [data-theme="dark"] .alert-warning p[b-d9fj9yxbgo], [data-theme="dark"] .alert-warning li[b-d9fj9yxbgo] {
        color: #fcd34d;
    }
/* _content/Sahelly/Components/Pages/Merchant/FinancialReport.razor.rz.scp.css */

/* ===================================
   Financial Reports Page - Modern Professional Design
   تصميم احترافي حديث لصفحة التقارير المالية
   =================================== */

/* Modern Gradient Buttons - Following Users.razor.css Design */
.btn-gradient-primary[b-32j9ujkwpn] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-gradient-primary:hover[b-32j9ujkwpn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-32j9ujkwpn] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-32j9ujkwpn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-32j9ujkwpn] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-32j9ujkwpn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Page Container - Modern Design */
.financial-reports-container[b-32j9ujkwpn] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .financial-reports-container[b-32j9ujkwpn]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .financial-reports-container > *[b-32j9ujkwpn] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Modern Style */
.page-header[b-32j9ujkwpn] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-content[b-32j9ujkwpn] {
    flex: 1;
}

    .header-content h1[b-32j9ujkwpn] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .header-content h1 i[b-32j9ujkwpn] {
            color: #667eea;
        }

.breadcrumb[b-32j9ujkwpn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

    .breadcrumb a[b-32j9ujkwpn] {
        color: #6b7280;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb a:hover[b-32j9ujkwpn] {
            color: #667eea;
        }

    .breadcrumb span[b-32j9ujkwpn] {
        color: #d1d5db;
    }

.header-actions[b-32j9ujkwpn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-refresh[b-32j9ujkwpn] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-refresh:hover[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Dropdown Menu */
.dropdown[b-32j9ujkwpn] {
    position: relative;
}

.dropdown-menu[b-32j9ujkwpn] {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.1);
    padding: 8px;
    min-width: 180px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s;
}

    .dropdown-menu.show[b-32j9ujkwpn] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.dropdown-item[b-32j9ujkwpn] {
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    width: 100%;
    text-align: right;
    color: #4b5563;
}

    .dropdown-item:hover[b-32j9ujkwpn] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

/* Loading State */
.loading-container[b-32j9ujkwpn] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    flex-direction: column;
    gap: 20px;
}

.spinner-border[b-32j9ujkwpn] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-32j9ujkwpn 0.8s linear infinite;
}

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

/* Error State */
.error-state[b-32j9ujkwpn] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .error-state i[b-32j9ujkwpn] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .error-state h3[b-32j9ujkwpn] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .error-state p[b-32j9ujkwpn] {
        color: #6b7280;
        margin-bottom: 20px;
    }

/* Date Range Section */
.date-range-section[b-32j9ujkwpn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.period-buttons[b-32j9ujkwpn] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.period-btn[b-32j9ujkwpn] {
    padding: 12px 20px;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    border-radius: 12px;
    color: #667eea;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 14px;
}

    .period-btn:hover[b-32j9ujkwpn] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.15);
        transform: translateY(-2px);
    }

    .period-btn.active[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.custom-date-range[b-32j9ujkwpn] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.date-input[b-32j9ujkwpn] {
    padding: 12px 16px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.05);
    color: #4c1d95;
    font-weight: 500;
    transition: all 0.3s;
}

    .date-input:focus[b-32j9ujkwpn] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-apply[b-32j9ujkwpn] {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-apply:hover[b-32j9ujkwpn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Summary Cards Grid */
.summary-cards-grid[b-32j9ujkwpn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.summary-card[b-32j9ujkwpn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-32j9ujkwpn]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-32j9ujkwpn] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .summary-card:hover[b-32j9ujkwpn]::before {
            opacity: 1;
        }

.card-icon[b-32j9ujkwpn] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .card-icon.revenue[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .card-icon.expenses[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .card-icon.profit[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .card-icon.margin[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

.card-content[b-32j9ujkwpn] {
    flex: 1;
}

.card-label[b-32j9ujkwpn] {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 8px;
    font-weight: 500;
    display: block;
}

.card-value[b-32j9ujkwpn] {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-trend[b-32j9ujkwpn] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

    .card-trend.positive[b-32j9ujkwpn] {
        color: #10b981;
    }

    .card-trend.negative[b-32j9ujkwpn] {
        color: #ef4444;
    }

.progress-bar[b-32j9ujkwpn] {
    width: 100%;
    height: 8px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-fill[b-32j9ujkwpn] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.8s ease;
}

/* Charts Section */
.charts-section[b-32j9ujkwpn] {
    margin-bottom: 32px;
}

.chart-card[b-32j9ujkwpn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.chart-header[b-32j9ujkwpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .chart-header h3[b-32j9ujkwpn] {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #4c1d95;
    }

.chart-controls[b-32j9ujkwpn] {
    display: flex;
    gap: 8px;
}

.chart-control[b-32j9ujkwpn] {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .chart-control:hover[b-32j9ujkwpn] {
        background: rgba(102, 126, 234, 0.2);
    }

    .chart-control.active[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

.chart-body[b-32j9ujkwpn] {
    padding: 24px;
    min-height: 400px;
}

.charts-grid[b-32j9ujkwpn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

/* Section Headers */
.section-header[b-32j9ujkwpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

    .section-header h3[b-32j9ujkwpn] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4c1d95;
    }

/* Expenses Section */
.expenses-section[b-32j9ujkwpn] {
    margin-bottom: 32px;
}

.table-responsive[b-32j9ujkwpn] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.expenses-table[b-32j9ujkwpn] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .expenses-table thead th[b-32j9ujkwpn] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

    .expenses-table tbody td[b-32j9ujkwpn] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
        text-align: right;
    }

    .expenses-table tbody tr[b-32j9ujkwpn] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .expenses-table tbody tr:hover[b-32j9ujkwpn] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

    .expenses-table tfoot td[b-32j9ujkwpn] {
        padding: 18px 16px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        font-weight: 700;
        color: #4c1d95;
        border-top: 2px solid rgba(102, 126, 234, 0.2);
    }

.expense-category[b-32j9ujkwpn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .expense-category i[b-32j9ujkwpn] {
        width: 20px;
        color: #9333ea;
    }

.percentage-display[b-32j9ujkwpn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.percentage-bar-sm[b-32j9ujkwpn] {
    flex: 1;
    height: 6px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.percentage-fill[b-32j9ujkwpn] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 0.8s ease;
}

/* Shareholders Section */
.shareholders-section[b-32j9ujkwpn] {
    margin-bottom: 32px;
}

.shareholders-list[b-32j9ujkwpn] {
    display: grid;
    gap: 20px;
}

.shareholder-card[b-32j9ujkwpn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

    .shareholder-card:hover[b-32j9ujkwpn] {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

.shareholder-header[b-32j9ujkwpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.shareholder-info[b-32j9ujkwpn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .shareholder-info i[b-32j9ujkwpn] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .shareholder-info div strong[b-32j9ujkwpn] {
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 4px;
    }

    .shareholder-info div span[b-32j9ujkwpn] {
        font-size: 14px;
        color: #6b7280;
    }

.status-badge[b-32j9ujkwpn] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.status-active[b-32j9ujkwpn] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.status-inactive[b-32j9ujkwpn] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

.shareholder-details[b-32j9ujkwpn] {
    margin-bottom: 20px;
}

.detail-row[b-32j9ujkwpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

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

    .detail-row span:first-child[b-32j9ujkwpn] {
        color: #6b7280;
        font-size: 14px;
    }

    .detail-row strong[b-32j9ujkwpn] {
        font-weight: 600;
        color: #1f2937;
    }

.shareholder-actions[b-32j9ujkwpn] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-view-details[b-32j9ujkwpn] {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-view-details:hover[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Monthly Section */
.monthly-section[b-32j9ujkwpn] {
    margin-bottom: 32px;
}

.monthly-grid[b-32j9ujkwpn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.month-card[b-32j9ujkwpn] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

    .month-card:hover[b-32j9ujkwpn] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

.month-header[b-32j9ujkwpn] {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .month-header h4[b-32j9ujkwpn] {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
    }

.month-details[b-32j9ujkwpn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item[b-32j9ujkwpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .detail-item span[b-32j9ujkwpn] {
        color: #6b7280;
        font-size: 14px;
    }

    .detail-item strong[b-32j9ujkwpn] {
        font-weight: 600;
        color: #1f2937;
    }

/* Notification Toast */
.notification-toast[b-32j9ujkwpn] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(67, 233, 123, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s;
    z-index: 1000;
}

    .notification-toast.show[b-32j9ujkwpn] {
        transform: translateX(0);
    }

    .notification-toast i[b-32j9ujkwpn] {
        color: #10b981;
        font-size: 20px;
    }

    .notification-toast span[b-32j9ujkwpn] {
        color: #1f2937;
        font-weight: 500;
    }

/* Unauthorized Content */
.unauthorized-content[b-32j9ujkwpn] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-32j9ujkwpn] {
        font-size: 80px;
        color: #667eea;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-32j9ujkwpn] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-32j9ujkwpn] {
        color: #6b7280;
        margin-bottom: 20px;
    }

    .unauthorized-content .btn[b-32j9ujkwpn] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

/* Dark Theme Support */
[data-theme="dark"] .financial-reports-container[b-32j9ujkwpn] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .financial-reports-container[b-32j9ujkwpn]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-32j9ujkwpn],
[data-theme="dark"] .date-range-section[b-32j9ujkwpn],
[data-theme="dark"] .summary-card[b-32j9ujkwpn],
[data-theme="dark"] .chart-card[b-32j9ujkwpn],
[data-theme="dark"] .expenses-table[b-32j9ujkwpn],
[data-theme="dark"] .shareholder-card[b-32j9ujkwpn],
[data-theme="dark"] .month-card[b-32j9ujkwpn],
[data-theme="dark"] .section-header[b-32j9ujkwpn] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .chart-header[b-32j9ujkwpn],
    [data-theme="dark"] .expenses-table thead th[b-32j9ujkwpn],
    [data-theme="dark"] .expenses-table tfoot td[b-32j9ujkwpn] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

    [data-theme="dark"] .expenses-table tbody td[b-32j9ujkwpn] {
        background: #1e293b;
        color: #e2e8f0;
    }

    [data-theme="dark"] .expenses-table tbody tr:hover[b-32j9ujkwpn] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

    [data-theme="dark"] .header-content h1[b-32j9ujkwpn],
    [data-theme="dark"] .card-value[b-32j9ujkwpn],
    [data-theme="dark"] .section-header h3[b-32j9ujkwpn],
    [data-theme="dark"] .chart-header h3[b-32j9ujkwpn] {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

[data-theme="dark"] .breadcrumb a[b-32j9ujkwpn] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb a:hover[b-32j9ujkwpn] {
        color: #a78bfa;
    }

[data-theme="dark"] .card-label[b-32j9ujkwpn],
[data-theme="dark"] .detail-row span:first-child[b-32j9ujkwpn],
[data-theme="dark"] .detail-item span[b-32j9ujkwpn] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-row strong[b-32j9ujkwpn],
[data-theme="dark"] .detail-item strong[b-32j9ujkwpn],
[data-theme="dark"] .shareholder-info div strong[b-32j9ujkwpn] {
    color: #e2e8f0;
}

[data-theme="dark"] .date-input[b-32j9ujkwpn] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .date-input:focus[b-32j9ujkwpn] {
        background: rgba(71, 85, 105, 0.5);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .charts-grid[b-32j9ujkwpn] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .financial-reports-container[b-32j9ujkwpn] {
        padding: 16px;
    }

    .page-header[b-32j9ujkwpn] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 16px;
    }

    .header-content h1[b-32j9ujkwpn] {
        font-size: 28px;
    }

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

    .summary-cards-grid[b-32j9ujkwpn] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-card[b-32j9ujkwpn] {
        padding: 20px;
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .card-icon[b-32j9ujkwpn] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .card-value[b-32j9ujkwpn] {
        font-size: 24px;
    }

    .period-buttons[b-32j9ujkwpn] {
        flex-direction: column;
        gap: 8px;
    }

    .period-btn[b-32j9ujkwpn] {
        width: 100%;
        text-align: center;
    }

    .custom-date-range[b-32j9ujkwpn] {
        flex-direction: column;
        align-items: stretch;
    }

    .charts-grid[b-32j9ujkwpn] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .chart-body[b-32j9ujkwpn] {
        padding: 16px;
        min-height: 300px;
    }

    .monthly-grid[b-32j9ujkwpn] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .expenses-table[b-32j9ujkwpn] {
        font-size: 14px;
    }

        .expenses-table thead th[b-32j9ujkwpn],
        .expenses-table tbody td[b-32j9ujkwpn],
        .expenses-table tfoot td[b-32j9ujkwpn] {
            padding: 12px 8px;
        }

    .dropdown-menu[b-32j9ujkwpn] {
        position: fixed;
        top: auto;
        bottom: 20px;
        right: 20px;
        left: 20px;
        width: auto;
    }

    .section-header[b-32j9ujkwpn] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .notification-toast[b-32j9ujkwpn] {
        right: 16px;
        left: 16px;
        top: 16px;
    }
}

@media (max-width: 480px) {
    .header-content h1[b-32j9ujkwpn] {
        font-size: 24px;
    }

    .card-value[b-32j9ujkwpn] {
        font-size: 20px;
    }

    .chart-body[b-32j9ujkwpn] {
        min-height: 250px;
    }

    .summary-card[b-32j9ujkwpn] {
        padding: 16px;
    }

    .month-card[b-32j9ujkwpn],
    .shareholder-card[b-32j9ujkwpn] {
        padding: 16px;
    }
}

/* Print Styles */
@media print {
    .financial-reports-container[b-32j9ujkwpn] {
        background: white !important;
        padding: 0;
    }

    .page-header[b-32j9ujkwpn],
    .date-range-section[b-32j9ujkwpn],
    .header-actions[b-32j9ujkwpn],
    .dropdown[b-32j9ujkwpn],
    .notification-toast[b-32j9ujkwpn] {
        display: none !important;
    }

    .summary-card[b-32j9ujkwpn],
    .chart-card[b-32j9ujkwpn],
    .expenses-table[b-32j9ujkwpn],
    .month-card[b-32j9ujkwpn] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

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

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

@keyframes slideInRight-b-32j9ujkwpn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

/* Focus States for Accessibility */
*:focus[b-32j9ujkwpn] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-32j9ujkwpn],
.btn:focus[b-32j9ujkwpn] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-32j9ujkwpn],
select:focus[b-32j9ujkwpn] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-32j9ujkwpn],
    .btn-gradient-secondary[b-32j9ujkwpn],
    .btn-gradient-success[b-32j9ujkwpn] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-32j9ujkwpn] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/InstallmentPlans.razor.rz.scp.css */
/* Installment Plans Page - Modern Professional Design */
/* Following the same architecture as Users.razor.css and app.css */

/* Modern Gradient Buttons */
.btn-gradient-primary[b-4pyevcoibl] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-4pyevcoibl] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-4pyevcoibl] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-4pyevcoibl] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-4pyevcoibl] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-4pyevcoibl] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-gradient-warning[b-4pyevcoibl] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-gradient-warning:hover[b-4pyevcoibl] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

.btn-gradient-danger[b-4pyevcoibl] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-gradient-danger:hover[b-4pyevcoibl] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Ghost Buttons */
.btn-gradient-ghost[b-4pyevcoibl] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-gradient-ghost:hover[b-4pyevcoibl] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-1px);
    }

.btn-ghost[b-4pyevcoibl] {
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 8px 12px;
    transition: all 0.2s;
}

    .btn-ghost:hover[b-4pyevcoibl] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

.btn-icon[b-4pyevcoibl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .btn-icon:hover[b-4pyevcoibl] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transform: translateY(-1px);
    }

/* Override Bootstrap Button Styles */
.btn[b-4pyevcoibl] {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    padding: 10px 20px;
}

    .btn:hover[b-4pyevcoibl] {
        transform: translateY(-2px);
    }

.btn-sm[b-4pyevcoibl] {
    padding: 6px 12px;
    font-size: 14px;
}

/* Page Container */
.installment-plans-container[b-4pyevcoibl] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .installment-plans-container[b-4pyevcoibl]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .installment-plans-container > *[b-4pyevcoibl] {
        z-index: 1;
    }

/* Page Header */
.page-header[b-4pyevcoibl] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header-content h1[b-4pyevcoibl] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .header-content h1 i[b-4pyevcoibl] {
        color: #667eea;
        -webkit-text-fill-color: #667eea;
    }

.header-subtitle[b-4pyevcoibl] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Statistics Grid */
.stats-grid[b-4pyevcoibl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-4pyevcoibl]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-4pyevcoibl] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-4pyevcoibl]::before {
            opacity: 1;
        }

.stat-icon[b-4pyevcoibl] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .stat-icon.active[b-4pyevcoibl] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-icon.total[b-4pyevcoibl] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .stat-icon.store[b-4pyevcoibl] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .stat-icon.default[b-4pyevcoibl] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

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

.stat-value[b-4pyevcoibl] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-4pyevcoibl] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Plans Grid */
.plans-grid[b-4pyevcoibl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.plan-card[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    padding: 24px;
}

    .plan-card[b-4pyevcoibl]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
    }

    .plan-card:hover[b-4pyevcoibl] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .plan-card.default[b-4pyevcoibl] {
        border-color: #d88c14;
        box-shadow: 0 0 0 4px rgba(216, 140, 20, 0.2);
    }

    .plan-card.inactive[b-4pyevcoibl] {
        opacity: 0.7;
        filter: grayscale(50%);
    }

    .plan-card > *[b-4pyevcoibl] {
        position: relative;
        z-index: 1;
    }

.default-badge[b-4pyevcoibl] {
    position: absolute;
    top: -12px;
    right: 24px;
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(216, 140, 20, 0.3);
}

.plan-header[b-4pyevcoibl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .plan-header h3[b-4pyevcoibl] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.plan-actions[b-4pyevcoibl] {
    display: flex;
    gap: 8px;
}

.plan-details[b-4pyevcoibl] {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.detail-item[b-4pyevcoibl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

    .detail-item i[b-4pyevcoibl] {
        width: 20px;
        color: #667eea;
        font-size: 16px;
    }

.detail-label[b-4pyevcoibl] {
    font-weight: 600;
    color: #4c1d95;
    min-width: 100px;
}

.detail-value[b-4pyevcoibl] {
    color: #1f2937;
    font-weight: 500;
    flex: 1;
}

.detail-item.full-width[b-4pyevcoibl] {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(102, 126, 234, 0.05);
    padding: 16px;
    border-radius: 12px;
    margin-top: 8px;
}

    .detail-item.full-width .detail-value[b-4pyevcoibl] {
        margin-top: 8px;
        margin-right: 32px;
        font-style: italic;
        color: #6b7280;
    }

.plan-footer[b-4pyevcoibl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.status-badges[b-4pyevcoibl] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.display-order[b-4pyevcoibl] {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    padding: 4px 8px;
    background: rgba(156, 163, 175, 0.1);
    border-radius: 8px;
}

/* Badges */
.badge[b-4pyevcoibl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.badge-success[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(59, 201, 104, 0.2) 0%, rgba(50, 209, 183, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(59, 201, 104, 0.3);
}

.badge-secondary[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(156, 163, 175, 0.2) 100%);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.badge-info[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(74, 163, 194, 0.2) 0%, rgba(41, 104, 178, 0.2) 100%);
    color: #2563eb;
    border: 1px solid rgba(74, 163, 194, 0.3);
}

/* Empty State */
.empty-state[b-4pyevcoibl] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-4pyevcoibl] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-state h3[b-4pyevcoibl] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-4pyevcoibl] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 32px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

/* Loading State */
.loading-container[b-4pyevcoibl] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner-border[b-4pyevcoibl] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-4pyevcoibl 0.8s linear infinite;
}

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

/* Modal Overrides - Modern Style */
.modal.show[b-4pyevcoibl] {
    display: flex !important;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-4pyevcoibl] {
    max-width: 800px;
    width: 90%;
    margin: 20px;
    animation: zoomIn-b-4pyevcoibl 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomIn-b-4pyevcoibl {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

.modal-content[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-4pyevcoibl] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-4pyevcoibl] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-body[b-4pyevcoibl] {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer[b-4pyevcoibl] {
    padding: 24px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.btn-close[b-4pyevcoibl] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    transition: all 0.3s;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-4pyevcoibl] {
        color: #4c1d95;
        transform: rotate(90deg);
        background: rgba(107, 114, 128, 0.1);
    }

/* Form Styles - Modern */
.form-group[b-4pyevcoibl] {
    margin-bottom: 24px;
}

.form-label[b-4pyevcoibl] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 8px;
    display: block;
}

.required[b-4pyevcoibl] {
    color: #ef4444;
    margin-right: 4px;
}

.form-control[b-4pyevcoibl] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1f2937;
}

    .form-control:focus[b-4pyevcoibl] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control[b-4pyevcoibl]::placeholder {
        color: #9ca3af;
    }

select.form-control[b-4pyevcoibl] {
    cursor: pointer;
}

.form-options[b-4pyevcoibl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
    padding: 20px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
}

.form-check[b-4pyevcoibl] {
    align-items: center;
    gap: 12px;
}

.form-check-input[b-4pyevcoibl] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
    border-radius: 4px;
}

.form-check-label[b-4pyevcoibl] {
    font-weight: 500;
    color: #4c1d95;
    cursor: pointer;
    flex: 1;
}

/* Calculator Section */
.calculator-section[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
}

    .calculator-section h5[b-4pyevcoibl] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 20px 0;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .calculator-section h5 i[b-4pyevcoibl] {
            color: #667eea;
        }

.calculator-inputs[b-4pyevcoibl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.calc-input[b-4pyevcoibl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .calc-input label[b-4pyevcoibl] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

.calculator-result[b-4pyevcoibl] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.result-item[b-4pyevcoibl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .result-item:last-child[b-4pyevcoibl] {
        border-bottom: none;
    }

    .result-item span:first-child[b-4pyevcoibl] {
        color: #6b7280;
        font-weight: 500;
    }

    .result-item strong[b-4pyevcoibl] {
        color: #1f2937;
        font-weight: 700;
    }

    .result-item.highlight[b-4pyevcoibl] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        padding: 12px 16px;
        border-radius: 8px;
        margin-top: 12px;
        font-size: 16px;
        border-bottom: none;
    }

        .result-item.highlight span:first-child[b-4pyevcoibl] {
            color: #4c1d95;
            font-weight: 600;
        }

        .result-item.highlight strong[b-4pyevcoibl] {
            color: #667eea;
            font-size: 18px;
        }

/* Unauthorized Content */
.unauthorized-content[b-4pyevcoibl] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-4pyevcoibl] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-4pyevcoibl] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-4pyevcoibl] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 32px;
    }

/* Secondary Button Style */
.btn-secondary[b-4pyevcoibl] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-secondary:hover[b-4pyevcoibl] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Spinner for buttons */
.spinner-border-sm[b-4pyevcoibl] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Dark Theme Support */
[data-theme="dark"] .installment-plans-container[b-4pyevcoibl] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .installment-plans-container[b-4pyevcoibl]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-4pyevcoibl],
[data-theme="dark"] .stat-card[b-4pyevcoibl],
[data-theme="dark"] .plan-card[b-4pyevcoibl],
[data-theme="dark"] .empty-state[b-4pyevcoibl],
[data-theme="dark"] .loading-container[b-4pyevcoibl],
[data-theme="dark"] .unauthorized-content[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-content[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .header-content h1[b-4pyevcoibl],
[data-theme="dark"] .stat-value[b-4pyevcoibl],
[data-theme="dark"] .plan-header h3[b-4pyevcoibl] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .header-subtitle[b-4pyevcoibl],
[data-theme="dark"] .stat-label[b-4pyevcoibl],
[data-theme="dark"] .detail-value[b-4pyevcoibl] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-label[b-4pyevcoibl],
[data-theme="dark"] .detail-label[b-4pyevcoibl] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-4pyevcoibl] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-4pyevcoibl] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .calculator-section[b-4pyevcoibl] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .calculator-result[b-4pyevcoibl] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(71, 85, 105, 0.3);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-grid[b-4pyevcoibl] {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .installment-plans-container[b-4pyevcoibl] {
        padding: 16px;
    }

    .page-header[b-4pyevcoibl] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .header-content h1[b-4pyevcoibl] {
        font-size: 28px;
        text-align: center;
    }

    .header-subtitle[b-4pyevcoibl] {
        font-size: 16px;
        text-align: center;
    }

    .stats-grid[b-4pyevcoibl] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-4pyevcoibl] {
        padding: 20px;
    }

    .stat-icon[b-4pyevcoibl] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-4pyevcoibl] {
        font-size: 24px;
    }

    .plans-grid[b-4pyevcoibl] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .plan-card[b-4pyevcoibl] {
        padding: 20px;
    }

    .plan-header[b-4pyevcoibl] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .plan-actions[b-4pyevcoibl] {
        justify-content: center;
    }

    .plan-footer[b-4pyevcoibl] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .status-badges[b-4pyevcoibl] {
        justify-content: center;
    }

    .modal-dialog[b-4pyevcoibl] {
        width: 95%;
        margin: 10px;
    }

    .modal-header[b-4pyevcoibl],
    .modal-body[b-4pyevcoibl],
    .modal-footer[b-4pyevcoibl] {
        padding: 20px;
    }

    .calculator-inputs[b-4pyevcoibl] {
        grid-template-columns: 1fr;
    }

    .form-options[b-4pyevcoibl] {
        gap: 12px;
    }

    .empty-state[b-4pyevcoibl] {
        padding: 60px 20px;
    }

        .empty-state i[b-4pyevcoibl] {
            font-size: 60px;
        }

        .empty-state h3[b-4pyevcoibl] {
            font-size: 22px;
        }
}

@media (max-width: 480px) {
    .header-content h1[b-4pyevcoibl] {
        font-size: 24px;
    }

    .stat-card[b-4pyevcoibl] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .detail-item[b-4pyevcoibl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .detail-label[b-4pyevcoibl] {
        min-width: auto;
        font-size: 13px;
    }

    .result-item[b-4pyevcoibl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .btn[b-4pyevcoibl] {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .installment-plans-container[b-4pyevcoibl] {
        background: white !important;
    }

    .page-header .btn[b-4pyevcoibl],
    .plan-actions[b-4pyevcoibl],
    .modal[b-4pyevcoibl],
    .btn-icon[b-4pyevcoibl] {
        display: none !important;
    }

    .stat-card[b-4pyevcoibl],
    .plan-card[b-4pyevcoibl] {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        background: white !important;
    }
}

/* Focus States for Accessibility */
*:focus[b-4pyevcoibl] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-4pyevcoibl],
.btn:focus[b-4pyevcoibl] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-4pyevcoibl],
select:focus[b-4pyevcoibl] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-4pyevcoibl],
    .btn-gradient-secondary[b-4pyevcoibl],
    .btn-gradient-success[b-4pyevcoibl],
    .btn-gradient-warning[b-4pyevcoibl],
    .btn-gradient-danger[b-4pyevcoibl] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-4pyevcoibl] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/InventoryHistory.razor.rz.scp.css */

/* ===================================
   Inventory History Page - Modern Professional CSS
   ���� ����� ���� ������ �� ������ ������� ������
   =================================== */

/* Page Container */
.inventory-history-page[b-y4e328ienk] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .inventory-history-page[b-y4e328ienk]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .inventory-history-page > *[b-y4e328ienk] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-y4e328ienk] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-content[b-y4e328ienk] {
    flex: 1;
}

.breadcrumb[b-y4e328ienk] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-y4e328ienk] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-y4e328ienk] {
        color: #667eea;
    }

.breadcrumb-separator[b-y4e328ienk] {
    color: #d1d5db;
}

.breadcrumb-current[b-y4e328ienk] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-y4e328ienk] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-y4e328ienk] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-y4e328ienk] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Buttons - Gradient Style */
.btn[b-y4e328ienk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    font-size: 15px;
    position: relative;
    overflow: hidden;
}

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

    .btn:hover[b-y4e328ienk]::before {
        width: 100px;
        height: 100px;
    }

.btn-secondary[b-y4e328ienk] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-secondary:hover[b-y4e328ienk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

    .btn-secondary:disabled[b-y4e328ienk] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.btn-export[b-y4e328ienk] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-export:hover[b-y4e328ienk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Statistics Grid */
.stats-grid[b-y4e328ienk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-y4e328ienk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-y4e328ienk]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-y4e328ienk] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-y4e328ienk]::before {
            opacity: 1;
        }

.stat-icon[b-y4e328ienk] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .stat-icon.additions[b-y4e328ienk] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .stat-icon.sales[b-y4e328ienk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.value[b-y4e328ienk] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .stat-icon.movements[b-y4e328ienk] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

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

.stat-value[b-y4e328ienk] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-y4e328ienk] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Filters Section */
.filters-section[b-y4e328ienk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.filter-row[b-y4e328ienk] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-box[b-y4e328ienk] {
    position: relative;
    flex: 1;
    min-width: 280px;
}

    .search-box i[b-y4e328ienk] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 16px;
    }

.search-input[b-y4e328ienk] {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .search-input:focus[b-y4e328ienk] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-y4e328ienk]::placeholder {
        color: #9ca3af;
    }

.filter-select[b-y4e328ienk] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    min-width: 200px;
    cursor: pointer;
}

    .filter-select:focus[b-y4e328ienk] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.date-filter[b-y4e328ienk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-filter label[b-y4e328ienk] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        white-space: nowrap;
    }

.date-input[b-y4e328ienk] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .date-input:focus[b-y4e328ienk] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-filter[b-y4e328ienk] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-filter:hover[b-y4e328ienk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-filter.reset[b-y4e328ienk] {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        color: #4b5563;
    }

        .btn-filter.reset:hover[b-y4e328ienk] {
            background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

/* Loading Container */
.loading-container[b-y4e328ienk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 24px;
}

.spinner[b-y4e328ienk] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-y4e328ienk 0.8s linear infinite;
}

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

.loading-text[b-y4e328ienk] {
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Table Container */
.table-container[b-y4e328ienk] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.movements-table[b-y4e328ienk] {
    width: 100%;
    border-collapse: collapse;
}

    .movements-table th[b-y4e328ienk] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .movements-table td[b-y4e328ienk] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
        vertical-align: middle;
    }

    .movements-table tbody tr[b-y4e328ienk] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .movements-table tbody tr:hover[b-y4e328ienk] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .movements-table tbody tr:last-child td[b-y4e328ienk] {
            border-bottom: none;
        }

        .movements-table tbody tr.addition-row[b-y4e328ienk] {
            background: linear-gradient(90deg, rgba(67, 233, 123, 0.03) 0%, rgba(56, 249, 215, 0.03) 100%);
        }

        .movements-table tbody tr.sale-row[b-y4e328ienk] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
        }

/* Table Elements */
.datetime-info[b-y4e328ienk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .datetime-info .date[b-y4e328ienk] {
        font-weight: 600;
        color: #1f2937;
        font-size: 14px;
    }

    .datetime-info .time[b-y4e328ienk] {
        font-size: 12px;
        color: #6b7280;
    }

.product-info[b-y4e328ienk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-y4e328ienk] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-name[b-y4e328ienk] {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
    margin: 0;
}

.product-sku[b-y4e328ienk] {
    font-size: 13px;
    color: #9333ea;
    margin: 0;
}

/* Movement Badge */
.movement-badge[b-y4e328ienk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .movement-badge.addition[b-y4e328ienk] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .movement-badge.sale[b-y4e328ienk] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #667eea;
        border: 1px solid rgba(102, 126, 234, 0.3);
    }

    .movement-badge.return[b-y4e328ienk] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .movement-badge.adjustment[b-y4e328ienk] {
        background: linear-gradient(135deg, rgba(74, 163, 194, 0.2) 0%, rgba(41, 104, 178, 0.2) 100%);
        color: #4aa3c2;
        border: 1px solid rgba(74, 163, 194, 0.3);
    }

    .movement-badge.transfer[b-y4e328ienk] {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(236, 88, 12, 0.2) 100%);
        color: #f97316;
        border: 1px solid rgba(249, 115, 22, 0.3);
    }

    .movement-badge.loss[b-y4e328ienk] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

/* Quantity Styles */
.quantity[b-y4e328ienk] {
    font-size: 16px;
    font-weight: 700;
}

    .quantity.positive[b-y4e328ienk] {
        color: #059669;
    }

    .quantity.negative[b-y4e328ienk] {
        color: #dc2626;
    }

.total-value[b-y4e328ienk] {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}

/* Stock Change */
.stock-change[b-y4e328ienk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

    .stock-change .stock-before[b-y4e328ienk] {
        color: #6b7280;
    }

    .stock-change i[b-y4e328ienk] {
        color: #9ca3af;
        font-size: 12px;
    }

    .stock-change .stock-after[b-y4e328ienk] {
        font-weight: 600;
    }

        .stock-change .stock-after.increased[b-y4e328ienk] {
            color: #059669;
        }

        .stock-change .stock-after.decreased[b-y4e328ienk] {
            color: #dc2626;
        }

/* User Info */
.user-info[b-y4e328ienk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name[b-y4e328ienk] {
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}

/* Action Buttons */
.btn-icon[b-y4e328ienk] {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    color: #6b7280;
}

    .btn-icon:hover[b-y4e328ienk] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

    .btn-icon.details[b-y4e328ienk] {
        font-size: 18px;
    }

/* Mobile Cards */
.movements-grid[b-y4e328ienk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.movement-card[b-y4e328ienk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .movement-card:hover[b-y4e328ienk] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .movement-card.addition[b-y4e328ienk] {
        border-left: 4px solid #059669;
    }

    .movement-card.sale[b-y4e328ienk] {
        border-left: 4px solid #667eea;
    }

.movement-header[b-y4e328ienk] {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.movement-type[b-y4e328ienk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #4c1d95;
}

    .movement-type i[b-y4e328ienk] {
        font-size: 18px;
        color: #667eea;
    }

.movement-date[b-y4e328ienk] {
    font-size: 13px;
    color: #6b7280;
}

.movement-body[b-y4e328ienk] {
    padding: 20px;
}

    .movement-body .product-info[b-y4e328ienk] {
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .movement-body .product-image[b-y4e328ienk] {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        object-fit: cover;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .movement-body h4[b-y4e328ienk] {
        margin: 0;
        font-size: 16px;
        color: #1f2937;
    }

    .movement-body p[b-y4e328ienk] {
        margin: 0;
        font-size: 13px;
        color: #9333ea;
    }

.movement-details[b-y4e328ienk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row[b-y4e328ienk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .detail-row .label[b-y4e328ienk] {
        font-size: 14px;
        color: #6b7280;
    }

    .detail-row .value[b-y4e328ienk] {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
    }

        .detail-row .value.quantity.positive[b-y4e328ienk] {
            color: #059669;
            font-size: 16px;
        }

        .detail-row .value.quantity.negative[b-y4e328ienk] {
            color: #dc2626;
            font-size: 16px;
        }

        .detail-row .value.total[b-y4e328ienk] {
            color: #667eea;
            font-size: 16px;
        }

    .detail-row .stock-change[b-y4e328ienk] {
        font-size: 14px;
        color: #4b5563;
    }

.movement-footer[b-y4e328ienk] {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.created-by[b-y4e328ienk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

    .created-by i[b-y4e328ienk] {
        color: #9333ea;
    }

.btn-details[b-y4e328ienk] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-details:hover[b-y4e328ienk] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Empty State */
.empty-state[b-y4e328ienk] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-y4e328ienk] {
        font-size: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-y4e328ienk] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-y4e328ienk] {
        font-size: 18px;
        color: #6b7280;
    }

/* Pagination */
.pagination-container[b-y4e328ienk] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pagination-btn[b-y4e328ienk] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .pagination-btn:hover:not(:disabled)[b-y4e328ienk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn.active[b-y4e328ienk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Modal Overlay */
.modal-overlay[b-y4e328ienk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-y4e328ienk 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

    to {
        opacity: 1;
    }
}

/* Modal Content */
.modal-content[b-y4e328ienk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    animation: zoomIn-b-y4e328ienk 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.details-modal[b-y4e328ienk] {
    width: 800px;
}

.modal-header[b-y4e328ienk] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-y4e328ienk] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .modal-header h3 i[b-y4e328ienk] {
            font-size: 28px;
        }

.close-btn[b-y4e328ienk] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .close-btn:hover[b-y4e328ienk] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-y4e328ienk] {
    padding: 30px;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

.detail-section[b-y4e328ienk] {
    margin-bottom: 30px;
}

    .detail-section:last-child[b-y4e328ienk] {
        margin-bottom: 0;
    }

    .detail-section h4[b-y4e328ienk] {
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .detail-section h4[b-y4e328ienk]::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.3) 0%, transparent 100%);
        }

.detail-grid[b-y4e328ienk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.detail-item[b-y4e328ienk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .detail-item label[b-y4e328ienk] {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-item span[b-y4e328ienk] {
        font-size: 15px;
        color: #1f2937;
        font-weight: 500;
    }

        .detail-item span.movement-badge[b-y4e328ienk] {
            align-self: flex-start;
        }

.stock-info[b-y4e328ienk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
}

    .stock-info > i[b-y4e328ienk] {
        font-size: 24px;
        color: #9333ea;
    }

.stock-item[b-y4e328ienk] {
    text-align: center;
}

    .stock-item label[b-y4e328ienk] {
        display: block;
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 8px;
    }

.stock-value[b-y4e328ienk] {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
}

    .stock-value.increased[b-y4e328ienk] {
        color: #059669;
    }

    .stock-value.decreased[b-y4e328ienk] {
        color: #dc2626;
    }

.notes-text[b-y4e328ienk] {
    background: rgba(102, 126, 234, 0.05);
    padding: 16px;
    border-radius: 12px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

.modal-footer[b-y4e328ienk] {
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
    display: flex;
    justify-content: flex-end;
}

/* Unauthorized Container */
.unauthorized-container[b-y4e328ienk] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

    .unauthorized-container i[b-y4e328ienk] {
        font-size: 80px;
        color: #dc2626;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-y4e328ienk] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-container p[b-y4e328ienk] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-primary[b-y4e328ienk] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-y4e328ienk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Responsive Design */
.desktop-only[b-y4e328ienk] {
    display: block;
}

.mobile-only[b-y4e328ienk] {
    display: none;
}

@media (max-width: 1200px) {
    .stats-grid[b-y4e328ienk] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .desktop-only[b-y4e328ienk] {
        display: none;
    }

    .mobile-only[b-y4e328ienk] {
        display: block;
    }

    .inventory-history-page[b-y4e328ienk] {
        padding: 16px;
    }

    .page-header[b-y4e328ienk] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

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

    .page-title[b-y4e328ienk] {
        font-size: 28px;
    }

    .page-subtitle[b-y4e328ienk] {
        font-size: 16px;
    }

    .stats-grid[b-y4e328ienk] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-y4e328ienk] {
        padding: 20px;
    }

    .stat-icon[b-y4e328ienk] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-y4e328ienk] {
        font-size: 24px;
    }

    .filters-section[b-y4e328ienk] {
        padding: 16px;
    }

    .filter-row[b-y4e328ienk] {
        flex-direction: column;
        gap: 12px;
    }

    .search-box[b-y4e328ienk],
    .filter-select[b-y4e328ienk],
    .date-filter[b-y4e328ienk] {
        width: 100%;
    }

    .date-filter[b-y4e328ienk] {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .btn-filter[b-y4e328ienk] {
        width: 100%;
    }

    .movements-grid[b-y4e328ienk] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-y4e328ienk] {
        margin: 16px;
        max-width: calc(100% - 32px);
    }

    .detail-grid[b-y4e328ienk] {
        grid-template-columns: 1fr;
    }

    .stock-info[b-y4e328ienk] {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-container[b-y4e328ienk] {
        padding: 16px;
        gap: 4px;
    }

    .pagination-btn[b-y4e328ienk] {
        padding: 8px 10px;
        font-size: 14px;
        min-width: 36px;
    }
}

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

    .stat-value[b-y4e328ienk] {
        font-size: 20px;
    }

    .movement-card[b-y4e328ienk] {
        margin: 0 -8px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .inventory-history-page[b-y4e328ienk] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .inventory-history-page[b-y4e328ienk]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-y4e328ienk],
[data-theme="dark"] .stat-card[b-y4e328ienk],
[data-theme="dark"] .filters-section[b-y4e328ienk],
[data-theme="dark"] .table-container[b-y4e328ienk],
[data-theme="dark"] .movement-card[b-y4e328ienk],
[data-theme="dark"] .pagination-container[b-y4e328ienk],
[data-theme="dark"] .empty-state[b-y4e328ienk],
[data-theme="dark"] .unauthorized-container[b-y4e328ienk] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-content[b-y4e328ienk] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .movements-table th[b-y4e328ienk] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(71, 85, 105, 0.2) 100%);
}

[data-theme="dark"] .movements-table td[b-y4e328ienk] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .movements-table tbody tr:hover[b-y4e328ienk] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .search-input[b-y4e328ienk],
[data-theme="dark"] .filter-select[b-y4e328ienk],
[data-theme="dark"] .date-input[b-y4e328ienk] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-y4e328ienk],
    [data-theme="dark"] .filter-select:focus[b-y4e328ienk],
    [data-theme="dark"] .date-input:focus[b-y4e328ienk] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .search-box i[b-y4e328ienk] {
    color: #a78bfa;
}

[data-theme="dark"] .date-filter label[b-y4e328ienk] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title[b-y4e328ienk],
[data-theme="dark"] .stat-value[b-y4e328ienk] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-link[b-y4e328ienk] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-y4e328ienk] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-y4e328ienk] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-y4e328ienk] {
    color: #9ca3af;
}

[data-theme="dark"] .stat-label[b-y4e328ienk] {
    color: #9ca3af;
}

[data-theme="dark"] .product-name[b-y4e328ienk],
[data-theme="dark"] .datetime-info .date[b-y4e328ienk] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-sku[b-y4e328ienk] {
    color: #a78bfa;
}

[data-theme="dark"] .user-name[b-y4e328ienk],
[data-theme="dark"] .datetime-info .time[b-y4e328ienk] {
    color: #9ca3af;
}

[data-theme="dark"] .empty-state i[b-y4e328ienk],
[data-theme="dark"] .empty-icon[b-y4e328ienk] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-state h3[b-y4e328ienk],
[data-theme="dark"] .unauthorized-container h3[b-y4e328ienk] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-y4e328ienk],
[data-theme="dark"] .unauthorized-container p[b-y4e328ienk] {
    color: #9ca3af;
}

[data-theme="dark"] .modal-header h3[b-y4e328ienk] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .detail-section h4[b-y4e328ienk] {
    color: #e2e8f0;
}

[data-theme="dark"] .detail-item label[b-y4e328ienk],
[data-theme="dark"] .stock-item label[b-y4e328ienk] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-item span[b-y4e328ienk],
[data-theme="dark"] .stock-value[b-y4e328ienk] {
    color: #e2e8f0;
}

[data-theme="dark"] .notes-text[b-y4e328ienk] {
    background: rgba(71, 85, 105, 0.3);
    color: #cbd5e1;
}

[data-theme="dark"] .close-btn[b-y4e328ienk] {
    color: #9ca3af;
}

    [data-theme="dark"] .close-btn:hover[b-y4e328ienk] {
        color: #e2e8f0;
        background: rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .btn-icon[b-y4e328ienk] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-icon:hover[b-y4e328ienk] {
        background: rgba(167, 139, 250, 0.1);
        color: #a78bfa;
    }

[data-theme="dark"] .loading-text[b-y4e328ienk] {
    color: #9ca3af;
}

[data-theme="dark"] .movement-type[b-y4e328ienk] {
    color: #e2e8f0;
}

    [data-theme="dark"] .movement-type i[b-y4e328ienk] {
        color: #a78bfa;
    }

[data-theme="dark"] .movement-date[b-y4e328ienk],
[data-theme="dark"] .created-by[b-y4e328ienk] {
    color: #9ca3af;
}

    [data-theme="dark"] .created-by i[b-y4e328ienk] {
        color: #a78bfa;
    }

[data-theme="dark"] .movement-body h4[b-y4e328ienk] {
    color: #e2e8f0;
}

[data-theme="dark"] .movement-body p[b-y4e328ienk] {
    color: #a78bfa;
}

[data-theme="dark"] .detail-row .label[b-y4e328ienk] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-row .value[b-y4e328ienk] {
    color: #e2e8f0;
}

    [data-theme="dark"] .detail-row .value.total[b-y4e328ienk] {
        color: #a78bfa;
    }

[data-theme="dark"] .detail-row .stock-change[b-y4e328ienk] {
    color: #cbd5e1;
}

[data-theme="dark"] .total-value[b-y4e328ienk] {
    color: #e2e8f0;
}

[data-theme="dark"] .stock-change .stock-before[b-y4e328ienk] {
    color: #9ca3af;
}

[data-theme="dark"] .stock-change i[b-y4e328ienk] {
    color: #6b7280;
}

[data-theme="dark"] .stock-info > i[b-y4e328ienk] {
    color: #a78bfa;
}

[data-theme="dark"] .pagination-btn[b-y4e328ienk] {
    background: rgba(167, 139, 250, 0.2);
    color: #e2e8f0;
}

/* Print Styles */
@media print {
    .inventory-history-page[b-y4e328ienk] {
        background: white !important;
    }

    .header-actions[b-y4e328ienk],
    .filters-section[b-y4e328ienk],
    .pagination-container[b-y4e328ienk],
    .btn-icon[b-y4e328ienk],
    .btn-details[b-y4e328ienk] {
        display: none !important;
    }

    .movements-table[b-y4e328ienk] {
        font-size: 12px;
    }

        .movements-table th[b-y4e328ienk] {
            background: #f3f4f6 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

    .movement-badge[b-y4e328ienk] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Accessibility */
.btn:focus[b-y4e328ienk],
.btn-filter:focus[b-y4e328ienk],
.btn-icon:focus[b-y4e328ienk],
.pagination-btn:focus[b-y4e328ienk] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn[b-y4e328ienk],
    .btn-filter[b-y4e328ienk],
    .btn-export[b-y4e328ienk],
    .btn-details[b-y4e328ienk] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-y4e328ienk] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/InventoryReports.razor.rz.scp.css */

/* ===================================
   Inventory Reports - Modern Professional Design
   نظام تقارير المخزون - تصميم احترافي حديث
   =================================== */

/* Page Container - Modern E-Commerce Style */
.inventory-reports-container[b-kv3aj1a98l] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .inventory-reports-container[b-kv3aj1a98l]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .inventory-reports-container > *[b-kv3aj1a98l] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Modern Design */
.page-header[b-kv3aj1a98l] {
    margin-bottom: 40px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

    .page-header[b-kv3aj1a98l]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        pointer-events: none;
    }

.header-content[b-kv3aj1a98l] {
    flex: 1;
}

    .header-content h1[b-kv3aj1a98l] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 16px;
    }

        .header-content h1 i[b-kv3aj1a98l] {
            font-size: 32px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.breadcrumb[b-kv3aj1a98l] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
}

    .breadcrumb a[b-kv3aj1a98l] {
        color: #667eea;
        text-decoration: none;
        transition: all 0.3s;
        position: relative;
    }

        .breadcrumb a:hover[b-kv3aj1a98l] {
            color: #4f46e5;
        }

        .breadcrumb a[b-kv3aj1a98l]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s;
        }

        .breadcrumb a:hover[b-kv3aj1a98l]::after {
            width: 100%;
        }

    .breadcrumb span[b-kv3aj1a98l] {
        color: #cbd5e1;
    }

.header-stats[b-kv3aj1a98l] {
    display: flex;
    gap: 20px;
}

.stat-card[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 20px 24px;
    border-radius: 16px;
    text-align: center;
    min-width: 140px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .stat-card:hover[b-kv3aj1a98l] {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(102, 126, 234, 0.25);
        border-color: #667eea;
    }

.stat-value[b-kv3aj1a98l] {
    display: block;
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.stat-label[b-kv3aj1a98l] {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Summary Cards Grid - Modern Layout */
.summary-cards[b-kv3aj1a98l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.summary-card[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-kv3aj1a98l]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    }

    .summary-card:hover[b-kv3aj1a98l] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

.card-icon[b-kv3aj1a98l] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    position: relative;
}

    .card-icon.inventory[b-kv3aj1a98l] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .card-icon.purchase[b-kv3aj1a98l] {
        background: linear-gradient(135deg, #06d6a0 0%, #118ab2 100%);
    }

    .card-icon.sales[b-kv3aj1a98l] {
        background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    }

    .card-icon.profit[b-kv3aj1a98l] {
        background: linear-gradient(135deg, #48bb78 0%, #38b2ac 100%);
    }

.card-content[b-kv3aj1a98l] {
    flex: 1;
}

    .card-content h3[b-kv3aj1a98l] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .card-content p[b-kv3aj1a98l] {
        font-size: 16px;
        color: #64748b;
        margin: 0 0 12px 0;
        font-weight: 600;
    }

.card-details[b-kv3aj1a98l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .card-details span[b-kv3aj1a98l] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #475569;
        font-weight: 500;
    }

        .card-details span i[b-kv3aj1a98l] {
            color: #667eea;
            width: 16px;
        }

.profit-margin[b-kv3aj1a98l] {
    margin-top: 8px;
}

.margin-badge[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #48bb78 0%, #38b2ac 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
}

/* Filters Section - Modern Style */
.filters-section[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.search-box[b-kv3aj1a98l] {
    position: relative;
    max-width: 400px;
}

    .search-box i[b-kv3aj1a98l] {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
        font-size: 18px;
        z-index: 2;
    }

    .search-box input[b-kv3aj1a98l] {
        width: 100%;
        padding: 16px 20px 16px 55px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 16px;
        font-size: 16px;
        transition: all 0.3s;
        backdrop-filter: blur(10px);
    }

        .search-box input:focus[b-kv3aj1a98l] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .search-box input[b-kv3aj1a98l]::placeholder {
            color: #94a3b8;
        }

.filter-controls[b-kv3aj1a98l] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select[b-kv3aj1a98l] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #475569;
    min-width: 160px;
    transition: all 0.3s;
    cursor: pointer;
}

    .filter-select:focus[b-kv3aj1a98l] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-refresh[b-kv3aj1a98l] {
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-refresh:hover[b-kv3aj1a98l] {
        transform: translateY(-2px) rotate(180deg);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Export Actions - Modern Buttons */
.export-actions[b-kv3aj1a98l] {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    justify-content: flex-end;
}

.btn-export[b-kv3aj1a98l],
.btn-print[b-kv3aj1a98l] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-export[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #06d6a0 0%, #118ab2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(6, 214, 160, 0.3);
}

    .btn-export:hover[b-kv3aj1a98l] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(6, 214, 160, 0.4);
    }

.btn-print[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

    .btn-print:hover[b-kv3aj1a98l] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
    }

/* Charts Section - Modern Grid */
.charts-section[b-kv3aj1a98l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.chart-card[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .chart-card:hover[b-kv3aj1a98l] {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }

    .chart-card h4[b-kv3aj1a98l] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
    }

    .chart-card canvas[b-kv3aj1a98l] {
        width: 100% !important;
        height: 300px !important;
    }

/* Inventory List - Modern Card Layout */
.inventory-list[b-kv3aj1a98l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.inventory-card[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

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

    .inventory-card:hover[b-kv3aj1a98l] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

        .inventory-card:hover[b-kv3aj1a98l]::before {
            opacity: 1;
        }

    .inventory-card.low-stock[b-kv3aj1a98l] {
        border-color: #ef4444;
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
    }

        .inventory-card.low-stock[b-kv3aj1a98l]::before {
            background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
            opacity: 1;
        }

    .inventory-card.low-margin[b-kv3aj1a98l] {
        border-color: #f59e0b;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
    }

        .inventory-card.low-margin[b-kv3aj1a98l]::before {
            background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
            opacity: 1;
        }

.inventory-header[b-kv3aj1a98l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.product-info[b-kv3aj1a98l] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.product-thumb[b-kv3aj1a98l] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-info h4[b-kv3aj1a98l] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.product-sku[b-kv3aj1a98l] {
    font-size: 13px;
    color: #667eea;
    font-weight: 600;
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 8px;
    border-radius: 8px;
}

.category-badge[b-kv3aj1a98l] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .category-badge i[b-kv3aj1a98l] {
        font-size: 12px;
    }

.inventory-content[b-kv3aj1a98l] {
    padding: 16px 24px;
}

.quantity-section[b-kv3aj1a98l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.quantity-item[b-kv3aj1a98l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    transition: all 0.3s;
}

    .quantity-item.total[b-kv3aj1a98l] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        border: 1px solid rgba(102, 126, 234, 0.2);
    }

    .quantity-item i[b-kv3aj1a98l] {
        color: #667eea;
        font-size: 16px;
        width: 20px;
        text-align: center;
    }

    .quantity-item div strong[b-kv3aj1a98l] {
        display: block;
        font-size: 18px;
        font-weight: 800;
        color: #1e293b;
        line-height: 1;
    }

    .quantity-item div span[b-kv3aj1a98l] {
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.financial-section[b-kv3aj1a98l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.financial-item[b-kv3aj1a98l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

    .financial-item span[b-kv3aj1a98l] {
        color: #64748b;
        font-weight: 500;
    }

    .financial-item strong[b-kv3aj1a98l] {
        color: #1e293b;
        font-weight: 700;
    }

.inventory-footer[b-kv3aj1a98l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.profit-info[b-kv3aj1a98l] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

    .profit-info span[b-kv3aj1a98l] {
        color: #64748b;
        font-weight: 500;
    }

.profit-positive[b-kv3aj1a98l] {
    color: #10b981 !important;
}

.profit-negative[b-kv3aj1a98l] {
    color: #ef4444 !important;
}

.profit-margin-badge[b-kv3aj1a98l] {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.margin-excellent[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.margin-good[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #06d6a0 0%, #118ab2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(6, 214, 160, 0.3);
}

.margin-fair[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.margin-low[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-view-details[b-kv3aj1a98l] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .btn-view-details:hover[b-kv3aj1a98l] {
        transform: translateY(-2px) scale(1.1);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

/* Pagination - Modern Style */
.pagination-container[b-kv3aj1a98l] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.btn-page[b-kv3aj1a98l] {
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

    .btn-page.active[b-kv3aj1a98l] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Agent Inventory Section - Modern Cards */
.agent-inventory-section[b-kv3aj1a98l] {
    margin-bottom: 32px;
}

    .agent-inventory-section h3[b-kv3aj1a98l] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .agent-inventory-section h3 i[b-kv3aj1a98l] {
            font-size: 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.agent-cards[b-kv3aj1a98l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.agent-card[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 24px;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .agent-card[b-kv3aj1a98l]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #06d6a0 0%, #118ab2 100%);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .agent-card:hover[b-kv3aj1a98l] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #06d6a0;
    }

        .agent-card:hover[b-kv3aj1a98l]::before {
            opacity: 1;
        }

.agent-header[b-kv3aj1a98l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .agent-header h4[b-kv3aj1a98l] {
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
    }

.agent-id[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.1) 0%, rgba(17, 138, 178, 0.1) 100%);
    color: #06d6a0;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(6, 214, 160, 0.2);
}

.agent-stats[b-kv3aj1a98l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

    .agent-stats .stat[b-kv3aj1a98l] {
        text-align: center;
        padding: 16px 12px;
        background: rgba(102, 126, 234, 0.05);
        border-radius: 12px;
        transition: all 0.3s;
    }

        .agent-stats .stat:hover[b-kv3aj1a98l] {
            background: rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        .agent-stats .stat i[b-kv3aj1a98l] {
            color: #667eea;
            font-size: 20px;
            margin-bottom: 8px;
            display: block;
        }

        .agent-stats .stat strong[b-kv3aj1a98l] {
            display: block;
            font-size: 18px;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 4px;
        }

        .agent-stats .stat span[b-kv3aj1a98l] {
            font-size: 12px;
            color: #64748b;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

/* Low Stock Alerts - Warning Cards */
.low-stock-section[b-kv3aj1a98l] {
    margin-bottom: 32px;
}

    .low-stock-section h3[b-kv3aj1a98l] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #f59e0b;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .low-stock-section h3 i[b-kv3aj1a98l] {
            font-size: 24px;
            color: #f59e0b;
        }

.alert-cards[b-kv3aj1a98l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.alert-card[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
}

    .alert-card:hover[b-kv3aj1a98l] {
        transform: translateY(-4px);
        box-shadow: 0 12px 35px rgba(245, 158, 11, 0.25);
        border-color: #f59e0b;
    }

.alert-icon[b-kv3aj1a98l] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

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

    .alert-content h5[b-kv3aj1a98l] {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 8px 0;
    }

    .alert-content p[b-kv3aj1a98l] {
        font-size: 14px;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
    }

        .alert-content p strong[b-kv3aj1a98l] {
            color: #f59e0b;
            font-weight: 700;
        }

.btn-action[b-kv3aj1a98l] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

    .btn-action:hover[b-kv3aj1a98l] {
        transform: translateY(-2px) scale(1.1);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }

/* Empty State - Modern Design */
.empty-state[b-kv3aj1a98l] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    border: 2px dashed rgba(102, 126, 234, 0.3);
    margin: 32px 0;
}

    .empty-state i[b-kv3aj1a98l] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-state h3[b-kv3aj1a98l] {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 12px;
    }

    .empty-state p[b-kv3aj1a98l] {
        font-size: 16px;
        color: #64748b;
        margin: 0;
    }

/* Loading Container - Modern Spinner */
.loading-container[b-kv3aj1a98l] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    margin: 32px 0;
}

.spinner-border[b-kv3aj1a98l] {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-kv3aj1a98l 1s linear infinite;
}

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

/* Modal Styles - Modern Design */
.modal.show[b-kv3aj1a98l] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
}

.modal-backdrop[b-kv3aj1a98l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1040;
}

.modal-dialog[b-kv3aj1a98l] {
    position: relative;
    max-width: 600px;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
    z-index: 1050;
    animation: modalSlideIn-b-kv3aj1a98l 0.3s ease-out;
}

    .modal-dialog.modal-lg[b-kv3aj1a98l] {
        max-width: 800px;
    }

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

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

.modal-content[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-kv3aj1a98l] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-kv3aj1a98l] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.modal-close[b-kv3aj1a98l] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

    .modal-close:hover[b-kv3aj1a98l] {
        background: rgba(102, 126, 234, 0.2);
        transform: rotate(90deg);
    }

.modal-body[b-kv3aj1a98l] {
    padding: 30px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer[b-kv3aj1a98l] {
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Product Details Modal Content */
.product-details[b-kv3aj1a98l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-row[b-kv3aj1a98l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

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

    .detail-row span[b-kv3aj1a98l] {
        color: #64748b;
        font-weight: 500;
    }

    .detail-row strong[b-kv3aj1a98l] {
        color: #1e293b;
        font-weight: 700;
    }

.agent-distribution[b-kv3aj1a98l] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .agent-distribution h6[b-kv3aj1a98l] {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 12px;
    }

.distribution-item[b-kv3aj1a98l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}

    .distribution-item span[b-kv3aj1a98l] {
        color: #64748b;
    }

    .distribution-item strong[b-kv3aj1a98l] {
        color: #667eea;
        font-weight: 700;
    }

/* Agent Details Modal Content */
.agent-summary[b-kv3aj1a98l] {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.summary-item[b-kv3aj1a98l] {
    flex: 1;
    text-align: center;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
}

    .summary-item i[b-kv3aj1a98l] {
        color: #667eea;
        font-size: 24px;
        margin-bottom: 8px;
        display: block;
    }

    .summary-item strong[b-kv3aj1a98l] {
        display: block;
        font-size: 20px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .summary-item span[b-kv3aj1a98l] {
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.agent-products[b-kv3aj1a98l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.agent-product-item[b-kv3aj1a98l] {
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.product-name[b-kv3aj1a98l] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.product-details[b-kv3aj1a98l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

    .product-details span[b-kv3aj1a98l] {
        font-size: 13px;
        color: #64748b;
        background: white;
        padding: 6px 10px;
        border-radius: 8px;
        border: 1px solid rgba(102, 126, 234, 0.1);
    }

/* Button Styles - Modern Design */
.btn[b-kv3aj1a98l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-primary[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-primary:hover[b-kv3aj1a98l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

.btn-secondary[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #475569;
    box-shadow: 0 4px 15px rgba(148, 163, 184, 0.3);
}

    .btn-secondary:hover[b-kv3aj1a98l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(148, 163, 184, 0.4);
    }

/* Unauthorized Content - Modern Style */
.unauthorized-content[b-kv3aj1a98l] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    margin: 32px auto;
    max-width: 500px;
    border: 2px dashed rgba(239, 68, 68, 0.3);
}

    .unauthorized-content i[b-kv3aj1a98l] {
        color: #ef4444;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-kv3aj1a98l] {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-kv3aj1a98l] {
        font-size: 16px;
        color: #64748b;
        margin-bottom: 24px;
    }

/* Dark Theme Support */
[data-theme="dark"] .inventory-reports-container[b-kv3aj1a98l] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .inventory-reports-container[b-kv3aj1a98l]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-kv3aj1a98l],
[data-theme="dark"] .summary-card[b-kv3aj1a98l],
[data-theme="dark"] .filters-section[b-kv3aj1a98l],
[data-theme="dark"] .chart-card[b-kv3aj1a98l],
[data-theme="dark"] .inventory-card[b-kv3aj1a98l],
[data-theme="dark"] .pagination-container[b-kv3aj1a98l],
[data-theme="dark"] .agent-card[b-kv3aj1a98l],
[data-theme="dark"] .empty-state[b-kv3aj1a98l],
[data-theme="dark"] .loading-container[b-kv3aj1a98l],
[data-theme="dark"] .modal-content[b-kv3aj1a98l] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .header-content h1[b-kv3aj1a98l],
    [data-theme="dark"] .stat-value[b-kv3aj1a98l],
    [data-theme="dark"] .card-content h3[b-kv3aj1a98l],
    [data-theme="dark"] .chart-card h4[b-kv3aj1a98l],
    [data-theme="dark"] .agent-inventory-section h3[b-kv3aj1a98l],
    [data-theme="dark"] .modal-title[b-kv3aj1a98l] {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    [data-theme="dark"] .product-info h4[b-kv3aj1a98l],
    [data-theme="dark"] .agent-header h4[b-kv3aj1a98l],
    [data-theme="dark"] .alert-content h5[b-kv3aj1a98l],
    [data-theme="dark"] .empty-state h3[b-kv3aj1a98l],
    [data-theme="dark"] .unauthorized-content h3[b-kv3aj1a98l],
    [data-theme="dark"] .product-name[b-kv3aj1a98l],
    [data-theme="dark"] .detail-row strong[b-kv3aj1a98l],
    [data-theme="dark"] .summary-item strong[b-kv3aj1a98l],
    [data-theme="dark"] .agent-stats .stat strong[b-kv3aj1a98l],
    [data-theme="dark"] .quantity-item div strong[b-kv3aj1a98l] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .stat-label[b-kv3aj1a98l],
    [data-theme="dark"] .card-content p[b-kv3aj1a98l],
    [data-theme="dark"] .breadcrumb a[b-kv3aj1a98l],
    [data-theme="dark"] .product-sku[b-kv3aj1a98l],
    [data-theme="dark"] .category-badge[b-kv3aj1a98l],
    [data-theme="dark"] .financial-item span[b-kv3aj1a98l],
    [data-theme="dark"] .profit-info span[b-kv3aj1a98l],
    [data-theme="dark"] .agent-id[b-kv3aj1a98l],
    [data-theme="dark"] .detail-row span[b-kv3aj1a98l],
    [data-theme="dark"] .summary-item span[b-kv3aj1a98l],
    [data-theme="dark"] .agent-stats .stat span[b-kv3aj1a98l],
    [data-theme="dark"] .quantity-item div span[b-kv3aj1a98l],
    [data-theme="dark"] .alert-content p[b-kv3aj1a98l],
    [data-theme="dark"] .empty-state p[b-kv3aj1a98l],
    [data-theme="dark"] .unauthorized-content p[b-kv3aj1a98l],
    [data-theme="dark"] .product-details span[b-kv3aj1a98l] {
        color: #94a3b8;
    }

[data-theme="dark"] .search-box input[b-kv3aj1a98l],
[data-theme="dark"] .filter-select[b-kv3aj1a98l] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border: 2px solid rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .search-box input:focus[b-kv3aj1a98l],
    [data-theme="dark"] .filter-select:focus[b-kv3aj1a98l] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
        box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .search-box i[b-kv3aj1a98l],
[data-theme="dark"] .category-badge i[b-kv3aj1a98l],
[data-theme="dark"] .quantity-item i[b-kv3aj1a98l],
[data-theme="dark"] .summary-item i[b-kv3aj1a98l],
[data-theme="dark"] .agent-stats .stat i[b-kv3aj1a98l] {
    color: #a78bfa;
}

[data-theme="dark"] .btn-page[b-kv3aj1a98l] {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-page:hover:not(:disabled)[b-kv3aj1a98l],
    [data-theme="dark"] .btn-page.active[b-kv3aj1a98l] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .summary-cards[b-kv3aj1a98l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-section[b-kv3aj1a98l] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .inventory-reports-container[b-kv3aj1a98l] {
        padding: 16px;
    }

    .page-header[b-kv3aj1a98l] {
        flex-direction: column;
        gap: 20px;
        padding: 24px;
    }

    .header-stats[b-kv3aj1a98l] {
        width: 100%;
        justify-content: space-around;
    }

    .header-content h1[b-kv3aj1a98l] {
        font-size: 28px;
    }

    .summary-cards[b-kv3aj1a98l] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-card[b-kv3aj1a98l] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px;
    }

    .filters-section[b-kv3aj1a98l] {
        padding: 20px;
    }

    .filter-controls[b-kv3aj1a98l] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select[b-kv3aj1a98l] {
        width: 100%;
    }

    .export-actions[b-kv3aj1a98l] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .charts-section[b-kv3aj1a98l] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .chart-card[b-kv3aj1a98l] {
        padding: 24px;
    }

    .inventory-list[b-kv3aj1a98l] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .inventory-card[b-kv3aj1a98l] {
        margin: 0;
    }

    .quantity-section[b-kv3aj1a98l] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .inventory-footer[b-kv3aj1a98l] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .agent-cards[b-kv3aj1a98l] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .agent-stats[b-kv3aj1a98l] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .alert-cards[b-kv3aj1a98l] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .modal-dialog[b-kv3aj1a98l] {
        width: calc(100% - 1rem);
        margin: 0.5rem;
    }

    .modal-header[b-kv3aj1a98l],
    .modal-body[b-kv3aj1a98l],
    .modal-footer[b-kv3aj1a98l] {
        padding: 20px;
    }

    .agent-summary[b-kv3aj1a98l] {
        flex-direction: column;
        gap: 12px;
    }

    .product-details[b-kv3aj1a98l] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header-content h1[b-kv3aj1a98l] {
        font-size: 24px;
        flex-direction: column;
        gap: 8px;
    }

    .stat-card[b-kv3aj1a98l] {
        min-width: 120px;
        padding: 16px;
    }

    .stat-value[b-kv3aj1a98l] {
        font-size: 20px;
    }

    .card-icon[b-kv3aj1a98l] {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .card-content h3[b-kv3aj1a98l] {
        font-size: 24px;
    }

    .inventory-header[b-kv3aj1a98l] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .category-badge[b-kv3aj1a98l] {
        align-self: flex-end;
    }

    .pagination-container[b-kv3aj1a98l] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .btn-page[b-kv3aj1a98l] {
        min-width: 36px;
        height: 36px;
        padding: 8px;
    }
}

/* Print Styles */
@media print {
    .inventory-reports-container[b-kv3aj1a98l] {
        background: white !important;
    }

    .export-actions[b-kv3aj1a98l],
    .filters-section[b-kv3aj1a98l],
    .btn-view-details[b-kv3aj1a98l],
    .btn-action[b-kv3aj1a98l],
    .modal[b-kv3aj1a98l] {
        display: none !important;
    }

    .page-header[b-kv3aj1a98l],
    .summary-card[b-kv3aj1a98l],
    .chart-card[b-kv3aj1a98l],
    .inventory-card[b-kv3aj1a98l],
    .agent-card[b-kv3aj1a98l],
    .alert-card[b-kv3aj1a98l] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }

    .inventory-list[b-kv3aj1a98l] {
        grid-template-columns: 1fr !important;
    }
}

/* Accessibility Improvements */
.inventory-card:focus[b-kv3aj1a98l],
.agent-card:focus[b-kv3aj1a98l],
.btn-view-details:focus[b-kv3aj1a98l],
.btn-action:focus[b-kv3aj1a98l],
.btn-page:focus[b-kv3aj1a98l],
.btn-refresh:focus[b-kv3aj1a98l] {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .inventory-card[b-kv3aj1a98l],
    .agent-card[b-kv3aj1a98l],
    .alert-card[b-kv3aj1a98l] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .inventory-card[b-kv3aj1a98l],
    .agent-card[b-kv3aj1a98l],
    .summary-card[b-kv3aj1a98l],
    .chart-card[b-kv3aj1a98l],
    .btn-view-details[b-kv3aj1a98l],
    .btn-action[b-kv3aj1a98l],
    .btn-page[b-kv3aj1a98l],
    .btn-refresh[b-kv3aj1a98l] {
        transition: none;
    }

    .modal-dialog[b-kv3aj1a98l] {
        animation: none;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/InventoryTransfers.razor.rz.scp.css */

/* ===================================
   Inventory Transfers - Professional Design
   Modern E-Commerce Inventory Management
   =================================== */

/* Page Container */
.inventory-transfers-container[b-trfqi79qxr] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .inventory-transfers-container[b-trfqi79qxr]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .inventory-transfers-container > *[b-trfqi79qxr] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content h1[b-trfqi79qxr] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 16px;
}

    .header-content h1 i[b-trfqi79qxr] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 32px;
    }

.breadcrumb[b-trfqi79qxr] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 0;
}

    .breadcrumb a[b-trfqi79qxr] {
        color: #6b7280;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
    }

        .breadcrumb a:hover[b-trfqi79qxr] {
            color: #667eea;
        }

    .breadcrumb span[b-trfqi79qxr] {
        color: #d1d5db;
    }

/* Header Statistics */
.header-stats[b-trfqi79qxr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.stat-card[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-trfqi79qxr]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-trfqi79qxr] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-trfqi79qxr]::before {
            opacity: 1;
        }

.stat-value[b-trfqi79qxr] {
    display: block;
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.stat-label[b-trfqi79qxr] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Actions Section */
.actions-section[b-trfqi79qxr] {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Modern Gradient Buttons */
.btn-primary[b-trfqi79qxr] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-primary:hover[b-trfqi79qxr] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-trfqi79qxr] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-secondary:hover[b-trfqi79qxr] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-danger[b-trfqi79qxr] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-danger:hover[b-trfqi79qxr] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Tabs Container */
.tabs-container[b-trfqi79qxr] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 8px;
    gap: 8px;
    margin-bottom: 32px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
}

.tab-button[b-trfqi79qxr] {
    flex: 1;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

    .tab-button:hover[b-trfqi79qxr] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .tab-button.active[b-trfqi79qxr] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

/* Tab Content */
.tab-content[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Transfer Content */
.transfer-content h2[b-trfqi79qxr] {
    font-size: 24px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Products Grid */
.products-grid[b-trfqi79qxr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.product-card[b-trfqi79qxr] {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

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

    .product-card:hover[b-trfqi79qxr] {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        border-color: rgba(102, 126, 234, 0.3);
    }

        .product-card:hover[b-trfqi79qxr]::before {
            opacity: 1;
        }

    .product-card.selected[b-trfqi79qxr] {
        border-color: #667eea;
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

        .product-card.selected[b-trfqi79qxr]::before {
            opacity: 1;
        }

.product-header[b-trfqi79qxr] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

    .product-header img[b-trfqi79qxr] {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        object-fit: cover;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.product-info h4[b-trfqi79qxr] {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.sku[b-trfqi79qxr] {
    font-size: 12px;
    color: #9333ea;
    font-weight: 500;
    background: rgba(147, 51, 234, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

.product-stock[b-trfqi79qxr] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}

.stock-row[b-trfqi79qxr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

    .stock-row:last-child[b-trfqi79qxr] {
        margin-bottom: 0;
    }

    .stock-row span[b-trfqi79qxr] {
        font-size: 14px;
        color: #4b5563;
    }

    .stock-row strong[b-trfqi79qxr] {
        font-weight: 600;
        color: #1f2937;
    }

/* Quantity Selector */
.quantity-selector[b-trfqi79qxr] {
    display: flex;
    align-items: center;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px;
}

.qty-btn[b-trfqi79qxr] {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s;
}

    .qty-btn:hover[b-trfqi79qxr] {
        background: rgba(102, 126, 234, 0.2);
        color: #4f46e5;
    }

.qty-input[b-trfqi79qxr] {
    flex: 1;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 600;
    color: #1f2937;
    font-size: 16px;
    height: 40px;
}

    .qty-input:focus[b-trfqi79qxr] {
        outline: none;
    }

/* Transfer Summary */
.transfer-summary[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 24px;
    margin-top: 32px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .transfer-summary h3[b-trfqi79qxr] {
        font-size: 20px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 16px;
    }

.summary-grid[b-trfqi79qxr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.summary-item[b-trfqi79qxr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
}

    .summary-item span[b-trfqi79qxr] {
        color: #4b5563;
        font-weight: 500;
    }

    .summary-item strong[b-trfqi79qxr] {
        color: #1f2937;
        font-weight: 700;
    }

/* Form Elements */
.form-group[b-trfqi79qxr] {
    margin-bottom: 20px;
}

    .form-group label[b-trfqi79qxr] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

.form-control[b-trfqi79qxr] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1f2937;
}

    .form-control:focus[b-trfqi79qxr] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control[b-trfqi79qxr]::placeholder {
        color: #9ca3af;
    }

select.form-control[b-trfqi79qxr] {
    cursor: pointer;
}

textarea.form-control[b-trfqi79qxr] {
    resize: vertical;
    min-height: 80px;
}

/* Empty State */
.empty-state[b-trfqi79qxr] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 2px dashed rgba(102, 126, 234, 0.2);
}

    .empty-state i[b-trfqi79qxr] {
        font-size: 64px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 16px;
        display: block;
    }

    .empty-state h3[b-trfqi79qxr] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 8px;
        font-weight: 700;
    }

    .empty-state p[b-trfqi79qxr] {
        color: #6b7280;
        font-size: 16px;
    }

/* Form Container */
.form-container[b-trfqi79qxr] {
    max-width: 600px;
    margin: 0 auto;
}

/* Agent Products */
.agent-products[b-trfqi79qxr],
.return-products[b-trfqi79qxr] {
    margin-top: 24px;
}

    .agent-products h3[b-trfqi79qxr],
    .return-products h3[b-trfqi79qxr] {
        font-size: 20px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 16px;
    }

.products-list[b-trfqi79qxr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-item[b-trfqi79qxr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .product-item:hover[b-trfqi79qxr] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateX(4px);
    }

.product-details[b-trfqi79qxr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-name[b-trfqi79qxr] {
    font-weight: 600;
    color: #1f2937;
}

.product-quantity[b-trfqi79qxr] {
    font-size: 14px;
    color: #6b7280;
}

.btn-select[b-trfqi79qxr] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-select:hover[b-trfqi79qxr] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Transfer Details */
.transfer-details[b-trfqi79qxr] {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .transfer-details h3[b-trfqi79qxr] {
        font-size: 20px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 20px;
    }

/* Return Product Card */
.return-product-card[b-trfqi79qxr] {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s;
}

    .return-product-card:hover[b-trfqi79qxr] {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

    .return-product-card .product-info h4[b-trfqi79qxr] {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 8px;
    }

    .return-product-card .product-info .sku[b-trfqi79qxr] {
        display: inline-block;
        margin-bottom: 4px;
    }

.with-agent[b-trfqi79qxr] {
    font-size: 14px;
    color: #059669;
    font-weight: 500;
}

.return-quantity[b-trfqi79qxr] {
    margin-top: 16px;
}

    .return-quantity label[b-trfqi79qxr] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
        display: block;
    }

/* Return Summary */
.return-summary[b-trfqi79qxr] {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .return-summary h3[b-trfqi79qxr] {
        font-size: 20px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 16px;
    }

/* History Content */
.history-content[b-trfqi79qxr] {
    padding: 0;
}

.filters-section[b-trfqi79qxr] {
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.date-filter[b-trfqi79qxr] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .date-filter input[type="date"][b-trfqi79qxr] {
        padding: 10px 12px;
        border: 2px solid transparent;
        border-radius: 8px;
        background: rgba(102, 126, 234, 0.1);
        color: #1f2937;
        font-weight: 500;
    }

        .date-filter input[type="date"]:focus[b-trfqi79qxr] {
            outline: none;
            border-color: #667eea;
            background: white;
        }

    .date-filter span[b-trfqi79qxr] {
        color: #6b7280;
        font-weight: 500;
    }

/* Table Responsive */
.table-responsive[b-trfqi79qxr] {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.table[b-trfqi79qxr] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

    .table th[b-trfqi79qxr] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        color: #4c1d95;
        font-weight: 700;
        padding: 16px;
        text-align: right;
        border: none;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table td[b-trfqi79qxr] {
        padding: 16px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        color: #1f2937;
        font-weight: 500;
    }

    .table tbody tr[b-trfqi79qxr] {
        transition: all 0.3s;
    }

        .table tbody tr:hover[b-trfqi79qxr] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        }

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

/* Badge Styles */
.badge[b-trfqi79qxr] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-info[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #1e40af;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-warning[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-secondary[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(156, 163, 175, 0.2) 100%);
    color: #374151;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Pagination */
.pagination-container[b-trfqi79qxr] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 20px;
}

.btn-page[b-trfqi79qxr] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .btn-page:hover:not(:disabled)[b-trfqi79qxr] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-page.active[b-trfqi79qxr] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Modal Styles */
.modal.show[b-trfqi79qxr] {
    display: flex;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

.modal-backdrop[b-trfqi79qxr] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal-dialog[b-trfqi79qxr] {
    position: relative;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    animation: zoomIn-b-trfqi79qxr 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .modal-dialog.modal-lg[b-trfqi79qxr] {
        max-width: 800px;
    }

    .modal-dialog.modal-xl[b-trfqi79qxr] {
        max-width: 1200px;
    }

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

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

.modal-content[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-trfqi79qxr] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-trfqi79qxr] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-close[b-trfqi79qxr] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover[b-trfqi79qxr] {
        color: #4c1d95;
        background: rgba(102, 126, 234, 0.1);
        transform: rotate(90deg);
    }

.modal-body[b-trfqi79qxr] {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer[b-trfqi79qxr] {
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Quick Actions Grid */
.quick-actions-grid[b-trfqi79qxr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.quick-action-card[b-trfqi79qxr] {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

    .quick-action-card:hover[b-trfqi79qxr] {
        transform: translateY(-4px);
        border-color: #667eea;
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .quick-action-card i[b-trfqi79qxr] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 16px;
        display: block;
    }

    .quick-action-card h4[b-trfqi79qxr] {
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 8px;
    }

    .quick-action-card p[b-trfqi79qxr] {
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
    }

/* File Upload */
.file-upload-section[b-trfqi79qxr],
.manual-entry-section[b-trfqi79qxr] {
    margin-bottom: 32px;
}

    .file-upload-section h4[b-trfqi79qxr],
    .manual-entry-section h4[b-trfqi79qxr] {
        font-size: 20px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 12px;
    }

    .file-upload-section p[b-trfqi79qxr],
    .manual-entry-section p[b-trfqi79qxr] {
        color: #6b7280;
        margin-bottom: 16px;
    }

.file-upload-area[b-trfqi79qxr] {
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    background: rgba(102, 126, 234, 0.05);
    transition: all 0.3s;
    cursor: pointer;
}

    .file-upload-area:hover[b-trfqi79qxr] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

.upload-instructions[b-trfqi79qxr] {
    pointer-events: none;
}

    .upload-instructions i[b-trfqi79qxr] {
        font-size: 48px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 16px;
        display: block;
    }

    .upload-instructions p[b-trfqi79qxr] {
        font-size: 16px;
        color: #4c1d95;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .upload-instructions small[b-trfqi79qxr] {
        color: #6b7280;
        font-size: 14px;
    }

.template-download[b-trfqi79qxr] {
    text-align: center;
    margin-top: 16px;
}

.btn-link[b-trfqi79qxr] {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

    .btn-link:hover[b-trfqi79qxr] {
        color: #4f46e5;
        text-decoration: underline;
    }

/* Bulk Summary */
.bulk-summary[b-trfqi79qxr] {
    background: rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Loading State */
.loading-container[b-trfqi79qxr] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-trfqi79qxr] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-trfqi79qxr 0.8s linear infinite;
}

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

.spinner-border-sm[b-trfqi79qxr] {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* Utility Classes */
.w-100[b-trfqi79qxr] {
    width: 100% !important;
}

.visually-hidden[b-trfqi79qxr] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Unauthorized Content */
.unauthorized-content[b-trfqi79qxr] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    border-radius: 20px;
    border: 2px solid rgba(239, 68, 68, 0.2);
}

    .unauthorized-content i[b-trfqi79qxr] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 16px;
        display: block;
    }

    .unauthorized-content h3[b-trfqi79qxr] {
        font-size: 24px;
        color: #dc2626;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-trfqi79qxr] {
        color: #6b7280;
        font-size: 16px;
        margin-bottom: 24px;
    }

/* Dark Theme Support */
[data-theme="dark"] .inventory-transfers-container[b-trfqi79qxr] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .inventory-transfers-container[b-trfqi79qxr]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-trfqi79qxr],
[data-theme="dark"] .tab-content[b-trfqi79qxr],
[data-theme="dark"] .actions-section[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-card[b-trfqi79qxr],
[data-theme="dark"] .product-card[b-trfqi79qxr],
[data-theme="dark"] .quick-action-card[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-control[b-trfqi79qxr] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .form-control:focus[b-trfqi79qxr] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .modal-content[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .table th[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .table td[b-trfqi79qxr] {
    color: #e2e8f0;
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .table tbody tr:hover[b-trfqi79qxr] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

/* RTL Support */
html[dir="rtl"] .actions-section[b-trfqi79qxr] {
    direction: rtl;
}

html[dir="rtl"] .product-header[b-trfqi79qxr] {
    direction: rtl;
}

html[dir="rtl"] .table th[b-trfqi79qxr],
html[dir="rtl"] .table td[b-trfqi79qxr] {
    text-align: left;
}

html[dir="rtl"] .breadcrumb[b-trfqi79qxr] {
    direction: rtl;
}

/* Responsive Design */
@media (max-width: 768px) {
    .inventory-transfers-container[b-trfqi79qxr] {
        padding: 16px;
    }

    .page-header[b-trfqi79qxr] {
        padding: 20px;
        margin-bottom: 20px;
    }

    .header-content h1[b-trfqi79qxr] {
        font-size: 28px;
    }

    .header-stats[b-trfqi79qxr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card[b-trfqi79qxr] {
        padding: 16px;
    }

    .stat-value[b-trfqi79qxr] {
        font-size: 20px;
    }

    .actions-section[b-trfqi79qxr] {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .tabs-container[b-trfqi79qxr] {
        flex-direction: column;
        gap: 4px;
    }

    .tab-content[b-trfqi79qxr] {
        padding: 20px;
    }

    .products-grid[b-trfqi79qxr] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .quick-actions-grid[b-trfqi79qxr] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-grid[b-trfqi79qxr] {
        grid-template-columns: 1fr;
    }

    .date-filter[b-trfqi79qxr] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .modal-dialog[b-trfqi79qxr] {
        width: 95%;
        margin: 16px;
    }

    .modal-header[b-trfqi79qxr],
    .modal-body[b-trfqi79qxr],
    .modal-footer[b-trfqi79qxr] {
        padding: 20px;
    }

    .modal-title[b-trfqi79qxr] {
        font-size: 20px;
    }

    .table-responsive[b-trfqi79qxr] {
        overflow-x: auto;
    }

    .table th[b-trfqi79qxr],
    .table td[b-trfqi79qxr] {
        padding: 12px 8px;
        font-size: 14px;
    }

    .pagination-container[b-trfqi79qxr] {
        padding: 16px;
    }
}

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

    .tab-button[b-trfqi79qxr] {
        font-size: 14px;
        padding: 12px 16px;
    }

        .tab-button span[b-trfqi79qxr] {
            display: none;
        }

    .product-header[b-trfqi79qxr] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

        .product-header img[b-trfqi79qxr] {
            width: 80px;
            height: 80px;
            margin: 0 auto;
        }
}

/* Print Styles */
@media print {
    .inventory-transfers-container[b-trfqi79qxr] {
        background: white !important;
    }

    .actions-section[b-trfqi79qxr],
    .tabs-container[b-trfqi79qxr],
    .modal[b-trfqi79qxr],
    .pagination-container[b-trfqi79qxr] {
        display: none !important;
    }

    .page-header[b-trfqi79qxr] {
        background: white !important;
        box-shadow: none !important;
    }

    .table th[b-trfqi79qxr] {
        background: #f3f4f6 !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .badge[b-trfqi79qxr] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Accessibility */
*:focus-visible[b-trfqi79qxr] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus-visible[b-trfqi79qxr],
.btn:focus-visible[b-trfqi79qxr] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-primary[b-trfqi79qxr],
    .btn-secondary[b-trfqi79qxr],
    .btn-danger[b-trfqi79qxr] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-trfqi79qxr] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.search-section[b-trfqi79qxr] {
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.15);
    backdrop-filter: blur(10px);
}

.search-box[b-trfqi79qxr] {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

    .search-box i.fas.fa-search[b-trfqi79qxr] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
        font-size: 16px;
        z-index: 2;
        pointer-events: none;
    }

    .search-box input.form-control[b-trfqi79qxr] {
        padding: 14px 16px 14px 48px;
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 16px;
        color: #1f2937;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
        width: 100%;
    }

        .search-box input.form-control:focus[b-trfqi79qxr] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 4px 20px rgba(102, 126, 234, 0.2);
            transform: translateY(-1px);
        }

        .search-box input.form-control[b-trfqi79qxr]::placeholder {
            color: #9ca3af;
            font-weight: 500;
        }

.search-clear[b-trfqi79qxr] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}

    .search-clear:hover[b-trfqi79qxr] {
        background: rgba(102, 126, 234, 0.2);
        color: #4f46e5;
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
    }

    .search-clear:active[b-trfqi79qxr] {
        transform: translateY(-50%) scale(0.95);
    }

/* Search Animation Effects */
.search-box input.form-control:not(:placeholder-shown)[b-trfqi79qxr] {
    background: white;
    border-color: rgba(102, 126, 234, 0.3);
}

/* Search Results Highlight */
.search-highlight[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(245, 158, 11, 0.3) 100%);
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 600;
}

/* Responsive Search */
@media (max-width: 768px) {
    .search-section[b-trfqi79qxr] {
        padding: 16px;
        margin-bottom: 20px;
    }

    .search-box[b-trfqi79qxr] {
        max-width: 100%;
    }

        .search-box input.form-control[b-trfqi79qxr] {
            padding: 12px 14px 12px 44px;
            font-size: 15px;
        }

        .search-box i.fas.fa-search[b-trfqi79qxr] {
            left: 14px;
            font-size: 15px;
        }

    .search-clear[b-trfqi79qxr] {
        right: 10px;
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .search-section[b-trfqi79qxr] {
        padding: 12px;
    }

    .search-box input.form-control[b-trfqi79qxr] {
        padding: 10px 12px 10px 40px;
        font-size: 14px;
    }

    .search-box i.fas.fa-search[b-trfqi79qxr] {
        left: 12px;
        font-size: 14px;
    }
}

/* Dark Theme Support for Search */
[data-theme="dark"] .search-section[b-trfqi79qxr] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .search-box input.form-control[b-trfqi79qxr] {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .search-box input.form-control:focus[b-trfqi79qxr] {
        background: rgba(30, 41, 59, 0.95);
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2), 0 4px 20px rgba(102, 126, 234, 0.15);
    }

    [data-theme="dark"] .search-box input.form-control[b-trfqi79qxr]::placeholder {
        color: #64748b;
    }

[data-theme="dark"] .search-clear[b-trfqi79qxr] {
    background: rgba(71, 85, 105, 0.5);
    color: #94a3b8;
}

    [data-theme="dark"] .search-clear:hover[b-trfqi79qxr] {
        background: rgba(102, 126, 234, 0.3);
        color: #e2e8f0;
    }

/* High Contrast Mode for Search */
@media (prefers-contrast: high) {
    .search-box input.form-control[b-trfqi79qxr] {
        border: 2px solid #000;
        background: #fff;
        color: #000;
    }

        .search-box input.form-control:focus[b-trfqi79qxr] {
            border-color: #0066cc;
            box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
        }

    .search-clear[b-trfqi79qxr] {
        background: #000;
        color: #fff;
        border: 1px solid #000;
    }
}

/* RTL Support for Search */
html[dir="rtl"] .search-box i.fas.fa-search[b-trfqi79qxr] {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .search-box input.form-control[b-trfqi79qxr] {
    padding: 14px 48px 14px 16px;
}

html[dir="rtl"] .search-clear[b-trfqi79qxr] {
    right: auto;
    left: 12px;
}

/* Accessibility Improvements */
.search-box input.form-control:focus-visible[b-trfqi79qxr] {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

.search-clear:focus-visible[b-trfqi79qxr] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Loading State for Search */
.search-loading[b-trfqi79qxr] {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-trfqi79qxr 0.8s linear infinite;
}

html[dir="rtl"] .search-loading[b-trfqi79qxr] {
    right: auto;
    left: 48px;
}

/* Search Input Focus States */
.search-box input.form-control:valid[b-trfqi79qxr] {
    border-color: rgba(34, 197, 94, 0.5);
}

.search-box input.form-control:invalid[b-trfqi79qxr] {
    border-color: rgba(239, 68, 68, 0.5);
}

/* Smooth Transitions */
.search-section *[b-trfqi79qxr] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Search Results Counter */
.search-results-info[b-trfqi79qxr] {
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

    .search-results-info .results-count[b-trfqi79qxr] {
        color: #667eea;
        font-weight: 600;
    }

/* No Results State */
.no-search-results[b-trfqi79qxr] {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

    .no-search-results i[b-trfqi79qxr] {
        font-size: 48px;
        color: #d1d5db;
        margin-bottom: 16px;
        display: block;
    }

    .no-search-results h3[b-trfqi79qxr] {
        font-size: 18px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
    }

    .no-search-results p[b-trfqi79qxr] {
        font-size: 14px;
        color: #6b7280;
    }

.products-grid.compact[b-trfqi79qxr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.product-card-compact[b-trfqi79qxr] {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

    .product-card-compact:hover[b-trfqi79qxr] {
        border-color: #2196F3;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .product-card-compact.selected[b-trfqi79qxr] {
        border-color: #4CAF50;
        background: #f1f8f4;
    }

.product-thumbnail[b-trfqi79qxr] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

.product-info-compact[b-trfqi79qxr] {
    flex: 1;
    min-width: 0;
}

    .product-info-compact h5[b-trfqi79qxr] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.available-qty[b-trfqi79qxr] {
    font-size: 12px;
    color: #666;
}

.quantity-selector-compact[b-trfqi79qxr] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
}

.qty-btn-sm[b-trfqi79qxr] {
    width: 24px;
    height: 24px;
    border: none;
    background: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.qty-input-sm[b-trfqi79qxr] {
    width: 40px;
    height: 24px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 12px;
}

.search-clear[b-trfqi79qxr] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 5px;
}

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

.page-info[b-trfqi79qxr] {
    margin: 0 15px;
    font-size: 14px;
    color: #666;
}
/* _content/Sahelly/Components/Pages/Merchant/InvoiceDesigner.razor.rz.scp.css */

/* ===================================
   Invoice Designer - Modern Professional CSS
   تصميم مصمم الفواتير الاحترافي
   =================================== */

/* Page Container */
.invoice-designer-page[b-x5lpx2kx80] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .invoice-designer-page[b-x5lpx2kx80]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .invoice-designer-page > *[b-x5lpx2kx80] {
        position: relative;
        z-index: 1;
    }

/* Designer Header */
.designer-header[b-x5lpx2kx80] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-left[b-x5lpx2kx80] {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .header-left h1[b-x5lpx2kx80] {
        font-size: 28px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .header-left h1 i[b-x5lpx2kx80] {
            font-size: 24px;
        }

.template-name-input[b-x5lpx2kx80] {
    padding: 12px 20px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 250px;
}

    .template-name-input:focus[b-x5lpx2kx80] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.header-actions[b-x5lpx2kx80] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Designer Container */
.designer-container[b-x5lpx2kx80] {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 24px;
    height: calc(100vh - 200px);
}

/* Toolbox Panel */
.toolbox[b-x5lpx2kx80] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow-y: auto;
    max-height: 100%;
}

    .toolbox h3[b-x5lpx2kx80] {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 20px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.tool-category[b-x5lpx2kx80] {
    margin-bottom: 28px;
}

    .tool-category h4[b-x5lpx2kx80] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .tool-category h4[b-x5lpx2kx80]::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.2) 0%, transparent 100%);
        }

.tool-item[b-x5lpx2kx80] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: move;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .tool-item[b-x5lpx2kx80]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
        transition: left 0.5s;
    }

    .tool-item:hover[b-x5lpx2kx80] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateX(4px);
    }

        .tool-item:hover[b-x5lpx2kx80]::before {
            left: 100%;
        }

    .tool-item i[b-x5lpx2kx80] {
        font-size: 18px;
        color: #667eea;
        width: 24px;
        text-align: center;
    }

    .tool-item span[b-x5lpx2kx80] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

    .tool-item:active[b-x5lpx2kx80] {
        transform: scale(0.95);
    }

/* Data Fields List */
.data-fields-list[b-x5lpx2kx80] {
    max-height: 300px;
    overflow-y: auto;
    margin: -8px;
    padding: 8px;
}

    .data-fields-list[b-x5lpx2kx80]::-webkit-scrollbar {
        width: 6px;
    }

    .data-fields-list[b-x5lpx2kx80]::-webkit-scrollbar-track {
        background: rgba(102, 126, 234, 0.05);
        border-radius: 3px;
    }

    .data-fields-list[b-x5lpx2kx80]::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.3);
        border-radius: 3px;
    }

        .data-fields-list[b-x5lpx2kx80]::-webkit-scrollbar-thumb:hover {
            background: rgba(102, 126, 234, 0.5);
        }

.data-field-item[b-x5lpx2kx80] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(102, 126, 234, 0.03);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: move;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;
}

    .data-field-item:hover[b-x5lpx2kx80] {
        background: rgba(102, 126, 234, 0.08);
        border-color: rgba(102, 126, 234, 0.3);
        transform: translateX(4px);
    }

    .data-field-item i[b-x5lpx2kx80] {
        color: #9333ea;
        font-size: 14px;
    }

    .data-field-item span[b-x5lpx2kx80] {
        flex: 1;
        font-weight: 500;
        color: #4c1d95;
    }

    .data-field-item code[b-x5lpx2kx80] {
        font-size: 11px;
        background: rgba(102, 126, 234, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
        color: #667eea;
        font-weight: 600;
    }

/* Canvas Container */
.canvas-container[b-x5lpx2kx80] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Canvas Toolbar */
.canvas-toolbar[b-x5lpx2kx80] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.toolbar-group[b-x5lpx2kx80] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .toolbar-group label[b-x5lpx2kx80] {
        font-size: 13px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .toolbar-group select[b-x5lpx2kx80],
    .toolbar-group input[type="number"][b-x5lpx2kx80] {
        padding: 8px 12px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s;
        color: var(--text-primary);
    }

        .toolbar-group select:focus[b-x5lpx2kx80],
        .toolbar-group input[type="number"]:focus[b-x5lpx2kx80] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

    .toolbar-group input[type="number"][b-x5lpx2kx80] {
        width: 60px;
    }

.zoom-level[b-x5lpx2kx80] {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    min-width: 50px;
    text-align: center;
}

/* Canvas Scroll Container */
.canvas-scroll-container[b-x5lpx2kx80] {
    flex: 1;
    overflow: auto;
    background: repeating-linear-gradient( 45deg, rgba(102, 126, 234, 0.02), rgba(102, 126, 234, 0.02) 10px, rgba(118, 75, 162, 0.02) 10px, rgba(118, 75, 162, 0.02) 20px );
    position: relative;
}

.canvas-wrapper[b-x5lpx2kx80] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 40px;
}

/* Canvas */
.canvas[b-x5lpx2kx80] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    position: relative;
    overflow: hidden;
}

/* Canvas Elements */
.canvas-element[b-x5lpx2kx80] {
    cursor: move;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

    .canvas-element:hover[b-x5lpx2kx80] {
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.05);
    }

    .canvas-element.selected[b-x5lpx2kx80] {
        border-color: #667eea !important;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
        z-index: 1000 !important;
    }

    .canvas-element.multi-selected[b-x5lpx2kx80] {
        border-color: #9333ea !important;
        box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.1) !important;
    }

/* Element Types */
.text-element[b-x5lpx2kx80] {
    width: 100%;
    height: 100%;
    padding: 4px;
    word-wrap: break-word;
    overflow: hidden;
}

    .text-element[contenteditable="true"][b-x5lpx2kx80] {
        outline: none;
        background: rgba(255, 255, 255, 0.9);
        cursor: text;
    }

.image-element[b-x5lpx2kx80] {
    width: 100%;
    height: 100%;
    position: relative;
}

    .image-element img[b-x5lpx2kx80] {
        display: block;
    }

.image-placeholder[b-x5lpx2kx80] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 2px dashed rgba(102, 126, 234, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

    .image-placeholder:hover[b-x5lpx2kx80] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-color: #667eea;
    }

    .image-placeholder i[b-x5lpx2kx80] {
        font-size: 32px;
        color: #9333ea;
    }

    .image-placeholder span[b-x5lpx2kx80] {
        font-size: 13px;
        color: #4c1d95;
        font-weight: 600;
    }

.rectangle-element[b-x5lpx2kx80] {
    width: 100%;
    height: 100%;
}

.table-element[b-x5lpx2kx80] {
    width: 100%;
    height: 100%;
    overflow: auto;
}

    .table-element table[b-x5lpx2kx80] {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }

    .table-element th[b-x5lpx2kx80],
    .table-element td[b-x5lpx2kx80] {
        padding: 8px;
        text-align: right;
        border: 1px solid #e2e8f0;
    }

    .table-element th[b-x5lpx2kx80] {
        background: rgba(102, 126, 234, 0.05);
        font-weight: 600;
        color: #4c1d95;
    }

.barcode-element[b-x5lpx2kx80],
.qrcode-element[b-x5lpx2kx80] {
    width: 100%;
    height: 100%;
}

.barcode-placeholder[b-x5lpx2kx80],
.qrcode-placeholder[b-x5lpx2kx80] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px dashed rgba(102, 126, 234, 0.3);
}

    .barcode-placeholder i[b-x5lpx2kx80],
    .qrcode-placeholder i[b-x5lpx2kx80] {
        font-size: 24px;
        color: #9333ea;
    }

    .barcode-placeholder span[b-x5lpx2kx80],
    .qrcode-placeholder span[b-x5lpx2kx80] {
        font-size: 11px;
        color: #4c1d95;
        font-weight: 600;
        font-family: monospace;
    }

/* Data Binding Preview */
.data-binding-preview[b-x5lpx2kx80] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
}

/* Resize Handles */
.resize-handle[b-x5lpx2kx80] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid #667eea;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.resize-nw[b-x5lpx2kx80] {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.resize-ne[b-x5lpx2kx80] {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.resize-sw[b-x5lpx2kx80] {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.resize-se[b-x5lpx2kx80] {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.resize-n[b-x5lpx2kx80] {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: n-resize;
}

.resize-s[b-x5lpx2kx80] {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: s-resize;
}

.resize-e[b-x5lpx2kx80] {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: e-resize;
}

.resize-w[b-x5lpx2kx80] {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: w-resize;
}

/* Selection Box */
.selection-box[b-x5lpx2kx80] {
    border: 2px dashed #667eea;
    background: rgba(102, 126, 234, 0.1);
    pointer-events: none;
}

/* Properties Panel */
.properties-panel[b-x5lpx2kx80] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow-y: auto;
    max-height: 100%;
}

    .properties-panel h3[b-x5lpx2kx80] {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 20px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.property-section[b-x5lpx2kx80] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .property-section:last-child[b-x5lpx2kx80] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .property-section h4[b-x5lpx2kx80] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .property-section h4[b-x5lpx2kx80]::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.2) 0%, transparent 100%);
        }

.property-group[b-x5lpx2kx80] {
    margin-bottom: 16px;
}

    .property-group label[b-x5lpx2kx80] {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 6px;
    }

    .property-group input[type="text"][b-x5lpx2kx80],
    .property-group input[type="number"][b-x5lpx2kx80],
    .property-group input[type="color"][b-x5lpx2kx80],
    .property-group select[b-x5lpx2kx80],
    .property-group textarea[b-x5lpx2kx80] {
        width: 100%;
        padding: 10px 14px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 10px;
        font-size: 14px;
        transition: all 0.3s;
        color: var(--text-primary);
    }

        .property-group input[type="text"]:focus[b-x5lpx2kx80],
        .property-group input[type="number"]:focus[b-x5lpx2kx80],
        .property-group select:focus[b-x5lpx2kx80],
        .property-group textarea:focus[b-x5lpx2kx80] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

    .property-group input[type="color"][b-x5lpx2kx80] {
        height: 40px;
        cursor: pointer;
        padding: 4px;
    }

    .property-group textarea[b-x5lpx2kx80] {
        resize: vertical;
        min-height: 80px;
    }

.property-row[b-x5lpx2kx80] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checkbox-label[b-x5lpx2kx80] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
}

    .checkbox-label input[type="checkbox"][b-x5lpx2kx80] {
        width: 20px;
        height: 20px;
        accent-color: #667eea;
    }

/* Data Binding Input */
.data-binding-input[b-x5lpx2kx80] {
    position: relative;
}

    .data-binding-input input[b-x5lpx2kx80] {
        font-family: monospace;
        font-size: 13px !important;
    }

.suggestions-dropdown[b-x5lpx2kx80] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: 4px;
}

.suggestion-item[b-x5lpx2kx80] {
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.05);
}

    .suggestion-item:last-child[b-x5lpx2kx80] {
        border-bottom: none;
    }

    .suggestion-item:hover[b-x5lpx2kx80] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

    .suggestion-item strong[b-x5lpx2kx80] {
        font-family: monospace;
        color: #667eea;
    }

/* Property Actions */
.property-actions[b-x5lpx2kx80] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .property-actions .btn[b-x5lpx2kx80] {
        flex: 1;
    }

/* Multi Selection Info */
.multi-selection-info[b-x5lpx2kx80] {
    text-align: center;
    padding: 20px;
}

    .multi-selection-info p[b-x5lpx2kx80] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 16px;
    }

/* No Selection */
.no-selection[b-x5lpx2kx80] {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

    .no-selection i[b-x5lpx2kx80] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-selection p[b-x5lpx2kx80] {
        font-size: 14px;
        font-weight: 500;
    }

/* Modals */
.modal-overlay[b-x5lpx2kx80] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: fadeIn-b-x5lpx2kx80 0.3s;
}

.modal-content[b-x5lpx2kx80] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-x5lpx2kx80 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header[b-x5lpx2kx80] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-x5lpx2kx80] {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.close-btn[b-x5lpx2kx80] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .close-btn:hover[b-x5lpx2kx80] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-x5lpx2kx80] {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

.modal-footer[b-x5lpx2kx80] {
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(102, 126, 234, 0.02);
    border-radius: 0 0 24px 24px;
}

/* Templates List Modal */
.templates-list-modal[b-x5lpx2kx80] {
    width: 900px;
}

.templates-grid[b-x5lpx2kx80] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.template-card[b-x5lpx2kx80] {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

    .template-card:hover[b-x5lpx2kx80] {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        border-color: #667eea;
    }

    .template-card.default[b-x5lpx2kx80] {
        border-color: #10b981;
    }

    .template-card.new-template[b-x5lpx2kx80] {
        border: 2px dashed rgba(102, 126, 234, 0.3);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

        .template-card.new-template:hover[b-x5lpx2kx80] {
            border-color: #667eea;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        }

.template-preview[b-x5lpx2kx80] {
    height: 160px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .template-preview img[b-x5lpx2kx80] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .template-preview i[b-x5lpx2kx80] {
        font-size: 48px;
        color: #9333ea;
        opacity: 0.5;
    }

.template-info[b-x5lpx2kx80] {
    padding: 16px;
}

    .template-info h4[b-x5lpx2kx80] {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 4px 0;
    }

    .template-info p[b-x5lpx2kx80] {
        font-size: 13px;
        color: #6b7280;
        margin: 0;
    }

.template-actions[b-x5lpx2kx80] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s;
}

.template-card:hover .template-actions[b-x5lpx2kx80] {
    opacity: 1;
}

.badge[b-x5lpx2kx80] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

/* Table Columns Modal */
.table-columns-modal[b-x5lpx2kx80] {
    width: 600px;
}

.columns-editor[b-x5lpx2kx80] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.column-item[b-x5lpx2kx80] {
    display: grid;
    grid-template-columns: 1fr 1fr 100px auto;
    gap: 12px;
    align-items: center;
}

    .column-item select[b-x5lpx2kx80],
    .column-item input[b-x5lpx2kx80] {
        padding: 10px 14px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 10px;
        font-size: 14px;
        transition: all 0.3s;
    }

        .column-item select:focus[b-x5lpx2kx80],
        .column-item input:focus[b-x5lpx2kx80] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* Preview Modal */
.preview-modal[b-x5lpx2kx80] {
    width: 90%;
    max-width: 1200px;
}

    .preview-modal iframe[b-x5lpx2kx80] {
        border-radius: 8px;
        background: white;
    }

/* Buttons - Modern Gradient Style */
.btn[b-x5lpx2kx80] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

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

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

    .btn:active[b-x5lpx2kx80] {
        transform: translateY(-1px);
    }

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

.btn-primary[b-x5lpx2kx80] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-x5lpx2kx80] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-x5lpx2kx80] {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(148, 163, 184, 0.2);
}

    .btn-secondary:hover[b-x5lpx2kx80] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(148, 163, 184, 0.3);
    }

.btn-success[b-x5lpx2kx80] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

    .btn-success:hover[b-x5lpx2kx80] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
    }

.btn-danger[b-x5lpx2kx80] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
}

    .btn-danger:hover[b-x5lpx2kx80] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(239, 68, 68, 0.3);
    }

.btn-sm[b-x5lpx2kx80] {
    padding: 8px 16px;
    font-size: 13px;
}

/* Spinner */
.spinner-border[b-x5lpx2kx80] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color: currentColor;
    animation: spin-b-x5lpx2kx80 0.8s linear infinite;
}

.spinner-border-sm[b-x5lpx2kx80] {
    width: 14px;
    height: 14px;
}

/* Animations */
@keyframes fadeIn-b-x5lpx2kx80 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

/* Dark Theme Support */
[data-theme="dark"] .invoice-designer-page[b-x5lpx2kx80] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .invoice-designer-page[b-x5lpx2kx80]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .designer-header[b-x5lpx2kx80],
[data-theme="dark"] .toolbox[b-x5lpx2kx80],
[data-theme="dark"] .canvas-container[b-x5lpx2kx80],
[data-theme="dark"] .properties-panel[b-x5lpx2kx80] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .template-name-input[b-x5lpx2kx80],
[data-theme="dark"] .property-group input[b-x5lpx2kx80],
[data-theme="dark"] .property-group select[b-x5lpx2kx80],
[data-theme="dark"] .property-group textarea[b-x5lpx2kx80],
[data-theme="dark"] .toolbar-group select[b-x5lpx2kx80],
[data-theme="dark"] .toolbar-group input[b-x5lpx2kx80] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .template-name-input:focus[b-x5lpx2kx80],
    [data-theme="dark"] .property-group input:focus[b-x5lpx2kx80],
    [data-theme="dark"] .property-group select:focus[b-x5lpx2kx80],
    [data-theme="dark"] .property-group textarea:focus[b-x5lpx2kx80],
    [data-theme="dark"] .toolbar-group select:focus[b-x5lpx2kx80],
    [data-theme="dark"] .toolbar-group input:focus[b-x5lpx2kx80] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .tool-item[b-x5lpx2kx80],
[data-theme="dark"] .data-field-item[b-x5lpx2kx80] {
    background: rgba(71, 85, 105, 0.2);
}

    [data-theme="dark"] .tool-item:hover[b-x5lpx2kx80],
    [data-theme="dark"] .data-field-item:hover[b-x5lpx2kx80] {
        background: rgba(102, 126, 234, 0.2);
    }

[data-theme="dark"] .canvas-scroll-container[b-x5lpx2kx80] {
    background: repeating-linear-gradient( 45deg, rgba(102, 126, 234, 0.05), rgba(102, 126, 234, 0.05) 10px, rgba(118, 75, 162, 0.05) 10px, rgba(118, 75, 162, 0.05) 20px );
}

[data-theme="dark"] .canvas[b-x5lpx2kx80] {
    background: #1e293b;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-content[b-x5lpx2kx80] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .suggestions-dropdown[b-x5lpx2kx80] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .suggestion-item:hover[b-x5lpx2kx80] {
    background: rgba(102, 126, 234, 0.2);
    color: #a78bfa;
}

[data-theme="dark"] h1[b-x5lpx2kx80],
[data-theme="dark"] h3[b-x5lpx2kx80],
[data-theme="dark"] h4[b-x5lpx2kx80],
[data-theme="dark"] .property-group label[b-x5lpx2kx80],
[data-theme="dark"] .toolbar-group label[b-x5lpx2kx80] {
    color: #e2e8f0;
}

[data-theme="dark"] .template-card[b-x5lpx2kx80] {
    background: rgba(30, 41, 59, 0.9);
}

    [data-theme="dark"] .template-card:hover[b-x5lpx2kx80] {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    }

[data-theme="dark"] .template-info h4[b-x5lpx2kx80] {
    color: #e2e8f0;
}

[data-theme="dark"] .template-info p[b-x5lpx2kx80] {
    color: #9ca3af;
}

[data-theme="dark"] .no-selection[b-x5lpx2kx80] {
    color: #64748b;
}

[data-theme="dark"] .close-btn[b-x5lpx2kx80] {
    color: #9ca3af;
}

    [data-theme="dark"] .close-btn:hover[b-x5lpx2kx80] {
        color: #e2e8f0;
    }

/* Responsive Design */
@media (max-width: 1400px) {
    .designer-container[b-x5lpx2kx80] {
        grid-template-columns: 250px 1fr 280px;
    }
}

@media (max-width: 1200px) {
    .designer-container[b-x5lpx2kx80] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }

    .toolbox[b-x5lpx2kx80],
    .properties-panel[b-x5lpx2kx80] {
        display: none;
    }

    .canvas-container[b-x5lpx2kx80] {
        height: 600px;
    }
}

@media (max-width: 768px) {
    .invoice-designer-page[b-x5lpx2kx80] {
        padding: 16px;
    }

    .designer-header[b-x5lpx2kx80] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .header-left[b-x5lpx2kx80] {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

        .header-left h1[b-x5lpx2kx80] {
            font-size: 22px;
        }

    .template-name-input[b-x5lpx2kx80] {
        width: 100%;
    }

    .header-actions[b-x5lpx2kx80] {
        width: 100%;
        justify-content: stretch;
    }

        .header-actions .btn[b-x5lpx2kx80] {
            flex: 1;
        }

            .header-actions .btn span[b-x5lpx2kx80] {
                display: none;
            }

    .toolbar-group[b-x5lpx2kx80] {
        flex-wrap: wrap;
    }

    .templates-grid[b-x5lpx2kx80] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-x5lpx2kx80] {
        max-width: 100%;
        margin: 10px;
    }

    .table-columns-modal[b-x5lpx2kx80],
    .templates-list-modal[b-x5lpx2kx80] {
        width: 100%;
    }

    .column-item[b-x5lpx2kx80] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Print Styles */
@media print {
    .designer-header[b-x5lpx2kx80],
    .toolbox[b-x5lpx2kx80],
    .properties-panel[b-x5lpx2kx80],
    .canvas-toolbar[b-x5lpx2kx80],
    .resize-handle[b-x5lpx2kx80],
    .selection-box[b-x5lpx2kx80] {
        display: none !important;
    }

    .canvas-container[b-x5lpx2kx80] {
        box-shadow: none !important;
        border: none !important;
    }

    .canvas[b-x5lpx2kx80] {
        transform: scale(1) !important;
        box-shadow: none !important;
    }

    .canvas-element[b-x5lpx2kx80] {
        border: none !important;
        box-shadow: none !important;
    }
}

.canvas-scroll-container[b-x5lpx2kx80] {
    overflow: auto;
    height: calc(100vh - 200px);
    background: #f5f5f5;
}

.canvas-wrapper[b-x5lpx2kx80] {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.canvas[b-x5lpx2kx80] {
    box-sizing: border-box;
    overflow: hidden;
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn[b-x5lpx2kx80] {
        border: 2px solid currentColor;
    }

    .canvas-element.selected[b-x5lpx2kx80] {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-x5lpx2kx80] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantAgents.razor.rz.scp.css */

/* Merchant Agents Management Page - Modern Professional CSS */

/* Page Container */
.agents-page[b-bvegb8h6up] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .agents-page[b-bvegb8h6up]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .agents-page > *[b-bvegb8h6up] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-bvegb8h6up] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-bvegb8h6up] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-bvegb8h6up] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-bvegb8h6up] {
        color: #667eea;
    }

.breadcrumb-separator[b-bvegb8h6up] {
    color: #d1d5db;
}

.breadcrumb-current[b-bvegb8h6up] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-bvegb8h6up] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-bvegb8h6up] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Statistics Section */
.stats-section[b-bvegb8h6up] {
    margin-bottom: 32px;
}

.stats-grid[b-bvegb8h6up] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stat-card[b-bvegb8h6up] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-bvegb8h6up]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-bvegb8h6up] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-bvegb8h6up]::before {
            opacity: 1;
        }

.stat-icon[b-bvegb8h6up] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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

.stat-card.active .stat-icon[b-bvegb8h6up] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.stat-card.commission .stat-icon[b-bvegb8h6up] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.salary .stat-icon[b-bvegb8h6up] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

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

.stat-value[b-bvegb8h6up] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-bvegb8h6up] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Actions Section */
.actions-section[b-bvegb8h6up] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.actions-left[b-bvegb8h6up] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.actions-right[b-bvegb8h6up] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box[b-bvegb8h6up] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-icon[b-bvegb8h6up] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9333ea;
}

.search-input[b-bvegb8h6up] {
    width: 100%;
    padding: 12px 16px;
    padding-left: 40px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .search-input:focus[b-bvegb8h6up] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-bvegb8h6up]::placeholder {
        color: #9ca3af;
    }

.filter-select[b-bvegb8h6up] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    min-width: 150px;
}

    .filter-select:focus[b-bvegb8h6up] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Button Styles */
.btn-primary[b-bvegb8h6up] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-bvegb8h6up] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Table Container */
.table-container[b-bvegb8h6up] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.data-table[b-bvegb8h6up] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-bvegb8h6up] {
        padding: 18px 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .data-table td[b-bvegb8h6up] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
    }

    .data-table tbody tr[b-bvegb8h6up] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .data-table tbody tr:hover[b-bvegb8h6up] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .data-table tbody tr:last-child td[b-bvegb8h6up] {
            border-bottom: none;
        }

/* Agent Info in Table */
.agent-info[b-bvegb8h6up] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar[b-bvegb8h6up] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
}

    .agent-avatar:hover[b-bvegb8h6up] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

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

.agent-details[b-bvegb8h6up] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .agent-details h4[b-bvegb8h6up] {
        font-weight: 600;
        color: #1f2937;
        font-size: 15px;
        margin: 0;
    }

    .agent-details p[b-bvegb8h6up] {
        font-size: 13px;
        color: #9333ea;
        font-weight: 500;
        margin: 0;
    }

/* Agent Type Styles */
.agent-type[b-bvegb8h6up] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .agent-type.commission[b-bvegb8h6up] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #d946ef;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .agent-type.salary[b-bvegb8h6up] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #10b981;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .agent-type.partner[b-bvegb8h6up] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        color: #6366f1;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

.type-details[b-bvegb8h6up] {
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
    color: #6b7280;
}

/* Phone Link Style */
.phone-link[b-bvegb8h6up] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}

    .phone-link:hover[b-bvegb8h6up] {
        color: #667eea;
    }

/* Wallet Info Style */
.wallet-info[b-bvegb8h6up] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wallet-balance[b-bvegb8h6up] {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
}

.wallet-available[b-bvegb8h6up] {
    font-size: 12px;
    color: #6b7280;
}

/* Status Badges */
.status-badge[b-bvegb8h6up] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.active[b-bvegb8h6up] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-bvegb8h6up] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

/* Location Button */
.location-btn[b-bvegb8h6up] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #6366f1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

    .location-btn:hover[b-bvegb8h6up] {
        background: rgba(99, 102, 241, 0.2);
        border-color: #6366f1;
        transform: translateY(-1px);
    }

    .location-btn.compact[b-bvegb8h6up] {
        padding: 6px 10px;
        font-size: 12px;
    }

.location-disabled[b-bvegb8h6up] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 13px;
}

/* Action Buttons */
.action-buttons[b-bvegb8h6up] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-icon[b-bvegb8h6up] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.btn-view[b-bvegb8h6up] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

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

.btn-activate[b-bvegb8h6up] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.btn-deactivate[b-bvegb8h6up] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.btn-performance[b-bvegb8h6up] {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.btn-icon:hover[b-bvegb8h6up] {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Mobile Card View */
.mobile-cards[b-bvegb8h6up] {
    display: none;
}

.agent-card[b-bvegb8h6up] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header[b-bvegb8h6up] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.card-body[b-bvegb8h6up] {
    padding: 16px;
}

.info-row[b-bvegb8h6up] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .info-row:last-child[b-bvegb8h6up] {
        border-bottom: none;
    }

.info-label[b-bvegb8h6up] {
    font-weight: 600;
    color: #4b5563;
    font-size: 14px;
}

.info-value[b-bvegb8h6up] {
    font-weight: 500;
    color: #1f2937;
    font-size: 14px;
}

.card-actions[b-bvegb8h6up] {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.action-btn[b-bvegb8h6up] {
    border: none;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #4c1d95;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

    .action-btn:hover[b-bvegb8h6up] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        transform: translateY(-1px);
    }

/* Empty State */
.empty-state[b-bvegb8h6up] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-bvegb8h6up] {
    font-size: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
}

.empty-state h3[b-bvegb8h6up] {
    font-size: 28px;
    color: #4c1d95;
    margin-bottom: 12px;
    font-weight: 700;
}

.empty-state p[b-bvegb8h6up] {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 24px;
}

/* Loading Container */
.loading-container[b-bvegb8h6up] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-container[b-bvegb8h6up] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner[b-bvegb8h6up] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-bvegb8h6up 0.8s linear infinite;
}

.loading-text[b-bvegb8h6up] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 600;
}

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

/* Pagination */
.pagination-container[b-bvegb8h6up] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pagination-info[b-bvegb8h6up] {
    font-size: 14px;
    color: #4c1d95;
    font-weight: 600;
}

.pagination[b-bvegb8h6up] {
    display: flex;
    gap: 6px;
}

.pagination-btn[b-bvegb8h6up] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .pagination-btn:hover:not(:disabled)[b-bvegb8h6up] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn.active[b-bvegb8h6up] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Unauthorized Container */
.unauthorized-container[b-bvegb8h6up] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
}

.unauthorized-content[b-bvegb8h6up] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: center;
    max-width: 500px;
    width: 100%;
}

    .unauthorized-content i[b-bvegb8h6up] {
        font-size: 80px;
        color: #d946ef;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-bvegb8h6up] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-bvegb8h6up] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Dark Theme Support */
[data-theme="dark"] .agents-page[b-bvegb8h6up] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .agents-page[b-bvegb8h6up]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-bvegb8h6up],
[data-theme="dark"] .stat-card[b-bvegb8h6up],
[data-theme="dark"] .actions-section[b-bvegb8h6up],
[data-theme="dark"] .table-container[b-bvegb8h6up],
[data-theme="dark"] .agent-card[b-bvegb8h6up],
[data-theme="dark"] .empty-state[b-bvegb8h6up],
[data-theme="dark"] .pagination-container[b-bvegb8h6up],
[data-theme="dark"] .unauthorized-content[b-bvegb8h6up] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-title[b-bvegb8h6up],
[data-theme="dark"] .stat-value[b-bvegb8h6up] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-link[b-bvegb8h6up] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-bvegb8h6up] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-bvegb8h6up] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-bvegb8h6up] {
    color: #9ca3af;
}

[data-theme="dark"] .stat-label[b-bvegb8h6up] {
    color: #9ca3af;
}

[data-theme="dark"] .search-input[b-bvegb8h6up],
[data-theme="dark"] .filter-select[b-bvegb8h6up] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-bvegb8h6up],
    [data-theme="dark"] .filter-select:focus[b-bvegb8h6up] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .data-table th[b-bvegb8h6up] {
    color: #a78bfa;
}

[data-theme="dark"] .data-table td[b-bvegb8h6up] {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
}

[data-theme="dark"] .data-table tbody tr:hover[b-bvegb8h6up] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .agent-details h4[b-bvegb8h6up] {
    color: #e2e8f0;
}

[data-theme="dark"] .agent-details p[b-bvegb8h6up] {
    color: #a78bfa;
}

[data-theme="dark"] .wallet-balance[b-bvegb8h6up] {
    color: #e2e8f0;
}

[data-theme="dark"] .wallet-available[b-bvegb8h6up],
[data-theme="dark"] .phone-link[b-bvegb8h6up],
[data-theme="dark"] .type-details[b-bvegb8h6up],
[data-theme="dark"] .info-label[b-bvegb8h6up] {
    color: #9ca3af;
}

[data-theme="dark"] .action-btn[b-bvegb8h6up] {
    color: #e2e8f0;
    background: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .empty-icon[b-bvegb8h6up] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-state h3[b-bvegb8h6up],
[data-theme="dark"] .unauthorized-content h3[b-bvegb8h6up],
[data-theme="dark"] .pagination-info[b-bvegb8h6up],
[data-theme="dark"] .loading-text[b-bvegb8h6up] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-bvegb8h6up],
[data-theme="dark"] .unauthorized-content p[b-bvegb8h6up] {
    color: #9ca3af;
}

[data-theme="dark"] .pagination-btn[b-bvegb8h6up] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

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

@media (max-width: 992px) {
    .desktop-table[b-bvegb8h6up] {
        display: none;
    }

    .mobile-cards[b-bvegb8h6up] {
        display: block;
    }
}

@media (max-width: 768px) {
    .agents-page[b-bvegb8h6up] {
        padding: 16px;
    }

    .page-header[b-bvegb8h6up] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-bvegb8h6up] {
        font-size: 28px;
    }

    .page-subtitle[b-bvegb8h6up] {
        font-size: 16px;
    }

    .stats-grid[b-bvegb8h6up] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-bvegb8h6up] {
        padding: 20px;
    }

    .stat-icon[b-bvegb8h6up] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-bvegb8h6up] {
        font-size: 24px;
    }

    .actions-section[b-bvegb8h6up] {
        flex-direction: column;
        padding: 16px;
    }

    .actions-left[b-bvegb8h6up] {
        width: 100%;
        flex-direction: column;
    }

    .actions-right[b-bvegb8h6up] {
        width: 100%;
        justify-content: center;
        margin-top: 16px;
    }

    .search-box[b-bvegb8h6up] {
        max-width: 100%;
    }

    .pagination-container[b-bvegb8h6up] {
        flex-direction: column;
        padding: 16px;
    }

    .pagination[b-bvegb8h6up] {
        margin-top: 16px;
    }
}

@media (max-width: 480px) {
    .stat-card[b-bvegb8h6up] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .pagination-btn[b-bvegb8h6up] {
        min-width: 36px;
        padding: 8px;
    }

    .card-actions[b-bvegb8h6up] {
        flex-direction: column;
        gap: 8px;
    }

    .action-btn[b-bvegb8h6up] {
        justify-content: center;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantAllOrders.razor.rz.scp.css */

/* ===================================
   MerchantAllOrders - Professional CSS
   Modern design inspired by Users.razor.css
   =================================== */
.order-products[b-1e7y0ay3yx] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #eee;
    align-items: flex-start;
}

.products-list[b-1e7y0ay3yx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.product-item[b-1e7y0ay3yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    padding: 5px 0;
}

.product-name[b-1e7y0ay3yx] {
    flex: 1;
    color: #333;
    font-weight: 500;
}

.product-quantity[b-1e7y0ay3yx] {
    color: #666;
    margin: 0 10px;
}

.product-price[b-1e7y0ay3yx] {
    color: #2c3e50;
    font-weight: 600;
}

.more-items[b-1e7y0ay3yx] {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    padding: 5px 0;
}

.customer-info div[b-1e7y0ay3yx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.customer-info span[b-1e7y0ay3yx] {
    font-size: 0.9rem;
    color: #666;
}
/* Page Container */
.all-orders-container[b-1e7y0ay3yx] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .all-orders-container[b-1e7y0ay3yx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .all-orders-container > *[b-1e7y0ay3yx] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-1e7y0ay3yx] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.header-content[b-1e7y0ay3yx] {
    flex: 1;
}

    .header-content h1[b-1e7y0ay3yx] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .header-content h1 i[b-1e7y0ay3yx] {
            font-size: 32px;
        }

.breadcrumb[b-1e7y0ay3yx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

    .breadcrumb a[b-1e7y0ay3yx] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb a:hover[b-1e7y0ay3yx] {
            color: #667eea;
        }

    .breadcrumb span[b-1e7y0ay3yx] {
        color: #d1d5db;
        padding: 0 2px;
    }

        .breadcrumb span:last-child[b-1e7y0ay3yx] {
            color: #4c1d95;
            font-weight: 600;
        }

.header-stats[b-1e7y0ay3yx] {
    display: flex;
    gap: 16px;
}

.stat-card[b-1e7y0ay3yx] {
    padding: 16px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .stat-card:hover[b-1e7y0ay3yx] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
    }

.stat-value[b-1e7y0ay3yx] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-1e7y0ay3yx] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Filters Section */
.filters-section[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-box[b-1e7y0ay3yx] {
    position: relative;
    flex: 1;
}

    .search-box i[b-1e7y0ay3yx] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 16px;
        z-index: 1;
    }

    .search-box input[b-1e7y0ay3yx] {
        width: 100%;
        padding: 12px 16px 12px 44px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .search-box input:focus[b-1e7y0ay3yx] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.filter-controls[b-1e7y0ay3yx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.filter-select[b-1e7y0ay3yx],
.filter-date[b-1e7y0ay3yx] {
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 14px;
    min-width: 160px;
    color: #4b5563;
    font-weight: 500;
}

    .filter-select:focus[b-1e7y0ay3yx],
    .filter-date:focus[b-1e7y0ay3yx] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-refresh[b-1e7y0ay3yx] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-refresh:hover[b-1e7y0ay3yx] {
        background: #667eea;
        color: white;
        transform: rotate(180deg);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

/* Orders List */
.orders-list[b-1e7y0ay3yx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.order-card[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

    .order-card:hover[b-1e7y0ay3yx] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
    }

.order-header[b-1e7y0ay3yx] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.order-info[b-1e7y0ay3yx] {
    flex: 1;
}

    .order-info h4[b-1e7y0ay3yx] {
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0 0 4px 0;
    }

.order-date[b-1e7y0ay3yx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
}

    .order-date i[b-1e7y0ay3yx] {
        color: #9333ea;
    }

.order-badges[b-1e7y0ay3yx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-badge[b-1e7y0ay3yx],
.payment-badge[b-1e7y0ay3yx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.status-pending[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-processing[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.2) 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.status-shipped[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(14, 165, 233, 0.2) 100%);
    color: #0ea5e9;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.status-delivered[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.status-cancelled[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.status-returned[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(109, 40, 217, 0.2) 100%);
    color: #7c3aed;
    border: 1px solid rgba(109, 40, 217, 0.3);
}

.status-default[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(75, 85, 99, 0.2) 100%);
    color: #4b5563;
    border: 1px solid rgba(75, 85, 99, 0.3);
}

.method-cash[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.method-card[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.2) 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.method-installment[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(109, 40, 217, 0.2) 100%);
    color: #7c3aed;
    border: 1px solid rgba(109, 40, 217, 0.3);
}

.method-default[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(75, 85, 99, 0.2) 100%);
    color: #4b5563;
    border: 1px solid rgba(75, 85, 99, 0.3);
}

.order-content[b-1e7y0ay3yx] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.customer-info[b-1e7y0ay3yx],
.agents-info[b-1e7y0ay3yx] {
    display: flex;
    gap: 12px;
    align-items: center;
}

    .customer-info i[b-1e7y0ay3yx],
    .agents-info i[b-1e7y0ay3yx] {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 14px;
    }

    .customer-info div[b-1e7y0ay3yx],
    .agents-info div[b-1e7y0ay3yx] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .customer-info div strong[b-1e7y0ay3yx],
        .agents-info div strong[b-1e7y0ay3yx] {
            font-weight: 600;
            color: #1f2937;
            font-size: 15px;
        }

        .customer-info div span[b-1e7y0ay3yx],
        .agents-info div span[b-1e7y0ay3yx] {
            font-size: 14px;
            color: #6b7280;
        }

.order-summary[b-1e7y0ay3yx] {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.items-count[b-1e7y0ay3yx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .items-count i[b-1e7y0ay3yx] {
        color: #9333ea;
    }

.order-total[b-1e7y0ay3yx] {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
}

    .order-total strong[b-1e7y0ay3yx] {
        font-size: 16px;
        font-weight: 700;
        color: #4c1d95;
    }

.order-footer[b-1e7y0ay3yx] {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-status[b-1e7y0ay3yx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .payment-status span[b-1e7y0ay3yx] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
    }

        .payment-status span i[b-1e7y0ay3yx] {
            font-size: 12px;
        }

.payment-pending[b-1e7y0ay3yx] {
    color: #d97706;
}

.payment-partial[b-1e7y0ay3yx] {
    color: #7c3aed;
}

.payment-completed[b-1e7y0ay3yx] {
    color: #059669;
}

.payment-failed[b-1e7y0ay3yx] {
    color: #dc2626;
}

.payment-refunded[b-1e7y0ay3yx] {
    color: #4b5563;
}

.payment-default[b-1e7y0ay3yx] {
    color: #6b7280;
}

.paid-amount[b-1e7y0ay3yx] {
    font-size: 13px;
    color: #6b7280;
}

.btn-view-details[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
}

    .btn-view-details:hover[b-1e7y0ay3yx] {
        transform: translateX(-4px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Empty State */
.empty-state[b-1e7y0ay3yx] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-1e7y0ay3yx] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
    }

    .empty-state h3[b-1e7y0ay3yx] {
        font-size: 26px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-1e7y0ay3yx] {
        font-size: 16px;
        color: #6b7280;
        max-width: 500px;
        margin: 0 auto;
    }

/* Loading State */
.loading-container[b-1e7y0ay3yx] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-1e7y0ay3yx] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-1e7y0ay3yx 0.8s linear infinite;
}

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

/* Pagination */
.pagination-container[b-1e7y0ay3yx] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    gap: 10px;
}

.btn-page[b-1e7y0ay3yx] {
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 12px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 40px;
}

    .btn-page:hover:not(:disabled)[b-1e7y0ay3yx] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-page.active[b-1e7y0ay3yx] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Unauthorized Content */
.unauthorized-content[b-1e7y0ay3yx] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 60px auto;
}

    .unauthorized-content i[b-1e7y0ay3yx] {
        font-size: 60px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-1e7y0ay3yx] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-1e7y0ay3yx] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .unauthorized-content .btn[b-1e7y0ay3yx] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }

        .unauthorized-content .btn:hover[b-1e7y0ay3yx] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

/* Dark Theme Support */
[data-theme="dark"] .all-orders-container[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .all-orders-container[b-1e7y0ay3yx]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-1e7y0ay3yx],
[data-theme="dark"] .filters-section[b-1e7y0ay3yx],
[data-theme="dark"] .order-card[b-1e7y0ay3yx],
[data-theme="dark"] .empty-state[b-1e7y0ay3yx],
[data-theme="dark"] .unauthorized-content[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .order-header[b-1e7y0ay3yx],
[data-theme="dark"] .order-footer[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .header-content h1[b-1e7y0ay3yx],
[data-theme="dark"] .empty-state i[b-1e7y0ay3yx],
[data-theme="dark"] .unauthorized-content i[b-1e7y0ay3yx],
[data-theme="dark"] .stat-value[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb a[b-1e7y0ay3yx] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb a:hover[b-1e7y0ay3yx] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb span:last-child[b-1e7y0ay3yx] {
    color: #e2e8f0;
}

[data-theme="dark"] .stat-card[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-label[b-1e7y0ay3yx],
[data-theme="dark"] .empty-state p[b-1e7y0ay3yx],
[data-theme="dark"] .unauthorized-content p[b-1e7y0ay3yx] {
    color: #9ca3af;
}

[data-theme="dark"] .search-box input[b-1e7y0ay3yx],
[data-theme="dark"] .filter-select[b-1e7y0ay3yx],
[data-theme="dark"] .filter-date[b-1e7y0ay3yx] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-1e7y0ay3yx],
    [data-theme="dark"] .filter-select:focus[b-1e7y0ay3yx],
    [data-theme="dark"] .filter-date:focus[b-1e7y0ay3yx] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .order-info h4[b-1e7y0ay3yx],
[data-theme="dark"] .empty-state h3[b-1e7y0ay3yx],
[data-theme="dark"] .unauthorized-content h3[b-1e7y0ay3yx] {
    color: #e2e8f0;
}

[data-theme="dark"] .order-date[b-1e7y0ay3yx],
[data-theme="dark"] .customer-info div span[b-1e7y0ay3yx],
[data-theme="dark"] .agents-info div span[b-1e7y0ay3yx],
[data-theme="dark"] .items-count[b-1e7y0ay3yx],
[data-theme="dark"] .order-total[b-1e7y0ay3yx],
[data-theme="dark"] .paid-amount[b-1e7y0ay3yx] {
    color: #9ca3af;
}

    [data-theme="dark"] .customer-info div strong[b-1e7y0ay3yx],
    [data-theme="dark"] .agents-info div strong[b-1e7y0ay3yx],
    [data-theme="dark"] .order-total strong[b-1e7y0ay3yx] {
        color: #e2e8f0;
    }

[data-theme="dark"] .btn-page[b-1e7y0ay3yx] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-page:hover:not(:disabled)[b-1e7y0ay3yx],
    [data-theme="dark"] .btn-page.active[b-1e7y0ay3yx] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

[data-theme="dark"] .btn-refresh:hover[b-1e7y0ay3yx] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

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

    .page-header[b-1e7y0ay3yx] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-stats[b-1e7y0ay3yx] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .all-orders-container[b-1e7y0ay3yx] {
        padding: 16px;
    }

    .page-header[b-1e7y0ay3yx],
    .filters-section[b-1e7y0ay3yx] {
        padding: 16px;
        margin-bottom: 16px;
    }

    .header-content h1[b-1e7y0ay3yx] {
        font-size: 28px;
    }

    .filters-section[b-1e7y0ay3yx] {
        flex-direction: column;
    }

    .filter-controls[b-1e7y0ay3yx] {
        flex-direction: column;
        align-items: stretch;
    }

    .orders-list[b-1e7y0ay3yx] {
        grid-template-columns: 1fr;
    }

    .order-badges[b-1e7y0ay3yx] {
        margin-top: 8px;
    }

    .order-header[b-1e7y0ay3yx] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .stat-card[b-1e7y0ay3yx] {
        min-width: 0;
        flex: 1;
    }

    .stat-value[b-1e7y0ay3yx] {
        font-size: 22px;
    }

    .stat-label[b-1e7y0ay3yx] {
        font-size: 12px;
    }

    .order-footer[b-1e7y0ay3yx] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .btn-view-details[b-1e7y0ay3yx] {
        width: 100%;
    }

    .pagination-container[b-1e7y0ay3yx] {
        flex-wrap: wrap;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantCoupons.razor.rz.scp.css */

/* ===================================
   Merchant Coupons Page - Modern Professional CSS
   تصميم احترافي لصفحة إدارة الكوبونات
   =================================== */

/* Page Container */
.coupons-container[b-ru2fdhelxf] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .coupons-container[b-ru2fdhelxf]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .coupons-container > *[b-ru2fdhelxf] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-ru2fdhelxf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content h1[b-ru2fdhelxf] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb[b-ru2fdhelxf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-size: 14px;
}

    .breadcrumb a[b-ru2fdhelxf] {
        color: #6b7280;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb a:hover[b-ru2fdhelxf] {
            color: #667eea;
        }

    .breadcrumb span[b-ru2fdhelxf] {
        color: #d1d5db;
    }

        .breadcrumb span:last-child[b-ru2fdhelxf] {
            color: #4c1d95;
            font-weight: 600;
        }

/* Statistics Cards */
.stats-cards[b-ru2fdhelxf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-ru2fdhelxf] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-ru2fdhelxf]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-ru2fdhelxf] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-ru2fdhelxf]::before {
            opacity: 1;
        }

.stat-icon[b-ru2fdhelxf] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-card:nth-child(2) .stat-icon[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-card:nth-child(3) .stat-icon[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-card:nth-child(4) .stat-icon[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

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

.stat-value[b-ru2fdhelxf] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.stat-label[b-ru2fdhelxf] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
    display: block;
}

/* Filters Section */
.filters-section[b-ru2fdhelxf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.search-box[b-ru2fdhelxf] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

    .search-box i[b-ru2fdhelxf] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        z-index: 1;
    }

    .search-box input[b-ru2fdhelxf] {
        width: 100%;
        padding: 12px 16px;
        padding-left: 45px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .search-box input:focus[b-ru2fdhelxf] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.filter-controls[b-ru2fdhelxf] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-select[b-ru2fdhelxf] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    cursor: pointer;
    min-width: 150px;
}

    .filter-select:focus[b-ru2fdhelxf] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Buttons - Gradient Style */
.btn-primary[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-primary:hover[b-ru2fdhelxf] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .btn-secondary:hover[b-ru2fdhelxf] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-danger[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-danger:hover[b-ru2fdhelxf] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

.btn-refresh[b-ru2fdhelxf] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-refresh:hover[b-ru2fdhelxf] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: rotate(180deg);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.btn-icon[b-ru2fdhelxf] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-icon:hover[b-ru2fdhelxf] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-icon.text-success[b-ru2fdhelxf] {
        color: #10b981;
    }

        .btn-icon.text-success:hover[b-ru2fdhelxf] {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }

    .btn-icon.text-warning[b-ru2fdhelxf] {
        color: #f59e0b;
    }

        .btn-icon.text-warning:hover[b-ru2fdhelxf] {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }

    .btn-icon.text-danger[b-ru2fdhelxf] {
        color: #ef4444;
    }

        .btn-icon.text-danger:hover[b-ru2fdhelxf] {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }

/* Coupons Grid */
.coupons-grid[b-ru2fdhelxf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.coupon-card[b-ru2fdhelxf] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

    .coupon-card[b-ru2fdhelxf]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
    }

    .coupon-card:hover[b-ru2fdhelxf] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .coupon-card.inactive[b-ru2fdhelxf] {
        opacity: 0.8;
    }

        .coupon-card.inactive[b-ru2fdhelxf]::before {
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
        }

.coupon-header[b-ru2fdhelxf] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.coupon-code[b-ru2fdhelxf] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #4c1d95;
}

    .coupon-code i[b-ru2fdhelxf] {
        color: #9333ea;
        font-size: 24px;
    }

.coupon-status[b-ru2fdhelxf] {
    display: flex;
    gap: 8px;
}

/* Badge Styles */
.badge[b-ru2fdhelxf] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.badge-active[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.badge-inactive[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: white;
}

.badge-expired[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

/* Coupon Content */
.coupon-content[b-ru2fdhelxf] {
    padding: 0 20px 20px;
    position: relative;
    z-index: 1;
}

.coupon-info[b-ru2fdhelxf] {
    margin-bottom: 16px;
}

.info-row[b-ru2fdhelxf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}

.info-label[b-ru2fdhelxf] {
    color: #6b7280;
    font-weight: 500;
}

.info-value[b-ru2fdhelxf] {
    color: #1f2937;
    font-weight: 600;
}

.discount-value[b-ru2fdhelxf] {
    font-size: 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    .discount-value small[b-ru2fdhelxf] {
        font-size: 12px;
        color: #6b7280;
        -webkit-text-fill-color: #6b7280;
    }

.coupon-dates[b-ru2fdhelxf] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
}

.date-row[b-ru2fdhelxf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
}

    .date-row i[b-ru2fdhelxf] {
        color: #9333ea;
    }

.coupon-usage[b-ru2fdhelxf] {
    margin-bottom: 16px;
}

.usage-info[b-ru2fdhelxf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #4b5563;
}

    .usage-info i[b-ru2fdhelxf] {
        color: #9333ea;
    }

.usage-progress[b-ru2fdhelxf] {
    width: 100%;
    height: 8px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-ru2fdhelxf] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.coupon-actions[b-ru2fdhelxf] {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
    z-index: 1;
}

/* Empty State */
.empty-state[b-ru2fdhelxf] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-ru2fdhelxf] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-ru2fdhelxf] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-ru2fdhelxf] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Pagination */
.pagination-container[b-ru2fdhelxf] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.btn-page[b-ru2fdhelxf] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .btn-page:hover:not(:disabled)[b-ru2fdhelxf] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-page.active[b-ru2fdhelxf] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Modal Styles */
.modal-backdrop[b-ru2fdhelxf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-ru2fdhelxf 0.3s ease;
}

.modal-content[b-ru2fdhelxf] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: zoomIn-b-ru2fdhelxf 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .modal-content.small[b-ru2fdhelxf] {
        max-width: 500px;
    }

.modal-header[b-ru2fdhelxf] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-ru2fdhelxf] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.btn-close[b-ru2fdhelxf] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    transition: all 0.3s;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

    .btn-close:hover[b-ru2fdhelxf] {
        color: #4c1d95;
        transform: rotate(90deg);
        background: rgba(102, 126, 234, 0.1);
    }

.modal-body[b-ru2fdhelxf] {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-ru2fdhelxf] {
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(102, 126, 234, 0.02);
}

/* Form Styles */
.form-section[b-ru2fdhelxf] {
    margin-bottom: 30px;
}

    .form-section h4[b-ru2fdhelxf] {
        font-size: 18px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

.form-row[b-ru2fdhelxf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-ru2fdhelxf] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-ru2fdhelxf] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

.form-control[b-ru2fdhelxf] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-ru2fdhelxf] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control:disabled[b-ru2fdhelxf] {
        background: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.6;
    }

.form-options[b-ru2fdhelxf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.form-check[b-ru2fdhelxf] {
    display: flex;
    gap: 10px;
    flex-direction: row-reverse;
}

.form-check-input[b-ru2fdhelxf] {
    width: 20px;
    height: 20px;
    accent-color: #667eea;
    cursor: pointer;
}

.form-check-label[b-ru2fdhelxf] {
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
}

/* Products Selection */
.products-selection[b-ru2fdhelxf] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.02);
}

.search-products[b-ru2fdhelxf] {
    position: relative;
    margin-bottom: 16px;
}

    .search-products i[b-ru2fdhelxf] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
    }

    .search-products input[b-ru2fdhelxf] {
        width: 100%;
        padding: 10px 16px 10px 45px;
        background: white;
        border: 2px solid rgba(102, 126, 234, 0.2);
        border-radius: 10px;
        font-size: 14px;
    }

.products-list[b-ru2fdhelxf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-item[b-ru2fdhelxf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: white;
    border-radius: 8px;
    transition: all 0.2s;
}

    .product-item:hover[b-ru2fdhelxf] {
        background: rgba(102, 126, 234, 0.05);
    }

    .product-item label[b-ru2fdhelxf] {
        flex: 1;
        cursor: pointer;
        font-size: 14px;
        color: #4b5563;
    }

/* Loading Container */
.loading-container[b-ru2fdhelxf] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-ru2fdhelxf] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-ru2fdhelxf 0.8s linear infinite;
}

.spinner-border-sm[b-ru2fdhelxf] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-right: 8px;
}

/* Validation */
.validation-message[b-ru2fdhelxf] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
}

.validation-summary[b-ru2fdhelxf] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #ef4444;
}

/* Unauthorized Content */
.unauthorized-content[b-ru2fdhelxf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px;
}

    .unauthorized-content i[b-ru2fdhelxf] {
        color: #9333ea;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-ru2fdhelxf] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
    }

    .unauthorized-content p[b-ru2fdhelxf] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Animations */
@keyframes fadeIn-b-ru2fdhelxf {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

/* Dark Theme Support */
[data-theme="dark"] .coupons-container[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .coupons-container[b-ru2fdhelxf]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-ru2fdhelxf],
[data-theme="dark"] .stat-card[b-ru2fdhelxf],
[data-theme="dark"] .filters-section[b-ru2fdhelxf],
[data-theme="dark"] .coupon-card[b-ru2fdhelxf],
[data-theme="dark"] .empty-state[b-ru2fdhelxf],
[data-theme="dark"] .pagination-container[b-ru2fdhelxf],
[data-theme="dark"] .modal-content[b-ru2fdhelxf] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb a[b-ru2fdhelxf] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb a:hover[b-ru2fdhelxf] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb span:last-child[b-ru2fdhelxf] {
    color: #e2e8f0;
}

[data-theme="dark"] .stat-value[b-ru2fdhelxf],
[data-theme="dark"] .header-content h1[b-ru2fdhelxf],
[data-theme="dark"] .modal-header h3[b-ru2fdhelxf],
[data-theme="dark"] .discount-value[b-ru2fdhelxf] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .stat-label[b-ru2fdhelxf],
[data-theme="dark"] .info-label[b-ru2fdhelxf],
[data-theme="dark"] .date-row[b-ru2fdhelxf],
[data-theme="dark"] .usage-info[b-ru2fdhelxf] {
    color: #9ca3af;
}

[data-theme="dark"] .info-value[b-ru2fdhelxf],
[data-theme="dark"] .coupon-code[b-ru2fdhelxf] {
    color: #e2e8f0;
}

[data-theme="dark"] .search-box input[b-ru2fdhelxf],
[data-theme="dark"] .filter-select[b-ru2fdhelxf],
[data-theme="dark"] .form-control[b-ru2fdhelxf] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-ru2fdhelxf],
    [data-theme="dark"] .filter-select:focus[b-ru2fdhelxf],
    [data-theme="dark"] .form-control:focus[b-ru2fdhelxf] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .btn-page[b-ru2fdhelxf] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state h3[b-ru2fdhelxf] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-ru2fdhelxf] {
    color: #9ca3af;
}

[data-theme="dark"] .form-section h4[b-ru2fdhelxf],
[data-theme="dark"] .form-group label[b-ru2fdhelxf] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-check-label[b-ru2fdhelxf],
[data-theme="dark"] .product-item label[b-ru2fdhelxf] {
    color: #cbd5e1;
}

[data-theme="dark"] .btn-close[b-ru2fdhelxf] {
    color: #9ca3af;
}

    [data-theme="dark"] .btn-close:hover[b-ru2fdhelxf] {
        color: #e2e8f0;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-cards[b-ru2fdhelxf] {
        grid-template-columns: repeat(2, 1fr);
    }

    .coupons-grid[b-ru2fdhelxf] {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

@media (max-width: 768px) {
    .coupons-container[b-ru2fdhelxf] {
        padding: 16px;
    }

    .page-header[b-ru2fdhelxf] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .header-content h1[b-ru2fdhelxf] {
        font-size: 28px;
    }

    .stats-cards[b-ru2fdhelxf] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-ru2fdhelxf] {
        padding: 20px;
    }

    .stat-icon[b-ru2fdhelxf] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-ru2fdhelxf] {
        font-size: 24px;
    }

    .filters-section[b-ru2fdhelxf] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .search-box[b-ru2fdhelxf] {
        max-width: 100%;
    }

    .filter-controls[b-ru2fdhelxf] {
        flex-wrap: wrap;
    }

    .filter-select[b-ru2fdhelxf] {
        min-width: 0;
        flex: 1;
    }

    .coupons-grid[b-ru2fdhelxf] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .coupon-card[b-ru2fdhelxf] {
        margin: 0 -8px;
    }

    .modal-content[b-ru2fdhelxf] {
        width: 95%;
        max-height: 95vh;
        border-radius: 16px;
    }

    .modal-header[b-ru2fdhelxf] {
        padding: 20px;
    }

        .modal-header h3[b-ru2fdhelxf] {
            font-size: 20px;
        }

    .modal-body[b-ru2fdhelxf] {
        padding: 20px;
    }

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

    .form-options[b-ru2fdhelxf] {
        grid-template-columns: 1fr;
    }

    .btn-primary[b-ru2fdhelxf],
    .btn-secondary[b-ru2fdhelxf],
    .btn-danger[b-ru2fdhelxf] {
        width: 100%;
        justify-content: center;
    }

    .coupon-dates[b-ru2fdhelxf] {
        flex-direction: column;
        gap: 8px;
    }

    .empty-state[b-ru2fdhelxf] {
        padding: 60px 20px;
    }

        .empty-state i[b-ru2fdhelxf] {
            font-size: 60px;
        }

        .empty-state h3[b-ru2fdhelxf] {
            font-size: 22px;
        }

    .pagination-container[b-ru2fdhelxf] {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .header-content h1[b-ru2fdhelxf] {
        font-size: 24px;
    }

    .coupon-code[b-ru2fdhelxf] {
        font-size: 18px;
    }

    .btn-page[b-ru2fdhelxf] {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .coupons-container[b-ru2fdhelxf] {
        background: white !important;
    }

    .page-header button[b-ru2fdhelxf],
    .filters-section[b-ru2fdhelxf],
    .coupon-actions[b-ru2fdhelxf],
    .pagination-container[b-ru2fdhelxf] {
        display: none !important;
    }

    .coupon-card[b-ru2fdhelxf] {
        page-break-inside: avoid;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
}

/* RTL Support */
html[dir="rtl"] .search-box i[b-ru2fdhelxf] {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .search-box input[b-ru2fdhelxf] {
    padding-left: 16px;
    padding-right: 45px;
}

html[dir="rtl"] .search-products i[b-ru2fdhelxf] {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .search-products input[b-ru2fdhelxf] {
    padding-left: 16px;
    padding-right: 45px;
}

html[dir="rtl"] .coupon-code i[b-ru2fdhelxf] {
    margin-left: 10px;
    margin-right: 0;
}

html[dir="rtl"] .date-row i[b-ru2fdhelxf],
html[dir="rtl"] .usage-info i[b-ru2fdhelxf] {
    margin-left: 8px;
    margin-right: 0;
}

html[dir="rtl"] .btn-primary[b-ru2fdhelxf],
html[dir="rtl"] .btn-danger[b-ru2fdhelxf] {
    flex-direction: row-reverse;
}

/* Accessibility */
*:focus[b-ru2fdhelxf] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-ru2fdhelxf],
.btn-primary:focus[b-ru2fdhelxf],
.btn-secondary:focus[b-ru2fdhelxf],
.btn-danger:focus[b-ru2fdhelxf],
.btn-icon:focus[b-ru2fdhelxf],
.btn-page:focus[b-ru2fdhelxf] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-ru2fdhelxf],
select:focus[b-ru2fdhelxf] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-primary[b-ru2fdhelxf],
    .btn-secondary[b-ru2fdhelxf],
    .btn-danger[b-ru2fdhelxf] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-ru2fdhelxf] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantCustomers.razor.rz.scp.css */
/* Merchant Customers Page - Compact Design
   ========================================================= */

/* Page Container */
.merchant-customers-page[b-ym7baico9r] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .merchant-customers-page[b-ym7baico9r]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .merchant-customers-page > *[b-ym7baico9r] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Header Section */
.page-header-enhanced[b-ym7baico9r] {
    margin-bottom: 32px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-ym7baico9r] {
    flex: 1;
}

.breadcrumb-modern[b-ym7baico9r] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item[b-ym7baico9r] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-ym7baico9r] {
        color: #667eea;
    }

.separator[b-ym7baico9r] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-ym7baico9r] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-ym7baico9r] {
    margin-bottom: 4px;
}

.page-title-modern[b-ym7baico9r] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.title-icon[b-ym7baico9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-ym7baico9r] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-ym7baico9r] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Search and Filter Section */
.search-filter-section[b-ym7baico9r] {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.search-container[b-ym7baico9r] {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.search-icon[b-ym7baico9r] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 16px;
}

.search-input[b-ym7baico9r] {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s;
    background: #f9fafb;
}

    .search-input:focus[b-ym7baico9r] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.clear-search[b-ym7baico9r] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

    .clear-search:hover[b-ym7baico9r] {
        color: #ef4444;
    }

.filter-controls[b-ym7baico9r] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-select[b-ym7baico9r] {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 150px;
}

    .filter-select:focus[b-ym7baico9r] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.refresh-btn[b-ym7baico9r] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .refresh-btn:hover:not(:disabled)[b-ym7baico9r] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
    }

    .refresh-btn:disabled[b-ym7baico9r] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .refresh-btn i.spinning[b-ym7baico9r] {
        animation: spin-b-ym7baico9r 1s linear infinite;
    }

/* Customers Content */
.customers-content[b-ym7baico9r] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Compact Desktop Table */
.desktop-table-container[b-ym7baico9r] {
    display: block;
    overflow-x: auto;
}

.customers-table-compact[b-ym7baico9r] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .customers-table-compact thead[b-ym7baico9r] {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-bottom: 2px solid #e5e7eb;
    }

    .customers-table-compact th[b-ym7baico9r] {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        color: #4c1d95;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Column widths */
    .customers-table-compact .th-customer[b-ym7baico9r] {
        width: 30%;
    }

    .customers-table-compact .th-contact[b-ym7baico9r] {
        width: 20%;
    }

    .customers-table-compact .th-purchases[b-ym7baico9r] {
        width: 20%;
    }

    .customers-table-compact .th-agent[b-ym7baico9r] {
        width: 18%;
    }

    .customers-table-compact .th-actions[b-ym7baico9r] {
        width: 12%;
    }

    .customers-table-compact tbody tr[b-ym7baico9r] {
        border-bottom: 1px solid #f3f4f6;
        transition: all 0.2s;
    }

        .customers-table-compact tbody tr:hover[b-ym7baico9r] {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
        }

        .customers-table-compact tbody tr.blocked-row[b-ym7baico9r] {
            opacity: 0.7;
            background: #fef2f2;
        }

    .customers-table-compact td[b-ym7baico9r] {
        padding: 12px 16px;
        vertical-align: middle;
    }

/* Compact Table Cells */
.cell-customer[b-ym7baico9r] {
    padding-right: 8px !important;
}

.customer-compact-info[b-ym7baico9r] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-avatar-compact[b-ym7baico9r] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.customer-avatar-placeholder-compact[b-ym7baico9r] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex-shrink: 0;
}

.customer-details-compact[b-ym7baico9r] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.customer-primary[b-ym7baico9r] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.customer-name-compact[b-ym7baico9r] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.customer-code-badge[b-ym7baico9r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.customer-secondary[b-ym7baico9r] {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Contact Cell */
.cell-contact[b-ym7baico9r] {
    padding-right: 8px !important;
}

.contact-info[b-ym7baico9r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.phone-link-compact[b-ym7baico9r] {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: color 0.2s;
}

    .phone-link-compact:hover[b-ym7baico9r] {
        color: #764ba2;
    }

    .phone-link-compact i[b-ym7baico9r] {
        font-size: 11px;
    }

.address-info[b-ym7baico9r] {
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .address-info i[b-ym7baico9r] {
        font-size: 10px;
        flex-shrink: 0;
    }

/* Purchases Cell */
.cell-purchases[b-ym7baico9r] {
    padding-right: 8px !important;
}

.purchases-compact[b-ym7baico9r] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.purchase-main[b-ym7baico9r] {
    display: flex;
    align-items: center;
}

.purchase-amount-compact[b-ym7baico9r] {
    font-weight: 600;
    color: #059669;
    font-size: 14px;
}

.purchase-secondary[b-ym7baico9r] {
    display: flex;
    align-items: center;
}

.order-count-compact[b-ym7baico9r] {
    font-size: 11px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .order-count-compact i[b-ym7baico9r] {
        font-size: 10px;
    }

/* Agent & Status Cell */
.cell-agent-status[b-ym7baico9r] {
    padding-right: 8px !important;
}

.agent-status-info[b-ym7baico9r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-badge-compact[b-ym7baico9r] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: white;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

    .agent-badge-compact i[b-ym7baico9r] {
        font-size: 10px;
        flex-shrink: 0;
    }

.no-agent-compact[b-ym7baico9r] {
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .no-agent-compact i[b-ym7baico9r] {
        font-size: 11px;
    }

.status-dot[b-ym7baico9r] {
    font-size: 10px;
    margin-left: auto;
}

    .status-dot.active[b-ym7baico9r] {
        color: #22c55e;
    }

    .status-dot.blocked[b-ym7baico9r] {
        color: #ef4444;
    }

/* Actions Cell */
.cell-actions[b-ym7baico9r] {
    padding-right: 16px !important;
}

.actions-compact[b-ym7baico9r] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-btn-compact[b-ym7baico9r] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

    .action-btn-compact.sale[b-ym7baico9r] {
        background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
        color: white;
    }

        .action-btn-compact.sale:hover[b-ym7baico9r] {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
        }

    .action-btn-compact.more[b-ym7baico9r] {
        background: #f3f4f6;
        color: #6b7280;
    }

        .action-btn-compact.more:hover[b-ym7baico9r] {
            background: #e5e7eb;
            color: #4b5563;
        }

/* Dropdown Actions */
.dropdown-actions[b-ym7baico9r] {
    position: relative;
}

.dropdown-menu-actions[b-ym7baico9r] {
    position: absolute;
    left: 1px;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 10;
    overflow: hidden;
}

.dropdown-item[b-ym7baico9r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
}

    .dropdown-item:hover[b-ym7baico9r] {
        background: #f9fafb;
        color: #1f2937;
    }

    .dropdown-item.danger[b-ym7baico9r] {
        color: #ef4444;
    }

        .dropdown-item.danger:hover[b-ym7baico9r] {
            background: #fef2f2;
        }

    .dropdown-item.success[b-ym7baico9r] {
        color: #22c55e;
    }

        .dropdown-item.success:hover[b-ym7baico9r] {
            background: #f0fdf4;
        }

    .dropdown-item i[b-ym7baico9r] {
        font-size: 12px;
        width: 16px;
        text-align: center;
    }

/* Mobile Cards Container (Keep existing styles) */
.mobile-cards-container[b-ym7baico9r] {
    display: none;
    padding: 20px;
    gap: 16px;
}

.customer-card[b-ym7baico9r] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s;
    border: 1px solid #e5e7eb;
}

    .customer-card.blocked-card[b-ym7baico9r] {
        background: #fef2f2;
        border-color: #fca5a5;
    }

    .customer-card:hover[b-ym7baico9r] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

.card-header[b-ym7baico9r] {
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-info-mobile[b-ym7baico9r] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-avatar-mobile[b-ym7baico9r] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
}

.customer-avatar-placeholder-mobile[b-ym7baico9r] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 20px;
}

.customer-name-mobile[b-ym7baico9r] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.customer-code-mobile[b-ym7baico9r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.status-badge-mobile[b-ym7baico9r] {
    font-size: 20px;
}

    .status-badge-mobile.active[b-ym7baico9r] {
        color: #22c55e;
    }

    .status-badge-mobile.blocked[b-ym7baico9r] {
        color: #ef4444;
    }

.card-body[b-ym7baico9r] {
    padding: 16px;
}

.info-row[b-ym7baico9r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .info-row:last-child[b-ym7baico9r] {
        border-bottom: none;
    }

.info-label[b-ym7baico9r] {
    color: #6b7280;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-value[b-ym7baico9r] {
    font-weight: 600;
    color: #1f2937;
    text-align: right;
}

.sub-info[b-ym7baico9r] {
    font-size: 12px;
    color: #9ca3af;
    font-weight: normal;
}

.card-actions[b-ym7baico9r] {
    padding: 12px 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.mobile-action-btn[b-ym7baico9r] {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .mobile-action-btn.sale[b-ym7baico9r] {
        background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
        color: white;
    }

    .mobile-action-btn.view[b-ym7baico9r] {
        background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
        color: white;
    }

    .mobile-action-btn.edit[b-ym7baico9r] {
        background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
        color: #713f12;
    }

    .mobile-action-btn.block[b-ym7baico9r] {
        background: linear-gradient(135deg, #fca5a5 0%, #ef4444 100%);
        color: white;
    }

    .mobile-action-btn.unblock[b-ym7baico9r] {
        background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
        color: white;
    }

/* Pagination */
.pagination-container[b-ym7baico9r] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #e5e7eb;
    background: #f9fafb;
}

.pagination-info[b-ym7baico9r] {
    color: #6b7280;
    font-size: 14px;
}

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

.pagination-btn[b-ym7baico9r] {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pagination-btn:hover:not(:disabled)[b-ym7baico9r] {
        border-color: #667eea;
        color: #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .pagination-btn.active[b-ym7baico9r] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
    }

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

/* Loading and States */
.loading-container[b-ym7baico9r],
.error-container[b-ym7baico9r],
.empty-state[b-ym7baico9r],
.unauthorized-container[b-ym7baico9r] {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 40px;
    text-align: center;
}

.spinner-container[b-ym7baico9r] {
    text-align: center;
}

.spinner[b-ym7baico9r] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-ym7baico9r 0.8s linear infinite;
    margin: 0 auto 20px;
}

.loading-text[b-ym7baico9r] {
    color: #4c1d95;
    font-weight: 600;
    font-size: 18px;
}

.error-icon[b-ym7baico9r],
.empty-icon[b-ym7baico9r],
.unauthorized-icon[b-ym7baico9r] {
    font-size: 64px;
    margin-bottom: 20px;
}

.error-icon[b-ym7baico9r] {
    color: #ef4444;
}

.empty-icon[b-ym7baico9r] {
    color: #9ca3af;
}

.unauthorized-icon[b-ym7baico9r] {
    color: #6b7280;
}

/* Button Styles */
.btn-gradient-primary[b-ym7baico9r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-gradient-primary:hover[b-ym7baico9r] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

/* Animations */
@keyframes spin-b-ym7baico9r {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1400px) {
    .customers-table-compact .th-customer[b-ym7baico9r] {
        width: 28%;
    }

    .customers-table-compact .th-contact[b-ym7baico9r] {
        width: 18%;
    }

    .customers-table-compact .th-purchases[b-ym7baico9r] {
        width: 18%;
    }

    .customers-table-compact .th-agent[b-ym7baico9r] {
        width: 20%;
    }

    .customers-table-compact .th-actions[b-ym7baico9r] {
        width: 16%;
    }

    .customer-name-compact[b-ym7baico9r] {
        max-width: 120px;
    }
}

@media (max-width: 1200px) {
    .search-filter-section[b-ym7baico9r] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container[b-ym7baico9r] {
        min-width: auto;
    }

    .filter-controls[b-ym7baico9r] {
        justify-content: space-between;
        width: 100%;
    }

    .customers-table-compact[b-ym7baico9r] {
        font-size: 13px;
    }

        .customers-table-compact th[b-ym7baico9r],
        .customers-table-compact td[b-ym7baico9r] {
            padding: 10px 12px;
        }

    .customer-avatar-compact[b-ym7baico9r],
    .customer-avatar-placeholder-compact[b-ym7baico9r] {
        width: 32px;
        height: 32px;
    }

    .customer-name-compact[b-ym7baico9r] {
        font-size: 13px;
    }

    .customer-code-badge[b-ym7baico9r] {
        font-size: 10px;
        padding: 2px 4px;
    }
}

@media (max-width: 992px) {
    /* Hide some columns on tablets */
    .customers-table-compact .th-agent[b-ym7baico9r],
    .customers-table-compact .cell-agent-status[b-ym7baico9r] {
        display: none;
    }

    .customers-table-compact .th-customer[b-ym7baico9r] {
        width: 35%;
    }

    .customers-table-compact .th-contact[b-ym7baico9r] {
        width: 25%;
    }

    .customers-table-compact .th-purchases[b-ym7baico9r] {
        width: 25%;
    }

    .customers-table-compact .th-actions[b-ym7baico9r] {
        width: 15%;
    }
}

@media (max-width: 768px) {
    .merchant-customers-page[b-ym7baico9r] {
        padding: 16px;
    }

    .page-header-enhanced[b-ym7baico9r] {
        padding: 20px;
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-ym7baico9r] {
        width: 100%;
    }

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

    .page-title-modern[b-ym7baico9r] {
        font-size: 24px;
    }

    .title-icon[b-ym7baico9r] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .search-filter-section[b-ym7baico9r] {
        padding: 16px;
        gap: 12px;
    }

    .filter-controls[b-ym7baico9r] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-select[b-ym7baico9r],
    .refresh-btn[b-ym7baico9r] {
        width: 100%;
    }

    /* Hide desktop table, show mobile cards */
    .desktop-table-container[b-ym7baico9r] {
        display: none;
    }

    .mobile-cards-container[b-ym7baico9r] {
        display: flex;
        flex-direction: column;
    }

    .pagination-container[b-ym7baico9r] {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-controls[b-ym7baico9r] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-ym7baico9r] {
        font-size: 20px;
        flex-direction: column;
        text-align: center;
    }

    .breadcrumb-modern[b-ym7baico9r] {
        font-size: 12px;
    }

    .mobile-action-btn[b-ym7baico9r] {
        font-size: 12px;
        padding: 6px 8px;
    }

    .pagination-btn[b-ym7baico9r] {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .merchant-customers-page[b-ym7baico9r] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .merchant-customers-page[b-ym7baico9r]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-ym7baico9r],
[data-theme="dark"] .search-filter-section[b-ym7baico9r],
[data-theme="dark"] .customers-content[b-ym7baico9r],
[data-theme="dark"] .customer-card[b-ym7baico9r],
[data-theme="dark"] .loading-container[b-ym7baico9r],
[data-theme="dark"] .error-container[b-ym7baico9r],
[data-theme="dark"] .empty-state[b-ym7baico9r],
[data-theme="dark"] .unauthorized-container[b-ym7baico9r] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .search-input[b-ym7baico9r],
[data-theme="dark"] .filter-select[b-ym7baico9r] {
    background: rgba(51, 65, 85, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

[data-theme="dark"] .customers-table-compact thead[b-ym7baico9r] {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.5) 0%, rgba(30, 41, 59, 0.5) 100%);
}

[data-theme="dark"] .customers-table-compact tbody tr[b-ym7baico9r] {
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .customers-table-compact tbody tr:hover[b-ym7baico9r] {
        background: rgba(102, 126, 234, 0.1);
    }

[data-theme="dark"] .customer-name-compact[b-ym7baico9r],
[data-theme="dark"] .page-subtitle-enhanced[b-ym7baico9r] {
    color: #e2e8f0;
}

[data-theme="dark"] .customer-secondary[b-ym7baico9r],
[data-theme="dark"] .order-count-compact[b-ym7baico9r],
[data-theme="dark"] .info-label[b-ym7baico9r] {
    color: #9ca3af;
}

[data-theme="dark"] .dropdown-menu-actions[b-ym7baico9r] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .dropdown-item[b-ym7baico9r] {
    color: #e2e8f0;
}

    [data-theme="dark"] .dropdown-item:hover[b-ym7baico9r] {
        background: rgba(51, 65, 85, 0.5);
    }
/* _content/Sahelly/Components/Pages/Merchant/MerchantDashboard.razor.rz.scp.css */

/* Merchant Dashboard Page - Modern Professional Design */
.merchant-dashboard-page[b-xsik9sfg9h] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .merchant-dashboard-page[b-xsik9sfg9h]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .merchant-dashboard-page > *[b-xsik9sfg9h] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-xsik9sfg9h] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-xsik9sfg9h] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-xsik9sfg9h] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-xsik9sfg9h] {
        color: #667eea;
    }

.breadcrumb-separator[b-xsik9sfg9h] {
    color: #d1d5db;
}

.breadcrumb-current[b-xsik9sfg9h] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-xsik9sfg9h] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-xsik9sfg9h] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Loading Container */
.loading-container[b-xsik9sfg9h] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-container[b-xsik9sfg9h] {
    text-align: center;
}

.spinner[b-xsik9sfg9h] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-xsik9sfg9h 0.8s linear infinite;
    margin: 0 auto 20px;
}

.loading-text[b-xsik9sfg9h] {
    color: #4c1d95;
    font-weight: 600;
    font-size: 18px;
}

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

/* Stats Grid */
.stats-grid[b-xsik9sfg9h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-xsik9sfg9h] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-xsik9sfg9h]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-xsik9sfg9h] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-xsik9sfg9h]::before {
            opacity: 1;
        }

.stat-icon[b-xsik9sfg9h] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-card.revenue .stat-icon[b-xsik9sfg9h] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.stat-card.orders .stat-icon[b-xsik9sfg9h] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

.stat-card.customers .stat-icon[b-xsik9sfg9h] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.stat-card.pending .stat-icon[b-xsik9sfg9h] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.warning .stat-icon[b-xsik9sfg9h] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.stat-card.balance .stat-icon[b-xsik9sfg9h] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
}

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

.stat-title[b-xsik9sfg9h] {
    font-size: 16px;
    font-weight: 600;
    color: #4b5563;
    margin: 0 0 8px 0;
}

.stat-value[b-xsik9sfg9h] {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-change[b-xsik9sfg9h] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

    .stat-change.positive[b-xsik9sfg9h] {
        color: #10b981;
    }

    .stat-change.negative[b-xsik9sfg9h] {
        color: #ef4444;
    }

.stat-subtitle[b-xsik9sfg9h] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.stat-action[b-xsik9sfg9h] {
    background: transparent;
    border: none;
    color: #667eea;
    font-weight: 600;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    margin-top: 8px;
}

    .stat-action:hover[b-xsik9sfg9h] {
        color: #4338ca;
        transform: translateX(4px);
    }

/* Quick Actions */
.quick-actions[b-xsik9sfg9h] {
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.section-title[b-xsik9sfg9h] {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 10px;
}

.actions-grid[b-xsik9sfg9h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.action-card[b-xsik9sfg9h] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

    .action-card:hover[b-xsik9sfg9h] {
        transform: translateY(-5px);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.1);
    }

    .action-card i[b-xsik9sfg9h] {
        font-size: 32px;
        color: #667eea;
        transition: all 0.3s;
    }

    .action-card:hover i[b-xsik9sfg9h] {
        transform: scale(1.1);
        color: #4338ca;
    }

    .action-card span[b-xsik9sfg9h] {
        font-weight: 600;
        color: #4b5563;
        font-size: 15px;
    }

/* Charts Section */
.charts-section[b-xsik9sfg9h] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.chart-container[b-xsik9sfg9h] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.chart-header[b-xsik9sfg9h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.chart-title[b-xsik9sfg9h] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #4c1d95;
}

.chart-controls[b-xsik9sfg9h] {
    display: flex;
    gap: 8px;
}

.chart-control[b-xsik9sfg9h] {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
}

    .chart-control:hover[b-xsik9sfg9h] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

    .chart-control.active[b-xsik9sfg9h] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    }

.chart-link[b-xsik9sfg9h] {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
}

    .chart-link:hover[b-xsik9sfg9h] {
        color: #4338ca;
        transform: translateX(4px);
    }

.chart-body[b-xsik9sfg9h] {
    padding: 24px;
    flex: 1;
    min-height: 300px;
}

.sales-chart-wrapper[b-xsik9sfg9h] {
    width: 100%;
    height: 300px;
}

.no-data[b-xsik9sfg9h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: #9ca3af;
    text-align: center;
    padding: 20px;
}

    .no-data i[b-xsik9sfg9h] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-data p[b-xsik9sfg9h] {
        font-size: 16px;
        font-weight: 500;
    }

/* Products List */
.products-list[b-xsik9sfg9h] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-item[b-xsik9sfg9h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.3s;
}

    .product-item:hover[b-xsik9sfg9h] {
        background: rgba(102, 126, 234, 0.05);
        transform: translateX(4px);
    }

.product-info[b-xsik9sfg9h] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-image[b-xsik9sfg9h] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.product-details[b-xsik9sfg9h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-name[b-xsik9sfg9h] {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.product-sales[b-xsik9sfg9h] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.product-revenue[b-xsik9sfg9h] {
    font-weight: 700;
    font-size: 16px;
    color: #10b981;
}

/* Bottom Section */
.bottom-section[b-xsik9sfg9h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.activities-container[b-xsik9sfg9h],
.agents-container[b-xsik9sfg9h] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.section-header[b-xsik9sfg9h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.section-title[b-xsik9sfg9h] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #4c1d95;
}

.section-link[b-xsik9sfg9h] {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
}

    .section-link:hover[b-xsik9sfg9h] {
        color: #4338ca;
        transform: translateX(4px);
    }

.refresh-btn[b-xsik9sfg9h] {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    cursor: pointer;
    transition: all 0.3s;
}

    .refresh-btn:hover[b-xsik9sfg9h] {
        background: rgba(102, 126, 234, 0.1);
        color: #4338ca;
    }

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

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

/* Activities List */
.activities-list[b-xsik9sfg9h],
.agents-list[b-xsik9sfg9h] {
    padding: 24px;
    overflow-y: auto;
    max-height: 400px;
}

.activity-item[b-xsik9sfg9h] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .activity-item:last-child[b-xsik9sfg9h] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.activity-icon[b-xsik9sfg9h] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

    .activity-icon.order[b-xsik9sfg9h] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

    .activity-icon.product[b-xsik9sfg9h] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .activity-icon.customer[b-xsik9sfg9h] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

    .activity-icon.payment[b-xsik9sfg9h] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .activity-icon.return[b-xsik9sfg9h] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .activity-icon.default[b-xsik9sfg9h] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    }

.activity-content[b-xsik9sfg9h] {
    flex: 1;
}

.activity-text[b-xsik9sfg9h] {
    font-size: 14px;
    color: #4b5563;
    margin: 0 0 4px 0;
}

.activity-time[b-xsik9sfg9h] {
    font-size: 12px;
    color: #9ca3af;
}

/* Agent List */
.agent-item[b-xsik9sfg9h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .agent-item:last-child[b-xsik9sfg9h] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.agent-info[b-xsik9sfg9h] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-image[b-xsik9sfg9h] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.agent-details[b-xsik9sfg9h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-name[b-xsik9sfg9h] {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.agent-stats[b-xsik9sfg9h] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.agent-performance[b-xsik9sfg9h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 100px;
}

.performance-bar[b-xsik9sfg9h] {
    width: 100px;
    height: 6px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.performance-fill[b-xsik9sfg9h] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.performance-text[b-xsik9sfg9h] {
    font-size: 12px;
    font-weight: 600;
    color: #4c1d95;
}

/* Error & Unauthorized Containers */
.error-container[b-xsik9sfg9h],
.unauthorized-container[b-xsik9sfg9h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 48px 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

    .error-container i[b-xsik9sfg9h],
    .unauthorized-container i[b-xsik9sfg9h] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-container i[b-xsik9sfg9h] {
        color: #9333ea;
    }

    .error-container h3[b-xsik9sfg9h],
    .unauthorized-container h3[b-xsik9sfg9h] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .error-container p[b-xsik9sfg9h],
    .unauthorized-container p[b-xsik9sfg9h] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .error-container .btn[b-xsik9sfg9h],
    .unauthorized-container .btn[b-xsik9sfg9h] {
        padding: 12px 24px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 600;
        border: none;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }

        .error-container .btn:hover[b-xsik9sfg9h],
        .unauthorized-container .btn:hover[b-xsik9sfg9h] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

/* Button Styles */
.btn-gradient-primary[b-xsik9sfg9h] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-xsik9sfg9h] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Dark Theme Support */
[data-theme="dark"] .merchant-dashboard-page[b-xsik9sfg9h] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .merchant-dashboard-page[b-xsik9sfg9h]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-xsik9sfg9h],
[data-theme="dark"] .stat-card[b-xsik9sfg9h],
[data-theme="dark"] .quick-actions[b-xsik9sfg9h],
[data-theme="dark"] .chart-container[b-xsik9sfg9h],
[data-theme="dark"] .activities-container[b-xsik9sfg9h],
[data-theme="dark"] .agents-container[b-xsik9sfg9h],
[data-theme="dark"] .error-container[b-xsik9sfg9h],
[data-theme="dark"] .unauthorized-container[b-xsik9sfg9h] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .page-subtitle[b-xsik9sfg9h],
[data-theme="dark"] .stat-title[b-xsik9sfg9h],
[data-theme="dark"] .stat-subtitle[b-xsik9sfg9h],
[data-theme="dark"] .activity-text[b-xsik9sfg9h],
[data-theme="dark"] .product-name[b-xsik9sfg9h] {
    color: #e2e8f0;
}

[data-theme="dark"] .breadcrumb-link[b-xsik9sfg9h],
[data-theme="dark"] .activity-time[b-xsik9sfg9h],
[data-theme="dark"] .product-sales[b-xsik9sfg9h],
[data-theme="dark"] .agent-stats[b-xsik9sfg9h] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-current[b-xsik9sfg9h],
[data-theme="dark"] .section-title[b-xsik9sfg9h],
[data-theme="dark"] .chart-title[b-xsik9sfg9h],
[data-theme="dark"] .performance-text[b-xsik9sfg9h] {
    color: #e2e8f0;
}

[data-theme="dark"] .action-card[b-xsik9sfg9h] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(102, 126, 234, 0.2);
}

    [data-theme="dark"] .action-card:hover[b-xsik9sfg9h] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        border-color: rgba(102, 126, 234, 0.4);
    }

    [data-theme="dark"] .action-card span[b-xsik9sfg9h] {
        color: #e2e8f0;
    }

[data-theme="dark"] .chart-header[b-xsik9sfg9h],
[data-theme="dark"] .section-header[b-xsik9sfg9h] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .chart-control[b-xsik9sfg9h] {
    background: rgba(30, 41, 59, 0.5);
    color: #9ca3af;
    border-color: rgba(102, 126, 234, 0.2);
}

    [data-theme="dark"] .chart-control:hover[b-xsik9sfg9h] {
        background: rgba(102, 126, 234, 0.2);
        color: #a78bfa;
    }

[data-theme="dark"] .product-item[b-xsik9sfg9h] {
    background: rgba(30, 41, 59, 0.6);
}

    [data-theme="dark"] .product-item:hover[b-xsik9sfg9h] {
        background: rgba(102, 126, 234, 0.1);
    }

[data-theme="dark"] .activity-item[b-xsik9sfg9h],
[data-theme="dark"] .agent-item[b-xsik9sfg9h] {
    border-bottom-color: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .no-data[b-xsik9sfg9h] {
    color: #64748b;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .charts-section[b-xsik9sfg9h],
    .bottom-section[b-xsik9sfg9h] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .merchant-dashboard-page[b-xsik9sfg9h] {
        padding: 16px;
    }

    .page-header[b-xsik9sfg9h] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-xsik9sfg9h] {
        font-size: 28px;
    }

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

    .stat-card[b-xsik9sfg9h] {
        padding: 20px;
    }

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

    .chart-header[b-xsik9sfg9h] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .chart-controls[b-xsik9sfg9h] {
        width: 100%;
    }

    .chart-control[b-xsik9sfg9h] {
        flex: 1;
        text-align: center;
    }

    .activities-list[b-xsik9sfg9h],
    .agents-list[b-xsik9sfg9h] {
        max-height: 300px;
    }
}

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

    .stat-card[b-xsik9sfg9h] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .stat-content[b-xsik9sfg9h] {
        width: 100%;
    }

    .actions-grid[b-xsik9sfg9h] {
        grid-template-columns: 1fr;
    }

    .agent-performance[b-xsik9sfg9h] {
        display: none;
    }

    .agent-info[b-xsik9sfg9h] {
        width: 100%;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantExpense.razor.rz.scp.css */
/* Expenses Page - Modern Professional Design
   Based on the design system from app.css and AddProduct.razor.css
   ========================================================= */

/* Page Container */
.expenses-page[b-icudyp8ms7] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .expenses-page[b-icudyp8ms7]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .expenses-page > *[b-icudyp8ms7] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Header Section */
.page-header-enhanced[b-icudyp8ms7] {
    margin-bottom: 32px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content[b-icudyp8ms7] {
    flex: 1;
}

.breadcrumb-modern[b-icudyp8ms7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item[b-icudyp8ms7] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-icudyp8ms7] {
        color: #667eea;
    }

.separator[b-icudyp8ms7] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-icudyp8ms7] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-icudyp8ms7] {
    margin-bottom: 4px;
}

.page-title-modern[b-icudyp8ms7] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.title-icon[b-icudyp8ms7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-icudyp8ms7] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-icudyp8ms7] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Statistics Section */
.stats-section[b-icudyp8ms7] {
    margin-bottom: 32px;
}

.stats-grid[b-icudyp8ms7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stat-card[b-icudyp8ms7] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .stat-card:hover[b-icudyp8ms7] {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-color: rgba(102, 126, 234, 0.3);
    }

.stat-icon[b-icudyp8ms7] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

    .stat-icon.total[b-icudyp8ms7] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.pending[b-icudyp8ms7] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .stat-icon.approved[b-icudyp8ms7] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .stat-icon.recurring[b-icudyp8ms7] {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

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

.stat-title[b-icudyp8ms7] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 500;
}

.stat-value[b-icudyp8ms7] {
    font-size: 28px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 2px;
    line-height: 1;
}

.stat-subtitle[b-icudyp8ms7] {
    font-size: 13px;
    color: #9ca3af;
    font-weight: 400;
}

/* Filters Section */
.filters-section[b-icudyp8ms7] {
    margin-bottom: 24px;
}

.filters-container[b-icudyp8ms7] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-box[b-icudyp8ms7] {
    flex: 1;
    min-width: 300px;
    position: relative;
}

    .search-box i[b-icudyp8ms7] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 16px;
    }

    .search-box input[b-icudyp8ms7] {
        width: 100%;
        padding: 12px 16px 12px 44px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 15px;
        transition: all 0.3s;
        color: #1f2937;
    }

        .search-box input:focus[b-icudyp8ms7] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.filter-group[b-icudyp8ms7] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select[b-icudyp8ms7] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 150px;
}

    .filter-select:focus[b-icudyp8ms7] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-filter[b-icudyp8ms7],
.btn-reset[b-icudyp8ms7] {
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-filter[b-icudyp8ms7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-filter:hover[b-icudyp8ms7] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-reset[b-icudyp8ms7] {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

    .btn-reset:hover[b-icudyp8ms7] {
        background: rgba(107, 114, 128, 0.2);
        color: #4b5563;
    }

/* Table Section */
.table-section[b-icudyp8ms7] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.table-container[b-icudyp8ms7] {
    overflow-x: auto;
}

.modern-table[b-icudyp8ms7] {
    width: 100%;
    border-collapse: collapse;
}

    .modern-table thead[b-icudyp8ms7] {
        background: rgba(102, 126, 234, 0.05);
    }

    .modern-table th[b-icudyp8ms7] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

    .modern-table tbody tr[b-icudyp8ms7] {
        border-bottom: 1px solid rgba(102, 126, 234, 0.05);
        transition: all 0.2s;
    }

        .modern-table tbody tr:hover[b-icudyp8ms7] {
            background: rgba(102, 126, 234, 0.02);
        }

    .modern-table td[b-icudyp8ms7] {
        padding: 16px;
        text-align: right;
        color: #374151;
    }

.date-cell[b-icudyp8ms7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-main[b-icudyp8ms7] {
    font-weight: 600;
    color: #1f2937;
}

.date-sub[b-icudyp8ms7] {
    font-size: 12px;
    color: #9ca3af;
}

.type-badge[b-icudyp8ms7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

    .type-badge.operational[b-icudyp8ms7] {
        background: rgba(139, 92, 246, 0.1);
        color: #7c3aed;
    }

    .type-badge.transportation[b-icudyp8ms7] {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

    .type-badge.marketing[b-icudyp8ms7] {
        background: rgba(236, 72, 153, 0.1);
        color: #db2777;
    }

    .type-badge.other[b-icudyp8ms7] {
        background: rgba(107, 114, 128, 0.1);
        color: #6b7280;
    }

.title-cell[b-icudyp8ms7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-main[b-icudyp8ms7] {
    font-weight: 600;
    color: #1f2937;
}

.recurring-badge[b-icudyp8ms7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

    .recurring-badge i[b-icudyp8ms7] {
        font-size: 10px;
    }

.amount-value[b-icudyp8ms7] {
    font-weight: 700;
    color: #1f2937;
    font-size: 16px;
}

.invoice-number[b-icudyp8ms7],
.supplier-name[b-icudyp8ms7] {
    color: #6b7280;
}

.status-badge[b-icudyp8ms7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

    .status-badge.approved[b-icudyp8ms7] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .status-badge.pending[b-icudyp8ms7] {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

.action-buttons[b-icudyp8ms7] {
    display: flex;
    gap: 8px;
}

.btn-action[b-icudyp8ms7] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 14px;
}

    .btn-action.view[b-icudyp8ms7] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

        .btn-action.view:hover[b-icudyp8ms7] {
            background: #667eea;
            color: white;
        }

    .btn-action.edit[b-icudyp8ms7] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

        .btn-action.edit:hover[b-icudyp8ms7] {
            background: #f59e0b;
            color: white;
        }

    .btn-action.delete[b-icudyp8ms7] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

        .btn-action.delete:hover[b-icudyp8ms7] {
            background: #ef4444;
            color: white;
        }

    .btn-action.attachment[b-icudyp8ms7] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

        .btn-action.attachment:hover[b-icudyp8ms7] {
            background: #10b981;
            color: white;
        }

/* Mobile Cards */
.mobile-cards[b-icudyp8ms7] {
    display: none;
}

.expense-card[b-icudyp8ms7] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

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

.card-header[b-icudyp8ms7] {
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.expense-date[b-icudyp8ms7] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
}

.card-body[b-icudyp8ms7] {
    padding: 16px;
}

.expense-title[b-icudyp8ms7] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.expense-details[b-icudyp8ms7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-item[b-icudyp8ms7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-label[b-icudyp8ms7] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.card-footer[b-icudyp8ms7] {
    padding: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    gap: 8px;
}

.btn-mobile-action[b-icudyp8ms7] {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

    .btn-mobile-action:hover[b-icudyp8ms7] {
        background: #667eea;
        color: white;
    }

    .btn-mobile-action.delete[b-icudyp8ms7] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

        .btn-mobile-action.delete:hover[b-icudyp8ms7] {
            background: #ef4444;
            color: white;
        }

/* Empty State */
.empty-state[b-icudyp8ms7] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-icudyp8ms7] {
    font-size: 80px;
    color: #e5e7eb;
    margin-bottom: 24px;
}

.empty-state h3[b-icudyp8ms7] {
    font-size: 24px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.empty-state p[b-icudyp8ms7] {
    color: #6b7280;
    margin-bottom: 24px;
}

/* Pagination */
.pagination-container[b-icudyp8ms7] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.pagination-btn[b-icudyp8ms7] {
    min-width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: rgba(102, 126, 234, 0.05);
    color: #6b7280;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pagination-btn:hover:not(:disabled)[b-icudyp8ms7] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        border-color: rgba(102, 126, 234, 0.2);
    }

    .pagination-btn.active[b-icudyp8ms7] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

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

/* Loading State */
.loading-container[b-icudyp8ms7] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-container[b-icudyp8ms7] {
    text-align: center;
}

.spinner[b-icudyp8ms7] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(102, 126, 234, 0.1);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-icudyp8ms7 1s linear infinite;
    margin: 0 auto 20px;
}

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

/* Unauthorized */
.unauthorized-container[b-icudyp8ms7] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.unauthorized-content[b-icudyp8ms7] {
    text-align: center;
    max-width: 400px;
    padding: 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-icudyp8ms7] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-icudyp8ms7] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .unauthorized-content p[b-icudyp8ms7] {
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Gradient Button */
.btn-gradient-primary[b-icudyp8ms7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-gradient-primary:hover[b-icudyp8ms7] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .btn-gradient-primary i[b-icudyp8ms7] {
        font-size: 16px;
    }

/* Dark Theme Support */
[data-theme="dark"] .expenses-page[b-icudyp8ms7] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .expenses-page[b-icudyp8ms7]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-icudyp8ms7],
[data-theme="dark"] .stat-card[b-icudyp8ms7],
[data-theme="dark"] .filters-container[b-icudyp8ms7],
[data-theme="dark"] .table-section[b-icudyp8ms7],
[data-theme="dark"] .expense-card[b-icudyp8ms7] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-subtitle-enhanced[b-icudyp8ms7],
[data-theme="dark"] .stat-title[b-icudyp8ms7],
[data-theme="dark"] .breadcrumb-item[b-icudyp8ms7],
[data-theme="dark"] .invoice-number[b-icudyp8ms7],
[data-theme="dark"] .supplier-name[b-icudyp8ms7],
[data-theme="dark"] .detail-label[b-icudyp8ms7],
[data-theme="dark"] .expense-date[b-icudyp8ms7] {
    color: #e2e8f0;
}

[data-theme="dark"] .stat-value[b-icudyp8ms7],
[data-theme="dark"] .date-main[b-icudyp8ms7],
[data-theme="dark"] .title-main[b-icudyp8ms7],
[data-theme="dark"] .amount-value[b-icudyp8ms7],
[data-theme="dark"] .expense-title[b-icudyp8ms7],
[data-theme="dark"] .modern-table td[b-icudyp8ms7] {
    color: #f3f4f6;
}

[data-theme="dark"] .search-box input[b-icudyp8ms7],
[data-theme="dark"] .filter-select[b-icudyp8ms7] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-icudyp8ms7],
    [data-theme="dark"] .filter-select:focus[b-icudyp8ms7] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .modern-table thead[b-icudyp8ms7] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .modern-table tbody tr:hover[b-icudyp8ms7] {
    background: rgba(102, 126, 234, 0.05);
}

[data-theme="dark"] .btn-reset[b-icudyp8ms7] {
    background: rgba(107, 114, 128, 0.2);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-reset:hover[b-icudyp8ms7] {
        background: rgba(107, 114, 128, 0.3);
    }

[data-theme="dark"] .unauthorized-content[b-icudyp8ms7] {
    background: rgba(30, 41, 59, 0.95);
}

    [data-theme="dark"] .unauthorized-content h3[b-icudyp8ms7] {
        color: #f3f4f6;
    }

    [data-theme="dark"] .unauthorized-content p[b-icudyp8ms7] {
        color: #9ca3af;
    }

/* Responsive Design */
@media (max-width: 992px) {
    .page-header-enhanced[b-icudyp8ms7] {
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-icudyp8ms7] {
        align-self: flex-end;
    }

    .filters-container[b-icudyp8ms7] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-icudyp8ms7] {
        min-width: 100%;
    }

    .filter-group[b-icudyp8ms7] {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .expenses-page[b-icudyp8ms7] {
        padding: 16px;
    }

    .page-header-enhanced[b-icudyp8ms7] {
        padding: 20px;
    }

    .page-title-modern[b-icudyp8ms7] {
        font-size: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .title-icon[b-icudyp8ms7] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

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

    .desktop-only[b-icudyp8ms7] {
        display: none;
    }

    .mobile-only[b-icudyp8ms7] {
        display: block;
    }

    .mobile-cards[b-icudyp8ms7] {
        display: block;
    }

    .filter-select[b-icudyp8ms7] {
        min-width: 100%;
    }

    .filter-group[b-icudyp8ms7] {
        flex-direction: column;
    }

    .btn-filter[b-icudyp8ms7],
    .btn-reset[b-icudyp8ms7] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .stat-card[b-icudyp8ms7] {
        flex-direction: column;
        text-align: center;
    }

    .stat-icon[b-icudyp8ms7] {
        margin-bottom: 12px;
    }

    .breadcrumb-modern[b-icudyp8ms7] {
        font-size: 12px;
    }

    .page-subtitle-enhanced[b-icudyp8ms7] {
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .header-actions[b-icudyp8ms7],
    .filters-section[b-icudyp8ms7],
    .action-buttons[b-icudyp8ms7],
    .btn-mobile-action[b-icudyp8ms7],
    .pagination-container[b-icudyp8ms7] {
        display: none !important;
    }

    .expenses-page[b-icudyp8ms7] {
        background: white;
        padding: 0;
    }

    .modern-table[b-icudyp8ms7] {
        border: 1px solid #e5e7eb;
    }

        .modern-table th[b-icudyp8ms7],
        .modern-table td[b-icudyp8ms7] {
            border: 1px solid #e5e7eb;
        }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantProduct.razor.rz.scp.css */

/* ===============================
   Merchant Products Page - Modern Professional CSS
   ���� ����� �������� ������ - ����� ���� ��������
   =============================== */

/* Page Container */
.products-page[b-0faiavdrgo] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .products-page[b-0faiavdrgo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .products-page > *[b-0faiavdrgo] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-0faiavdrgo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    gap: 20px;
    flex-wrap: wrap;
}

.header-content[b-0faiavdrgo] {
    flex: 1;
}

.breadcrumb[b-0faiavdrgo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-0faiavdrgo] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-0faiavdrgo] {
        color: #667eea;
    }

.breadcrumb-separator[b-0faiavdrgo] {
    color: #d1d5db;
}

.breadcrumb-current[b-0faiavdrgo] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-0faiavdrgo] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-0faiavdrgo] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-0faiavdrgo] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Gradient Buttons - Following Users.razor.css pattern */
.btn-primary[b-0faiavdrgo] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-primary:hover[b-0faiavdrgo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-0faiavdrgo] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-secondary:hover[b-0faiavdrgo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Statistics Grid */
.stats-grid[b-0faiavdrgo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-0faiavdrgo]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-0faiavdrgo] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-0faiavdrgo]::before {
            opacity: 1;
        }

.stat-icon[b-0faiavdrgo] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .stat-icon.products[b-0faiavdrgo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.active[b-0faiavdrgo] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-icon.low-stock[b-0faiavdrgo] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .stat-icon.out-stock[b-0faiavdrgo] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

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

.stat-value[b-0faiavdrgo] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-0faiavdrgo] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Filters Section */
.filters-section[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-0faiavdrgo] {
    position: relative;
    flex: 1;
    min-width: 300px;
}

    .search-box i[b-0faiavdrgo] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 16px;
    }

.search-input[b-0faiavdrgo] {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1e293b;
}

    .search-input:focus[b-0faiavdrgo] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-0faiavdrgo]::placeholder {
        color: #9ca3af;
    }

.filter-controls[b-0faiavdrgo] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select[b-0faiavdrgo] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    cursor: pointer;
    min-width: 180px;
}

    .filter-select:focus[b-0faiavdrgo] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.filter-toggle[b-0faiavdrgo] {
    display: flex;
    gap: 8px;
}

.btn-filter[b-0faiavdrgo] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-filter:hover[b-0faiavdrgo] {
        background: rgba(102, 126, 234, 0.2);
        border-color: #667eea;
        transform: translateY(-1px);
    }

    .btn-filter.active[b-0faiavdrgo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

.btn-export[b-0faiavdrgo] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-export:hover[b-0faiavdrgo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Loading State */
.loading-container[b-0faiavdrgo] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spinner[b-0faiavdrgo] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-0faiavdrgo 0.8s linear infinite;
}

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

.loading-text[b-0faiavdrgo] {
    margin-top: 20px;
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Products Table - Desktop */
.table-container[b-0faiavdrgo] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.products-table[b-0faiavdrgo] {
    width: 100%;
    border-collapse: collapse;
}

    .products-table th[b-0faiavdrgo] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .products-table td[b-0faiavdrgo] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
    }

    .products-table tbody tr[b-0faiavdrgo] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .products-table tbody tr:hover[b-0faiavdrgo] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .products-table tbody tr:last-child td[b-0faiavdrgo] {
            border-bottom: none;
        }

        .products-table tbody tr.deleted-product[b-0faiavdrgo] {
            opacity: 0.7;
        }

            .products-table tbody tr.deleted-product:hover[b-0faiavdrgo] {
                background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.1) 100%);
            }

/* Product Info Cell */
.product-info[b-0faiavdrgo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-0faiavdrgo] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

    .product-thumb:hover[b-0faiavdrgo] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .product-thumb.grayscale[b-0faiavdrgo] {
        filter: grayscale(100%);
    }

.product-name[b-0faiavdrgo] {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
    margin: 0 0 4px 0;
}

.product-name-en[b-0faiavdrgo] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Price Info */
.price-info[b-0faiavdrgo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price[b-0faiavdrgo] {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.sale-price[b-0faiavdrgo] {
    font-size: 14px;
    color: #ef4444;
    font-weight: 600;
}

/* Stock Badge */
.stock-badge[b-0faiavdrgo] {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

    .stock-badge.in-stock[b-0faiavdrgo] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .stock-badge.low-stock[b-0faiavdrgo] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .stock-badge.out-of-stock[b-0faiavdrgo] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

/* Status Badge */
.status-badge[b-0faiavdrgo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.active[b-0faiavdrgo] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-0faiavdrgo] {
        background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(107, 114, 128, 0.2) 100%);
        color: #6b7280;
        border: 1px solid rgba(156, 163, 175, 0.3);
    }

    .status-badge.pending[b-0faiavdrgo] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .status-badge.rejected[b-0faiavdrgo] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .status-badge.deleted[b-0faiavdrgo] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.3) 100%);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

/* Action Buttons */
.action-buttons[b-0faiavdrgo] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-icon[b-0faiavdrgo] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

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

    .btn-icon:hover[b-0faiavdrgo]::before {
        width: 100px;
        height: 100px;
    }

    .btn-icon.inventory[b-0faiavdrgo] {
        background: linear-gradient(135deg, #4096b4 0%, #2670ad 100%);
        color: white;
    }

        .btn-icon.inventory:hover[b-0faiavdrgo] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(64, 150, 180, 0.3);
        }

    .btn-icon.edit[b-0faiavdrgo] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

        .btn-icon.edit:hover[b-0faiavdrgo] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(90, 108, 179, 0.3);
        }

    .btn-icon.activate[b-0faiavdrgo],
    .btn-icon.deactivate[b-0faiavdrgo] {
        background: linear-gradient(135deg, #cd7ddb 0%, #d04e5f 100%);
        color: white;
    }

        .btn-icon.activate:hover[b-0faiavdrgo],
        .btn-icon.deactivate:hover[b-0faiavdrgo] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(205, 125, 219, 0.3);
        }

    .btn-icon.delete[b-0faiavdrgo] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
    }

        .btn-icon.delete:hover[b-0faiavdrgo] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(208, 78, 95, 0.3);
        }

    .btn-icon.restore[b-0faiavdrgo] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

        .btn-icon.restore:hover[b-0faiavdrgo] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 201, 104, 0.3);
        }

/* Mobile Product Cards */
.products-grid[b-0faiavdrgo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.product-card[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

    .product-card:hover[b-0faiavdrgo] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .product-card.deleted-product[b-0faiavdrgo] {
        opacity: 0.8;
        border-color: #ef4444;
    }

.product-card-header[b-0faiavdrgo] {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.product-image[b-0faiavdrgo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

    .product-image.grayscale[b-0faiavdrgo] {
        filter: grayscale(100%);
    }

.product-card:hover .product-image[b-0faiavdrgo] {
    transform: scale(1.1);
}

.product-card-header .status-badge[b-0faiavdrgo] {
    position: absolute;
    top: 12px;
    right: 12px;
}

.product-card-body[b-0faiavdrgo] {
    padding: 24px;
}

.product-title[b-0faiavdrgo] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.product-subtitle[b-0faiavdrgo] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

.product-details[b-0faiavdrgo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item[b-0faiavdrgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .detail-item:last-child[b-0faiavdrgo] {
        border-bottom: none;
    }

.detail-label[b-0faiavdrgo] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-0faiavdrgo] {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

    .detail-value.price[b-0faiavdrgo] {
        font-size: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.product-card-footer[b-0faiavdrgo] {
    padding: 0 24px 24px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-card-action[b-0faiavdrgo] {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .btn-card-action.inventory[b-0faiavdrgo] {
        background: linear-gradient(135deg, #4096b4 0%, #2670ad 100%);
        color: white;
    }

    .btn-card-action.edit[b-0faiavdrgo] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

    .btn-card-action.toggle[b-0faiavdrgo] {
        background: linear-gradient(135deg, #cd7ddb 0%, #d04e5f 100%);
        color: white;
    }

    .btn-card-action.delete[b-0faiavdrgo] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
    }

    .btn-card-action.restore[b-0faiavdrgo] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        color: white;
    }

    .btn-card-action:hover[b-0faiavdrgo] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

/* Pagination */
.pagination-container[b-0faiavdrgo] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pagination-btn[b-0faiavdrgo] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .pagination-btn:hover:not(:disabled)[b-0faiavdrgo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn.active[b-0faiavdrgo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn:disabled[b-0faiavdrgo] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* Empty State */
.empty-state[b-0faiavdrgo] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-0faiavdrgo] {
        font-size: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h3[b-0faiavdrgo] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-0faiavdrgo] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Inventory Modal */
.modal-overlay[b-0faiavdrgo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
    animation: fadeIn-b-0faiavdrgo 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

    to {
        opacity: 1;
    }
}

.modal-content[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp-b-0faiavdrgo 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.inventory-modal[b-0faiavdrgo] {
    display: flex;
    flex-direction: column;
}

.modal-header[b-0faiavdrgo] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-0faiavdrgo] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

.close-btn[b-0faiavdrgo] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .close-btn:hover[b-0faiavdrgo] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-0faiavdrgo] {
    padding: 30px;
    overflow-y: auto;
    max-height: calc(90vh - 200px);
}

/* Current Stock Info */
.current-stock-info[b-0faiavdrgo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.info-card[b-0faiavdrgo] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.info-icon[b-0faiavdrgo] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.info-content[b-0faiavdrgo] {
    display: flex;
    flex-direction: column;
}

.info-label[b-0faiavdrgo] {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.info-value[b-0faiavdrgo] {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Inventory Form */
.inventory-form[b-0faiavdrgo] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group[b-0faiavdrgo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-0faiavdrgo] {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .form-label i[b-0faiavdrgo] {
        font-size: 16px;
        color: #667eea;
    }

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

.form-control[b-0faiavdrgo] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1e293b;
}

    .form-control:focus[b-0faiavdrgo] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.input-with-currency[b-0faiavdrgo] {
    position: relative;
}

.currency-label[b-0faiavdrgo] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-weight: 500;
}

.form-hint[b-0faiavdrgo] {
    font-size: 13px;
    color: #6b7280;
}

    .form-hint.success[b-0faiavdrgo] {
        color: #059669;
    }

.form-row[b-0faiavdrgo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.modal-footer[b-0faiavdrgo] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
}

.button-spinner[b-0faiavdrgo] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right-color: white;
    border-radius: 50%;
    animation: spin-b-0faiavdrgo 0.8s linear infinite;
}

/* Unauthorized Container */
.unauthorized-container[b-0faiavdrgo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 40px;
}

    .unauthorized-container i[b-0faiavdrgo] {
        font-size: 80px;
        color: #667eea;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-0faiavdrgo] {
        font-size: 28px;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .unauthorized-container p[b-0faiavdrgo] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-grid[b-0faiavdrgo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .products-page[b-0faiavdrgo] {
        padding: 16px;
    }

    .page-header[b-0faiavdrgo] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        margin-bottom: 24px;
    }

    .header-actions[b-0faiavdrgo] {
        justify-content: stretch;
        flex-direction: column;
    }

        .header-actions button[b-0faiavdrgo] {
            width: 100%;
        }

    .page-title[b-0faiavdrgo] {
        font-size: 28px;
    }

    .page-subtitle[b-0faiavdrgo] {
        font-size: 16px;
    }

    .stats-grid[b-0faiavdrgo] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-0faiavdrgo] {
        padding: 20px;
    }

    .stat-icon[b-0faiavdrgo] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-0faiavdrgo] {
        font-size: 24px;
    }

    .filters-section[b-0faiavdrgo] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .search-box[b-0faiavdrgo] {
        min-width: 100%;
    }

    .filter-controls[b-0faiavdrgo] {
        width: 100%;
        flex-direction: column;
    }

        .filter-controls > *[b-0faiavdrgo] {
            width: 100%;
        }

    .filter-select[b-0faiavdrgo] {
        width: 100%;
    }

    /* Hide desktop table on mobile */
    .desktop-only[b-0faiavdrgo] {
        display: none !important;
    }

    /* Show mobile cards */
    .mobile-only[b-0faiavdrgo] {
        display: grid !important;
    }

    .products-grid[b-0faiavdrgo] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-card[b-0faiavdrgo] {
        margin: 0;
    }

    .pagination-container[b-0faiavdrgo] {
        flex-wrap: wrap;
        padding: 16px;
    }

    .modal-content[b-0faiavdrgo] {
        margin: 0;
        max-width: calc(100% - 32px);
        max-height: calc(100% - 32px);
    }

    .modal-header[b-0faiavdrgo] {
        padding: 20px;
    }

        .modal-header h3[b-0faiavdrgo] {
            font-size: 20px;
        }

    .modal-body[b-0faiavdrgo] {
        padding: 20px;
        max-height: calc(100vh - 180px);
    }

    .current-stock-info[b-0faiavdrgo] {
        grid-template-columns: 1fr;
    }

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

    .modal-footer[b-0faiavdrgo] {
        padding: 16px 20px;
        flex-direction: column-reverse;
    }

        .modal-footer button[b-0faiavdrgo] {
            width: 100%;
        }

    .empty-state[b-0faiavdrgo] {
        padding: 60px 20px;
    }

        .empty-state i[b-0faiavdrgo] {
            font-size: 60px;
        }

        .empty-state h3[b-0faiavdrgo] {
            font-size: 22px;
        }

        .empty-state p[b-0faiavdrgo] {
            font-size: 16px;
        }

    .btn-primary[b-0faiavdrgo],
    .btn-secondary[b-0faiavdrgo] {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .page-title[b-0faiavdrgo] {
        font-size: 24px;
    }

    .breadcrumb[b-0faiavdrgo] {
        font-size: 12px;
    }

    .stat-card[b-0faiavdrgo] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .btn-icon[b-0faiavdrgo] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .pagination-btn[b-0faiavdrgo] {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* Desktop Only */
@media (min-width: 769px) {
    .mobile-only[b-0faiavdrgo] {
        display: none !important;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .products-page[b-0faiavdrgo] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .products-page[b-0faiavdrgo]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-0faiavdrgo],
[data-theme="dark"] .stat-card[b-0faiavdrgo],
[data-theme="dark"] .filters-section[b-0faiavdrgo],
[data-theme="dark"] .table-container[b-0faiavdrgo],
[data-theme="dark"] .product-card[b-0faiavdrgo],
[data-theme="dark"] .pagination-container[b-0faiavdrgo],
[data-theme="dark"] .empty-state[b-0faiavdrgo],
[data-theme="dark"] .loading-container[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .products-table th[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(71, 85, 105, 0.2) 100%);
}

[data-theme="dark"] .products-table td[b-0faiavdrgo] {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .products-table tbody tr:hover[b-0faiavdrgo] {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .search-input[b-0faiavdrgo],
[data-theme="dark"] .filter-select[b-0faiavdrgo],
[data-theme="dark"] .form-control[b-0faiavdrgo] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-input:focus[b-0faiavdrgo],
    [data-theme="dark"] .filter-select:focus[b-0faiavdrgo],
    [data-theme="dark"] .form-control:focus[b-0faiavdrgo] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .search-box i[b-0faiavdrgo] {
    color: #a78bfa;
}

[data-theme="dark"] .product-name[b-0faiavdrgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-name-en[b-0faiavdrgo] {
    color: #9ca3af;
}

[data-theme="dark"] .price[b-0faiavdrgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-title[b-0faiavdrgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-subtitle[b-0faiavdrgo] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-label[b-0faiavdrgo] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-value[b-0faiavdrgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-0faiavdrgo],
[data-theme="dark"] .stat-label[b-0faiavdrgo],
[data-theme="dark"] .breadcrumb-link[b-0faiavdrgo],
[data-theme="dark"] .loading-text[b-0faiavdrgo] {
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-current[b-0faiavdrgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .stat-value[b-0faiavdrgo],
[data-theme="dark"] .page-title[b-0faiavdrgo] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .modal-content[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-header[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .info-card[b-0faiavdrgo] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .form-label[b-0faiavdrgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .info-label[b-0faiavdrgo],
[data-theme="dark"] .form-hint[b-0faiavdrgo],
[data-theme="dark"] .currency-label[b-0faiavdrgo] {
    color: #9ca3af;
}

[data-theme="dark"] .close-btn[b-0faiavdrgo] {
    color: #9ca3af;
}

    [data-theme="dark"] .close-btn:hover[b-0faiavdrgo] {
        background: rgba(167, 139, 250, 0.1);
        color: #e2e8f0;
    }

[data-theme="dark"] .empty-state i[b-0faiavdrgo] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-state h3[b-0faiavdrgo] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-0faiavdrgo] {
    color: #9ca3af;
}

[data-theme="dark"] .pagination-btn[b-0faiavdrgo] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .btn-filter[b-0faiavdrgo] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}

    [data-theme="dark"] .btn-filter:hover[b-0faiavdrgo] {
        background: rgba(167, 139, 250, 0.2);
        border-color: #a78bfa;
    }

/* Focus States for Accessibility */
*:focus[b-0faiavdrgo] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-0faiavdrgo],
.btn:focus[b-0faiavdrgo] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-0faiavdrgo],
select:focus[b-0faiavdrgo],
textarea:focus[b-0faiavdrgo] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-primary[b-0faiavdrgo],
    .btn-secondary[b-0faiavdrgo],
    .btn-filter[b-0faiavdrgo],
    .btn-export[b-0faiavdrgo] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-0faiavdrgo] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .products-page[b-0faiavdrgo] {
        background: white !important;
    }

    .header-actions[b-0faiavdrgo],
    .filters-section[b-0faiavdrgo],
    .pagination-container[b-0faiavdrgo],
    .action-buttons[b-0faiavdrgo],
    .btn-card-action[b-0faiavdrgo],
    .status-badge[b-0faiavdrgo] {
        display: none !important;
    }

    .products-table[b-0faiavdrgo] {
        font-size: 12px;
    }

        .products-table th[b-0faiavdrgo] {
            background: #f3f4f6 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

    .stock-badge[b-0faiavdrgo] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantProductBatches.razor.rz.scp.css */

/* Product Batches Page - Modern Professional Design */
.product-batches-page[b-4nkon8wdai] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .product-batches-page[b-4nkon8wdai]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .product-batches-page > *[b-4nkon8wdai] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-4nkon8wdai] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 20px;
}

.header-content[b-4nkon8wdai] {
    flex: 1;
}

.header-actions[b-4nkon8wdai] {
    display: flex;
    gap: 12px;
}

/* Modern Breadcrumb */
.breadcrumb-modern[b-4nkon8wdai] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-item[b-4nkon8wdai] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-4nkon8wdai] {
        color: #667eea;
    }

.separator[b-4nkon8wdai] {
    color: #d1d5db;
    font-size: 12px;
}

.breadcrumb-current[b-4nkon8wdai] {
    color: #4c1d95;
    font-weight: 600;
}

/* Title Section */
.header-title-section[b-4nkon8wdai] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title-modern[b-4nkon8wdai] {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.title-icon[b-4nkon8wdai] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.page-subtitle-enhanced[b-4nkon8wdai] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Button styles */
.btn-secondary-modern[b-4nkon8wdai] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-secondary-modern:hover[b-4nkon8wdai] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Loading spinner */
.loading-container[b-4nkon8wdai] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
}

.spinner-modern[b-4nkon8wdai] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-4nkon8wdai 0.8s linear infinite;
}

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

/* Empty state */
.empty-state[b-4nkon8wdai] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-4nkon8wdai] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .empty-state h4[b-4nkon8wdai] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-4nkon8wdai] {
        font-size: 18px;
        color: #6b7280;
    }

/* Product summary card */
.product-summary-card[b-4nkon8wdai] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .product-summary-card[b-4nkon8wdai]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .product-summary-card:hover[b-4nkon8wdai] {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

        .product-summary-card:hover[b-4nkon8wdai]::before {
            opacity: 1;
        }

.product-image[b-4nkon8wdai] {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

    .product-image img[b-4nkon8wdai] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-image i[b-4nkon8wdai] {
        color: #94a3b8;
    }

.product-details[b-4nkon8wdai] {
    flex: 1;
}

    .product-details h4[b-4nkon8wdai] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #1e293b;
    }

    .product-details p[b-4nkon8wdai] {
        color: #6b7280;
        margin-bottom: 16px;
    }

.product-stats[b-4nkon8wdai] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.stat[b-4nkon8wdai] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label[b-4nkon8wdai] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.stat-value[b-4nkon8wdai] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Batch section */
.batch-section[b-4nkon8wdai] {
    margin-bottom: 40px;
}

    .batch-section h3[b-4nkon8wdai] {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .batch-section h3 i[b-4nkon8wdai] {
            color: #667eea;
        }

/* Batch table */
.batch-table-container[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.batch-table[b-4nkon8wdai] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .batch-table th[b-4nkon8wdai] {
        padding: 18px 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background: rgba(102, 126, 234, 0.05);
    }

    .batch-table td[b-4nkon8wdai] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
        transition: all 0.3s;
    }

    .batch-table tbody tr[b-4nkon8wdai] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .batch-table tbody tr:hover[b-4nkon8wdai] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .batch-table tbody tr:last-child td[b-4nkon8wdai] {
            border-bottom: none;
        }

        .batch-table tbody tr.fully-consumed td[b-4nkon8wdai] {
            color: #94a3b8;
            background: #f8fafc;
        }

        .batch-table tbody tr.expiring-soon td[b-4nkon8wdai] {
            background: #fff7ed;
            border-left: 4px solid #f97316;
        }

/* Status badges */
.badge[b-4nkon8wdai] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.badge-success[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.badge-warning[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-secondary[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(100, 116, 139, 0.2) 100%);
    color: #475569;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Mobile Cards */
.batch-cards-mobile[b-4nkon8wdai] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.batch-card[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .batch-card:hover[b-4nkon8wdai] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .batch-card.expiring-soon[b-4nkon8wdai] {
        border-left: 4px solid #f97316;
    }

    .batch-card.fully-consumed[b-4nkon8wdai] {
        opacity: 0.8;
    }

.batch-card-header[b-4nkon8wdai] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.05);
}

    .batch-card-header h5[b-4nkon8wdai] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
    }

.batch-card-details[b-4nkon8wdai] {
    padding: 16px;
}

.batch-detail[b-4nkon8wdai] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.05);
}

    .batch-detail:last-child[b-4nkon8wdai] {
        border-bottom: none;
    }

.detail-label[b-4nkon8wdai] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-4nkon8wdai] {
    font-weight: 600;
    color: #1e293b;
}

/* Utility Classes */
.text-warning[b-4nkon8wdai] {
    color: #f97316 !important;
}

.text-muted[b-4nkon8wdai] {
    color: #94a3b8 !important;
}

/* Unauthorized access */
.unauthorized-modern[b-4nkon8wdai] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.unauthorized-content[b-4nkon8wdai] {
    text-align: center;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    max-width: 500px;
}

    .unauthorized-content i[b-4nkon8wdai] {
        font-size: 80px;
        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-4nkon8wdai] {
        font-size: 28px;
        margin-bottom: 16px;
        color: #1e293b;
    }

    .unauthorized-content p[b-4nkon8wdai] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

.btn-modern[b-4nkon8wdai] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .btn-modern:hover[b-4nkon8wdai] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        color: white;
    }

/* Dark theme support */
[data-theme="dark"] .product-batches-page[b-4nkon8wdai] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .product-batches-page[b-4nkon8wdai]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-4nkon8wdai],
[data-theme="dark"] .product-summary-card[b-4nkon8wdai],
[data-theme="dark"] .empty-state[b-4nkon8wdai],
[data-theme="dark"] .batch-table-container[b-4nkon8wdai],
[data-theme="dark"] .loading-container[b-4nkon8wdai],
[data-theme="dark"] .batch-card[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .product-image[b-4nkon8wdai] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

[data-theme="dark"] .batch-table th[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
    color: #a78bfa;
}

[data-theme="dark"] .batch-table td[b-4nkon8wdai] {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .badge-success[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.1) 0%, rgba(56, 249, 215, 0.1) 100%);
    color: #34d399;
    border: 1px solid rgba(67, 233, 123, 0.2);
}

[data-theme="dark"] .badge-warning[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .badge-secondary[b-4nkon8wdai] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(100, 116, 139, 0.1) 100%);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .batch-card-header[b-4nkon8wdai] {
    background: rgba(102, 126, 234, 0.1);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .batch-detail[b-4nkon8wdai] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .detail-label[b-4nkon8wdai] {
    color: #94a3b8;
}

[data-theme="dark"] .detail-value[b-4nkon8wdai] {
    color: #e2e8f0;
}

[data-theme="dark"] .text-muted[b-4nkon8wdai] {
    color: #64748b !important;
}

[data-theme="dark"] .product-details h4[b-4nkon8wdai] {
    color: #f8fafc;
}

[data-theme="dark"] .product-details p[b-4nkon8wdai] {
    color: #94a3b8;
}

[data-theme="dark"] .stat-label[b-4nkon8wdai] {
    color: #94a3b8;
}

[data-theme="dark"] .batch-section h3[b-4nkon8wdai] {
    color: #e2e8f0;
}

[data-theme="dark"] .batch-card-header h5[b-4nkon8wdai] {
    color: #e2e8f0;
}

[data-theme="dark"] .batch-table tbody tr.fully-consumed td[b-4nkon8wdai] {
    color: #64748b;
    background: rgba(15, 23, 42, 0.8);
}

[data-theme="dark"] .batch-table tbody tr.expiring-soon td[b-4nkon8wdai] {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f97316;
}

[data-theme="dark"] .batch-card.expiring-soon[b-4nkon8wdai] {
    border-left: 4px solid #f97316;
}

/* Responsive design */
@media (max-width: 991px) {
    .product-stats[b-4nkon8wdai] {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-enhanced[b-4nkon8wdai] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-4nkon8wdai] {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .product-batches-page[b-4nkon8wdai] {
        padding: 16px;
    }

    .page-header-enhanced[b-4nkon8wdai] {
        padding: 16px;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .page-title-modern[b-4nkon8wdai] {
        font-size: 28px;
    }

    .title-icon[b-4nkon8wdai] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .page-subtitle-enhanced[b-4nkon8wdai] {
        font-size: 16px;
    }

    .product-summary-card[b-4nkon8wdai] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .product-stats[b-4nkon8wdai] {
        justify-content: center;
        flex-direction: row;
    }

    .batch-section h3[b-4nkon8wdai] {
        font-size: 20px;
    }

    .empty-state[b-4nkon8wdai] {
        padding: 40px 20px;
    }

        .empty-state i[b-4nkon8wdai] {
            font-size: 60px;
        }
}

@media (max-width: 480px) {
    .product-stats[b-4nkon8wdai] {
        flex-direction: column;
        align-items: center;
    }

    .breadcrumb-item span[b-4nkon8wdai] {
        display: none;
    }

    .breadcrumb-current[b-4nkon8wdai] {
        display: inline;
    }

    .batch-card-header[b-4nkon8wdai] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

/* Print styles */
@media print {
    .product-batches-page[b-4nkon8wdai] {
        background: white !important;
        padding: 0;
    }

        .product-batches-page[b-4nkon8wdai]::before {
            display: none;
        }

    .page-header-enhanced[b-4nkon8wdai] {
        box-shadow: none;
        background: none;
        margin-bottom: 20px;
        padding: 0;
    }

    .header-actions[b-4nkon8wdai] {
        display: none;
    }

    .product-summary-card[b-4nkon8wdai] {
        box-shadow: none;
        background: none;
        border: 1px solid #e2e8f0;
        margin-bottom: 20px;
        padding: 15px;
    }

    .batch-table-container[b-4nkon8wdai] {
        box-shadow: none;
        background: none;
    }

    .batch-table th[b-4nkon8wdai] {
        background: #f8fafc !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .batch-table td[b-4nkon8wdai] {
        background: white !important;
    }

    .badge[b-4nkon8wdai] {
        border: 1px solid currentColor;
        background: none !important;
        box-shadow: none;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantProductEdit.razor.rz.scp.css */
/* Product Edit Page - Modern Professional Styling */
.product-edit-page[b-mv423lmwt1] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .product-edit-page[b-mv423lmwt1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .product-edit-page > *[b-mv423lmwt1] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-mv423lmwt1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-mv423lmwt1] {
    flex: 1;
}

.header-actions[b-mv423lmwt1] {
    margin-left: 20px;
}

.breadcrumb[b-mv423lmwt1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

.breadcrumb-link[b-mv423lmwt1] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-mv423lmwt1] {
        color: #667eea;
    }

.breadcrumb-separator[b-mv423lmwt1] {
    color: #d1d5db;
}

.breadcrumb-current[b-mv423lmwt1] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-mv423lmwt1] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-mv423lmwt1] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Form Container and Sections */
.form-container[b-mv423lmwt1] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.form-section[b-mv423lmwt1] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .form-section:hover[b-mv423lmwt1] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

.section-title[b-mv423lmwt1] {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Form Controls */
.form-group[b-mv423lmwt1] {
    margin-bottom: 20px;
}

    .form-group label[b-mv423lmwt1] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

.form-control[b-mv423lmwt1] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.05);
    color: #1f2937;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-mv423lmwt1] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control:disabled[b-mv423lmwt1] {
        background: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.7;
    }

.form-row[b-mv423lmwt1] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

    .form-row .form-group[b-mv423lmwt1] {
        flex: 1;
        margin-bottom: 0;
    }

.form-check[b-mv423lmwt1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-input[b-mv423lmwt1] {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
    cursor: pointer;
}

.form-check-label[b-mv423lmwt1] {
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
}

/* Image Gallery and Upload */
.image-gallery[b-mv423lmwt1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.image-item[b-mv423lmwt1] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1/1;
}

    .image-item img[b-mv423lmwt1] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
    }

    .image-item:hover img[b-mv423lmwt1] {
        transform: scale(1.05);
    }

.image-actions[b-mv423lmwt1] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
}

.btn-icon[b-mv423lmwt1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    transition: all 0.3s;
}

    .btn-icon:hover[b-mv423lmwt1] {
        transform: translateY(-2px);
    }

    .btn-icon.delete[b-mv423lmwt1] {
        color: #ef4444;
    }

        .btn-icon.delete:hover[b-mv423lmwt1] {
            background: #ef4444;
            color: white;
        }

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

    .btn-icon.secondary[b-mv423lmwt1] {
        color: #667eea;
    }

.no-images[b-mv423lmwt1] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 2px dashed rgba(102, 126, 234, 0.3);
}

    .no-images i[b-mv423lmwt1] {
        font-size: 48px;
        color: #9ca3af;
        margin-bottom: 16px;
    }

    .no-images p[b-mv423lmwt1] {
        color: #6b7280;
    }

.upload-section[b-mv423lmwt1] {
    margin-top: 24px;
}

    .upload-section label[b-mv423lmwt1] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

.upload-preview[b-mv423lmwt1] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.preview-item[b-mv423lmwt1] {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .preview-item img[b-mv423lmwt1] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Specifications */
.spec-row[b-mv423lmwt1] {
    position: relative;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .spec-row:last-child[b-mv423lmwt1] {
        border-bottom: none;
    }

/* Action Buttons */
.form-actions[b-mv423lmwt1] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.btn-primary[b-mv423lmwt1] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover[b-mv423lmwt1] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary[b-mv423lmwt1] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-secondary:hover[b-mv423lmwt1] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* Loading State */
.loading-container[b-mv423lmwt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.spinner[b-mv423lmwt1] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-mv423lmwt1 0.8s linear infinite;
    margin-bottom: 20px;
}

.loading-text[b-mv423lmwt1] {
    color: #4c1d95;
    font-size: 18px;
    font-weight: 500;
}

.spinner-sm[b-mv423lmwt1] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right-color: white;
    border-radius: 50%;
    animation: spin-b-mv423lmwt1 0.8s linear infinite;
}

/* Product Not Found */
.not-found[b-mv423lmwt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .not-found i[b-mv423lmwt1] {
        font-size: 72px;
        color: #f59e0b;
        margin-bottom: 24px;
    }

    .not-found h3[b-mv423lmwt1] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
    }

    .not-found p[b-mv423lmwt1] {
        color: #6b7280;
        margin-bottom: 24px;
        max-width: 500px;
    }

/* Unauthorized Access */
.unauthorized-container[b-mv423lmwt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .unauthorized-container i[b-mv423lmwt1] {
        font-size: 72px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-mv423lmwt1] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
    }

    .unauthorized-container p[b-mv423lmwt1] {
        color: #6b7280;
        margin-bottom: 24px;
        max-width: 500px;
    }

/* Validation */
.validation-message[b-mv423lmwt1] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
}

.validation-summary[b-mv423lmwt1] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
}

/* Animations */
@keyframes spin-b-mv423lmwt1 {
    to {
        transform: rotate(360deg);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .product-edit-page[b-mv423lmwt1] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .product-edit-page[b-mv423lmwt1]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-mv423lmwt1],
[data-theme="dark"] .form-section[b-mv423lmwt1],
[data-theme="dark"] .form-actions[b-mv423lmwt1],
[data-theme="dark"] .loading-container[b-mv423lmwt1],
[data-theme="dark"] .not-found[b-mv423lmwt1],
[data-theme="dark"] .unauthorized-container[b-mv423lmwt1] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-link[b-mv423lmwt1] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-mv423lmwt1] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-mv423lmwt1] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-mv423lmwt1] {
    color: #9ca3af;
}

[data-theme="dark"] .form-control[b-mv423lmwt1] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-mv423lmwt1] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .form-group label[b-mv423lmwt1] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-check-label[b-mv423lmwt1] {
    color: #cbd5e1;
}

[data-theme="dark"] .no-images[b-mv423lmwt1] {
    background: rgba(71, 85, 105, 0.3);
    border-color: rgba(71, 85, 105, 0.6);
}

    [data-theme="dark"] .no-images i[b-mv423lmwt1],
    [data-theme="dark"] .no-images p[b-mv423lmwt1] {
        color: #cbd5e1;
    }

[data-theme="dark"] .loading-text[b-mv423lmwt1] {
    color: #e2e8f0;
}

[data-theme="dark"] .not-found h3[b-mv423lmwt1],
[data-theme="dark"] .unauthorized-container h3[b-mv423lmwt1] {
    color: #e2e8f0;
}

[data-theme="dark"] .not-found p[b-mv423lmwt1],
[data-theme="dark"] .unauthorized-container p[b-mv423lmwt1] {
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 992px) {
    .form-row[b-mv423lmwt1] {
        flex-direction: column;
        gap: 12px;
    }

    .page-header[b-mv423lmwt1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-mv423lmwt1] {
        margin-left: 0;
        margin-top: 16px;
    }
}

@media (max-width: 768px) {
    .product-edit-page[b-mv423lmwt1] {
        padding: 16px;
    }

    .page-header[b-mv423lmwt1] {
        padding: 16px;
    }

    .page-title[b-mv423lmwt1] {
        font-size: 28px;
    }

    .form-section[b-mv423lmwt1] {
        padding: 20px;
    }

    .image-gallery[b-mv423lmwt1] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .form-actions[b-mv423lmwt1] {
        flex-direction: column-reverse;
    }

    .btn-primary[b-mv423lmwt1], .btn-secondary[b-mv423lmwt1] {
        width: 100%;
        justify-content: center;
    }
}

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

    .image-gallery[b-mv423lmwt1] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .preview-item[b-mv423lmwt1] {
        width: 80px;
        height: 80px;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantProductHistory.razor.rz.scp.css */

/* MerchantProductHistory.razor.css - Modern E-Commerce Inventory History */

/* ===== Page Layout & Container ===== */
.inventory-page[b-bfeteopd8f] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .inventory-page[b-bfeteopd8f]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .inventory-page > *[b-bfeteopd8f] {
        position: relative;
        z-index: 1;
    }

/* ===== Enhanced Page Header ===== */
.page-header-enhanced[b-bfeteopd8f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-content[b-bfeteopd8f] {
    flex: 1;
}

.header-actions[b-bfeteopd8f] {
    display: flex;
    gap: 12px;
}

/* Breadcrumbs Navigation */
.breadcrumb-modern[b-bfeteopd8f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-item[b-bfeteopd8f] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-bfeteopd8f] {
        color: #667eea;
    }

.separator[b-bfeteopd8f] {
    color: #d1d5db;
    font-size: 10px;
    display: flex;
    align-items: center;
}

.breadcrumb-current[b-bfeteopd8f] {
    color: #4c1d95;
    font-weight: 600;
}

/* Page Title */
.header-title-section[b-bfeteopd8f] {
    margin-top: 8px;
}

.page-title-modern[b-bfeteopd8f] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.title-icon[b-bfeteopd8f] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}

.page-subtitle-enhanced[b-bfeteopd8f] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Header Action Buttons */
.btn-primary-modern[b-bfeteopd8f] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary-modern:hover[b-bfeteopd8f] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-secondary-modern[b-bfeteopd8f] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-secondary-modern:hover[b-bfeteopd8f] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

/* ===== Product Info Card ===== */
.product-info-card[b-bfeteopd8f] {
    display: flex;
    gap: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .product-info-card:hover[b-bfeteopd8f] {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

.product-image[b-bfeteopd8f] {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

    .product-image img[b-bfeteopd8f] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.placeholder-image[b-bfeteopd8f] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #94a3b8;
}

.product-details[b-bfeteopd8f] {
    flex: 1;
}

    .product-details h3[b-bfeteopd8f] {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
        margin-top: 0;
        margin-bottom: 16px;
    }

.details-grid[b-bfeteopd8f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.detail-item[b-bfeteopd8f] {
    display: flex;
    flex-direction: column;
}

.label[b-bfeteopd8f] {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.value[b-bfeteopd8f] {
    font-size: 18px;
    font-weight: 600;
    color: #4c1d95;
}

/* ===== Filters Section ===== */
.filters-section[b-bfeteopd8f] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.date-filters[b-bfeteopd8f] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.date-input[b-bfeteopd8f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

    .date-input label[b-bfeteopd8f] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

    .date-input input[b-bfeteopd8f] {
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .date-input input:focus[b-bfeteopd8f] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.btn-filter[b-bfeteopd8f] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
}

    .btn-filter:hover[b-bfeteopd8f] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-clear[b-bfeteopd8f] {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(156, 163, 175, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
}

    .btn-clear:hover[b-bfeteopd8f] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(156, 163, 175, 0.3);
    }

/* Quick Filters */
.quick-filters[b-bfeteopd8f] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-filter[b-bfeteopd8f] {
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
}

    .quick-filter:hover[b-bfeteopd8f] {
        background: rgba(102, 126, 234, 0.15);
        color: #4c1d95;
    }

    .quick-filter.active[b-bfeteopd8f] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    }

/* ===== Movements Timeline ===== */
.movements-timeline[b-bfeteopd8f] {
    position: relative;
    padding-left: 40px;
}

    .movements-timeline[b-bfeteopd8f]::before {
        content: '';
        position: absolute;
        left: 16px;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
        border-radius: 4px;
    }

.movement-item[b-bfeteopd8f] {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    position: relative;
}

.movement-icon[b-bfeteopd8f] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    position: absolute;
    left: -20px;
    z-index: 2;
}

.movement-content[b-bfeteopd8f] {
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.movement-item:hover .movement-content[b-bfeteopd8f] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.movement-content h5[b-bfeteopd8f] {
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
    color: #1e293b;
}

.movement-description[b-bfeteopd8f] {
    font-size: 16px;
    margin-bottom: 16px;
    color: #4c1d95;
    font-weight: 500;
}

.movement-details[b-bfeteopd8f] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
    margin-bottom: 12px;
}

    .movement-details span[b-bfeteopd8f] {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
    }

.movement-notes[b-bfeteopd8f] {
    font-size: 14px;
    color: #6b7280;
    font-style: italic;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.movement-meta[b-bfeteopd8f] {
    font-size: 13px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

    .movement-meta .separator[b-bfeteopd8f] {
        font-size: 8px;
    }

/* Movement Icon Types */
.movement-add[b-bfeteopd8f] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.movement-sale[b-bfeteopd8f] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

.movement-transfer[b-bfeteopd8f] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

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

.movement-adjust[b-bfeteopd8f] {
    background: linear-gradient(135deg, #fcb286 0%, #e67e22 100%);
}

.movement-loss[b-bfeteopd8f] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
}

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

.movement-cancelled[b-bfeteopd8f] {
    background: linear-gradient(135deg, #9ca3af 0%, #64748b 100%);
}

/* ===== Empty State & Loading ===== */
.empty-state[b-bfeteopd8f] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .empty-state i[b-bfeteopd8f] {
        font-size: 64px;
        color: #9ca3af;
        margin-bottom: 16px;
    }

    .empty-state h4[b-bfeteopd8f] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
    }

    .empty-state p[b-bfeteopd8f] {
        font-size: 16px;
        color: #6b7280;
        max-width: 400px;
        margin: 0 auto;
    }

.loading-container[b-bfeteopd8f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.spinner-modern[b-bfeteopd8f] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-left-color: #667eea;
    border-top-color: #764ba2;
    border-radius: 50%;
    animation: spin-b-bfeteopd8f 1s linear infinite;
    margin-bottom: 20px;
}

.loading-container p[b-bfeteopd8f] {
    font-size: 18px;
    color: #4c1d95;
    font-weight: 500;
}

/* Unauthorized Section */
.unauthorized-modern[b-bfeteopd8f] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.unauthorized-content[b-bfeteopd8f] {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 600px;
}

    .unauthorized-content i[b-bfeteopd8f] {
        font-size: 80px;
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-bfeteopd8f] {
        font-size: 28px;
        color: #1e293b;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-bfeteopd8f] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-modern[b-bfeteopd8f] {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-primary[b-bfeteopd8f] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .btn-primary:hover[b-bfeteopd8f] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

/* ===== Animations ===== */
@keyframes spin-b-bfeteopd8f {
    to {
        transform: rotate(360deg);
    }
}

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

    to {
        opacity: 1;
    }
}

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

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

/* Apply animations to elements */
.page-header-enhanced[b-bfeteopd8f],
.product-info-card[b-bfeteopd8f],
.filters-section[b-bfeteopd8f],
.movement-item[b-bfeteopd8f] {
    animation: fadeIn-b-bfeteopd8f 0.5s ease forwards;
}

.movement-item[b-bfeteopd8f] {
    animation-delay: calc(0.1s * var(--index, 0));
    opacity: 0;
    animation-fill-mode: forwards;
}

/* ===== Responsive Design ===== */
@media (max-width: 992px) {
    .page-header-enhanced[b-bfeteopd8f] {
        flex-direction: column;
        gap: 20px;
    }

    .header-actions[b-bfeteopd8f] {
        width: 100%;
    }

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

@media (max-width: 768px) {
    .product-info-card[b-bfeteopd8f] {
        flex-direction: column;
    }

    .product-image[b-bfeteopd8f] {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }

    .date-filters[b-bfeteopd8f] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-filter[b-bfeteopd8f],
    .btn-clear[b-bfeteopd8f] {
        align-self: stretch;
    }

    .movement-details[b-bfeteopd8f] {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .inventory-page[b-bfeteopd8f] {
        padding: 16px;
    }

    .page-title-modern[b-bfeteopd8f] {
        font-size: 24px;
    }

    .title-icon[b-bfeteopd8f] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .details-grid[b-bfeteopd8f] {
        grid-template-columns: 1fr;
    }

    .quick-filters[b-bfeteopd8f] {
        gap: 8px;
    }

    .quick-filter[b-bfeteopd8f] {
        font-size: 12px;
        padding: 6px 12px;
    }

    .movements-timeline[b-bfeteopd8f] {
        padding-left: 30px;
    }

        .movements-timeline[b-bfeteopd8f]::before {
            left: 12px;
        }

    .movement-icon[b-bfeteopd8f] {
        width: 30px;
        height: 30px;
        font-size: 14px;
        left: -15px;
    }
}

/* ===== Dark Theme Support ===== */
[data-theme="dark"] .inventory-page[b-bfeteopd8f] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .inventory-page[b-bfeteopd8f]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-bfeteopd8f],
[data-theme="dark"] .product-info-card[b-bfeteopd8f],
[data-theme="dark"] .filters-section[b-bfeteopd8f],
[data-theme="dark"] .movement-content[b-bfeteopd8f],
[data-theme="dark"] .empty-state[b-bfeteopd8f],
[data-theme="dark"] .loading-container[b-bfeteopd8f],
[data-theme="dark"] .unauthorized-content[b-bfeteopd8f] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-bfeteopd8f] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-bfeteopd8f] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-bfeteopd8f] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle-enhanced[b-bfeteopd8f] {
    color: #9ca3af;
}

[data-theme="dark"] .page-title-modern[b-bfeteopd8f] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .product-details h3[b-bfeteopd8f] {
    color: #e2e8f0;
}

[data-theme="dark"] .label[b-bfeteopd8f] {
    color: #9ca3af;
}

[data-theme="dark"] .value[b-bfeteopd8f] {
    color: #a78bfa;
}

[data-theme="dark"] .date-input label[b-bfeteopd8f] {
    color: #e2e8f0;
}

[data-theme="dark"] .date-input input[b-bfeteopd8f] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .date-input input:focus[b-bfeteopd8f] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .quick-filter[b-bfeteopd8f] {
    background: rgba(71, 85, 105, 0.3);
    color: #9ca3af;
}

    [data-theme="dark"] .quick-filter:hover[b-bfeteopd8f] {
        background: rgba(71, 85, 105, 0.5);
        color: #e2e8f0;
    }

    [data-theme="dark"] .quick-filter.active[b-bfeteopd8f] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: #fff;
    }

[data-theme="dark"] .placeholder-image[b-bfeteopd8f] {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    color: #64748b;
}

[data-theme="dark"] .movement-content h5[b-bfeteopd8f] {
    color: #e2e8f0;
}

[data-theme="dark"] .movement-description[b-bfeteopd8f] {
    color: #a78bfa;
}

[data-theme="dark"] .movement-details[b-bfeteopd8f] {
    background: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .movement-details span[b-bfeteopd8f] {
        color: #9ca3af;
    }

[data-theme="dark"] .movement-notes[b-bfeteopd8f] {
    color: #9ca3af;
}

[data-theme="dark"] .movement-meta[b-bfeteopd8f] {
    color: #64748b;
}

[data-theme="dark"] .spinner-modern[b-bfeteopd8f] {
    border-color: rgba(167, 139, 250, 0.2);
    border-left-color: #a78bfa;
    border-top-color: #c084fc;
}

[data-theme="dark"] .empty-state i[b-bfeteopd8f] {
    color: #64748b;
}

[data-theme="dark"] .empty-state h4[b-bfeteopd8f] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-bfeteopd8f] {
    color: #9ca3af;
}

[data-theme="dark"] .unauthorized-content h3[b-bfeteopd8f] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content p[b-bfeteopd8f] {
    color: #9ca3af;
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantReports.razor.rz.scp.css */
.reports-page[b-95335ead3q] {
    padding: 20px;
    background: #f5f6fa;
    min-height: 100vh;
}

.page-header[b-95335ead3q] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.page-title[b-95335ead3q] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-subtitle[b-95335ead3q] {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-top: 10px;
}

.reports-grid[b-95335ead3q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.report-card[b-95335ead3q] {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .report-card:hover[b-95335ead3q] {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    }

    .report-card[b-95335ead3q]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, var(--color) 0%, var(--color-light) 100%);
    }

    .report-card.profit[b-95335ead3q] {
        --color: #10b981;
        --color-light: #34d399;
    }

    .report-card.sales[b-95335ead3q] {
        --color: #3b82f6;
        --color-light: #60a5fa;
    }

    .report-card.inventory[b-95335ead3q] {
        --color: #f59e0b;
        --color-light: #fbbf24;
    }

    .report-card.agents[b-95335ead3q] {
        --color: #8b5cf6;
        --color-light: #a78bfa;
    }

    .report-card.customers[b-95335ead3q] {
        --color: #ec4899;
        --color-light: #f472b6;
    }

    .report-card.financial[b-95335ead3q] {
        --color: #06b6d4;
        --color-light: #22d3ee;
    }

.report-icon[b-95335ead3q] {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--color) 0%, var(--color-light) 100%);
    color: white;
}

.report-title[b-95335ead3q] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
}

.report-description[b-95335ead3q] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 20px;
}

.report-stats[b-95335ead3q] {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.stat-item[b-95335ead3q] {
    flex: 1;
    text-align: center;
}

.stat-value[b-95335ead3q] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color);
}

.stat-label[b-95335ead3q] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 5px;
}

.quick-filters[b-95335ead3q] {
    background: white;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.filter-row[b-95335ead3q] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-item[b-95335ead3q] {
    flex: 1;
    min-width: 200px;
}

.filter-label[b-95335ead3q] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 8px;
}

.filter-input[b-95335ead3q] {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .filter-input:focus[b-95335ead3q] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.filter-button[b-95335ead3q] {
    padding: 10px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
}

    .filter-button:hover[b-95335ead3q] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }

.report-viewer[b-95335ead3q] {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    display: @(showReportViewer ? "block" : "none");
}

.viewer-header[b-95335ead3q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}

.viewer-title[b-95335ead3q] {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 15px;
}

.viewer-actions[b-95335ead3q] {
    display: flex;
    gap: 10px;
}

.action-button[b-95335ead3q] {
    padding: 8px 20px;
    border: 2px solid #e5e7eb;
    background: white;
    color: #4b5563;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .action-button:hover[b-95335ead3q] {
        border-color: #667eea;
        color: #667eea;
        background: #f3f4f6;
    }

    .action-button.primary[b-95335ead3q] {
        background: #667eea;
        color: white;
        border-color: #667eea;
    }

        .action-button.primary:hover[b-95335ead3q] {
            background: #5a67d8;
            border-color: #5a67d8;
        }

.report-content[b-95335ead3q] {
    min-height: 400px;
}

.loading-spinner[b-95335ead3q] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.chart-container[b-95335ead3q] {
    position: relative;
    height: 400px;
    margin: 30px 0;
}

.stats-grid[b-95335ead3q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.stat-card[b-95335ead3q] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.stat-card-value[b-95335ead3q] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 5px;
}

.stat-card-label[b-95335ead3q] {
    color: #6b7280;
    font-size: 0.875rem;
}

.table-responsive[b-95335ead3q] {
    overflow-x: auto;
    margin: 20px 0;
}

.data-table[b-95335ead3q] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-95335ead3q] {
        background: #f3f4f6;
        padding: 12px;
        text-align: right;
        font-weight: 600;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
    }

    .data-table td[b-95335ead3q] {
        padding: 12px;
        text-align: right;
        border-bottom: 1px solid #e5e7eb;
    }

    .data-table tr:hover[b-95335ead3q] {
        background: #f9fafb;
    }

.no-data[b-95335ead3q] {
    text-align: center;
    padding: 60px;
    color: #9ca3af;
}

    .no-data i[b-95335ead3q] {
        font-size: 4rem;
        margin-bottom: 20px;
        opacity: 0.5;
    }

.quick-stats[b-95335ead3q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.quick-stat-card[b-95335ead3q] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 20px;
}

.quick-stat-icon[b-95335ead3q] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.quick-stat-content[b-95335ead3q] {
    flex: 1;
}

.quick-stat-value[b-95335ead3q] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.quick-stat-label[b-95335ead3q] {
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 5px;
}

.quick-stat-trend[b-95335ead3q] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    margin-top: 5px;
}

.trend-up[b-95335ead3q] {
    color: #10b981;
}

.trend-down[b-95335ead3q] {
    color: #ef4444;
}

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

    .filter-row[b-95335ead3q] {
        flex-direction: column;
    }

    .filter-item[b-95335ead3q] {
        width: 100%;
    }

    .viewer-header[b-95335ead3q] {
        flex-direction: column;
        gap: 20px;
    }

    .viewer-actions[b-95335ead3q] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantReturnDetails.razor.rz.scp.css */

/* ===================================
   Agent Return Details - Modern Professional CSS
   تصميم احترافي وعصري لصفحة تفاصيل المرتجع
   =================================== */

/* Main Container & Layout */
.return-details-container[b-l9xob7ol67] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .return-details-container[b-l9xob7ol67]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .return-details-container > *[b-l9xob7ol67] {
        position: relative;
        z-index: 1;
    }

/* Header Styles */
.return-header[b-l9xob7ol67] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px 32px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-left[b-l9xob7ol67] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-back[b-l9xob7ol67] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-back:hover[b-l9xob7ol67] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    }

.header-info h1[b-l9xob7ol67] {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.breadcrumb[b-l9xob7ol67] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .breadcrumb a[b-l9xob7ol67] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
    }

        .breadcrumb a:hover[b-l9xob7ol67] {
            color: #667eea;
        }

.header-actions[b-l9xob7ol67] {
    display: flex;
    gap: 12px;
}

/* Status Timeline Card */
.status-timeline-card[b-l9xob7ol67] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .status-timeline-card h3[b-l9xob7ol67] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
    }

.timeline[b-l9xob7ol67] {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0 20px;
}

    .timeline[b-l9xob7ol67]::before {
        content: '';
        position: absolute;
        top: 24px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #e5e7eb;
        z-index: 0;
    }

.timeline-item[b-l9xob7ol67] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
}

.timeline-marker[b-l9xob7ol67] {
    width: 48px;
    height: 48px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 18px;
    color: #9ca3af;
    border: 2px solid #e5e7eb;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item.active .timeline-marker[b-l9xob7ol67] {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    color: #667eea;
}

.timeline-item.completed .timeline-marker[b-l9xob7ol67] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.timeline-content[b-l9xob7ol67] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-title[b-l9xob7ol67] {
    font-weight: 600;
    color: #4b5563;
    font-size: 14px;
}

.timeline-date[b-l9xob7ol67] {
    font-size: 12px;
    color: #9ca3af;
}

.timeline-item.completed .timeline-title[b-l9xob7ol67] {
    color: #4c1d95;
    font-weight: 700;
}

/* Info Cards Grid */
.info-cards-grid[b-l9xob7ol67] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.info-card[b-l9xob7ol67] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .info-card:hover[b-l9xob7ol67] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        border-color: rgba(102, 126, 234, 0.3);
    }

    .info-card[b-l9xob7ol67]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .info-card:hover[b-l9xob7ol67]::before {
        opacity: 1;
    }

    .info-card h3[b-l9xob7ol67] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #4c1d95;
    }

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

.info-item[b-l9xob7ol67] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .info-item.full-width[b-l9xob7ol67] {
        grid-column: span 2;
    }

    .info-item label[b-l9xob7ol67] {
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .info-item .value[b-l9xob7ol67] {
        font-size: 16px;
        color: #1f2937;
        font-weight: 500;
    }

        .info-item .value a[b-l9xob7ol67] {
            color: #667eea;
            text-decoration: none;
            transition: all 0.2s;
        }

            .info-item .value a:hover[b-l9xob7ol67] {
                color: #4f46e5;
                text-decoration: underline;
            }

/* Returned Items Section */
.returned-items-section[b-l9xob7ol67] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .returned-items-section h3[b-l9xob7ol67] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
    }

.items-table[b-l9xob7ol67] {
    overflow-x: auto;
}

.table[b-l9xob7ol67] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th[b-l9xob7ol67] {
        padding: 16px;
        text-align: right;
        background-color: rgba(102, 126, 234, 0.05);
        font-weight: 600;
        color: #6b7280;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

    .table td[b-l9xob7ol67] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .table tbody tr[b-l9xob7ol67] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: white;
    }

        .table tbody tr:hover[b-l9xob7ol67] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

.product-info[b-l9xob7ol67] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-thumb[b-l9xob7ol67] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.condition-badge[b-l9xob7ol67] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .condition-badge.good[b-l9xob7ol67] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .condition-badge.damaged[b-l9xob7ol67] {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

/* Financial Summary Section */
.financial-summary-section[b-l9xob7ol67] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .financial-summary-section h3[b-l9xob7ol67] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
    }

.summary-cards[b-l9xob7ol67] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.summary-card[b-l9xob7ol67] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .summary-card:hover[b-l9xob7ol67] {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transform: translateY(-5px);
    }

    .summary-card h4[b-l9xob7ol67] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #4c1d95;
    }

.summary-rows[b-l9xob7ol67] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row[b-l9xob7ol67] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #f3f4f6;
}

    .summary-row.fee[b-l9xob7ol67] {
        color: #dc2626;
    }

    .summary-row.total[b-l9xob7ol67] {
        font-weight: 700;
        font-size: 18px;
        color: #4c1d95;
        border-top: 2px solid #f3f4f6;
        border-bottom: none;
        margin-top: 4px;
        padding-top: 12px;
    }

.refund-status[b-l9xob7ol67] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.status-icon[b-l9xob7ol67] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

    .status-icon.pending[b-l9xob7ol67] {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .status-icon.processing[b-l9xob7ol67] {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

    .status-icon.completed[b-l9xob7ol67] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

.status-info[b-l9xob7ol67] {
    flex: 1;
}

.status-text[b-l9xob7ol67] {
    font-weight: 600;
    font-size: 16px;
    color: #1f2937;
}

.status-date[b-l9xob7ol67] {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
}

/* Wallet Transactions */
.wallet-transactions[b-l9xob7ol67] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
}

    .wallet-transactions h4[b-l9xob7ol67] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #4c1d95;
    }

.transactions-list[b-l9xob7ol67] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transaction-item[b-l9xob7ol67] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    background: #f9fafb;
    transition: all 0.2s;
}

    .transaction-item:hover[b-l9xob7ol67] {
        background: #f3f4f6;
    }

.transaction-info[b-l9xob7ol67] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.transaction-type[b-l9xob7ol67] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #4b5563;
}

    .transaction-type i[b-l9xob7ol67] {
        color: #667eea;
    }

.transaction-details[b-l9xob7ol67] {
    font-size: 14px;
    color: #6b7280;
}

.transaction-amount[b-l9xob7ol67] {
    font-weight: 700;
    font-size: 16px;
}

    .transaction-amount.credit[b-l9xob7ol67] {
        color: #059669;
    }

    .transaction-amount.debit[b-l9xob7ol67] {
        color: #dc2626;
    }

/* Inventory Status Section */
.inventory-status-section[b-l9xob7ol67] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .inventory-status-section h3[b-l9xob7ol67] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
    }

.inventory-info[b-l9xob7ol67] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.status-badge[b-l9xob7ol67] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

    .status-badge.restored[b-l9xob7ol67] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .status-badge.pending[b-l9xob7ol67] {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

/* Action History Section */
.action-history-section[b-l9xob7ol67] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .action-history-section h3[b-l9xob7ol67] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #4c1d95;
    }

.history-timeline[b-l9xob7ol67] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

    .history-timeline[b-l9xob7ol67]::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 14px;
        width: 2px;
        background: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
        z-index: 0;
    }

.history-item[b-l9xob7ol67] {
    display: flex;
    gap: 20px;
    position: relative;
}

.history-marker[b-l9xob7ol67] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    border: 2px solid #667eea;
    z-index: 1;
    position: relative;
}

    .history-marker[b-l9xob7ol67]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #667eea;
    }

.history-content[b-l9xob7ol67] {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
}

.history-header[b-l9xob7ol67] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.history-action[b-l9xob7ol67] {
    font-weight: 600;
    color: #4c1d95;
}

.history-date[b-l9xob7ol67] {
    font-size: 14px;
    color: #6b7280;
}

.history-user[b-l9xob7ol67] {
    font-size: 14px;
    color: #667eea;
    margin-bottom: 8px;
}

.history-notes[b-l9xob7ol67] {
    font-size: 14px;
    color: #4b5563;
    padding: 8px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #667eea;
}

/* Action Buttons */
.action-buttons[b-l9xob7ol67] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 32px;
}

.btn[b-l9xob7ol67] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    gap: 8px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    font-size: 15px;
}

.btn-primary[b-l9xob7ol67] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-l9xob7ol67] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-l9xob7ol67] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-secondary:hover[b-l9xob7ol67] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-success[b-l9xob7ol67] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-success:hover[b-l9xob7ol67] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-danger[b-l9xob7ol67] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(208, 78, 95, 0.2);
}

    .btn-danger:hover[b-l9xob7ol67] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

/* Loading and Error States */
.loading-container[b-l9xob7ol67] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    flex-direction: column;
    gap: 24px;
}

.spinner-border[b-l9xob7ol67] {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-l9xob7ol67 0.8s linear infinite;
}

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

.not-found-container[b-l9xob7ol67] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 500px;
    padding: 32px;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .not-found-container i[b-l9xob7ol67] {
        color: #9ca3af;
        font-size: 64px;
    }

    .not-found-container h3[b-l9xob7ol67] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
    }

    .not-found-container p[b-l9xob7ol67] {
        color: #6b7280;
        max-width: 500px;
        margin: 0 0 16px;
    }

.unauthorized-content[b-l9xob7ol67] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 500px;
    padding: 32px;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Modal Dialog */
.modal-content[b-l9xob7ol67] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-header[b-l9xob7ol67] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
}

.modal-title[b-l9xob7ol67] {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-body[b-l9xob7ol67] {
    padding: 30px;
}

/* Print Styles */
@media print {
    .return-details-container[b-l9xob7ol67] {
        padding: 0;
        background: white;
    }

        .return-details-container[b-l9xob7ol67]::before {
            display: none;
        }

    .btn-back[b-l9xob7ol67],
    .header-actions[b-l9xob7ol67],
    .action-buttons[b-l9xob7ol67] {
        display: none !important;
    }

    .return-header[b-l9xob7ol67],
    .status-timeline-card[b-l9xob7ol67],
    .info-card[b-l9xob7ol67],
    .returned-items-section[b-l9xob7ol67],
    .financial-summary-section[b-l9xob7ol67],
    .inventory-status-section[b-l9xob7ol67],
    .action-history-section[b-l9xob7ol67] {
        border: 1px solid #e5e7eb;
        box-shadow: none;
        background: white;
        margin-bottom: 20px;
    }

    .timeline-marker[b-l9xob7ol67] {
        border: 2px solid #e5e7eb;
        background: white;
    }

    .timeline-item.completed .timeline-marker[b-l9xob7ol67] {
        background: #f3f4f6;
        color: #4c1d95;
        border-color: #4c1d95;
        box-shadow: none;
    }

    .summary-card[b-l9xob7ol67],
    .wallet-transactions[b-l9xob7ol67] {
        break-inside: avoid;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .info-cards-grid[b-l9xob7ol67] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .return-details-container[b-l9xob7ol67] {
        padding: 16px;
    }

    .return-header[b-l9xob7ol67] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 20px;
    }

    .header-info h1[b-l9xob7ol67] {
        font-size: 24px;
    }

    .header-actions[b-l9xob7ol67] {
        width: 100%;
    }

        .header-actions button[b-l9xob7ol67] {
            flex: 1;
        }

    .timeline[b-l9xob7ol67] {
        flex-direction: column;
        gap: 32px;
        margin: 0;
    }

        .timeline[b-l9xob7ol67]::before {
            top: 0;
            bottom: 0;
            left: 24px;
            right: auto;
            width: 2px;
            height: auto;
        }

    .timeline-item[b-l9xob7ol67] {
        flex-direction: row;
        text-align: left;
    }

    .timeline-marker[b-l9xob7ol67] {
        margin-bottom: 0;
        margin-right: 16px;
    }

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

    .info-item.full-width[b-l9xob7ol67] {
        grid-column: auto;
    }

    .summary-cards[b-l9xob7ol67] {
        grid-template-columns: 1fr;
    }

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

    .btn[b-l9xob7ol67] {
        width: 100%;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .return-details-container[b-l9xob7ol67] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .return-details-container[b-l9xob7ol67]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .return-header[b-l9xob7ol67],
[data-theme="dark"] .status-timeline-card[b-l9xob7ol67],
[data-theme="dark"] .info-card[b-l9xob7ol67],
[data-theme="dark"] .returned-items-section[b-l9xob7ol67],
[data-theme="dark"] .financial-summary-section[b-l9xob7ol67],
[data-theme="dark"] .inventory-status-section[b-l9xob7ol67],
[data-theme="dark"] .action-history-section[b-l9xob7ol67] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb[b-l9xob7ol67],
[data-theme="dark"] .breadcrumb a[b-l9xob7ol67] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb a:hover[b-l9xob7ol67] {
        color: #818cf8;
    }

[data-theme="dark"] .info-card h3[b-l9xob7ol67],
[data-theme="dark"] .status-timeline-card h3[b-l9xob7ol67],
[data-theme="dark"] .returned-items-section h3[b-l9xob7ol67],
[data-theme="dark"] .financial-summary-section h3[b-l9xob7ol67],
[data-theme="dark"] .inventory-status-section h3[b-l9xob7ol67],
[data-theme="dark"] .action-history-section h3[b-l9xob7ol67] {
    color: #e2e8f0;
}

[data-theme="dark"] .info-item label[b-l9xob7ol67] {
    color: #9ca3af;
}

[data-theme="dark"] .info-item .value[b-l9xob7ol67] {
    color: #e2e8f0;
}

    [data-theme="dark"] .info-item .value a[b-l9xob7ol67] {
        color: #818cf8;
    }

        [data-theme="dark"] .info-item .value a:hover[b-l9xob7ol67] {
            color: #a78bfa;
        }

[data-theme="dark"] .table th[b-l9xob7ol67] {
    color: #9ca3af;
    background-color: rgba(71, 85, 105, 0.2);
    border-bottom: 2px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .table tbody tr[b-l9xob7ol67] {
    background-color: #1e293b;
}

    [data-theme="dark"] .table tbody tr:hover[b-l9xob7ol67] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    }

[data-theme="dark"] .table td[b-l9xob7ol67] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .summary-card[b-l9xob7ol67],
[data-theme="dark"] .wallet-transactions[b-l9xob7ol67] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .summary-card h4[b-l9xob7ol67],
    [data-theme="dark"] .wallet-transactions h4[b-l9xob7ol67] {
        color: #e2e8f0;
    }

[data-theme="dark"] .summary-row[b-l9xob7ol67] {
    border-bottom: 1px dashed rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .summary-row.total[b-l9xob7ol67] {
        color: #e2e8f0;
        border-top: 2px solid rgba(71, 85, 105, 0.3);
    }

[data-theme="dark"] .transaction-item[b-l9xob7ol67] {
    background: rgba(71, 85, 105, 0.2);
}

    [data-theme="dark"] .transaction-item:hover[b-l9xob7ol67] {
        background: rgba(71, 85, 105, 0.4);
    }

[data-theme="dark"] .transaction-type[b-l9xob7ol67] {
    color: #e2e8f0;
}

    [data-theme="dark"] .transaction-type i[b-l9xob7ol67] {
        color: #818cf8;
    }

[data-theme="dark"] .transaction-details[b-l9xob7ol67] {
    color: #9ca3af;
}

[data-theme="dark"] .history-content[b-l9xob7ol67] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .history-action[b-l9xob7ol67] {
    color: #e2e8f0;
}

[data-theme="dark"] .history-user[b-l9xob7ol67] {
    color: #818cf8;
}

[data-theme="dark"] .history-notes[b-l9xob7ol67] {
    color: #e2e8f0;
    background: rgba(71, 85, 105, 0.2);
    border-left: 3px solid #818cf8;
}

[data-theme="dark"] .status-text[b-l9xob7ol67] {
    color: #e2e8f0;
}

/* RTL Support */
html[dir="rtl"] .timeline[b-l9xob7ol67]::before {
    left: auto;
    right: 24px;
}

html[dir="rtl"] .timeline-item[b-l9xob7ol67] {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .timeline-marker[b-l9xob7ol67] {
    margin-right: 0;
    margin-left: 16px;
}

html[dir="rtl"] .history-timeline[b-l9xob7ol67]::before {
    left: auto;
    right: 14px;
}

html[dir="rtl"] .history-item[b-l9xob7ol67] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .history-notes[b-l9xob7ol67] {
    border-left: none;
    border-right: 3px solid #667eea;
}

html[dir="rtl"] .table th[b-l9xob7ol67] {
    text-align: left;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *[b-l9xob7ol67] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .btn-primary[b-l9xob7ol67],
    .btn-secondary[b-l9xob7ol67],
    .btn-success[b-l9xob7ol67],
    .btn-danger[b-l9xob7ol67] {
        border: 2px solid currentColor;
    }
}

/* Focus states */
*:focus[b-l9xob7ol67] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .return-header[b-l9xob7ol67] {
        padding: 16px;
    }

    .status-timeline-card[b-l9xob7ol67],
    .info-card[b-l9xob7ol67],
    .returned-items-section[b-l9xob7ol67],
    .financial-summary-section[b-l9xob7ol67],
    .inventory-status-section[b-l9xob7ol67],
    .action-history-section[b-l9xob7ol67] {
        padding: 20px;
        border-radius: 16px;
    }

    .product-info[b-l9xob7ol67] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantReturnOrder.razor.rz.scp.css */
/* ===================================
   Agent Return Order - Modern Professional CSS
   تصميم احترافي لصفحة مرتجعات الطلبات
   =================================== */

/* Page Container */
.return-order-container[b-55z68ma0dy] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .return-order-container[b-55z68ma0dy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .return-order-container > *[b-55z68ma0dy] {
        position: relative;
        z-index: 1;
    }

/* Return Header */
.return-header[b-55z68ma0dy] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-left[b-55z68ma0dy] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-back[b-55z68ma0dy] {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-back:hover[b-55z68ma0dy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

.header-info h1[b-55z68ma0dy] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.breadcrumb[b-55z68ma0dy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #6b7280;
}

    .breadcrumb a[b-55z68ma0dy] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb a:hover[b-55z68ma0dy] {
            color: #667eea;
        }

    .breadcrumb span:last-child[b-55z68ma0dy] {
        color: #4c1d95;
        font-weight: 600;
    }

/* Order Summary Card */
.order-summary-card[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .order-summary-card h3[b-55z68ma0dy] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .order-summary-card h3[b-55z68ma0dy]::before {
            content: '';
            width: 5px;
            height: 28px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px;
        }

.summary-grid[b-55z68ma0dy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.summary-item[b-55z68ma0dy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .summary-item label[b-55z68ma0dy] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .summary-item .value[b-55z68ma0dy] {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

/* Return Items Section */
.return-items-section[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .return-items-section h3[b-55z68ma0dy] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .return-items-section h3[b-55z68ma0dy]::before {
            content: '';
            width: 5px;
            height: 28px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px;
        }

.items-table[b-55z68ma0dy] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .items-table table[b-55z68ma0dy] {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .items-table th[b-55z68ma0dy] {
        padding: 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .items-table td[b-55z68ma0dy] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: white;
    }

    .items-table tbody tr[b-55z68ma0dy] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .items-table tbody tr:hover[b-55z68ma0dy] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

.product-info[b-55z68ma0dy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-55z68ma0dy] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

    .product-thumb:hover[b-55z68ma0dy] {
        transform: scale(1.1);
    }

.return-quantity[b-55z68ma0dy] {
    width: 100px;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    transition: all 0.3s;
    font-weight: 600;
    text-align: center;
}

    .return-quantity:focus[b-55z68ma0dy] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .return-quantity:disabled[b-55z68ma0dy] {
        background: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Return Reason Section */
.return-reason-section[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .return-reason-section h3[b-55z68ma0dy] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .return-reason-section h3[b-55z68ma0dy]::before {
            content: '';
            width: 5px;
            height: 28px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px;
        }

.reason-options[b-55z68ma0dy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.reason-option[b-55z68ma0dy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .reason-option:hover[b-55z68ma0dy] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-2px);
    }

    .reason-option input[type="radio"][b-55z68ma0dy] {
        width: 20px;
        height: 20px;
        accent-color: #667eea;
    }

    .reason-option span[b-55z68ma0dy] {
        font-weight: 500;
        color: #4b5563;
    }

    .reason-option:has(input:checked)[b-55z68ma0dy] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        border-color: #667eea;
    }

        .reason-option:has(input:checked) span[b-55z68ma0dy] {
            color: #4c1d95;
            font-weight: 600;
        }

.notes-section[b-55z68ma0dy] {
    margin-top: 24px;
}

    .notes-section label[b-55z68ma0dy] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .notes-section textarea[b-55z68ma0dy] {
        width: 100%;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
        resize: vertical;
        min-height: 100px;
    }

        .notes-section textarea:focus[b-55z68ma0dy] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* Financial Summary Section */
.financial-summary-section[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .financial-summary-section h3[b-55z68ma0dy] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .financial-summary-section h3[b-55z68ma0dy]::before {
            content: '';
            width: 5px;
            height: 28px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px;
        }

    .financial-summary-section h4[b-55z68ma0dy] {
        font-size: 18px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

.installment-info[b-55z68ma0dy], .return-summary[b-55z68ma0dy], .commissions-details[b-55z68ma0dy] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.info-grid[b-55z68ma0dy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item[b-55z68ma0dy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .info-item label[b-55z68ma0dy] {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-item .value[b-55z68ma0dy] {
        font-size: 18px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.summary-rows[b-55z68ma0dy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row[b-55z68ma0dy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    font-size: 16px;
}

    .summary-row:last-child[b-55z68ma0dy] {
        border-bottom: none;
    }

    .summary-row.fee[b-55z68ma0dy] {
        color: #ef4444;
    }

    .summary-row.total[b-55z68ma0dy] {
        font-weight: 700;
        font-size: 20px;
        padding-top: 16px;
        border-top: 2px solid rgba(102, 126, 234, 0.2);
        margin-top: 8px;
    }

        .summary-row.total span:last-child[b-55z68ma0dy] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.commissions-list[b-55z68ma0dy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.commission-item[b-55z68ma0dy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-radius: 10px;
    transition: all 0.3s;
}

    .commission-item:hover[b-55z68ma0dy] {
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Inventory Section */
.inventory-section[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .inventory-section h3[b-55z68ma0dy] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .inventory-section h3[b-55z68ma0dy]::before {
            content: '';
            width: 5px;
            height: 28px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px;
        }

.inventory-options[b-55z68ma0dy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inventory-option[b-55z68ma0dy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .inventory-option:hover[b-55z68ma0dy] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-2px);
    }

    .inventory-option input[type="radio"][b-55z68ma0dy] {
        width: 20px;
        height: 20px;
        accent-color: #667eea;
    }

    .inventory-option span[b-55z68ma0dy] {
        font-weight: 500;
        color: #4b5563;
    }

    .inventory-option:has(input:checked)[b-55z68ma0dy] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        border-color: #667eea;
    }

        .inventory-option:has(input:checked) span[b-55z68ma0dy] {
            color: #4c1d95;
            font-weight: 600;
        }

.agent-selection[b-55z68ma0dy] {
    margin-top: 16px;
    margin-left: 32px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .agent-selection label[b-55z68ma0dy] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

    .agent-selection select[b-55z68ma0dy] {
        width: 100%;
        padding: 12px 16px;
        background: white;
        border: 2px solid transparent;
        border-radius: 10px;
        transition: all 0.3s;
        font-size: 15px;
        cursor: pointer;
    }

        .agent-selection select:focus[b-55z68ma0dy] {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* Warning Messages */
.warning-messages[b-55z68ma0dy] {
    margin-bottom: 24px;
}

    .warning-messages .alert[b-55z68ma0dy] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
        border: 1px solid rgba(245, 158, 11, 0.2);
        border-radius: 12px;
        margin-bottom: 12px;
        font-weight: 500;
        color: #92400e;
        animation: slideInLeft-b-55z68ma0dy 0.3s ease;
    }

        .warning-messages .alert i[b-55z68ma0dy] {
            font-size: 20px;
            color: #f59e0b;
        }

/* Action Buttons */
.action-buttons[b-55z68ma0dy] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .action-buttons .btn[b-55z68ma0dy] {
        padding: 14px 28px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: none;
        cursor: pointer;
        min-width: 150px;
        justify-content: center;
    }

    .action-buttons .btn-secondary[b-55z68ma0dy] {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        color: #4b5563;
    }

        .action-buttons .btn-secondary:hover[b-55z68ma0dy] {
            background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

    .action-buttons .btn-primary[b-55z68ma0dy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

        .action-buttons .btn-primary:hover:not(:disabled)[b-55z68ma0dy] {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        .action-buttons .btn-primary:disabled[b-55z68ma0dy] {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

/* Loading Container */
.loading-container[b-55z68ma0dy] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .loading-container .spinner-border[b-55z68ma0dy] {
        width: 60px;
        height: 60px;
        border: 4px solid rgba(102, 126, 234, 0.2);
        border-right-color: #667eea;
        border-radius: 50%;
        animation: spin-b-55z68ma0dy 0.8s linear infinite;
    }

/* Not Found Container */
.not-found-container[b-55z68ma0dy] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .not-found-container i[b-55z68ma0dy] {
        color: #9ca3af;
        margin-bottom: 24px;
    }

    .not-found-container h3[b-55z68ma0dy] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .not-found-container p[b-55z68ma0dy] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

    .not-found-container .btn[b-55z68ma0dy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .not-found-container .btn:hover[b-55z68ma0dy] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

/* Unauthorized Content */
.unauthorized-content[b-55z68ma0dy] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-55z68ma0dy] {
        color: #ef4444;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-55z68ma0dy] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-55z68ma0dy] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

    .unauthorized-content .btn[b-55z68ma0dy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .unauthorized-content .btn:hover[b-55z68ma0dy] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

/* Animations */
@keyframes spin-b-55z68ma0dy {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideInLeft-b-55z68ma0dy {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

/* Dark Theme Support */
[data-theme="dark"] .return-order-container[b-55z68ma0dy] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .return-order-container[b-55z68ma0dy]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .return-header[b-55z68ma0dy],
[data-theme="dark"] .order-summary-card[b-55z68ma0dy],
[data-theme="dark"] .return-items-section[b-55z68ma0dy],
[data-theme="dark"] .return-reason-section[b-55z68ma0dy],
[data-theme="dark"] .financial-summary-section[b-55z68ma0dy],
[data-theme="dark"] .inventory-section[b-55z68ma0dy],
[data-theme="dark"] .action-buttons[b-55z68ma0dy],
[data-theme="dark"] .loading-container[b-55z68ma0dy],
[data-theme="dark"] .not-found-container[b-55z68ma0dy],
[data-theme="dark"] .unauthorized-content[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .items-table th[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(71, 85, 105, 0.2) 100%);
    color: #a78bfa;
}

[data-theme="dark"] .items-table td[b-55z68ma0dy] {
    background: #1e293b;
    color: #e2e8f0;
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .summary-item label[b-55z68ma0dy],
[data-theme="dark"] .info-item label[b-55z68ma0dy] {
    color: #9ca3af;
}

[data-theme="dark"] .summary-item .value[b-55z68ma0dy],
[data-theme="dark"] .info-item .value[b-55z68ma0dy] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-back[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.3);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-back:hover[b-55z68ma0dy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

[data-theme="dark"] .reason-option[b-55z68ma0dy],
[data-theme="dark"] .inventory-option[b-55z68ma0dy] {
    background: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .reason-option span[b-55z68ma0dy],
    [data-theme="dark"] .inventory-option span[b-55z68ma0dy] {
        color: #cbd5e1;
    }

    [data-theme="dark"] .reason-option:has(input:checked)[b-55z68ma0dy],
    [data-theme="dark"] .inventory-option:has(input:checked)[b-55z68ma0dy] {
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(192, 132, 252, 0.2) 100%);
        border-color: #a78bfa;
    }

        [data-theme="dark"] .reason-option:has(input:checked) span[b-55z68ma0dy],
        [data-theme="dark"] .inventory-option:has(input:checked) span[b-55z68ma0dy] {
            color: #e2e8f0;
        }

[data-theme="dark"] .notes-section textarea[b-55z68ma0dy],
[data-theme="dark"] .return-quantity[b-55z68ma0dy],
[data-theme="dark"] .agent-selection select[b-55z68ma0dy] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .notes-section textarea:focus[b-55z68ma0dy],
    [data-theme="dark"] .return-quantity:focus[b-55z68ma0dy],
    [data-theme="dark"] .agent-selection select:focus[b-55z68ma0dy] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .installment-info[b-55z68ma0dy],
[data-theme="dark"] .return-summary[b-55z68ma0dy],
[data-theme="dark"] .commissions-details[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.2) 0%, rgba(71, 85, 105, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .commission-item[b-55z68ma0dy] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .warning-messages .alert[b-55z68ma0dy] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] .breadcrumb a[b-55z68ma0dy] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb a:hover[b-55z68ma0dy] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb span:last-child[b-55z68ma0dy] {
    color: #e2e8f0;
}

[data-theme="dark"] h1[b-55z68ma0dy], [data-theme="dark"] h3[b-55z68ma0dy], [data-theme="dark"] h4[b-55z68ma0dy] {
    color: #e2e8f0;
}

[data-theme="dark"] .header-info h1[b-55z68ma0dy],
[data-theme="dark"] .info-item .value[b-55z68ma0dy],
[data-theme="dark"] .summary-row.total span:last-child[b-55z68ma0dy] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Design */
@media (max-width: 768px) {
    .return-order-container[b-55z68ma0dy] {
        padding: 16px;
    }

    .return-header[b-55z68ma0dy],
    .order-summary-card[b-55z68ma0dy],
    .return-items-section[b-55z68ma0dy],
    .return-reason-section[b-55z68ma0dy],
    .financial-summary-section[b-55z68ma0dy],
    .inventory-section[b-55z68ma0dy],
    .action-buttons[b-55z68ma0dy] {
        padding: 20px;
        margin-bottom: 16px;
    }

    .header-info h1[b-55z68ma0dy] {
        font-size: 24px;
    }

    .summary-grid[b-55z68ma0dy],
    .info-grid[b-55z68ma0dy] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .reason-options[b-55z68ma0dy] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-55z68ma0dy] {
        flex-direction: column;
        gap: 12px;
    }

        .action-buttons .btn[b-55z68ma0dy] {
            width: 100%;
        }

    .items-table[b-55z68ma0dy] {
        font-size: 14px;
    }

        .items-table th[b-55z68ma0dy],
        .items-table td[b-55z68ma0dy] {
            padding: 12px 8px;
        }

    .product-thumb[b-55z68ma0dy] {
        width: 40px;
        height: 40px;
    }

    .return-quantity[b-55z68ma0dy] {
        width: 80px;
    }

    .agent-selection[b-55z68ma0dy] {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .header-left[b-55z68ma0dy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .btn-back[b-55z68ma0dy] {
        width: 40px;
        height: 40px;
    }

    .breadcrumb[b-55z68ma0dy] {
        font-size: 12px;
    }

    .items-table[b-55z68ma0dy] {
        display: block;
        overflow-x: auto;
    }

        .items-table table[b-55z68ma0dy] {
            min-width: 600px;
        }
}

/* RTL Support */
html[dir="rtl"] .return-order-container[b-55z68ma0dy] {
    direction: rtl;
}

html[dir="rtl"] .header-left[b-55z68ma0dy] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .items-table th[b-55z68ma0dy],
html[dir="rtl"] .items-table td[b-55z68ma0dy] {
    text-align: left;
}

html[dir="rtl"] .agent-selection[b-55z68ma0dy] {
    margin-left: 0;
    margin-right: 32px;
}

html[dir="rtl"] .action-buttons[b-55z68ma0dy] {
    justify-content: flex-start;
}

html[dir="rtl"] .summary-row[b-55z68ma0dy],
html[dir="rtl"] .commission-item[b-55z68ma0dy] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .product-info[b-55z68ma0dy] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .order-summary-card h3[b-55z68ma0dy]::before,
html[dir="rtl"] .return-items-section h3[b-55z68ma0dy]::before,
html[dir="rtl"] .return-reason-section h3[b-55z68ma0dy]::before,
html[dir="rtl"] .financial-summary-section h3[b-55z68ma0dy]::before,
html[dir="rtl"] .inventory-section h3[b-55z68ma0dy]::before {
    margin-right: 0;
    margin-left: 12px;
}

/* Print Styles */
@media print {
    .return-order-container[b-55z68ma0dy] {
        background: white !important;
    }

    .btn-back[b-55z68ma0dy],
    .action-buttons[b-55z68ma0dy],
    .breadcrumb[b-55z68ma0dy] {
        display: none !important;
    }

    .return-header[b-55z68ma0dy],
    .order-summary-card[b-55z68ma0dy],
    .return-items-section[b-55z68ma0dy],
    .return-reason-section[b-55z68ma0dy],
    .financial-summary-section[b-55z68ma0dy],
    .inventory-section[b-55z68ma0dy] {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
        page-break-inside: avoid;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantSettings.razor.rz.scp.css */
/* ===================================
   Merchant Settings - Modern Professional CSS
   ���� ������� ������ - ����� ���� �������
   =================================== */

/* Page Container */
.settings-page[b-kl1pbhnlv8] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .settings-page[b-kl1pbhnlv8]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .settings-page > *[b-kl1pbhnlv8] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-kl1pbhnlv8] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-kl1pbhnlv8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-kl1pbhnlv8] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-kl1pbhnlv8] {
        color: #667eea;
    }

.breadcrumb-separator[b-kl1pbhnlv8] {
    color: #d1d5db;
}

.breadcrumb-current[b-kl1pbhnlv8] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-kl1pbhnlv8] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-kl1pbhnlv8] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Loading Container */
.loading-container[b-kl1pbhnlv8] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-kl1pbhnlv8] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-kl1pbhnlv8 0.8s linear infinite;
}

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

/* Settings Tabs */
.settings-tabs[b-kl1pbhnlv8] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.tabs-nav[b-kl1pbhnlv8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 100px;
}

.tab-btn[b-kl1pbhnlv8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    font-weight: 600;
    color: #6b7280;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

    .tab-btn i[b-kl1pbhnlv8] {
        font-size: 18px;
        opacity: 0.8;
        transition: all 0.3s;
    }

    .tab-btn[b-kl1pbhnlv8]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .tab-btn:hover[b-kl1pbhnlv8] {
        background: rgba(255, 255, 255, 0.9);
        color: #4c1d95;
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

        .tab-btn:hover i[b-kl1pbhnlv8] {
            opacity: 1;
            transform: scale(1.1);
        }

    .tab-btn.active[b-kl1pbhnlv8] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
        color: #4c1d95;
        font-weight: 700;
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
    }

        .tab-btn.active[b-kl1pbhnlv8]::before {
            opacity: 1;
        }

        .tab-btn.active i[b-kl1pbhnlv8] {
            color: #667eea;
            opacity: 1;
        }

/* Tabs Content */
.tabs-content[b-kl1pbhnlv8] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tab-panel[b-kl1pbhnlv8] {
    padding: 30px;
}

/* Section Titles */
.section-title[b-kl1pbhnlv8] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
}

    .section-title[b-kl1pbhnlv8]::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 40px;
        height: 3px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 3px;
    }

.subsection-title[b-kl1pbhnlv8] {
    font-size: 18px;
    font-weight: 600;
    margin: 30px 0 20px 0;
    color: #4c1d95;
}

/* Form Styling */
.form-grid[b-kl1pbhnlv8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.form-group[b-kl1pbhnlv8] {
    margin-bottom: 8px;
}

    .form-group label[b-kl1pbhnlv8] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
    }

.form-control[b-kl1pbhnlv8] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-kl1pbhnlv8] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control[b-kl1pbhnlv8]::placeholder {
        color: #94a3b8;
    }

.form-text[b-kl1pbhnlv8] {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.form-actions[b-kl1pbhnlv8] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Checkbox & Switch Styling */
.checkbox-label[b-kl1pbhnlv8] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: #4c1d95;
    font-weight: 600;
}

.switch[b-kl1pbhnlv8] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

    .switch input[b-kl1pbhnlv8] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-kl1pbhnlv8] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 34px;
}

    .slider[b-kl1pbhnlv8]:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider[b-kl1pbhnlv8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    input:checked + .slider[b-kl1pbhnlv8]:before {
        transform: translateX(26px);
    }

/* Settings Grid for Toggle Settings */
.settings-grid[b-kl1pbhnlv8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.setting-item[b-kl1pbhnlv8] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

    .setting-item[b-kl1pbhnlv8]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .setting-item:hover[b-kl1pbhnlv8] {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

        .setting-item:hover[b-kl1pbhnlv8]::before {
            opacity: 1;
        }

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

    .setting-header h4[b-kl1pbhnlv8] {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: #1f2937;
    }

    .setting-header p[b-kl1pbhnlv8] {
        margin: 0;
        font-size: 14px;
        color: #6b7280;
    }

.setting-details[b-kl1pbhnlv8] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.form-row[b-kl1pbhnlv8] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

    .form-row .form-group[b-kl1pbhnlv8] {
        flex: 1;
        min-width: 150px;
    }

/* Wallet Information */
.wallet-info[b-kl1pbhnlv8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.info-card[b-kl1pbhnlv8] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    text-align: center;
}

    .info-card:hover[b-kl1pbhnlv8] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

.info-label[b-kl1pbhnlv8] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.info-value[b-kl1pbhnlv8] {
    font-weight: 700;
    color: #1f2937;
}

.text-success[b-kl1pbhnlv8] {
    color: #10b981 !important;
}

.text-warning[b-kl1pbhnlv8] {
    color: #f59e0b !important;
}

.text-danger[b-kl1pbhnlv8] {
    color: #ef4444 !important;
}

/* Payment Gateways */
.payment-gateways-grid[b-kl1pbhnlv8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.payment-gateway-card[b-kl1pbhnlv8] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    overflow: hidden;
    border: 2px solid transparent;
}

    .payment-gateway-card:hover[b-kl1pbhnlv8] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .payment-gateway-card.active[b-kl1pbhnlv8] {
        border-color: #10b981;
    }

.gateway-header[b-kl1pbhnlv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.7) 0%, rgba(214, 240, 253, 0.7) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .gateway-header h4[b-kl1pbhnlv8] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
    }

.gateway-body[b-kl1pbhnlv8] {
    padding: 20px;
}

    .gateway-body p[b-kl1pbhnlv8] {
        margin: 0 0 16px 0;
        color: #6b7280;
        font-size: 14px;
    }

.gateway-stats[b-kl1pbhnlv8] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stat[b-kl1pbhnlv8] {
    text-align: center;
    flex: 1;
}

.stat-label[b-kl1pbhnlv8] {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
    display: block;
}

.stat-value[b-kl1pbhnlv8] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

/* Subscription Styling */
.subscription-info[b-kl1pbhnlv8] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.subscription-header[b-kl1pbhnlv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.plan-badge[b-kl1pbhnlv8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
}

    .plan-badge i[b-kl1pbhnlv8] {
        font-size: 18px;
    }

    .plan-badge.free[b-kl1pbhnlv8] {
        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
        color: white;
    }

    .plan-badge.premium[b-kl1pbhnlv8] {
        background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
        color: white;
    }

.subscription-status[b-kl1pbhnlv8] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

    .subscription-status.active[b-kl1pbhnlv8] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .subscription-status.inactive[b-kl1pbhnlv8] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

.subscription-details[b-kl1pbhnlv8] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.detail-row[b-kl1pbhnlv8] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

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

.detail-label[b-kl1pbhnlv8] {
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-kl1pbhnlv8] {
    font-weight: 600;
    color: #1f2937;
}

/* Usage Statistics */
.usage-stats[b-kl1pbhnlv8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.usage-item[b-kl1pbhnlv8] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 16px;
}

.usage-header[b-kl1pbhnlv8] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
}

.progress[b-kl1pbhnlv8] {
    height: 8px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-kl1pbhnlv8] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

.subscription-actions[b-kl1pbhnlv8] {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Security Section */
.security-section[b-kl1pbhnlv8] {
    margin-bottom: 30px;
}

.security-info[b-kl1pbhnlv8] {
    margin-top: 40px;
}

.info-grid[b-kl1pbhnlv8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item[b-kl1pbhnlv8] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Empty State */
.empty-state[b-kl1pbhnlv8] {
    text-align: center;
    padding: 40px 20px;
}

    .empty-state i[b-kl1pbhnlv8] {
        font-size: 48px;
        margin-bottom: 16px;
        color: #94a3b8;
    }

    .empty-state p[b-kl1pbhnlv8] {
        color: #6b7280;
        font-size: 16px;
    }

/* Unauthorized Page */
.unauthorized-container[b-kl1pbhnlv8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 20px;
}

    .unauthorized-container i[b-kl1pbhnlv8] {
        font-size: 48px;
        margin-bottom: 16px;
    }

    .unauthorized-container h3[b-kl1pbhnlv8] {
        font-size: 24px;
        margin-bottom: 8px;
        color: #1f2937;
    }

    .unauthorized-container p[b-kl1pbhnlv8] {
        color: #6b7280;
        margin-bottom: 24px;
        max-width: 500px;
    }

/* Validation Styles */
.validation-message[b-kl1pbhnlv8] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
}

/* Button Styles */
.btn[b-kl1pbhnlv8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    border: none;
    cursor: pointer;
}

.btn-primary[b-kl1pbhnlv8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-kl1pbhnlv8] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-outline-primary[b-kl1pbhnlv8] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
}

    .btn-outline-primary:hover[b-kl1pbhnlv8] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
    }

.btn-sm[b-kl1pbhnlv8] {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .settings-tabs[b-kl1pbhnlv8] {
        grid-template-columns: 1fr;
    }

    .tabs-nav[b-kl1pbhnlv8] {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .tab-btn[b-kl1pbhnlv8] {
        flex: 0 0 auto;
        padding: 12px 16px;
    }

        .tab-btn span[b-kl1pbhnlv8] {
            display: none;
        }

        .tab-btn i[b-kl1pbhnlv8] {
            font-size: 20px;
            margin: 0;
        }

    .settings-grid[b-kl1pbhnlv8],
    .payment-gateways-grid[b-kl1pbhnlv8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header[b-kl1pbhnlv8] {
        padding: 16px;
    }

    .page-title[b-kl1pbhnlv8] {
        font-size: 28px;
    }

    .page-subtitle[b-kl1pbhnlv8] {
        font-size: 16px;
    }

    .tab-panel[b-kl1pbhnlv8] {
        padding: 20px;
    }

    .form-grid[b-kl1pbhnlv8],
    .wallet-info[b-kl1pbhnlv8],
    .info-grid[b-kl1pbhnlv8],
    .usage-stats[b-kl1pbhnlv8] {
        grid-template-columns: 1fr;
    }

    .subscription-header[b-kl1pbhnlv8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .form-actions[b-kl1pbhnlv8] {
        flex-direction: column;
    }

        .form-actions .btn[b-kl1pbhnlv8] {
            width: 100%;
        }
}

/* Dark Theme Support */
[data-theme="dark"] .settings-page[b-kl1pbhnlv8] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .settings-page[b-kl1pbhnlv8]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-kl1pbhnlv8],
[data-theme="dark"] .tabs-content[b-kl1pbhnlv8],
[data-theme="dark"] .tab-btn[b-kl1pbhnlv8] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .page-subtitle[b-kl1pbhnlv8],
[data-theme="dark"] .breadcrumb-link[b-kl1pbhnlv8],
[data-theme="dark"] .setting-header p[b-kl1pbhnlv8],
[data-theme="dark"] .info-label[b-kl1pbhnlv8],
[data-theme="dark"] .detail-label[b-kl1pbhnlv8],
[data-theme="dark"] .form-text[b-kl1pbhnlv8] {
    color: #94a3b8;
}

[data-theme="dark"] .breadcrumb-current[b-kl1pbhnlv8],
[data-theme="dark"] .tab-btn.active[b-kl1pbhnlv8],
[data-theme="dark"] .form-group label[b-kl1pbhnlv8] {
    color: #e2e8f0;
}

[data-theme="dark"] .setting-header h4[b-kl1pbhnlv8],
[data-theme="dark"] .info-value[b-kl1pbhnlv8],
[data-theme="dark"] .detail-value[b-kl1pbhnlv8],
[data-theme="dark"] .stat-value[b-kl1pbhnlv8],
[data-theme="dark"] .gateway-header h4[b-kl1pbhnlv8] {
    color: #f1f5f9;
}

[data-theme="dark"] .form-control[b-kl1pbhnlv8] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-kl1pbhnlv8] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .setting-item[b-kl1pbhnlv8],
[data-theme="dark"] .info-card[b-kl1pbhnlv8],
[data-theme="dark"] .payment-gateway-card[b-kl1pbhnlv8],
[data-theme="dark"] .subscription-info[b-kl1pbhnlv8],
[data-theme="dark"] .subscription-details[b-kl1pbhnlv8],
[data-theme="dark"] .usage-item[b-kl1pbhnlv8],
[data-theme="dark"] .info-item[b-kl1pbhnlv8] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .gateway-header[b-kl1pbhnlv8] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(30, 41, 59, 0.7) 100%);
}

[data-theme="dark"] .progress[b-kl1pbhnlv8] {
    background: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .tab-btn[b-kl1pbhnlv8] {
    color: #94a3b8;
}

    [data-theme="dark"] .tab-btn.active[b-kl1pbhnlv8] {
        background: linear-gradient(135deg, rgba(71, 85, 105, 0.3) 0%, rgba(51, 65, 85, 0.3) 100%);
    }

    [data-theme="dark"] .tab-btn:hover[b-kl1pbhnlv8] {
        background: rgba(51, 65, 85, 0.3);
        color: #e2e8f0;
    }

[data-theme="dark"] .slider[b-kl1pbhnlv8] {
    background-color: #475569;
}

[data-theme="dark"] .empty-state i[b-kl1pbhnlv8],
[data-theme="dark"] .empty-state p[b-kl1pbhnlv8] {
    color: #64748b;
}

[data-theme="dark"] .unauthorized-container h3[b-kl1pbhnlv8] {
    color: #f1f5f9;
}

[data-theme="dark"] .unauthorized-container p[b-kl1pbhnlv8] {
    color: #94a3b8;
}

.preview-section[b-kl1pbhnlv8] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.preview-box[b-kl1pbhnlv8] {
    background: white;
    border-radius: 6px;
    padding: 15px;
    border: 1px solid #dee2e6;
}

.preview-item[b-kl1pbhnlv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f4;
}

    .preview-item:last-child[b-kl1pbhnlv8] {
        border-bottom: none;
    }

.preview-label[b-kl1pbhnlv8] {
    font-weight: 500;
    color: #495057;
}

.preview-value[b-kl1pbhnlv8] {
    font-weight: 600;
    color: #212529;
}

    .preview-value.highlight[b-kl1pbhnlv8] {
        color: #0d6efd;
        background: #e7f3ff;
        padding: 4px 8px;
        border-radius: 4px;
    }

.info-box[b-kl1pbhnlv8] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e7f3ff;
    border: 1px solid #b6d7ff;
    border-radius: 6px;
    padding: 12px;
    margin-top: 10px;
}

    .info-box i[b-kl1pbhnlv8] {
        color: #0d6efd;
    }

.section-description[b-kl1pbhnlv8] {
    color: #6c757d;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}


/* ����� ����� ������ */
.logo-upload-container[b-kl1pbhnlv8] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    background-color: #f9f9f9;
}

.logo-preview[b-kl1pbhnlv8] {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.logo-image[b-kl1pbhnlv8] {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.logo-overlay[b-kl1pbhnlv8] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo-preview:hover .logo-overlay[b-kl1pbhnlv8] {
    opacity: 1;
}

.no-logo[b-kl1pbhnlv8] {
    text-align: center;
    padding: 40px 20px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    background-color: white;
}

    .no-logo i[b-kl1pbhnlv8] {
        color: #999;
        margin-bottom: 15px;
    }

.upload-progress[b-kl1pbhnlv8] {
    margin: 15px 0;
}

    .upload-progress .progress[b-kl1pbhnlv8] {
        height: 25px;
        border-radius: 5px;
        background-color: #f0f0f0;
    }

    .upload-progress .progress-bar[b-kl1pbhnlv8] {
        background: linear-gradient(45deg, #007bff, #0056b3);
        color: white;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.logo-guidelines[b-kl1pbhnlv8] {
    margin-top: 20px;
    padding: 15px;
    background-color: #e7f1ff;
    border: 1px solid #b6d7ff;
    border-radius: 5px;
}

    .logo-guidelines h6[b-kl1pbhnlv8] {
        color: #0056b3;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 600;
    }

    .logo-guidelines ul[b-kl1pbhnlv8] {
        margin: 0;
        padding-left: 20px;
        font-size: 13px;
        color: #444;
    }

    .logo-guidelines li[b-kl1pbhnlv8] {
        margin-bottom: 5px;
    }

/* ����� responsive */
@media (max-width: 768px) {
    .logo-upload-container[b-kl1pbhnlv8] {
        padding: 15px;
    }

    .logo-image[b-kl1pbhnlv8] {
        width: 120px;
        height: 120px;
    }

    .no-logo[b-kl1pbhnlv8] {
        padding: 30px 15px;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantShareholders.razor.rz.scp.css */

/* Shareholders Management Page - Modern Professional Styles
   Following app.css architecture and Users.razor.css design patterns */

/* Page Container */
.shareholders-page[b-vf0ojxi1hg] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .shareholders-page[b-vf0ojxi1hg]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .shareholders-page > *[b-vf0ojxi1hg] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-vf0ojxi1hg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-vf0ojxi1hg] {
    flex: 1;
}

.page-header h1[b-vf0ojxi1hg] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-description[b-vf0ojxi1hg] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.header-actions[b-vf0ojxi1hg] {
    display: flex;
    gap: 12px;
}

/* Statistics Cards */
.statistics-row[b-vf0ojxi1hg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-vf0ojxi1hg]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-vf0ojxi1hg] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-vf0ojxi1hg]::before {
            opacity: 1;
        }

.stat-icon[b-vf0ojxi1hg] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

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

.bg-success[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.bg-info[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.bg-warning[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
}

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

    .stat-content h3[b-vf0ojxi1hg] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 4px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-content p[b-vf0ojxi1hg] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Search and Filters */
.search-filters[b-vf0ojxi1hg] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 8px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    align-items: center;
    justify-content: space-between;
}

.search-box[b-vf0ojxi1hg] {
    position: relative;
    flex: 1;
    min-width: 300px;
}

    .search-box i[b-vf0ojxi1hg] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
    }

    .search-box input[b-vf0ojxi1hg] {
        width: 100%;
        padding: 12px 16px 12px 40px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .search-box input:focus[b-vf0ojxi1hg] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .search-box input[b-vf0ojxi1hg]::placeholder {
            color: #9ca3af;
        }

.filter-buttons[b-vf0ojxi1hg] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn[b-vf0ojxi1hg] {
    padding: 12px 20px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.3s;
}

    .filter-btn:hover[b-vf0ojxi1hg] {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.3);
    }

    .filter-btn.active[b-vf0ojxi1hg] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Shareholders Table */
.shareholders-table[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.table[b-vf0ojxi1hg] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th[b-vf0ojxi1hg] {
        padding: 18px 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .table td[b-vf0ojxi1hg] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .table tbody tr[b-vf0ojxi1hg] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .table tbody tr:hover[b-vf0ojxi1hg] {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

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

/* Inactive Row */
.inactive-row[b-vf0ojxi1hg] {
    opacity: 0.7;
}

/* Shareholder Info */
.shareholder-info[b-vf0ojxi1hg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-circle[b-vf0ojxi1hg] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.name[b-vf0ojxi1hg] {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}

.contact[b-vf0ojxi1hg] {
    font-size: 13px;
    color: #9333ea;
}

/* Type Badge */
.type-badge[b-vf0ojxi1hg] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .type-badge.percentage[b-vf0ojxi1hg] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .type-badge.fixed[b-vf0ojxi1hg] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

/* Amount and Percentage */
.amount[b-vf0ojxi1hg], .profits[b-vf0ojxi1hg], .balance[b-vf0ojxi1hg] {
    font-weight: 600;
}

.percentage-badge[b-vf0ojxi1hg] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    color: #4c1d95;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Status Badge */
.status-badge[b-vf0ojxi1hg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.active[b-vf0ojxi1hg] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .status-badge.inactive[b-vf0ojxi1hg] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

/* Action Buttons */
.action-buttons[b-vf0ojxi1hg] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

    .action-buttons .btn[b-vf0ojxi1hg] {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

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

        .action-buttons .btn:hover[b-vf0ojxi1hg]::before {
            width: 100px;
            height: 100px;
        }

.btn-primary[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-primary:hover[b-vf0ojxi1hg] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-info[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-info:hover[b-vf0ojxi1hg] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-success[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-success:hover[b-vf0ojxi1hg] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-warning[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(216, 140, 20, 0.2);
}

    .btn-warning:hover[b-vf0ojxi1hg] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(216, 140, 20, 0.3);
    }

/* Mobile Cards View */
.shareholders-cards[b-vf0ojxi1hg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shareholder-card[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .shareholder-card:hover[b-vf0ojxi1hg] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .shareholder-card.inactive[b-vf0ojxi1hg] {
        opacity: 0.7;
    }

.card-header[b-vf0ojxi1hg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .card-header h4[b-vf0ojxi1hg] {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: #1f2937;
    }

.card-body[b-vf0ojxi1hg] {
    padding: 16px;
}

.info-grid[b-vf0ojxi1hg] {
    display: grid;
    gap: 12px;
}

.info-row[b-vf0ojxi1hg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(102, 126, 234, 0.1);
}

    .info-row:last-child[b-vf0ojxi1hg] {
        border-bottom: none;
    }

.label[b-vf0ojxi1hg] {
    font-size: 14px;
    color: #6b7280;
}

.value[b-vf0ojxi1hg] {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

.card-footer[b-vf0ojxi1hg] {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    justify-content: flex-end;
}

/* Empty State */
.empty-state[b-vf0ojxi1hg] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-vf0ojxi1hg] {
        font-size: 64px;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-state h3[b-vf0ojxi1hg] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .empty-state p[b-vf0ojxi1hg] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Loading Container */
.loading-container[b-vf0ojxi1hg] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.spinner-border[b-vf0ojxi1hg] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-vf0ojxi1hg 0.8s linear infinite;
}

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

/* Modals */
.modal-backdrop[b-vf0ojxi1hg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: blur(8px);
    animation: fadeIn-b-vf0ojxi1hg 0.3s;
}

.modal-dialog[b-vf0ojxi1hg] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: 100%;
    max-width: 600px;
    animation: zoomIn-b-vf0ojxi1hg 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .modal-dialog.modal-lg[b-vf0ojxi1hg] {
        max-width: 800px;
    }

.modal-content[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.modal-header[b-vf0ojxi1hg] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.modal-title[b-vf0ojxi1hg] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.close-btn[b-vf0ojxi1hg] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .close-btn:hover[b-vf0ojxi1hg] {
        background: rgba(102, 126, 234, 0.1);
        color: #4c1d95;
        transform: rotate(90deg);
    }

.modal-body[b-vf0ojxi1hg] {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer[b-vf0ojxi1hg] {
    padding: 20px 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

/* Forms */
.form-row[b-vf0ojxi1hg] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-vf0ojxi1hg] {
    flex: 1;
    min-width: 250px;
    margin-bottom: 16px;
}

    .form-group label[b-vf0ojxi1hg] {
        display: block;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 8px;
        color: #4c1d95;
    }

.form-control[b-vf0ojxi1hg] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .form-control:focus[b-vf0ojxi1hg] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.form-text[b-vf0ojxi1hg] {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

/* Distribution Modal Specific */
.period-selection[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

    .period-selection h6[b-vf0ojxi1hg] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
        color: #4c1d95;
    }

.profit-summary[b-vf0ojxi1hg], .distribution-details[b-vf0ojxi1hg], .distribution-preview[b-vf0ojxi1hg] {
    margin-bottom: 24px;
}

    .profit-summary h6[b-vf0ojxi1hg], .distribution-details h6[b-vf0ojxi1hg], .distribution-preview h6[b-vf0ojxi1hg] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
        color: #4c1d95;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

.summary-cards[b-vf0ojxi1hg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.summary-card[b-vf0ojxi1hg] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

    .summary-card label[b-vf0ojxi1hg] {
        display: block;
        font-size: 14px;
        color: #6b7280;
        margin-bottom: 8px;
    }

    .summary-card h4[b-vf0ojxi1hg] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        color: #4c1d95;
    }

    .summary-card.success h4[b-vf0ojxi1hg] {
        color: #059669;
    }

.expense-breakdown[b-vf0ojxi1hg] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 16px;
}

.text-end[b-vf0ojxi1hg] {
    text-align: right;
}

.fw-bold[b-vf0ojxi1hg] {
    font-weight: 700;
}

.text-success[b-vf0ojxi1hg] {
    color: #059669;
}

.text-muted[b-vf0ojxi1hg] {
    color: #6b7280;
}

.spinner-border-sm[b-vf0ojxi1hg] {
    width: 16px;
    height: 16px;
}

.me-2[b-vf0ojxi1hg] {
    margin-right: 8px;
}

.mt-3[b-vf0ojxi1hg] {
    margin-top: 16px;
}

.mt-4[b-vf0ojxi1hg] {
    margin-top: 24px;
}

/* Unauthorized Access */
.unauthorized-container[b-vf0ojxi1hg] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 64px auto;
    max-width: 600px;
}

    .unauthorized-container i[b-vf0ojxi1hg] {
        font-size: 64px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .unauthorized-container h3[b-vf0ojxi1hg] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .unauthorized-container p[b-vf0ojxi1hg] {
        font-size: 16px;
        color: #6b7280;
    }

/* Animations */
@keyframes fadeIn-b-vf0ojxi1hg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn-b-vf0ojxi1hg {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .page-header[b-vf0ojxi1hg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-actions[b-vf0ojxi1hg] {
        width: 100%;
    }

    .statistics-row[b-vf0ojxi1hg] {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-filters[b-vf0ojxi1hg] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-vf0ojxi1hg] {
        width: 100%;
    }

    .filter-buttons[b-vf0ojxi1hg] {
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .shareholders-page[b-vf0ojxi1hg] {
        padding: 16px;
    }

    .page-header h1[b-vf0ojxi1hg] {
        font-size: 24px;
    }

    .statistics-row[b-vf0ojxi1hg] {
        grid-template-columns: 1fr;
    }

    .form-row[b-vf0ojxi1hg] {
        flex-direction: column;
    }

    .summary-cards[b-vf0ojxi1hg] {
        grid-template-columns: 1fr;
    }

    .modal-dialog[b-vf0ojxi1hg] {
        width: calc(100% - 32px);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .shareholders-page[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .shareholders-page[b-vf0ojxi1hg]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-vf0ojxi1hg],
[data-theme="dark"] .search-filters[b-vf0ojxi1hg],
[data-theme="dark"] .shareholders-table[b-vf0ojxi1hg],
[data-theme="dark"] .stat-card[b-vf0ojxi1hg],
[data-theme="dark"] .shareholder-card[b-vf0ojxi1hg],
[data-theme="dark"] .empty-state[b-vf0ojxi1hg],
[data-theme="dark"] .unauthorized-container[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-description[b-vf0ojxi1hg],
[data-theme="dark"] .stat-content p[b-vf0ojxi1hg],
[data-theme="dark"] .label[b-vf0ojxi1hg],
[data-theme="dark"] .text-muted[b-vf0ojxi1hg],
[data-theme="dark"] .form-text[b-vf0ojxi1hg] {
    color: #94a3b8;
}

[data-theme="dark"] .name[b-vf0ojxi1hg],
[data-theme="dark"] .value[b-vf0ojxi1hg],
[data-theme="dark"] .card-header h4[b-vf0ojxi1hg] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-control[b-vf0ojxi1hg],
[data-theme="dark"] .summary-card[b-vf0ojxi1hg],
[data-theme="dark"] .expense-breakdown[b-vf0ojxi1hg],
[data-theme="dark"] .period-selection[b-vf0ojxi1hg] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-vf0ojxi1hg] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .modal-content[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
}

[data-theme="dark"] .table td[b-vf0ojxi1hg] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .info-row[b-vf0ojxi1hg] {
    border-bottom: 1px dashed rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-header[b-vf0ojxi1hg],
[data-theme="dark"] .modal-footer[b-vf0ojxi1hg],
[data-theme="dark"] .card-header[b-vf0ojxi1hg],
[data-theme="dark"] .card-footer[b-vf0ojxi1hg] {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.2) 0%, rgba(51, 65, 85, 0.2) 100%);
}

[data-theme="dark"] .summary-card h4[b-vf0ojxi1hg],
[data-theme="dark"] .profit-summary h6[b-vf0ojxi1hg],
[data-theme="dark"] .distribution-details h6[b-vf0ojxi1hg],
[data-theme="dark"] .distribution-preview h6[b-vf0ojxi1hg],
[data-theme="dark"] .period-selection h6[b-vf0ojxi1hg],
[data-theme="dark"] .empty-state h3[b-vf0ojxi1hg],
[data-theme="dark"] .unauthorized-container h3[b-vf0ojxi1hg],
[data-theme="dark"] .form-group label[b-vf0ojxi1hg] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-vf0ojxi1hg],
[data-theme="dark"] .unauthorized-container p[b-vf0ojxi1hg] {
    color: #94a3b8;
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantShareholdersDetalis.razor.rz.scp.css */

/* ===================================
   Shareholder Details Page - Modern Professional CSS
   =================================== */

/* Page Container & Structure */
.page-header[b-73q4981zuo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .page-header[b-73q4981zuo] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.page-title[b-73q4981zuo] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-theme="dark"] .page-title[b-73q4981zuo] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-title i[b-73q4981zuo] {
    font-size: 28px;
}

/* Breadcrumbs */
.breadcrumb[b-73q4981zuo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

    .breadcrumb a[b-73q4981zuo] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
    }

        .breadcrumb a:hover[b-73q4981zuo] {
            color: #667eea;
        }

[data-theme="dark"] .breadcrumb a[b-73q4981zuo] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb a:hover[b-73q4981zuo] {
        color: #a78bfa;
    }

.breadcrumb-item.active[b-73q4981zuo] {
    color: #4c1d95;
    font-weight: 600;
}

[data-theme="dark"] .breadcrumb-item.active[b-73q4981zuo] {
    color: #e2e8f0;
}

/* Action Buttons */
.action-buttons[b-73q4981zuo] {
    display: flex;
    gap: 12px;
}

/* Stats Cards Section */
.stats-cards[b-73q4981zuo] {
    margin-bottom: 32px;
}

.stat-card[b-73q4981zuo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .stat-card[b-73q4981zuo] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.stat-card:hover[b-73q4981zuo] {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.stat-card[b-73q4981zuo]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: opacity 0.3s;
    opacity: 0;
}

.stat-card:hover[b-73q4981zuo]::before {
    opacity: 1;
}

.stat-icon[b-73q4981zuo] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

    .stat-icon.bg-primary[b-73q4981zuo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.bg-success[b-73q4981zuo] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-icon.bg-warning[b-73q4981zuo] {
        background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
    }

    .stat-icon.bg-info[b-73q4981zuo] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

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

    .stat-content h3[b-73q4981zuo] {
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 4px;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

[data-theme="dark"] .stat-content h3[b-73q4981zuo] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-content p[b-73q4981zuo] {
    color: #6b7280;
    margin: 0;
    font-size: 15px;
}

[data-theme="dark"] .stat-content p[b-73q4981zuo] {
    color: #9ca3af;
}

/* Info Cards */
.info-card[b-73q4981zuo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .info-card[b-73q4981zuo] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.info-card:hover[b-73q4981zuo] {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.card-header[b-73q4981zuo] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

[data-theme="dark"] .card-header[b-73q4981zuo] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

.card-header h5[b-73q4981zuo] {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4c1d95;
}

[data-theme="dark"] .card-header h5[b-73q4981zuo] {
    color: #e2e8f0;
}

.card-header h5 i[b-73q4981zuo] {
    color: #667eea;
}

[data-theme="dark"] .card-header h5 i[b-73q4981zuo] {
    color: #a78bfa;
}

.card-body[b-73q4981zuo] {
    padding: 24px;
}

/* Personal Information */
.info-item[b-73q4981zuo] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .info-item:last-child[b-73q4981zuo] {
        border-bottom: none;
    }

    .info-item label[b-73q4981zuo] {
        font-weight: 600;
        color: #4b5563;
        margin: 0;
        width: 40%;
    }

[data-theme="dark"] .info-item label[b-73q4981zuo] {
    color: #9ca3af;
}

.info-item span[b-73q4981zuo] {
    color: #1f2937;
    max-width: 60%;
    word-break: break-word;
}

[data-theme="dark"] .info-item span[b-73q4981zuo] {
    color: #e2e8f0;
}

/* Statement Summary */
.statement-summary[b-73q4981zuo] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

[data-theme="dark"] .statement-summary[b-73q4981zuo] {
    background: rgba(102, 126, 234, 0.1);
}

.statement-summary small[b-73q4981zuo] {
    display: block;
    margin-bottom: 4px;
}

.statement-summary h6[b-73q4981zuo] {
    margin: 0;
    font-weight: 600;
}

/* Tables */
.table[b-73q4981zuo] {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th[b-73q4981zuo] {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background: rgba(102, 126, 234, 0.02);
    }

[data-theme="dark"] .table th[b-73q4981zuo] {
    color: #a78bfa;
    background: rgba(102, 126, 234, 0.05);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

.table td[b-73q4981zuo] {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(102, 126, 234, 0.05);
    color: #4b5563;
}

[data-theme="dark"] .table td[b-73q4981zuo] {
    color: #e2e8f0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.2);
}

.table tr:hover td[b-73q4981zuo] {
    background: rgba(102, 126, 234, 0.03);
}

[data-theme="dark"] .table tr:hover td[b-73q4981zuo] {
    background: rgba(102, 126, 234, 0.05);
}

.table tbody tr:last-child td[b-73q4981zuo] {
    border-bottom: none;
}

/* Transaction Cards (Mobile) */
.transaction-card[b-73q4981zuo], .distribution-card[b-73q4981zuo] {
    background: white;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
}

[data-theme="dark"] .transaction-card[b-73q4981zuo], [data-theme="dark"] .distribution-card[b-73q4981zuo] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.transaction-card:hover[b-73q4981zuo], .distribution-card:hover[b-73q4981zuo] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #667eea;
}

/* Filter Date Range */
.date-range-filter[b-73q4981zuo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range-filter input[b-73q4981zuo] {
        width: 140px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        padding: 8px 12px;
        font-size: 14px;
        transition: all 0.3s;
    }

[data-theme="dark"] .date-range-filter input[b-73q4981zuo] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

.date-range-filter input:focus[b-73q4981zuo] {
    outline: none;
    background: white;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .date-range-filter input:focus[b-73q4981zuo] {
    background: #334155;
    border-color: #a78bfa;
}

/* Button styles */
.btn-gradient-primary[b-73q4981zuo] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-73q4981zuo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-outline-primary[b-73q4981zuo] {
    background: transparent;
    color: #5a6cb3;
    border: 2px solid rgba(90, 108, 179, 0.3);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-outline-primary:hover[b-73q4981zuo] {
        background: rgba(90, 108, 179, 0.1);
        border-color: #5a6cb3;
        transform: translateY(-2px);
    }

.btn-outline-danger[b-73q4981zuo] {
    background: transparent;
    color: #d04e5f;
    border: 2px solid rgba(208, 78, 95, 0.3);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-outline-danger:hover[b-73q4981zuo] {
        background: rgba(208, 78, 95, 0.1);
        border-color: #d04e5f;
        transform: translateY(-2px);
    }

.btn-outline-success[b-73q4981zuo] {
    background: transparent;
    color: #3bc968;
    border: 2px solid rgba(59, 201, 104, 0.3);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-outline-success:hover[b-73q4981zuo] {
        background: rgba(59, 201, 104, 0.1);
        border-color: #3bc968;
        transform: translateY(-2px);
    }

.btn-success[b-73q4981zuo] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-success:hover[b-73q4981zuo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-warning[b-73q4981zuo] {
    background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2);
}

    .btn-warning:hover[b-73q4981zuo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(249, 115, 22, 0.3);
    }

/* Custom Badge Styling */
.badge[b-73q4981zuo] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
}

    .badge.bg-success[b-73q4981zuo] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%) !important;
        box-shadow: 0 2px 8px rgba(59, 201, 104, 0.2);
    }

    .badge.bg-warning[b-73q4981zuo] {
        background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%) !important;
        box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
    }

    .badge.bg-danger[b-73q4981zuo] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%) !important;
        box-shadow: 0 2px 8px rgba(208, 78, 95, 0.2);
    }

    .badge.bg-info[b-73q4981zuo] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%) !important;
        box-shadow: 0 2px 8px rgba(74, 163, 194, 0.2);
    }

    .badge.bg-primary[b-73q4981zuo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

    .badge i[b-73q4981zuo] {
        margin-right: 4px;
        font-size: 10px;
    }

/* Loading Container */
.loading-container[b-73q4981zuo] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-73q4981zuo] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-73q4981zuo 0.8s linear infinite;
}

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

/* Empty States */
.empty-state-container[b-73q4981zuo], .unauthorized-container[b-73q4981zuo] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px 0;
}

[data-theme="dark"] .empty-state-container[b-73q4981zuo], [data-theme="dark"] .unauthorized-container[b-73q4981zuo] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.empty-state-container i[b-73q4981zuo], .unauthorized-container i[b-73q4981zuo] {
    font-size: 60px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .empty-state-container i[b-73q4981zuo], [data-theme="dark"] .unauthorized-container i[b-73q4981zuo] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state-container h3[b-73q4981zuo], .unauthorized-container h3[b-73q4981zuo] {
    font-size: 24px;
    color: #4c1d95;
    margin-bottom: 12px;
    font-weight: 700;
}

[data-theme="dark"] .empty-state-container h3[b-73q4981zuo], [data-theme="dark"] .unauthorized-container h3[b-73q4981zuo] {
    color: #e2e8f0;
}

.empty-state-container p[b-73q4981zuo], .unauthorized-container p[b-73q4981zuo] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
}

[data-theme="dark"] .empty-state-container p[b-73q4981zuo], [data-theme="dark"] .unauthorized-container p[b-73q4981zuo] {
    color: #9ca3af;
}

.empty-state[b-73q4981zuo] {
    text-align: center;
    padding: 60px 0;
    color: #6b7280;
}

    .empty-state i[b-73q4981zuo] {
        font-size: 40px;
        margin-bottom: 16px;
        color: #cbd5e1;
    }

/* Custom Modal */
.custom-modal-backdrop[b-73q4981zuo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1040;
}

.custom-modal[b-73q4981zuo] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 95%;
    max-width: 500px;
    animation: zoom-in-b-73q4981zuo 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoom-in-b-73q4981zuo {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Payment Details */
.payment-details[b-73q4981zuo], .payment-summary[b-73q4981zuo] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
}

[data-theme="dark"] .payment-details[b-73q4981zuo], [data-theme="dark"] .payment-summary[b-73q4981zuo] {
    background: rgba(102, 126, 234, 0.08);
}

.detail-row[b-73q4981zuo] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .detail-row:last-child[b-73q4981zuo] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .detail-row .label[b-73q4981zuo] {
        font-weight: 600;
        color: #4b5563;
    }

[data-theme="dark"] .detail-row .label[b-73q4981zuo] {
    color: #9ca3af;
}

.detail-row .value[b-73q4981zuo] {
    color: #1f2937;
}

[data-theme="dark"] .detail-row .value[b-73q4981zuo] {
    color: #e2e8f0;
}

/* Alert Styling */
.alert[b-73q4981zuo] {
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

    .alert i[b-73q4981zuo] {
        font-size: 20px;
    }

.alert-info[b-73q4981zuo] {
    background: rgba(102, 126, 234, 0.1);
    border-left: 4px solid #667eea;
    color: #4c1d95;
}

[data-theme="dark"] .alert-info[b-73q4981zuo] {
    background: rgba(102, 126, 234, 0.1);
    color: #a78bfa;
}

.alert-warning[b-73q4981zuo] {
    background: rgba(249, 115, 22, 0.1);
    border-left: 4px solid #f97316;
    color: #c2410c;
}

[data-theme="dark"] .alert-warning[b-73q4981zuo] {
    background: rgba(249, 115, 22, 0.1);
    color: #fb923c;
}

.alert-danger[b-73q4981zuo] {
    background: rgba(208, 78, 95, 0.1);
    border-left: 4px solid #d04e5f;
    color: #be123c;
}

[data-theme="dark"] .alert-danger[b-73q4981zuo] {
    background: rgba(208, 78, 95, 0.1);
    color: #f87171;
}

/* Form styles for modals */
.form-group[b-73q4981zuo] {
    margin-bottom: 20px;
}

    .form-group label[b-73q4981zuo] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
    }

[data-theme="dark"] .form-group label[b-73q4981zuo] {
    color: #e2e8f0;
}

.form-control[b-73q4981zuo] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1f2937;
}

[data-theme="dark"] .form-control[b-73q4981zuo] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

.form-control:focus[b-73q4981zuo] {
    outline: none;
    background: white;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .form-control:focus[b-73q4981zuo] {
    background: #334155;
    border-color: #a78bfa;
}

/* Responsive Design */
@media (max-width: 992px) {
    .action-buttons[b-73q4981zuo] {
        margin-top: 16px;
    }
}

@media (max-width: 768px) {
    .page-header[b-73q4981zuo] {
        padding: 20px;
        margin-bottom: 24px;
    }

    .page-title[b-73q4981zuo] {
        font-size: 24px;
    }

    .card-header[b-73q4981zuo] {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .date-range-filter[b-73q4981zuo] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .date-range-filter input[b-73q4981zuo] {
            width: calc(50% - 50px);
        }

    .stat-card[b-73q4981zuo] {
        padding: 16px;
        gap: 12px;
    }

    .stat-icon[b-73q4981zuo] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .stat-content h3[b-73q4981zuo] {
        font-size: 20px;
    }

    .stat-content p[b-73q4981zuo] {
        font-size: 14px;
    }

    .card-body[b-73q4981zuo] {
        padding: 16px;
    }

    .statement-summary[b-73q4981zuo] {
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .date-range-filter[b-73q4981zuo] {
        flex-direction: column;
        align-items: flex-start;
    }

        .date-range-filter input[b-73q4981zuo] {
            width: 100%;
        }

    .info-item[b-73q4981zuo] {
        flex-direction: column;
        gap: 4px;
    }

        .info-item label[b-73q4981zuo] {
            width: 100%;
        }

        .info-item span[b-73q4981zuo] {
            max-width: 100%;
        }

    .custom-modal[b-73q4981zuo] {
        width: 95%;
        max-width: none;
    }

    .detail-row[b-73q4981zuo] {
        flex-direction: column;
        gap: 4px;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantSubscription.razor.rz.scp.css */

/* Subscription Page - Main Container */
.subscription-page[b-58izq032z1] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .subscription-page[b-58izq032z1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .subscription-page > *[b-58izq032z1] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-58izq032z1] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-content[b-58izq032z1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.breadcrumb-modern[b-58izq032z1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-item[b-58izq032z1] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-item:hover[b-58izq032z1] {
        color: #667eea;
    }

.separator[b-58izq032z1] {
    color: #d1d5db;
}

.breadcrumb-current[b-58izq032z1] {
    color: #4c1d95;
    font-weight: 600;
}

.header-title-section[b-58izq032z1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title-modern[b-58izq032z1] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-icon[b-58izq032z1] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 24px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.page-subtitle-enhanced[b-58izq032z1] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Loading Container */
.loading-container[b-58izq032z1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    gap: 20px;
    text-align: center;
}

.spinner-modern[b-58izq032z1] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-58izq032z1 0.8s linear infinite;
}

/* Current Subscription Card */
.current-subscription-card[b-58izq032z1] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .current-subscription-card:hover[b-58izq032z1] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

.subscription-header[b-58izq032z1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.header-left[b-58izq032z1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .header-left i[b-58izq032z1] {
        font-size: 24px;
        color: #667eea;
    }

    .header-left h3[b-58izq032z1] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #4c1d95;
    }

.subscription-status[b-58izq032z1] {
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .subscription-status.active[b-58izq032z1] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

    .subscription-status.expired[b-58izq032z1] {
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(245, 87, 108, 0.3);
    }

    .subscription-status.cancelled[b-58izq032z1] {
        background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(209, 213, 219, 0.2) 100%);
        color: #4b5563;
        border: 1px solid rgba(156, 163, 175, 0.3);
    }

.subscription-details[b-58izq032z1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.detail-item[b-58izq032z1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .detail-item label[b-58izq032z1] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

    .detail-item span[b-58izq032z1] {
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
    }

        .detail-item span.critical[b-58izq032z1] {
            color: #ef4444;
        }

        .detail-item span.warning[b-58izq032z1] {
            color: #f59e0b;
        }

        .detail-item span.good[b-58izq032z1] {
            color: #10b981;
        }

/* Usage Section */
.usage-section[b-58izq032z1] {
    padding: 24px;
}

    .usage-section h4[b-58izq032z1] {
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        margin-top: 0;
        margin-bottom: 20px;
    }

.usage-grid[b-58izq032z1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.usage-item[b-58izq032z1] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .usage-item:hover[b-58izq032z1] {
        background: rgba(102, 126, 234, 0.1);
        transform: translateY(-3px);
    }

.usage-header[b-58izq032z1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .usage-header i[b-58izq032z1] {
        color: #667eea;
        font-size: 18px;
    }

    .usage-header span[b-58izq032z1] {
        font-weight: 600;
        color: #4c1d95;
    }

.usage-progress[b-58izq032z1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-bar[b-58izq032z1] {
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-58izq032z1] {
    height: 100%;
    background: linear-gradient(to right, #667eea, #764ba2);
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.usage-text[b-58izq032z1] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    text-align: right;
}

/* Plans Section */
.plans-section[b-58izq032z1] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 28px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title[b-58izq032z1] {
    font-size: 24px;
    font-weight: 700;
    color: #4c1d95;
    margin-top: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .section-title i[b-58izq032z1] {
        color: #667eea;
    }

/* Plan Selection Mode Toggle */
.selection-mode-toggle[b-58izq032z1] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    margin-bottom: 24px;
    width: fit-content;
}

.mode-btn[b-58izq032z1] {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .mode-btn:hover[b-58izq032z1] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .mode-btn.active[b-58izq032z1] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

/* Plans Grid */
.plans-grid[b-58izq032z1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.plan-card[b-58izq032z1] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

    .plan-card[b-58izq032z1]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .plan-card:hover[b-58izq032z1] {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

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

    .plan-card.selected[b-58izq032z1] {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2), 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .plan-card.free-plan[b-58izq032z1] {
        background: linear-gradient(135deg, rgba(240, 249, 255, 0.95) 0%, rgba(226, 240, 253, 0.9) 100%);
    }

.free-badge[b-58izq032z1] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.plan-header[b-58izq032z1] {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .plan-header h3[b-58izq032z1] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-top: 0;
        margin-bottom: 16px;
    }

.plan-price[b-58izq032z1] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.price-amount[b-58izq032z1] {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.price-currency[b-58izq032z1] {
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
}

.price-period[b-58izq032z1] {
    font-size: 16px;
    color: #6b7280;
}

.plan-description[b-58izq032z1] {
    text-align: center;
    color: #6b7280;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.5;
}

.plan-features[b-58izq032z1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.feature-item[b-58izq032z1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #4b5563;
}

    .feature-item i[b-58izq032z1] {
        color: #667eea;
        font-size: 16px;
        width: 20px;
        text-align: center;
    }

.plan-extras[b-58izq032z1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.extra-badge[b-58izq032z1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
}

    .extra-badge.gold[b-58izq032z1] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
        color: #d97706;
    }

/* Custom Plan Builder */
.custom-plan-builder[b-58izq032z1] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.builder-header[b-58izq032z1] {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .builder-header i[b-58izq032z1] {
        font-size: 32px;
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-bottom: 16px;
    }

    .builder-header h3[b-58izq032z1] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin: 0;
    }

    .builder-header p[b-58izq032z1] {
        color: #6b7280;
        max-width: 600px;
    }

.customization-grid[b-58izq032z1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.custom-section[b-58izq032z1] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .custom-section h4[b-58izq032z1] {
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        margin-top: 0;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .custom-section h4 i[b-58izq032z1] {
            color: #667eea;
        }

.custom-control[b-58izq032z1] {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 20px;
    align-items: center;
}

    .custom-control label[b-58izq032z1] {
        font-weight: 600;
        color: #6b7280;
        font-size: 15px;
        grid-column: 1;
    }

.control-input[b-58izq032z1] {
    display: flex;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(102, 126, 234, 0.2);
    background: white;
    width: 100%;
    grid-column: 1;
}

.btn-adjust[b-58izq032z1] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-adjust:hover[b-58izq032z1] {
        background: #667eea;
        color: white;
    }

.value-input[b-58izq032z1] {
    flex: 1;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    padding: 8px 4px;
}

    .value-input:focus[b-58izq032z1] {
        outline: none;
    }

.price-per-unit[b-58izq032z1] {
    font-size: 13px;
    color: #6b7280;
    grid-column: 2;
    white-space: nowrap;
}

.feature-toggle[b-58izq032z1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.toggle-container[b-58izq032z1] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

    .toggle-container input[type="checkbox"][b-58izq032z1] {
        display: none;
    }

.toggle-slider[b-58izq032z1] {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 30px;
    transition: all 0.3s;
}

    .toggle-slider[b-58izq032z1]::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: white;
        top: 3px;
        left: 3px;
        transition: all 0.3s;
    }

.toggle-container input[type="checkbox"]:checked + .toggle-slider[b-58izq032z1] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .toggle-container input[type="checkbox"]:checked + .toggle-slider[b-58izq032z1]::before {
        transform: translateX(20px);
    }

.toggle-label[b-58izq032z1] {
    font-weight: 600;
    color: #6b7280;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .toggle-label i[b-58izq032z1] {
        color: #667eea;
    }

.feature-price[b-58izq032z1] {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
}

/* Price Calculator */
.price-calculator[b-58izq032z1] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .price-calculator h4[b-58izq032z1] {
        font-size: 18px;
        font-weight: 700;
        color: #4c1d95;
        margin-top: 0;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .price-calculator h4 i[b-58izq032z1] {
            color: #667eea;
        }

.price-breakdown[b-58izq032z1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-item[b-58izq032z1] {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #6b7280;
}

.price-total[b-58izq032z1] {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.2);
}

.total-amount[b-58izq032z1] {
    font-size: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Action Buttons */
.action-buttons[b-58izq032z1] {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.btn-primary[b-58izq032z1] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 180px;
    justify-content: center;
}

    .btn-primary:hover[b-58izq032z1] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .btn-primary:disabled[b-58izq032z1] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-secondary[b-58izq032z1] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .btn-secondary:hover[b-58izq032z1] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-spinner[b-58izq032z1] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-58izq032z1 0.8s linear infinite;
}

/* Unauthorized Container */
.unauthorized-container[b-58izq032z1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    gap: 20px;
    text-align: center;
    margin: 40px auto;
    max-width: 600px;
}

    .unauthorized-container i[b-58izq032z1] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 16px;
    }

    .unauthorized-container h3[b-58izq032z1] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }

    .unauthorized-container p[b-58izq032z1] {
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Animations */
@keyframes spin-b-58izq032z1 {
    to {
        transform: rotate(360deg);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .subscription-page[b-58izq032z1] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .subscription-page[b-58izq032z1]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-58izq032z1],
[data-theme="dark"] .current-subscription-card[b-58izq032z1],
[data-theme="dark"] .plans-section[b-58izq032z1],
[data-theme="dark"] .custom-plan-builder[b-58izq032z1],
[data-theme="dark"] .unauthorized-container[b-58izq032z1],
[data-theme="dark"] .loading-container[b-58izq032z1] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .breadcrumb-item[b-58izq032z1] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-58izq032z1] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-58izq032z1] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-title-modern[b-58izq032z1] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .title-icon[b-58izq032z1] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .page-subtitle-enhanced[b-58izq032z1] {
    color: #9ca3af;
}

[data-theme="dark"] .header-left h3[b-58izq032z1] {
    color: #e2e8f0;
}

[data-theme="dark"] .header-left i[b-58izq032z1] {
    color: #a78bfa;
}

[data-theme="dark"] .detail-item label[b-58izq032z1] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-item span[b-58izq032z1] {
    color: #e2e8f0;
}

[data-theme="dark"] .plan-card[b-58izq032z1] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .plan-card.free-plan[b-58izq032z1] {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%);
    }

    [data-theme="dark"] .plan-card:hover[b-58izq032z1],
    [data-theme="dark"] .plan-card.selected[b-58izq032z1] {
        border-color: #a78bfa;
    }

    [data-theme="dark"] .plan-card.selected[b-58izq032z1] {
        box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2), 0 15px 40px rgba(0, 0, 0, 0.4);
    }

[data-theme="dark"] .plan-header h3[b-58izq032z1] {
    color: #e2e8f0;
}

[data-theme="dark"] .price-amount[b-58izq032z1] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .price-currency[b-58izq032z1],
[data-theme="dark"] .price-period[b-58izq032z1] {
    color: #9ca3af;
}

[data-theme="dark"] .plan-description[b-58izq032z1] {
    color: #9ca3af;
}

[data-theme="dark"] .feature-item[b-58izq032z1] {
    color: #d1d5db;
}

    [data-theme="dark"] .feature-item i[b-58izq032z1] {
        color: #a78bfa;
    }

[data-theme="dark"] .extra-badge[b-58izq032z1] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

    [data-theme="dark"] .extra-badge.gold[b-58izq032z1] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
        color: #fbbf24;
    }

[data-theme="dark"] .custom-section[b-58izq032z1] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .custom-section h4[b-58izq032z1] {
        color: #e2e8f0;
    }

        [data-theme="dark"] .custom-section h4 i[b-58izq032z1] {
            color: #a78bfa;
        }

[data-theme="dark"] .custom-control label[b-58izq032z1] {
    color: #d1d5db;
}

[data-theme="dark"] .control-input[b-58izq032z1] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .value-input[b-58izq032z1] {
    color: #e2e8f0;
    background: #1e293b;
}

[data-theme="dark"] .btn-adjust[b-58izq032z1] {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-adjust:hover[b-58izq032z1] {
        background: #a78bfa;
        color: #0f172a;
    }

[data-theme="dark"] .price-per-unit[b-58izq032z1] {
    color: #9ca3af;
}

[data-theme="dark"] .toggle-label[b-58izq032z1] {
    color: #d1d5db;
}

    [data-theme="dark"] .toggle-label i[b-58izq032z1] {
        color: #a78bfa;
    }

[data-theme="dark"] .toggle-slider[b-58izq032z1] {
    background: #4b5563;
}

[data-theme="dark"] .toggle-container input[type="checkbox"]:checked + .toggle-slider[b-58izq032z1] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
}

[data-theme="dark"] .feature-price[b-58izq032z1] {
    color: #a78bfa;
}

[data-theme="dark"] .price-calculator[b-58izq032z1] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.05) 0%, rgba(192, 132, 252, 0.05) 100%);
    border: 1px solid rgba(167, 139, 250, 0.2);
}

    [data-theme="dark"] .price-calculator h4[b-58izq032z1] {
        color: #e2e8f0;
    }

        [data-theme="dark"] .price-calculator h4 i[b-58izq032z1] {
            color: #a78bfa;
        }

[data-theme="dark"] .price-item[b-58izq032z1] {
    color: #9ca3af;
}

[data-theme="dark"] .price-total[b-58izq032z1] {
    color: #e2e8f0;
}

[data-theme="dark"] .total-amount[b-58izq032z1] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .btn-primary[b-58izq032z1] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .btn-secondary[b-58izq032z1] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

[data-theme="dark"] .unauthorized-container h3[b-58izq032z1] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-container p[b-58izq032z1] {
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .customization-grid[b-58izq032z1] {
        grid-template-columns: 1fr;
    }

    .plans-grid[b-58izq032z1] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .subscription-page[b-58izq032z1] {
        padding: 16px;
    }

    .page-header-enhanced[b-58izq032z1] {
        padding: 16px;
    }

    .page-title-modern[b-58izq032z1] {
        font-size: 28px;
    }

    .title-icon[b-58izq032z1] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .subscription-details[b-58izq032z1] {
        grid-template-columns: 1fr;
    }

    .usage-grid[b-58izq032z1] {
        grid-template-columns: 1fr;
    }

    .plans-grid[b-58izq032z1] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 480px) {
    .subscription-header[b-58izq032z1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .price-calculator[b-58izq032z1] {
        padding: 16px;
    }

    .selection-mode-toggle[b-58izq032z1] {
        width: 100%;
    }

    .mode-btn[b-58izq032z1] {
        flex: 1;
        justify-content: center;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantSupport.razor.rz.scp.css */

/* ===================================
   Merchant Support Page - Modern Professional CSS
   Following app.css architecture and Users.razor.css design patterns
   =================================== */

/* Modern Gradient Buttons - Following Users.razor.css Pattern */
.btn-gradient-primary[b-l59a25547r] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-l59a25547r] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-success[b-l59a25547r] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-l59a25547r] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

.btn-outline-primary[b-l59a25547r] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-outline-primary:hover[b-l59a25547r] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-1px);
    }

.btn-outline-secondary[b-l59a25547r] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-outline-secondary:hover[b-l59a25547r] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Page Container - Following Users.razor.css Structure */
.merchant-support-page[b-l59a25547r] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .merchant-support-page[b-l59a25547r]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .merchant-support-page > *[b-l59a25547r] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Modern Design */
.page-header[b-l59a25547r] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-l59a25547r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-l59a25547r] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-l59a25547r] {
        color: #667eea;
    }

.breadcrumb-separator[b-l59a25547r] {
    color: #d1d5db;
}

.breadcrumb-current[b-l59a25547r] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-l59a25547r] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-l59a25547r] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Support Container */
.support-container[b-l59a25547r] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Quick Help Section */
.quick-help-section[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title[b-l59a25547r] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 10px;
}

.help-cards[b-l59a25547r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.help-card[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .help-card[b-l59a25547r]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .help-card:hover[b-l59a25547r] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

        .help-card:hover[b-l59a25547r]::before {
            opacity: 1;
        }

    .help-card i[b-l59a25547r] {
        font-size: 48px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 16px;
        display: block;
    }

    .help-card h3[b-l59a25547r] {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 8px;
    }

    .help-card p[b-l59a25547r] {
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
    }

/* Tickets Section */
.tickets-section[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-header[b-l59a25547r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}

/* Loading Container */
.loading-container[b-l59a25547r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.spinner[b-l59a25547r] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-l59a25547r 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* Tickets List */
.tickets-list[b-l59a25547r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ticket-item[b-l59a25547r] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 20px;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

    .ticket-item[b-l59a25547r]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        transition: width 0.3s;
    }

    .ticket-item.open[b-l59a25547r]::before {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .ticket-item.in-progress[b-l59a25547r]::before {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .ticket-item.closed[b-l59a25547r]::before {
        background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    }

    .ticket-item:hover[b-l59a25547r] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

        .ticket-item:hover[b-l59a25547r]::before {
            width: 8px;
        }

.ticket-header[b-l59a25547r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.ticket-info[b-l59a25547r] {
    flex: 1;
}

.ticket-number[b-l59a25547r] {
    font-size: 14px;
    color: #667eea;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.ticket-subject[b-l59a25547r] {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.ticket-meta[b-l59a25547r] {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #6b7280;
}

    .ticket-meta span[b-l59a25547r] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ticket-meta i[b-l59a25547r] {
        color: #9333ea;
    }

.ticket-status[b-l59a25547r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

/* Status and Priority Badges */
.status-badge[b-l59a25547r] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-open[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(59, 201, 104, 0.2) 0%, rgba(50, 209, 183, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(59, 201, 104, 0.3);
}

.status-progress[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.2) 0%, rgba(245, 87, 108, 0.2) 100%);
    color: #dc2626;
    border: 1px solid rgba(240, 147, 251, 0.3);
}

.status-resolved[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    color: #4338ca;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.status-closed[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(100, 116, 139, 0.2) 100%);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.priority-badge[b-l59a25547r] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-low[b-l59a25547r] {
    background: rgba(34, 197, 94, 0.1);
    color: #059669;
}

.priority-medium[b-l59a25547r] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.priority-high[b-l59a25547r] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.priority-urgent[b-l59a25547r] {
    background: rgba(168, 85, 247, 0.1);
    color: #7c3aed;
    animation: pulse-b-l59a25547r 2s infinite;
}

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

    50% {
        opacity: 0.7;
    }
}

/* Ticket Details */
.ticket-details[b-l59a25547r] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.ticket-description[b-l59a25547r] {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.assigned-to[b-l59a25547r] {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .assigned-to i[b-l59a25547r] {
        color: #667eea;
    }

/* Live Chat Section */
.live-chat-section[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.chat-availability[b-l59a25547r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.online-status[b-l59a25547r],
.offline-status[b-l59a25547r] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.online-status[b-l59a25547r] {
    color: #059669;
}

    .online-status i[b-l59a25547r] {
        color: #10b981;
        animation: blink-b-l59a25547r 2s infinite;
    }

.offline-status[b-l59a25547r] {
    color: #dc2626;
}

    .offline-status i[b-l59a25547r] {
        color: #ef4444;
    }

@keyframes blink-b-l59a25547r {
    0%, 50% {
        opacity: 1;
    }

    51%, 100% {
        opacity: 0.3;
    }
}

.offline-message[b-l59a25547r] {
    color: #6b7280;
    font-size: 14px;
    margin-top: 8px;
    width: 100%;
}

/* Contact Section */
.contact-section[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-cards[b-l59a25547r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.contact-card[b-l59a25547r] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

    .contact-card[b-l59a25547r]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .contact-card:hover[b-l59a25547r] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }

        .contact-card:hover[b-l59a25547r]::before {
            opacity: 1;
        }

    .contact-card i[b-l59a25547r] {
        font-size: 36px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 16px;
        display: block;
    }

    .contact-card h3[b-l59a25547r] {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 8px;
    }

    .contact-card p[b-l59a25547r] {
        color: #4b5563;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
    }

.availability[b-l59a25547r] {
    color: #6b7280;
    font-size: 12px;
    font-style: italic;
}

/* Empty State */
.empty-state[b-l59a25547r] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .empty-state i[b-l59a25547r] {
        font-size: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-state h3[b-l59a25547r] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-l59a25547r] {
        font-size: 18px;
        color: #6b7280;
    }

/* Modal Styles */
.modal-overlay[b-l59a25547r] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-l59a25547r 0.3s ease;
}

.modal-container[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 600px;
    width: calc(100% - 32px);
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-l59a25547r 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header[b-l59a25547r] {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h2[b-l59a25547r] {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

.close-btn[b-l59a25547r] {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    transition: all 0.3s;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .close-btn:hover[b-l59a25547r] {
        color: #4c1d95;
        background: rgba(102, 126, 234, 0.1);
        transform: rotate(90deg);
    }

/* Form Styles */
.ticket-form[b-l59a25547r] {
    padding: 30px;
}

.form-group[b-l59a25547r] {
    margin-bottom: 24px;
}

    .form-group label[b-l59a25547r] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
        display: block;
    }

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

.form-control[b-l59a25547r] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
    color: #1f2937;
}

    .form-control:focus[b-l59a25547r] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .form-control[b-l59a25547r]::placeholder {
        color: #9ca3af;
    }

select.form-control[b-l59a25547r] {
    cursor: pointer;
}

textarea.form-control[b-l59a25547r] {
    resize: vertical;
    min-height: 120px;
}

.form-control-file[b-l59a25547r] {
    background: rgba(102, 126, 234, 0.05);
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

    .form-control-file:hover[b-l59a25547r] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

/* Uploaded Files */
.uploaded-files[b-l59a25547r] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-item[b-l59a25547r] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(102, 126, 234, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
}

    .file-item i[b-l59a25547r] {
        color: #667eea;
    }

    .file-item span[b-l59a25547r] {
        flex: 1;
        color: #4b5563;
    }

.remove-file[b-l59a25547r] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

    .remove-file:hover[b-l59a25547r] {
        background: rgba(239, 68, 68, 0.1);
    }

.form-actions[b-l59a25547r] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

/* Chat Window */
.chat-window[b-l59a25547r] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    height: 600px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    animation: slideUpBottom-b-l59a25547r 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-header[b-l59a25547r] {
    padding: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-info h3[b-l59a25547r] {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.chat-ticket-number[b-l59a25547r] {
    font-size: 14px;
    color: #667eea;
    font-weight: 500;
}

.close-chat[b-l59a25547r] {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

    .close-chat:hover[b-l59a25547r] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

.chat-messages[b-l59a25547r] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message[b-l59a25547r] {
    max-width: 80%;
    animation: messageSlide-b-l59a25547r 0.3s ease;
}

    .message.merchant[b-l59a25547r] {
        align-self: flex-end;
    }

    .message.support[b-l59a25547r] {
        align-self: flex-start;
    }

.message-header[b-l59a25547r] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
}

.sender-name[b-l59a25547r] {
    font-weight: 600;
    color: #4b5563;
}

.message-time[b-l59a25547r] {
    color: #9ca3af;
}

.message-content[b-l59a25547r] {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
}

.message.merchant .message-content[b-l59a25547r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.support .message-content[b-l59a25547r] {
    background: rgba(102, 126, 234, 0.1);
    color: #1f2937;
    border-bottom-left-radius: 4px;
}

.no-messages[b-l59a25547r] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    font-style: italic;
}

.typing-indicator[b-l59a25547r] {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    max-width: 80px;
}

    .typing-indicator span[b-l59a25547r] {
        width: 8px;
        height: 8px;
        background: #667eea;
        border-radius: 50%;
        animation: typing-b-l59a25547r 1.4s infinite ease-in-out;
    }

        .typing-indicator span:nth-child(1)[b-l59a25547r] {
            animation-delay: -0.32s;
        }

        .typing-indicator span:nth-child(2)[b-l59a25547r] {
            animation-delay: -0.16s;
        }

@keyframes typing-b-l59a25547r {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.chat-input[b-l59a25547r] {
    padding: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    gap: 12px;
    align-items: center;
}

.message-input[b-l59a25547r] {
    flex: 1;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s;
}

    .message-input:focus[b-l59a25547r] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.send-button[b-l59a25547r] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .send-button:hover[b-l59a25547r] {
        transform: scale(1.1);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .send-button:disabled[b-l59a25547r] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

/* Unauthorized Container */
.unauthorized-container[b-l59a25547r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .unauthorized-container i[b-l59a25547r] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .unauthorized-container h2[b-l59a25547r] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .unauthorized-container p[b-l59a25547r] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

/* Animation Keyframes */
@keyframes fadeIn-b-l59a25547r {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

@keyframes slideUpBottom-b-l59a25547r {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

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

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

/* Dark Theme Support */
[data-theme="dark"] .merchant-support-page[b-l59a25547r] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .merchant-support-page[b-l59a25547r]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-l59a25547r],
[data-theme="dark"] .quick-help-section[b-l59a25547r],
[data-theme="dark"] .tickets-section[b-l59a25547r],
[data-theme="dark"] .live-chat-section[b-l59a25547r],
[data-theme="dark"] .contact-section[b-l59a25547r],
[data-theme="dark"] .help-card[b-l59a25547r],
[data-theme="dark"] .contact-card[b-l59a25547r],
[data-theme="dark"] .ticket-item[b-l59a25547r],
[data-theme="dark"] .modal-container[b-l59a25547r],
[data-theme="dark"] .chat-window[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .modal-header[b-l59a25547r],
[data-theme="dark"] .chat-header[b-l59a25547r] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .form-control[b-l59a25547r] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-l59a25547r] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .breadcrumb-link[b-l59a25547r] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-l59a25547r] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-l59a25547r] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-l59a25547r] {
    color: #9ca3af;
}

[data-theme="dark"] .help-card h3[b-l59a25547r],
[data-theme="dark"] .contact-card h3[b-l59a25547r],
[data-theme="dark"] .ticket-subject[b-l59a25547r],
[data-theme="dark"] .modal-header h2[b-l59a25547r] {
    color: #e2e8f0;
}

[data-theme="dark"] .help-card p[b-l59a25547r],
[data-theme="dark"] .contact-card p[b-l59a25547r],
[data-theme="dark"] .ticket-description[b-l59a25547r],
[data-theme="dark"] .assigned-to[b-l59a25547r] {
    color: #9ca3af;
}

[data-theme="dark"] .form-group label[b-l59a25547r] {
    color: #e2e8f0;
}

[data-theme="dark"] .close-btn[b-l59a25547r] {
    color: #9ca3af;
}

    [data-theme="dark"] .close-btn:hover[b-l59a25547r] {
        color: #e2e8f0;
        background: rgba(102, 126, 234, 0.2);
    }

[data-theme="dark"] .message.support .message-content[b-l59a25547r] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .message-input[b-l59a25547r] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .message-input:focus[b-l59a25547r] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .unauthorized-container h2[b-l59a25547r] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-container p[b-l59a25547r] {
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .help-cards[b-l59a25547r],
    .contact-cards[b-l59a25547r] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .merchant-support-page[b-l59a25547r] {
        padding: 16px;
    }

    .page-header[b-l59a25547r] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-l59a25547r] {
        font-size: 28px;
    }

    .page-subtitle[b-l59a25547r] {
        font-size: 16px;
    }

    .section-header[b-l59a25547r] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .help-cards[b-l59a25547r],
    .contact-cards[b-l59a25547r] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ticket-header[b-l59a25547r] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ticket-status[b-l59a25547r] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .chat-availability[b-l59a25547r] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .modal-container[b-l59a25547r] {
        width: calc(100% - 16px);
        margin: 8px;
    }

    .modal-header[b-l59a25547r] {
        padding: 20px;
    }

    .ticket-form[b-l59a25547r] {
        padding: 20px;
    }

    .form-actions[b-l59a25547r] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-l59a25547r] {
            width: 100%;
        }

    .chat-window[b-l59a25547r] {
        width: calc(100% - 32px);
        height: calc(100% - 100px);
        bottom: 16px;
        right: 16px;
        left: 16px;
    }

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

    .offline-message[b-l59a25547r] {
        margin-top: 12px;
    }
}

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

    .breadcrumb[b-l59a25547r] {
        font-size: 12px;
    }

    .help-card[b-l59a25547r],
    .contact-card[b-l59a25547r],
    .tickets-section[b-l59a25547r],
    .live-chat-section[b-l59a25547r] {
        padding: 20px;
    }

    .section-title[b-l59a25547r] {
        font-size: 20px;
    }

    .help-card i[b-l59a25547r] {
        font-size: 36px;
    }

    .contact-card i[b-l59a25547r] {
        font-size: 28px;
    }

    .ticket-item[b-l59a25547r] {
        padding: 16px;
    }

    .chat-window[b-l59a25547r] {
        border-radius: 0;
        height: 100%;
        bottom: 0;
        right: 0;
        left: 0;
    }
}

/* Print Styles */
@media print {
    .merchant-support-page[b-l59a25547r] {
        background: white !important;
    }

        .page-header[b-l59a25547r]::before,
        .merchant-support-page[b-l59a25547r]::before {
            display: none !important;
        }

    .help-cards[b-l59a25547r],
    .contact-cards[b-l59a25547r],
    .chat-window[b-l59a25547r],
    .modal-overlay[b-l59a25547r],
    .btn[b-l59a25547r] {
        display: none !important;
    }

    .tickets-section[b-l59a25547r] {
        background: white !important;
        box-shadow: none !important;
    }

    .ticket-item[b-l59a25547r] {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-gradient-primary[b-l59a25547r],
    .btn-gradient-success[b-l59a25547r],
    .status-badge[b-l59a25547r],
    .priority-badge[b-l59a25547r] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-l59a25547r] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus States for Accessibility */
*:focus[b-l59a25547r] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-l59a25547r],
.btn:focus[b-l59a25547r] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-l59a25547r],
select:focus[b-l59a25547r],
textarea:focus[b-l59a25547r] {
    outline: none;
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantTransactions.razor.rz.scp.css */

/* Transactions Page Container */
.transactions-page[b-7sola5kur6] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .transactions-page[b-7sola5kur6]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .transactions-page > *[b-7sola5kur6] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-7sola5kur6] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-7sola5kur6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link[b-7sola5kur6] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-7sola5kur6] {
        color: #667eea;
    }

.breadcrumb-separator[b-7sola5kur6] {
    color: #d1d5db;
}

.breadcrumb-current[b-7sola5kur6] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-7sola5kur6] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-7sola5kur6] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Stats Cards */
.stats-cards[b-7sola5kur6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-7sola5kur6]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .stat-card:hover[b-7sola5kur6] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .stat-card:hover[b-7sola5kur6]::before {
            opacity: 1;
        }

.stat-icon[b-7sola5kur6] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.balance-card .stat-icon[b-7sola5kur6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.income-card .stat-icon[b-7sola5kur6] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
}

.expense-card .stat-icon[b-7sola5kur6] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
}

.net-card .stat-icon[b-7sola5kur6] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

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

.stat-label[b-7sola5kur6] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

.stat-value[b-7sola5kur6] {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.income-amount[b-7sola5kur6] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.expense-amount[b-7sola5kur6] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Filters Section */
.filters-section[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
}

.filters-row[b-7sola5kur6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.filter-group[b-7sola5kur6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-group label[b-7sola5kur6] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
    }

    .filter-group .form-control[b-7sola5kur6] {
        width: 100%;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

    .filter-group select.form-control[b-7sola5kur6] {
        padding-right: 32px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234c1d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        appearance: none;
    }

    .filter-group .form-control:focus[b-7sola5kur6] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.search-group[b-7sola5kur6] {
    position: relative;
}

.search-input-wrapper[b-7sola5kur6] {
    position: relative;
}

.search-icon[b-7sola5kur6] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9333ea;
}

.search-group .form-control[b-7sola5kur6] {
    padding-left: 40px;
}

.filters-actions[b-7sola5kur6] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

    .filters-actions .btn[b-7sola5kur6] {
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 12px 24px;
    }

        .filters-actions .btn i[b-7sola5kur6] {
            margin-right: 8px;
        }

        .filters-actions .btn:hover[b-7sola5kur6] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        }

.btn-primary[b-7sola5kur6] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
}

.btn-secondary[b-7sola5kur6] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
}

.btn-success[b-7sola5kur6] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
}

/* Transactions Table */
.transactions-table-wrapper[b-7sola5kur6] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.transactions-table[b-7sola5kur6] {
    width: 100%;
    border-collapse: collapse;
}

    .transactions-table th[b-7sola5kur6] {
        padding: 18px 16px;
        text-align: right;
        font-weight: 600;
        font-size: 14px;
        color: #8b5cf6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

html[dir="ltr"] .transactions-table th[b-7sola5kur6] {
    text-align: left;
}

.transactions-table td[b-7sola5kur6] {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
}

.transactions-table tbody tr[b-7sola5kur6] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .transactions-table tbody tr:hover[b-7sola5kur6] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        transform: scale(1.01);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .transactions-table tbody tr:last-child td[b-7sola5kur6] {
        border-bottom: none;
    }

.transaction-type[b-7sola5kur6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.type-deposit[b-7sola5kur6] {
    background: rgba(67, 233, 123, 0.1);
    color: #059669;
}

.type-withdrawal[b-7sola5kur6] {
    background: rgba(245, 87, 108, 0.1);
    color: #dc2626;
}

.type-commission[b-7sola5kur6] {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.type-profit[b-7sola5kur6] {
    background: rgba(79, 172, 254, 0.1);
    color: #2563eb;
}

.type-installment[b-7sola5kur6] {
    background: rgba(250, 112, 154, 0.1);
    color: #db2777;
}

.type-refund[b-7sola5kur6] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.type-transfer[b-7sola5kur6] {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.amount[b-7sola5kur6] {
    font-weight: 700;
    font-size: 15px;
}

.balance-cell[b-7sola5kur6] {
    font-weight: 500;
    color: #4b5563;
}

.status-badge[b-7sola5kur6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-success[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
    color: #059669;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.status-warning[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-danger[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(240, 147, 251, 0.2) 100%);
    color: #dc2626;
    border: 1px solid rgba(245, 87, 108, 0.3);
}

.status-default[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(209, 213, 219, 0.2) 100%);
    color: #4b5563;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.btn-action[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #4c1d95;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

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

.no-data[b-7sola5kur6] {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

    .no-data i[b-7sola5kur6] {
        font-size: 48px;
        margin-bottom: 16px;
        color: #9ca3af;
    }

/* Mobile Transaction Cards */
.mobile-only[b-7sola5kur6] {
    display: none;
}

.transactions-cards[b-7sola5kur6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.transaction-card[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .transaction-card:hover[b-7sola5kur6] {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

.card-header[b-7sola5kur6] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.card-content[b-7sola5kur6] {
    padding: 16px;
}

.transaction-info[b-7sola5kur6] {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-7sola5kur6] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.info-value[b-7sola5kur6] {
    font-size: 15px;
    color: #1f2937;
    font-weight: 500;
}

.transaction-amounts[b-7sola5kur6] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    gap: 16px;
}

.amount-item[b-7sola5kur6] {
    flex: 1;
}

.amount-label[b-7sola5kur6] {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.amount-value[b-7sola5kur6] {
    font-size: 18px;
    font-weight: 700;
}

.card-actions[b-7sola5kur6] {
    padding: 16px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    text-align: right;
}

html[dir="ltr"] .card-actions[b-7sola5kur6] {
    text-align: left;
}

.card-actions .btn-action[b-7sola5kur6] {
    width: auto;
    height: auto;
    border-radius: 10px;
    padding: 8px 16px;
}

    .card-actions .btn-action i[b-7sola5kur6] {
        margin-right: 8px;
    }

html[dir="ltr"] .card-actions .btn-action i[b-7sola5kur6] {
    margin-right: 8px;
    margin-left: 0;
}

/* Pagination */
.pagination[b-7sola5kur6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.page-btn[b-7sola5kur6] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-7sola5kur6] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-7sola5kur6] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Loading State */
.loading-container[b-7sola5kur6] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-container[b-7sola5kur6] {
    text-align: center;
}

.spinner[b-7sola5kur6] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-7sola5kur6 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

/* Transaction Details Popup Styles */
.transaction-details[b-7sola5kur6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-row[b-7sola5kur6] {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.detail-label[b-7sola5kur6] {
    font-weight: 500;
    color: #6b7280;
}

.detail-value[b-7sola5kur6] {
    font-weight: 600;
    color: #1f2937;
}

/* Unauthorized Container */
.unauthorized-container[b-7sola5kur6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 24px;
}

    .unauthorized-container i[b-7sola5kur6] {
        font-size: 80px;
        color: #9333ea;
        margin-bottom: 24px;
    }

    .unauthorized-container h2[b-7sola5kur6] {
        font-size: 28px;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .unauthorized-container p[b-7sola5kur6] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 24px;
        max-width: 500px;
    }

.btn-primary[b-7sola5kur6] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    display: inline-block;
    text-decoration: none;
}

    .btn-primary:hover[b-7sola5kur6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Row Colors */
.income-row td[b-7sola5kur6] {
    border-left: 3px solid rgba(67, 233, 123, 0.6);
}

.expense-row td[b-7sola5kur6] {
    border-left: 3px solid rgba(245, 87, 108, 0.6);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-cards[b-7sola5kur6] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .desktop-only[b-7sola5kur6] {
        display: none;
    }

    .mobile-only[b-7sola5kur6] {
        display: block;
    }
}

@media (max-width: 768px) {
    .transactions-page[b-7sola5kur6] {
        padding: 16px;
    }

    .page-header[b-7sola5kur6] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .page-title[b-7sola5kur6] {
        font-size: 28px;
    }

    .page-subtitle[b-7sola5kur6] {
        font-size: 16px;
    }

    .stats-cards[b-7sola5kur6] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card[b-7sola5kur6] {
        padding: 20px;
    }

    .stat-icon[b-7sola5kur6] {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .stat-value[b-7sola5kur6] {
        font-size: 24px;
    }

    .filters-row[b-7sola5kur6] {
        grid-template-columns: 1fr;
    }

    .filters-actions[b-7sola5kur6] {
        justify-content: center;
    }

        .filters-actions .btn[b-7sola5kur6] {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .page-title[b-7sola5kur6] {
        font-size: 24px;
    }

    .breadcrumb[b-7sola5kur6] {
        font-size: 12px;
    }

    .stat-card[b-7sola5kur6] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .pagination[b-7sola5kur6] {
        flex-wrap: wrap;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .transactions-page[b-7sola5kur6] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .transactions-page[b-7sola5kur6]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-7sola5kur6],
[data-theme="dark"] .filters-section[b-7sola5kur6],
[data-theme="dark"] .transactions-table-wrapper[b-7sola5kur6],
[data-theme="dark"] .transaction-card[b-7sola5kur6],
[data-theme="dark"] .stat-card[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .transactions-table th[b-7sola5kur6] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
    color: #a78bfa;
}

[data-theme="dark"] .transactions-table td[b-7sola5kur6] {
    background: #1e293b;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .card-header[b-7sola5kur6] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .info-value[b-7sola5kur6] {
    color: #e2e8f0;
}

[data-theme="dark"] .info-label[b-7sola5kur6],
[data-theme="dark"] .stat-label[b-7sola5kur6],
[data-theme="dark"] .filter-group label[b-7sola5kur6] {
    color: #9ca3af;
}

[data-theme="dark"] .filter-group .form-control[b-7sola5kur6] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-group .form-control:focus[b-7sola5kur6] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .breadcrumb-link[b-7sola5kur6] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-7sola5kur6] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-7sola5kur6] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-7sola5kur6] {
    color: #9ca3af;
}

[data-theme="dark"] .page-btn[b-7sola5kur6] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .transaction-info[b-7sola5kur6] {
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .transaction-amounts[b-7sola5kur6] {
    border-top: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .detail-row[b-7sola5kur6] {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .detail-label[b-7sola5kur6] {
    color: #9ca3af;
}

[data-theme="dark"] .detail-value[b-7sola5kur6] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-container h2[b-7sola5kur6] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-container p[b-7sola5kur6] {
    color: #9ca3af;
}

/* Print Styles */
@media print {
    .transactions-page[b-7sola5kur6] {
        background: white !important;
    }

    .filters-section[b-7sola5kur6],
    .pagination[b-7sola5kur6],
    .card-actions[b-7sola5kur6],
    .btn-action[b-7sola5kur6] {
        display: none !important;
    }

    .transactions-table[b-7sola5kur6] {
        font-size: 12px;
    }

        .transactions-table th[b-7sola5kur6] {
            background: #f3f4f6 !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

    .transaction-type[b-7sola5kur6],
    .status-badge[b-7sola5kur6] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Focus States for Accessibility */
*:focus[b-7sola5kur6] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-action[b-7sola5kur6],
    .btn-primary[b-7sola5kur6],
    .btn-secondary[b-7sola5kur6],
    .btn-success[b-7sola5kur6],
    .transaction-type[b-7sola5kur6],
    .status-badge[b-7sola5kur6] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-7sola5kur6] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantViewAllReturns.razor.rz.scp.css */

/* Modern Returns Page Styling for Merchants
   Following the professional architecture from app.css
   and matching the design patterns of Users.razor.css */

/* Page Container */
.all-returns-container[b-4wtjkipj0a] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .all-returns-container[b-4wtjkipj0a]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .all-returns-container > *[b-4wtjkipj0a] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-4wtjkipj0a] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.header-content[b-4wtjkipj0a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-header h1[b-4wtjkipj0a] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-header h1 i[b-4wtjkipj0a] {
        font-size: 28px;
    }

.breadcrumb[b-4wtjkipj0a] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

    .breadcrumb a[b-4wtjkipj0a] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
        font-weight: 500;
    }

        .breadcrumb a:hover[b-4wtjkipj0a] {
            color: #667eea;
        }

    .breadcrumb span[b-4wtjkipj0a] {
        color: #9ca3af;
    }

        .breadcrumb span:last-child[b-4wtjkipj0a] {
            color: #4c1d95;
            font-weight: 600;
        }

/* Header Stats */
.header-stats[b-4wtjkipj0a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.stat-card[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-4wtjkipj0a]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

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

        .stat-card:hover[b-4wtjkipj0a]::before {
            opacity: 1;
        }

.stat-value[b-4wtjkipj0a] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-4wtjkipj0a] {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
    font-weight: 500;
}

/* Filters Section */
.filters-section[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

    .search-box i[b-4wtjkipj0a] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
    }

    .search-box input[b-4wtjkipj0a] {
        width: 100%;
        padding: 12px 16px 12px 46px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
    }

        .search-box input:focus[b-4wtjkipj0a] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .search-box input[b-4wtjkipj0a]::placeholder {
            color: #9ca3af;
        }

.filter-controls[b-4wtjkipj0a] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-select[b-4wtjkipj0a], .filter-date[b-4wtjkipj0a] {
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 14px;
    color: #4c1d95;
    min-width: 160px;
}

    .filter-select:focus[b-4wtjkipj0a],
    .filter-date:focus[b-4wtjkipj0a] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-refresh[b-4wtjkipj0a] {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-refresh:hover[b-4wtjkipj0a] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: rotate(180deg);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

/* Returns List */
.returns-list[b-4wtjkipj0a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.return-card[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    position: relative;
}

    .return-card[b-4wtjkipj0a]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
        z-index: 0;
    }

    .return-card:hover[b-4wtjkipj0a] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        border-color: #667eea;
    }

.return-header[b-4wtjkipj0a] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.return-info h4[b-4wtjkipj0a] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1f2937;
}

.return-date[b-4wtjkipj0a] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.return-badges[b-4wtjkipj0a] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.status-badge[b-4wtjkipj0a], .refund-badge[b-4wtjkipj0a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-requested[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(234, 179, 8, 0.1) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-approved[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-rejected[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-processing[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(29, 78, 216, 0.1) 100%);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.status-completed[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(4, 120, 87, 0.1) 100%);
    color: #047857;
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.status-cancelled[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.1) 0%, rgba(107, 114, 128, 0.1) 100%);
    color: #6b7280;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.status-default[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.1) 0%, rgba(79, 70, 229, 0.1) 100%);
    color: #4f46e5;
    border: 1px solid rgba(67, 56, 202, 0.3);
}

.refund-badge[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.return-content[b-4wtjkipj0a] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.order-reference[b-4wtjkipj0a], .customer-info[b-4wtjkipj0a], .return-reason[b-4wtjkipj0a] {
    display: flex;
    gap: 12px;
}

    .order-reference i[b-4wtjkipj0a], .customer-info i[b-4wtjkipj0a], .return-reason i[b-4wtjkipj0a] {
        width: 20px;
        color: #9333ea;
        font-size: 16px;
        margin-top: 3px;
    }

    .order-reference div[b-4wtjkipj0a], .customer-info div[b-4wtjkipj0a], .return-reason div[b-4wtjkipj0a] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .customer-info strong[b-4wtjkipj0a] {
        font-size: 15px;
        color: #1f2937;
    }

    .customer-info span[b-4wtjkipj0a] {
        font-size: 14px;
        color: #6b7280;
    }

    .return-reason span[b-4wtjkipj0a] {
        font-size: 14px;
        color: #6b7280;
    }

    .return-reason strong[b-4wtjkipj0a] {
        font-size: 14px;
        color: #1f2937;
    }

.reason-details[b-4wtjkipj0a] {
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}

.return-summary[b-4wtjkipj0a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(102, 126, 234, 0.2);
}

.items-count[b-4wtjkipj0a] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .items-count i[b-4wtjkipj0a] {
        color: #9333ea;
    }

.return-total[b-4wtjkipj0a] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
}

    .return-total strong[b-4wtjkipj0a] {
        font-size: 16px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.return-footer[b-4wtjkipj0a] {
    padding: 16px 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.8) 0%, rgba(240, 249, 255, 0.8) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.processed-by[b-4wtjkipj0a] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

    .processed-by i[b-4wtjkipj0a] {
        color: #9333ea;
    }

.btn-view-details[b-4wtjkipj0a] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-view-details:hover[b-4wtjkipj0a] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateX(-5px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

/* Empty State */
.empty-state[b-4wtjkipj0a] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .empty-state i[b-4wtjkipj0a] {
        font-size: 64px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
    }

    .empty-state h3[b-4wtjkipj0a] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-state p[b-4wtjkipj0a] {
        font-size: 16px;
        color: #6b7280;
    }

/* Loading State */
.loading-container[b-4wtjkipj0a] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-4wtjkipj0a] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-4wtjkipj0a 0.8s linear infinite;
}

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

/* Unauthorized State */
.unauthorized-content[b-4wtjkipj0a] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 100px auto;
}

    .unauthorized-content i[b-4wtjkipj0a] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .unauthorized-content h3[b-4wtjkipj0a] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .unauthorized-content p[b-4wtjkipj0a] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .unauthorized-content .btn[b-4wtjkipj0a] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: 12px;
    }

/* Pagination */
.pagination-container[b-4wtjkipj0a] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 32px 0;
}

.btn-page[b-4wtjkipj0a] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
}

    .btn-page:hover:not(:disabled)[b-4wtjkipj0a] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-page.active[b-4wtjkipj0a] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

/* Gradient Buttons (from Users.razor.css) */
.btn-gradient-primary[b-4wtjkipj0a] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .btn-gradient-primary:hover[b-4wtjkipj0a] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

.btn-gradient-secondary[b-4wtjkipj0a] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
}

    .btn-gradient-secondary:hover[b-4wtjkipj0a] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
    }

.btn-gradient-success[b-4wtjkipj0a] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-gradient-success:hover[b-4wtjkipj0a] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Responsive Styles */
@media (max-width: 1200px) {
    .returns-list[b-4wtjkipj0a] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 992px) {
    .page-header[b-4wtjkipj0a] {
        flex-direction: column;
    }

    .returns-list[b-4wtjkipj0a] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .all-returns-container[b-4wtjkipj0a] {
        padding: 16px;
    }

    .page-header[b-4wtjkipj0a] {
        padding: 16px;
        margin-bottom: 24px;
    }

    .header-stats[b-4wtjkipj0a] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .filters-section[b-4wtjkipj0a] {
        padding: 16px;
    }

    .filter-controls[b-4wtjkipj0a] {
        flex-direction: column;
    }

    .filter-select[b-4wtjkipj0a], .filter-date[b-4wtjkipj0a] {
        width: 100%;
    }

    .returns-list[b-4wtjkipj0a] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .return-card[b-4wtjkipj0a] {
        max-width: 100%;
    }

    .btn-refresh[b-4wtjkipj0a] {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .stat-value[b-4wtjkipj0a] {
        font-size: 22px;
    }

    .stat-label[b-4wtjkipj0a] {
        font-size: 12px;
    }

    .return-header[b-4wtjkipj0a] {
        flex-direction: column;
        gap: 12px;
    }

    .return-badges[b-4wtjkipj0a] {
        align-items: flex-start;
    }

    .return-footer[b-4wtjkipj0a] {
        flex-direction: column;
        gap: 12px;
    }

    .btn-view-details[b-4wtjkipj0a] {
        align-self: flex-end;
    }

    .page-header h1[b-4wtjkipj0a] {
        font-size: 24px;
    }

    .btn-page[b-4wtjkipj0a] {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .all-returns-container[b-4wtjkipj0a] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .all-returns-container[b-4wtjkipj0a]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-4wtjkipj0a],
[data-theme="dark"] .filters-section[b-4wtjkipj0a],
[data-theme="dark"] .return-card[b-4wtjkipj0a],
[data-theme="dark"] .empty-state[b-4wtjkipj0a],
[data-theme="dark"] .unauthorized-content[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .return-footer[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%);
}

[data-theme="dark"] .search-box input[b-4wtjkipj0a],
[data-theme="dark"] .filter-select[b-4wtjkipj0a],
[data-theme="dark"] .filter-date[b-4wtjkipj0a] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-box input:focus[b-4wtjkipj0a],
    [data-theme="dark"] .filter-select:focus[b-4wtjkipj0a],
    [data-theme="dark"] .filter-date:focus[b-4wtjkipj0a] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

    [data-theme="dark"] .search-box input[b-4wtjkipj0a]::placeholder {
        color: #94a3b8;
    }

[data-theme="dark"] .stat-card[b-4wtjkipj0a] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(30, 41, 59, 0.6) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .btn-refresh[b-4wtjkipj0a] {
    background: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .return-header[b-4wtjkipj0a],
[data-theme="dark"] .return-footer[b-4wtjkipj0a] {
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .return-info h4[b-4wtjkipj0a] {
    color: #e2e8f0;
}

[data-theme="dark"] .return-date[b-4wtjkipj0a],
[data-theme="dark"] .customer-info span[b-4wtjkipj0a],
[data-theme="dark"] .return-reason span[b-4wtjkipj0a],
[data-theme="dark"] .items-count[b-4wtjkipj0a],
[data-theme="dark"] .return-total[b-4wtjkipj0a],
[data-theme="dark"] .processed-by[b-4wtjkipj0a] {
    color: #94a3b8;
}

[data-theme="dark"] .customer-info strong[b-4wtjkipj0a],
[data-theme="dark"] .return-reason strong[b-4wtjkipj0a] {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-page[b-4wtjkipj0a] {
    background: rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .btn-view-details[b-4wtjkipj0a] {
    background: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .breadcrumb a[b-4wtjkipj0a] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb a:hover[b-4wtjkipj0a] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb span:last-child[b-4wtjkipj0a] {
    color: #e2e8f0;
}

[data-theme="dark"] .spinner-border[b-4wtjkipj0a] {
    border-color: rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
}

/* Print Styles */
@media print {
    .all-returns-container[b-4wtjkipj0a] {
        background: white !important;
        padding: 0;
    }

    .page-header[b-4wtjkipj0a],
    .filters-section[b-4wtjkipj0a],
    .return-card[b-4wtjkipj0a],
    .pagination-container[b-4wtjkipj0a] {
        box-shadow: none;
        background: none !important;
        border: 1px solid #e5e7eb;
    }

    .btn-refresh[b-4wtjkipj0a],
    .btn-view-details[b-4wtjkipj0a] {
        display: none !important;
    }

    .returns-list[b-4wtjkipj0a] {
        grid-template-columns: 1fr;
    }

    .return-card[b-4wtjkipj0a]::before {
        display: none;
    }

    .return-card[b-4wtjkipj0a] {
        page-break-inside: avoid;
    }
}

/* RTL Support */
html[dir="rtl"] .search-box i[b-4wtjkipj0a] {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .search-box input[b-4wtjkipj0a] {
    padding: 12px 46px 12px 16px;
}

html[dir="rtl"] .btn-view-details:hover[b-4wtjkipj0a] {
    transform: translateX(5px);
}

html[dir="rtl"] .btn-page i.fa-chevron-left[b-4wtjkipj0a],
html[dir="rtl"] .btn-page i.fa-chevron-right[b-4wtjkipj0a] {
    transform: rotate(180deg);
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantViewOrder.razor.rz.scp.css */
/* MerchantViewOrder - Professional Modern Design
   متجانس مع التصميم العام للنظام
   ================================================== */

/* Container and Page Layout */
.order-details-container[b-2e6bn9dbbo] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .order-details-container[b-2e6bn9dbbo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .order-details-container > *[b-2e6bn9dbbo] {
        position: relative;
        z-index: 1;
    }

.order-content[b-2e6bn9dbbo] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Order Header */
.order-header[b-2e6bn9dbbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-left[b-2e6bn9dbbo] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-back[b-2e6bn9dbbo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-back:hover[b-2e6bn9dbbo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.header-info h1[b-2e6bn9dbbo] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.breadcrumb[b-2e6bn9dbbo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .breadcrumb a[b-2e6bn9dbbo] {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
    }

        .breadcrumb a:hover[b-2e6bn9dbbo] {
            color: #667eea;
        }

.header-actions[b-2e6bn9dbbo] {
    display: flex;
    gap: 12px;
}

.btn-action[b-2e6bn9dbbo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    color: white;
}

    .btn-action.print[b-2e6bn9dbbo] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    }

        .btn-action.print:hover[b-2e6bn9dbbo] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(74, 163, 194, 0.3);
        }

    .btn-action.share[b-2e6bn9dbbo] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
        box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
    }

        .btn-action.share:hover[b-2e6bn9dbbo] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
        }

    .btn-action.edit[b-2e6bn9dbbo] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
    }

        .btn-action.edit:hover[b-2e6bn9dbbo] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
        }

/* Status Card */
.status-card[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-header[b-2e6bn9dbbo] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.status-info[b-2e6bn9dbbo], .payment-info[b-2e6bn9dbbo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-label[b-2e6bn9dbbo], .payment-label[b-2e6bn9dbbo] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.status-badge[b-2e6bn9dbbo], .payment-badge[b-2e6bn9dbbo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
}

.status-pending[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-processing[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.status-shipped[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.2) 100%);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-delivered[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-cancelled[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-returned[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Payment Status */
.payment-pending[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.payment-partial[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.payment-completed[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.payment-failed[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.payment-refunded[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.status-actions[b-2e6bn9dbbo] {
    display: flex;
    gap: 12px;
}

.btn-status[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-status:hover[b-2e6bn9dbbo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Information Sections */
.info-section[b-2e6bn9dbbo], .items-section[b-2e6bn9dbbo], .payment-section[b-2e6bn9dbbo],
.installment-section[b-2e6bn9dbbo], .agents-section[b-2e6bn9dbbo], .timeline-section[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

    .info-section:hover[b-2e6bn9dbbo], .items-section:hover[b-2e6bn9dbbo], .payment-section:hover[b-2e6bn9dbbo],
    .installment-section:hover[b-2e6bn9dbbo], .agents-section:hover[b-2e6bn9dbbo], .timeline-section:hover[b-2e6bn9dbbo] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

.section-header[b-2e6bn9dbbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .section-header h3[b-2e6bn9dbbo] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4c1d95;
    }

        .section-header h3 i[b-2e6bn9dbbo] {
            color: #667eea;
        }

.info-grid[b-2e6bn9dbbo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item[b-2e6bn9dbbo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .info-item label[b-2e6bn9dbbo] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

.info-value[b-2e6bn9dbbo] {
    font-size: 16px;
    font-weight: 500;
}

    .info-value a[b-2e6bn9dbbo] {
        color: #667eea;
        text-decoration: none;
        transition: all 0.2s;
    }

        .info-value a:hover[b-2e6bn9dbbo] {
            color: #4f46e5;
            text-decoration: underline;
        }

.customer-link[b-2e6bn9dbbo], .phone-link[b-2e6bn9dbbo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Order Items */
.items-count[b-2e6bn9dbbo] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.items-table[b-2e6bn9dbbo] {
    margin-top: 20px;
}

.table[b-2e6bn9dbbo] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th[b-2e6bn9dbbo] {
        background: rgba(102, 126, 234, 0.05);
        padding: 12px 16px;
        text-align: right;
        font-weight: 600;
        color: #4c1d95;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }

    .table td[b-2e6bn9dbbo] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: background 0.2s;
        vertical-align: middle;
    }

    .table tr:hover td[b-2e6bn9dbbo] {
        background: rgba(102, 126, 234, 0.05);
    }

    .table tr:last-child td[b-2e6bn9dbbo] {
        border-bottom: none;
    }

.product-info[b-2e6bn9dbbo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb[b-2e6bn9dbbo] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.discount-amount[b-2e6bn9dbbo] {
    color: #ef4444;
}

.total-price[b-2e6bn9dbbo] {
    font-weight: 700;
    color: #4c1d95;
}

/* Mobile Items Cards */
.items-mobile[b-2e6bn9dbbo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-card[b-2e6bn9dbbo] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.item-header[b-2e6bn9dbbo] {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.item-image[b-2e6bn9dbbo] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.item-details[b-2e6bn9dbbo] {
    flex: 1;
}

    .item-details h4[b-2e6bn9dbbo] {
        font-size: 16px;
        margin: 0 0 4px 0;
    }

.sku[b-2e6bn9dbbo] {
    font-size: 12px;
    color: #6b7280;
}

.item-pricing[b-2e6bn9dbbo] {
    padding: 16px;
}

.price-row[b-2e6bn9dbbo] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

    .price-row.discount[b-2e6bn9dbbo] {
        color: #ef4444;
    }

    .price-row.total[b-2e6bn9dbbo] {
        font-weight: 700;
        border-top: 1px dashed rgba(0, 0, 0, 0.1);
        margin-top: 8px;
        padding-top: 12px;
        font-size: 16px;
    }

/* Payment Summary */
.payment-summary[b-2e6bn9dbbo] {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.summary-row[b-2e6bn9dbbo] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
}

    .summary-row.discount[b-2e6bn9dbbo] {
        color: #ef4444;
    }

    .summary-row.total[b-2e6bn9dbbo] {
        font-size: 20px;
        font-weight: 700;
        border-top: 2px solid rgba(102, 126, 234, 0.1);
        margin-top: 8px;
        padding-top: 12px;
    }

    .summary-row.paid[b-2e6bn9dbbo] {
        color: #10b981;
        font-weight: 600;
    }

    .summary-row.remaining[b-2e6bn9dbbo] {
        color: #f59e0b;
        font-weight: 600;
    }

.payment-method[b-2e6bn9dbbo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .payment-method label[b-2e6bn9dbbo] {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

.method-badge[b-2e6bn9dbbo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    width: fit-content;
    color: white;
}

.method-cash[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.method-card[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.method-installment[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.method-vodafone[b-2e6bn9dbbo], .method-etisalat[b-2e6bn9dbbo], .method-orange[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.method-paypal[b-2e6bn9dbbo], .method-stripe[b-2e6bn9dbbo], .method-default[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
}

/* Installment Plan */
.plan-status[b-2e6bn9dbbo] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.plan-active[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.2) 100%);
    color: #10b981;
}

.plan-completed[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #4f46e5;
}

.plan-defaulted[b-2e6bn9dbbo], .plan-cancelled[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
    color: #ef4444;
}

.plan-onhold[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #d97706;
}

.installments-schedule[b-2e6bn9dbbo] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .installments-schedule h4[b-2e6bn9dbbo] {
        font-size: 18px;
        margin-bottom: 16px;
        color: #4c1d95;
    }

.schedule-progress[b-2e6bn9dbbo] {
    margin-bottom: 16px;
}

.progress[b-2e6bn9dbbo] {
    height: 16px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar[b-2e6bn9dbbo] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    transition: width 0.3s;
}

.progress-text[b-2e6bn9dbbo] {
    font-size: 14px;
    color: #6b7280;
}

.amount-progress[b-2e6bn9dbbo] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.guarantor-info[b-2e6bn9dbbo] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .guarantor-info h4[b-2e6bn9dbbo] {
        font-size: 18px;
        margin-bottom: 16px;
        color: #4c1d95;
    }

/* Agents Section */
.agents-grid[b-2e6bn9dbbo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.agent-card[b-2e6bn9dbbo] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

    .agent-card:hover[b-2e6bn9dbbo] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

    .agent-card.single[b-2e6bn9dbbo] {
        grid-column: 1 / -1;
        max-width: 400px;
    }

.agent-avatar[b-2e6bn9dbbo] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

    .agent-avatar img[b-2e6bn9dbbo] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.agent-info[b-2e6bn9dbbo] {
    flex: 1;
}

    .agent-info h5[b-2e6bn9dbbo] {
        font-size: 16px;
        margin: 0 0 4px 0;
        font-weight: 600;
    }

.agent-phone[b-2e6bn9dbbo], .agent-commission[b-2e6bn9dbbo] {
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* Timeline Section */
.timeline[b-2e6bn9dbbo] {
    position: relative;
    padding-right: 24px;
}

    .timeline[b-2e6bn9dbbo]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 9px;
        height: 100%;
        width: 2px;
        background: rgba(102, 126, 234, 0.2);
    }

.timeline-item[b-2e6bn9dbbo] {
    position: relative;
    padding-bottom: 24px;
    padding-right: 36px;
}

.timeline-icon[b-2e6bn9dbbo] {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    box-shadow: 0 0 0 4px white;
}

    .timeline-icon.created[b-2e6bn9dbbo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .timeline-icon.delivered[b-2e6bn9dbbo] {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    }

.timeline-content[b-2e6bn9dbbo] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

    .timeline-content h5[b-2e6bn9dbbo] {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .timeline-content p[b-2e6bn9dbbo] {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #6b7280;
    }

    .timeline-content small[b-2e6bn9dbbo] {
        font-size: 12px;
        color: #6b7280;
        display: block;
    }

/* Action Buttons */
.action-buttons[b-2e6bn9dbbo] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.btn-action.cancel[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
}

    .btn-action.cancel:hover[b-2e6bn9dbbo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(239, 68, 68, 0.3);
    }

.btn-action.return[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

    .btn-action.return:hover[b-2e6bn9dbbo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(245, 158, 11, 0.3);
    }

.btn-action.installments[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2);
}

    .btn-action.installments:hover[b-2e6bn9dbbo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(139, 92, 246, 0.3);
    }

.btn-action.invoice[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

    .btn-action.invoice:hover[b-2e6bn9dbbo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
    }

/* Not Found / Loading / Unauthorized */
.loading-container[b-2e6bn9dbbo], .not-found-container[b-2e6bn9dbbo], .unauthorized-content[b-2e6bn9dbbo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    text-align: center;
    min-height: 60vh;
}

    .not-found-container i[b-2e6bn9dbbo], .unauthorized-content i[b-2e6bn9dbbo] {
        font-size: 64px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .not-found-container h3[b-2e6bn9dbbo], .unauthorized-content h3[b-2e6bn9dbbo] {
        font-size: 24px;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .not-found-container p[b-2e6bn9dbbo], .unauthorized-content p[b-2e6bn9dbbo] {
        color: #6b7280;
        max-width: 500px;
        margin-bottom: 24px;
    }

/* Responsive Design */
@media (max-width: 991px) {
    .order-header[b-2e6bn9dbbo] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .status-card[b-2e6bn9dbbo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .status-header[b-2e6bn9dbbo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .order-details-container[b-2e6bn9dbbo] {
        padding: 16px;
    }

    .order-header[b-2e6bn9dbbo], .status-card[b-2e6bn9dbbo], .info-section[b-2e6bn9dbbo],
    .items-section[b-2e6bn9dbbo], .payment-section[b-2e6bn9dbbo], .installment-section[b-2e6bn9dbbo],
    .agents-section[b-2e6bn9dbbo], .timeline-section[b-2e6bn9dbbo] {
        padding: 16px;
    }

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

    .agents-grid[b-2e6bn9dbbo] {
        grid-template-columns: 1fr;
    }

    .header-info h1[b-2e6bn9dbbo] {
        font-size: 24px;
    }

    .section-header h3[b-2e6bn9dbbo] {
        font-size: 18px;
    }

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

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

    .timeline[b-2e6bn9dbbo] {
        padding-right: 20px;
    }

        .timeline[b-2e6bn9dbbo]::before {
            right: 7px;
        }

    .timeline-item[b-2e6bn9dbbo] {
        padding-right: 28px;
    }

    .timeline-icon[b-2e6bn9dbbo] {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }

    .summary-row.total[b-2e6bn9dbbo] {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .header-actions[b-2e6bn9dbbo] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-action[b-2e6bn9dbbo] {
        padding: 10px;
    }
}

/* Print Styles */
@media print {
    .order-details-container[b-2e6bn9dbbo] {
        padding: 0;
        background: white !important;
    }

        .order-details-container[b-2e6bn9dbbo]::before {
            display: none;
        }

    .order-header[b-2e6bn9dbbo], .status-card[b-2e6bn9dbbo], .info-section[b-2e6bn9dbbo],
    .items-section[b-2e6bn9dbbo], .payment-section[b-2e6bn9dbbo], .installment-section[b-2e6bn9dbbo],
    .agents-section[b-2e6bn9dbbo], .timeline-section[b-2e6bn9dbbo] {
        box-shadow: none;
        margin-bottom: 20px;
        page-break-inside: avoid;
        border: 1px solid #e2e8f0;
        background: white !important;
    }

    .btn-back[b-2e6bn9dbbo], .header-actions[b-2e6bn9dbbo], .status-actions[b-2e6bn9dbbo], .action-buttons[b-2e6bn9dbbo] {
        display: none !important;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .order-details-container[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .order-details-container[b-2e6bn9dbbo]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .order-header[b-2e6bn9dbbo],
[data-theme="dark"] .status-card[b-2e6bn9dbbo],
[data-theme="dark"] .info-section[b-2e6bn9dbbo],
[data-theme="dark"] .items-section[b-2e6bn9dbbo],
[data-theme="dark"] .payment-section[b-2e6bn9dbbo],
[data-theme="dark"] .installment-section[b-2e6bn9dbbo],
[data-theme="dark"] .agents-section[b-2e6bn9dbbo],
[data-theme="dark"] .timeline-section[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .header-info h1[b-2e6bn9dbbo] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb a[b-2e6bn9dbbo],
[data-theme="dark"] .breadcrumb[b-2e6bn9dbbo] {
    color: #94a3b8;
}

    [data-theme="dark"] .breadcrumb a:hover[b-2e6bn9dbbo] {
        color: #a78bfa;
    }

[data-theme="dark"] .section-header h3[b-2e6bn9dbbo] {
    color: #e2e8f0;
}

    [data-theme="dark"] .section-header h3 i[b-2e6bn9dbbo] {
        color: #a78bfa;
    }

[data-theme="dark"] .info-item label[b-2e6bn9dbbo],
[data-theme="dark"] .status-label[b-2e6bn9dbbo],
[data-theme="dark"] .payment-label[b-2e6bn9dbbo],
[data-theme="dark"] .progress-text[b-2e6bn9dbbo],
[data-theme="dark"] .agent-phone[b-2e6bn9dbbo],
[data-theme="dark"] .agent-commission[b-2e6bn9dbbo] {
    color: #94a3b8;
}

[data-theme="dark"] .info-value[b-2e6bn9dbbo] {
    color: #e2e8f0;
}

    [data-theme="dark"] .info-value a[b-2e6bn9dbbo] {
        color: #a78bfa;
    }

        [data-theme="dark"] .info-value a:hover[b-2e6bn9dbbo] {
            color: #c084fc;
        }

[data-theme="dark"] .table th[b-2e6bn9dbbo] {
    background: rgba(102, 126, 234, 0.1);
    color: #e2e8f0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .table td[b-2e6bn9dbbo] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme="dark"] .table tr:hover td[b-2e6bn9dbbo] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .item-card[b-2e6bn9dbbo],
[data-theme="dark"] .agent-card[b-2e6bn9dbbo],
[data-theme="dark"] .timeline-content[b-2e6bn9dbbo] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .payment-summary[b-2e6bn9dbbo] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .btn-back[b-2e6bn9dbbo] {
    background: rgba(102, 126, 234, 0.2);
    color: #a78bfa;
}

[data-theme="dark"] .not-found-container i[b-2e6bn9dbbo],
[data-theme="dark"] .unauthorized-content i[b-2e6bn9dbbo] {
    color: #94a3b8;
}

[data-theme="dark"] .not-found-container h3[b-2e6bn9dbbo],
[data-theme="dark"] .unauthorized-content h3[b-2e6bn9dbbo] {
    color: #e2e8f0;
}

[data-theme="dark"] .not-found-container p[b-2e6bn9dbbo],
[data-theme="dark"] .unauthorized-content p[b-2e6bn9dbbo] {
    color: #94a3b8;
}

[data-theme="dark"] .timeline[b-2e6bn9dbbo]::before {
    background: rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .timeline-icon[b-2e6bn9dbbo] {
    box-shadow: 0 0 0 4px rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .installments-schedule h4[b-2e6bn9dbbo],
[data-theme="dark"] .guarantor-info h4[b-2e6bn9dbbo] {
    color: #e2e8f0;
}
/* Add this to your CSS file */
.status-dropdown-container[b-2e6bn9dbbo] {
    position: relative;
    display: inline-block;
}

.status-dropdown[b-2e6bn9dbbo] {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    background-color: white;
    min-width: 160px;
    font-size: 0.9rem;
    cursor: pointer;
}

    .status-dropdown:focus[b-2e6bn9dbbo] {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .status-dropdown option[b-2e6bn9dbbo] {
        padding: 8px;
    }
/* Web Store Order Banner */
.status-card.web-store-order[b-2e6bn9dbbo] {
    border-left: 4px solid #28a745;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9f7ef 100%);
}

.order-source-banner[b-2e6bn9dbbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    margin: -15px -15px 15px -15px;
}

.source-info[b-2e6bn9dbbo] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.source-text[b-2e6bn9dbbo] {
    font-weight: 600;
    font-size: 16px;
}

.device-info[b-2e6bn9dbbo] {
    background: rgba(255,255,255,0.2);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.btn-toggle-commissions[b-2e6bn9dbbo] {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    transition: all 0.3s ease;
}

    .btn-toggle-commissions:hover[b-2e6bn9dbbo] {
        background: rgba(255,255,255,0.3);
        border-color: rgba(255,255,255,0.5);
    }

/* Commission Settings Panel */
.commission-settings-panel[b-2e6bn9dbbo] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .commission-settings-panel .panel-header[b-2e6bn9dbbo] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8f9fa;
        padding: 15px 20px;
        border-bottom: 1px solid #dee2e6;
        border-radius: 8px 8px 0 0;
    }

        .commission-settings-panel .panel-header h4[b-2e6bn9dbbo] {
            margin: 0;
            color: #495057;
            font-size: 16px;
        }

            .commission-settings-panel .panel-header h4 i[b-2e6bn9dbbo] {
                color: #28a745;
                margin-right: 8px;
            }

.btn-close[b-2e6bn9dbbo] {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    .btn-close:hover[b-2e6bn9dbbo] {
        background: #e9ecef;
        color: #495057;
    }

.commission-content[b-2e6bn9dbbo] {
    padding: 20px;
}

.commission-section[b-2e6bn9dbbo] {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f3f4;
}

    .commission-section:last-child[b-2e6bn9dbbo] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .commission-section .section-header[b-2e6bn9dbbo] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

        .commission-section .section-header h5[b-2e6bn9dbbo] {
            margin: 0;
            color: #495057;
            font-size: 14px;
            font-weight: 600;
        }

            .commission-section .section-header h5 i[b-2e6bn9dbbo] {
                color: #007bff;
                margin-right: 8px;
            }

/* Toggle Switch */
.switch[b-2e6bn9dbbo] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

    .switch input[b-2e6bn9dbbo] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-2e6bn9dbbo] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

    .slider[b-2e6bn9dbbo]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider[b-2e6bn9dbbo] {
    background-color: #28a745;
}

    input:checked + .slider[b-2e6bn9dbbo]:before {
        transform: translateX(26px);
    }

/* Agent Selection */
.agent-selection[b-2e6bn9dbbo] {
    margin-top: 15px;
}

    .agent-selection label[b-2e6bn9dbbo] {
        display: block;
        margin-bottom: 8px;
        color: #495057;
        font-weight: 500;
        font-size: 14px;
    }

    .agent-selection .form-select[b-2e6bn9dbbo] {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

        .agent-selection .form-select:focus[b-2e6bn9dbbo] {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
            outline: 0;
        }

.commission-info[b-2e6bn9dbbo] {
    margin-top: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

    .commission-info small[b-2e6bn9dbbo] {
        color: #6c757d;
        font-size: 12px;
    }

/* Commission Actions */
.commission-actions[b-2e6bn9dbbo] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f1f3f4;
}

    .commission-actions .btn[b-2e6bn9dbbo] {
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .commission-actions .btn-primary[b-2e6bn9dbbo] {
        background: #007bff;
        color: white;
    }

        .commission-actions .btn-primary:hover[b-2e6bn9dbbo] {
            background: #0056b3;
        }

        .commission-actions .btn-primary:disabled[b-2e6bn9dbbo] {
            background: #6c757d;
            cursor: not-allowed;
        }

    .commission-actions .btn-secondary[b-2e6bn9dbbo] {
        background: #6c757d;
        color: white;
    }

        .commission-actions .btn-secondary:hover[b-2e6bn9dbbo] {
            background: #545b62;
        }

/* Responsive Design */
@media (max-width: 768px) {
    .order-source-banner[b-2e6bn9dbbo] {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .commission-settings-panel .panel-header[b-2e6bn9dbbo] {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .commission-actions[b-2e6bn9dbbo] {
        flex-direction: column;
    }

        .commission-actions .btn[b-2e6bn9dbbo] {
            justify-content: center;
        }
}
/* _content/Sahelly/Components/Pages/Merchant/MerchantWallet.razor.rz.scp.css */

/* ===================================
   Merchant Wallet Page - Professional CSS
   Based on app.css variables and Users.razor.css patterns
   =================================== */

/* Page Container */
.merchant-wallet-page[b-cj4b00xqfc] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .merchant-wallet-page[b-cj4b00xqfc]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .merchant-wallet-page > *[b-cj4b00xqfc] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-cj4b00xqfc] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.breadcrumb[b-cj4b00xqfc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.breadcrumb-link[b-cj4b00xqfc] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-cj4b00xqfc] {
        color: #667eea;
    }

.breadcrumb-separator[b-cj4b00xqfc] {
    color: #d1d5db;
}

.breadcrumb-current[b-cj4b00xqfc] {
    color: #4c1d95;
    font-weight: 600;
}

.page-title[b-cj4b00xqfc] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle[b-cj4b00xqfc] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Loading Container */
.loading-container[b-cj4b00xqfc] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    width: 100%;
}

.spinner-container[b-cj4b00xqfc] {
    text-align: center;
}

.spinner[b-cj4b00xqfc] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin-b-cj4b00xqfc 1s linear infinite;
    margin: 0 auto 16px;
}

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

.loading-container p[b-cj4b00xqfc] {
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
}

/* Error State */
.error-state[b-cj4b00xqfc] {
    text-align: center;
    padding: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .error-state i[b-cj4b00xqfc] {
        font-size: 64px;
        color: #ef4444;
        margin-bottom: 24px;
    }

    .error-state h3[b-cj4b00xqfc] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .error-state p[b-cj4b00xqfc] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-retry[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-retry:hover[b-cj4b00xqfc] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Wallet Summary Grid */
.wallet-summary-grid[b-cj4b00xqfc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.wallet-card[b-cj4b00xqfc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 16px;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .wallet-card:hover[b-cj4b00xqfc] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

.card-icon[b-cj4b00xqfc] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.total-balance .card-icon[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    color: white;
}

.available-balance .card-icon[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
}

.pending-balance .card-icon[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    color: white;
}

.card-content[b-cj4b00xqfc] {
    flex: 1;
}

    .card-content h3[b-cj4b00xqfc] {
        font-size: 16px;
        font-weight: 600;
        color: #4b5563;
        margin: 0 0 8px;
    }

    .card-content .amount[b-cj4b00xqfc] {
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 6px;
        color: #1f2937;
    }

.total-balance .amount[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.available-balance .amount[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pending-balance .amount[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wallet-number[b-cj4b00xqfc] {
    font-size: 14px;
    color: #6b7280;
    display: block;
}

.status[b-cj4b00xqfc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    padding: 4px 12px;
}

    .status i[b-cj4b00xqfc] {
        font-size: 8px;
    }

    .status.active[b-cj4b00xqfc] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .status.inactive[b-cj4b00xqfc] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .status.locked[b-cj4b00xqfc] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

.wallet-card.actions[b-cj4b00xqfc] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    padding: 24px;
}

.btn-action[b-cj4b00xqfc] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .btn-action:hover:not(:disabled)[b-cj4b00xqfc] {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }

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

    .btn-action.deposit[b-cj4b00xqfc] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .btn-action.withdraw[b-cj4b00xqfc] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

/* Agents Pending Commissions Section */
.agents-commissions-section[b-cj4b00xqfc] {
    margin-bottom: 32px;
}

.section-header[b-cj4b00xqfc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .section-header h2[b-cj4b00xqfc] {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #1f2937;
    }

        .section-header h2 i[b-cj4b00xqfc] {
            color: #5a6cb3;
        }

.commission-summary[b-cj4b00xqfc] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.total-label[b-cj4b00xqfc] {
    font-size: 15px;
    color: #4b5563;
    font-weight: 500;
}

.total-amount[b-cj4b00xqfc] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.agents-commissions-grid[b-cj4b00xqfc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.agent-commission-card[b-cj4b00xqfc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .agent-commission-card:hover[b-cj4b00xqfc] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

.agent-header[b-cj4b00xqfc] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.agent-info[b-cj4b00xqfc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .agent-info i[b-cj4b00xqfc] {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

    .agent-info h4[b-cj4b00xqfc] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

.commission-total[b-cj4b00xqfc] {
    text-align: right;
}

    .commission-total .amount[b-cj4b00xqfc] {
        display: block;
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 2px;
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .commission-total .count[b-cj4b00xqfc] {
        font-size: 13px;
        color: #6b7280;
    }

.commission-details[b-cj4b00xqfc] {
    padding: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.detail-row[b-cj4b00xqfc] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

    .detail-row:last-child[b-cj4b00xqfc] {
        margin-bottom: 0;
    }

    .detail-row span:first-child[b-cj4b00xqfc] {
        color: #4b5563;
    }

    .detail-row span:last-child[b-cj4b00xqfc] {
        font-weight: 600;
        color: #1f2937;
    }

.commission-actions[b-cj4b00xqfc] {
    display: flex;
    padding: 12px;
    gap: 8px;
}

    .commission-actions button[b-cj4b00xqfc] {
        flex: 1;
        padding: 10px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.3s;
        border: none;
        cursor: pointer;
    }

.btn-view-details[b-cj4b00xqfc] {
    background-color: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

    .btn-view-details:hover[b-cj4b00xqfc] {
        background-color: rgba(102, 126, 234, 0.2);
    }

.btn-pay-commission[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
}

    .btn-pay-commission:hover:not(:disabled)[b-cj4b00xqfc] {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(59, 201, 104, 0.3);
    }

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

/* Transaction Section */
.transactions-section[b-cj4b00xqfc] {
    margin-bottom: 32px;
}

.filters[b-cj4b00xqfc] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

    .filters .form-control[b-cj4b00xqfc] {
        height: 40px;
        border-radius: 8px;
        border: 1px solid rgba(102, 126, 234, 0.2);
        padding: 0 12px;
        background-color: white;
        min-width: 160px;
        font-size: 14px;
    }

.date-filter[b-cj4b00xqfc] {
    min-width: 140px !important;
}

.btn-filter[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    height: 40px;
    border-radius: 8px;
    padding: 0 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-filter:hover[b-cj4b00xqfc] {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }

    .btn-filter i[b-cj4b00xqfc] {
        font-size: 14px;
    }

.btn-export[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
}

.loading-spinner[b-cj4b00xqfc] {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.spinner-border[b-cj4b00xqfc] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-cj4b00xqfc 0.8s linear infinite;
}

/* Transactions Table */
.transactions-table[b-cj4b00xqfc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.table[b-cj4b00xqfc] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .table th[b-cj4b00xqfc] {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        color: #4c1d95;
        font-size: 14px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background-color: rgba(102, 126, 234, 0.05);
    }

    .table td[b-cj4b00xqfc] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-size: 14px;
        transition: background-color 0.2s;
    }

    .table tbody tr:hover[b-cj4b00xqfc] {
        background-color: rgba(102, 126, 234, 0.05);
    }

    .table tr:last-child td[b-cj4b00xqfc] {
        border-bottom: none;
    }

.reference-number[b-cj4b00xqfc] {
    font-family: monospace;
    font-size: 13px;
    color: #4b5563;
}

.transaction-type[b-cj4b00xqfc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .transaction-type i[b-cj4b00xqfc] {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 12px;
        color: white;
    }

.deposit .transaction-type i[b-cj4b00xqfc] {
    background-color: #10b981;
}

.withdrawal .transaction-type i[b-cj4b00xqfc] {
    background-color: #ef4444;
}

.transfer .transaction-type i[b-cj4b00xqfc] {
    background-color: #6366f1;
}

.commission .transaction-type i[b-cj4b00xqfc] {
    background-color: #f59e0b;
}

.InstallmentPayment .transaction-type i[b-cj4b00xqfc] {
    background-color: #8b5cf6;
}

.refund .transaction-type i[b-cj4b00xqfc] {
    background-color: #ec4899;
}

td.amount[b-cj4b00xqfc] {
    font-weight: 600;
}

    td.amount.credit[b-cj4b00xqfc] {
        color: #10b981;
    }

    td.amount.debit[b-cj4b00xqfc] {
        color: #ef4444;
    }

.status-badge[b-cj4b00xqfc] {
    display: inline-flex;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: capitalize;
}

    .status-badge.success[b-cj4b00xqfc] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .status-badge.warning[b-cj4b00xqfc] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .status-badge.danger[b-cj4b00xqfc] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .status-badge.secondary[b-cj4b00xqfc] {
        background: rgba(156, 163, 175, 0.1);
        color: #6b7280;
    }

    .status-badge.primary[b-cj4b00xqfc] {
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
    }

    .status-badge.info[b-cj4b00xqfc] {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

.btn-transaction-details[b-cj4b00xqfc] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-transaction-details:hover[b-cj4b00xqfc] {
        background: rgba(102, 126, 234, 0.2);
        transform: scale(1.1);
    }

/* Mobile Transaction Cards */
.transactions-cards[b-cj4b00xqfc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.transaction-card[b-cj4b00xqfc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

    .transaction-card:hover[b-cj4b00xqfc] {
        transform: translateY(-3px);
    }

    .transaction-card .card-header[b-cj4b00xqfc] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        background-color: rgba(102, 126, 234, 0.05);
    }

.transaction-date[b-cj4b00xqfc] {
    font-size: 13px;
    color: #6b7280;
}

.transaction-card .card-body[b-cj4b00xqfc] {
    padding: 16px;
}

.description[b-cj4b00xqfc] {
    margin: 0 0 12px;
    font-size: 14px;
    color: #1f2937;
}

.reference-info[b-cj4b00xqfc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    font-size: 13px;
}

.reference-label[b-cj4b00xqfc] {
    color: #6b7280;
}

.amount-row[b-cj4b00xqfc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.amount[b-cj4b00xqfc] {
    font-weight: 600;
    font-size: 16px;
}

.balance[b-cj4b00xqfc] {
    font-size: 13px;
    color: #6b7280;
}

.card-footer[b-cj4b00xqfc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-transaction-details-mobile[b-cj4b00xqfc] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    cursor: pointer;
}

/* Pagination Container */
.pagination-container[b-cj4b00xqfc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.pagination-info[b-cj4b00xqfc] {
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}

.pagination[b-cj4b00xqfc] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.page-btn[b-cj4b00xqfc] {
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    color: #4c1d95;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .page-btn:hover:not(:disabled)[b-cj4b00xqfc] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

    .page-btn.active[b-cj4b00xqfc] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

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

/* Empty State */
.empty-state[b-cj4b00xqfc] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .empty-state i[b-cj4b00xqfc] {
        font-size: 64px;
        margin-bottom: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-state h3[b-cj4b00xqfc] {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 10px;
    }

    .empty-state p[b-cj4b00xqfc] {
        font-size: 16px;
        color: #6b7280;
        max-width: 600px;
        margin: 0 auto;
    }

/* Withdrawal Requests Section */
.withdrawal-requests-section[b-cj4b00xqfc] {
    margin-bottom: 32px;
}

.btn-new-request[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-new-request:hover[b-cj4b00xqfc] {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(59, 201, 104, 0.3);
    }

.requests-grid[b-cj4b00xqfc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.request-card[b-cj4b00xqfc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid;
}

    .request-card.success[b-cj4b00xqfc] {
        border-top-color: #10b981;
    }

    .request-card.warning[b-cj4b00xqfc] {
        border-top-color: #f59e0b;
    }

    .request-card.danger[b-cj4b00xqfc] {
        border-top-color: #ef4444;
    }

    .request-card.info[b-cj4b00xqfc] {
        border-top-color: #3b82f6;
    }

    .request-card.secondary[b-cj4b00xqfc] {
        border-top-color: #6b7280;
    }

    .request-card:hover[b-cj4b00xqfc] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

.request-header[b-cj4b00xqfc] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background-color: rgba(102, 126, 234, 0.05);
}

.request-amount[b-cj4b00xqfc] {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}

.request-status[b-cj4b00xqfc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

    .request-status.success[b-cj4b00xqfc] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .request-status.warning[b-cj4b00xqfc] {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .request-status.danger[b-cj4b00xqfc] {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .request-status.info[b-cj4b00xqfc] {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

.request-details[b-cj4b00xqfc] {
    padding: 16px;
}

.detail-item[b-cj4b00xqfc] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

    .detail-item:last-child[b-cj4b00xqfc] {
        margin-bottom: 0;
    }

    .detail-item i[b-cj4b00xqfc] {
        color: #667eea;
        width: 16px;
        display: flex;
        justify-content: center;
        padding-top: 3px;
    }

    .detail-item div[b-cj4b00xqfc] {
        flex: 1;
    }

.label[b-cj4b00xqfc] {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 2px;
}

.value[b-cj4b00xqfc] {
    font-weight: 500;
    color: #1f2937;
}

.request-actions[b-cj4b00xqfc] {
    display: flex;
    padding: 12px 16px;
    gap: 8px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background-color: rgba(102, 126, 234, 0.02);
}

.btn-cancel-request[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s;
    cursor: pointer;
    flex: 1;
}

    .btn-cancel-request:hover[b-cj4b00xqfc] {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(208, 78, 95, 0.3);
    }

.btn-view-request[b-cj4b00xqfc] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s;
    cursor: pointer;
    flex: 1;
}

    .btn-view-request:hover[b-cj4b00xqfc] {
        background: rgba(102, 126, 234, 0.2);
    }

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

.modal-content[b-cj4b00xqfc] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    width: 100%;
    max-width: 600px;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: modal-appear-b-cj4b00xqfc 0.3s ease-out;
}

@keyframes modal-appear-b-cj4b00xqfc {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

.modal-header[b-cj4b00xqfc] {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .modal-header h3[b-cj4b00xqfc] {
        margin: 0;
        font-size: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: #1f2937;
    }

        .modal-header h3 i[b-cj4b00xqfc] {
            color: #667eea;
        }

.modal-close[b-cj4b00xqfc] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
}

    .modal-close:hover[b-cj4b00xqfc] {
        background: rgba(107, 114, 128, 0.1);
        color: #1f2937;
        transform: rotate(90deg);
    }

.modal-body[b-cj4b00xqfc] {
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-footer[b-cj4b00xqfc] {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background-color: rgba(102, 126, 234, 0.02);
}

.transaction-detail-grid[b-cj4b00xqfc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-group[b-cj4b00xqfc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .detail-group.full-width[b-cj4b00xqfc] {
        grid-column: 1 / -1;
    }

    .detail-group label[b-cj4b00xqfc] {
        font-size: 13px;
        color: #6b7280;
    }

    .detail-group .value[b-cj4b00xqfc] {
        font-weight: 500;
        color: #1f2937;
    }

.btn-primary[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

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

.btn-secondary[b-cj4b00xqfc] {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
}

    .btn-secondary:hover[b-cj4b00xqfc] {
        background: rgba(107, 114, 128, 0.2);
    }

/* Agent Commission Payment Modal */
.agent-info-summary[b-cj4b00xqfc] {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .agent-info-summary h4[b-cj4b00xqfc] {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 12px;
    }

.commission-summary-details[b-cj4b00xqfc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.summary-row[b-cj4b00xqfc] {
    font-size: 14px;
}

    .summary-row span[b-cj4b00xqfc] {
        color: #6b7280;
    }

    .summary-row strong[b-cj4b00xqfc] {
        color: #1f2937;
    }

.form-group[b-cj4b00xqfc] {
    margin-bottom: 20px;
}

    .form-group label[b-cj4b00xqfc] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #4b5563;
        margin-bottom: 8px;
    }

.form-control[b-cj4b00xqfc] {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    padding: 12px;
    font-size: 14px;
    transition: all 0.2s;
}

    .form-control:focus[b-cj4b00xqfc] {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
        outline: none;
    }

textarea.form-control[b-cj4b00xqfc] {
    min-height: 100px;
    resize: vertical;
}

.wallet-balance-check[b-cj4b00xqfc] {
    background-color: rgba(102, 126, 234, 0.05);
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.balance-info[b-cj4b00xqfc] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
}

    .balance-info .label[b-cj4b00xqfc] {
        color: #4b5563;
    }

    .balance-info .value[b-cj4b00xqfc] {
        font-weight: 600;
        color: #1f2937;
    }

.insufficient-balance-warning[b-cj4b00xqfc] {
    color: #ef4444;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.warning-message[b-cj4b00xqfc] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #92400e;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .warning-message i[b-cj4b00xqfc] {
        color: #f59e0b;
    }

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

.spinner-small[b-cj4b00xqfc] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    animation: spin-b-cj4b00xqfc 0.8s linear infinite;
}

/* Unauthorized Message */
.unauthorized-message[b-cj4b00xqfc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 24px;
}

    .unauthorized-message i[b-cj4b00xqfc] {
        font-size: 64px;
        margin-bottom: 24px;
        color: #ef4444;
    }

    .unauthorized-message h3[b-cj4b00xqfc] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .unauthorized-message p[b-cj4b00xqfc] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
        max-width: 500px;
    }

    .unauthorized-message a.btn-primary[b-cj4b00xqfc] {
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 12px;
    }

/* Responsive Adjustments */
@media screen and (max-width: 991px) {
    .wallet-summary-grid[b-cj4b00xqfc] {
        grid-template-columns: 1fr 1fr;
    }

    .agents-commissions-grid[b-cj4b00xqfc],
    .requests-grid[b-cj4b00xqfc] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .transaction-detail-grid[b-cj4b00xqfc] {
        grid-template-columns: 1fr;
    }

    .section-header[b-cj4b00xqfc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .filters[b-cj4b00xqfc] {
        width: 100%;
    }

    .wallet-card.actions[b-cj4b00xqfc] {
        grid-column: span 2;
    }
}

@media screen and (max-width: 767px) {
    .merchant-wallet-page[b-cj4b00xqfc] {
        padding: 16px;
    }

    .page-header[b-cj4b00xqfc] {
        padding: 16px;
    }

    .page-title[b-cj4b00xqfc] {
        font-size: 28px;
    }

    .page-subtitle[b-cj4b00xqfc] {
        font-size: 16px;
    }

    .wallet-summary-grid[b-cj4b00xqfc] {
        grid-template-columns: 1fr;
    }

    .wallet-card.actions[b-cj4b00xqfc] {
        grid-column: auto;
    }

    .filters[b-cj4b00xqfc] {
        flex-wrap: wrap;
    }

        .filters .form-control[b-cj4b00xqfc],
        .filters .date-filter[b-cj4b00xqfc] {
            min-width: calc(50% - 6px);
            flex: 1;
        }

        .filters .btn-filter[b-cj4b00xqfc] {
            flex: 1;
        }

    .desktop-only[b-cj4b00xqfc] {
        display: none;
    }

    .mobile-only[b-cj4b00xqfc] {
        display: block;
    }

    .commission-summary-details[b-cj4b00xqfc] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-cj4b00xqfc] {
        max-height: 90vh;
    }

    .pagination-container[b-cj4b00xqfc] {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-info[b-cj4b00xqfc] {
        order: 2;
    }

    .pagination[b-cj4b00xqfc] {
        order: 1;
    }
}

@media screen and (min-width: 768px) {
    .desktop-only[b-cj4b00xqfc] {
        display: block;
    }

    .mobile-only[b-cj4b00xqfc] {
        display: none;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .merchant-wallet-page[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .merchant-wallet-page[b-cj4b00xqfc]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-cj4b00xqfc],
[data-theme="dark"] .section-header[b-cj4b00xqfc],
[data-theme="dark"] .wallet-card[b-cj4b00xqfc],
[data-theme="dark"] .agent-commission-card[b-cj4b00xqfc],
[data-theme="dark"] .transactions-table[b-cj4b00xqfc],
[data-theme="dark"] .transaction-card[b-cj4b00xqfc],
[data-theme="dark"] .pagination-container[b-cj4b00xqfc],
[data-theme="dark"] .request-card[b-cj4b00xqfc],
[data-theme="dark"] .empty-state[b-cj4b00xqfc],
[data-theme="dark"] .error-state[b-cj4b00xqfc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-title[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-link[b-cj4b00xqfc] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-cj4b00xqfc] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-cj4b00xqfc] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-subtitle[b-cj4b00xqfc],
[data-theme="dark"] .description[b-cj4b00xqfc],
[data-theme="dark"] .card-content h3[b-cj4b00xqfc],
[data-theme="dark"] .total-label[b-cj4b00xqfc],
[data-theme="dark"] .detail-row span:first-child[b-cj4b00xqfc],
[data-theme="dark"] .reference-label[b-cj4b00xqfc],
[data-theme="dark"] .balance[b-cj4b00xqfc],
[data-theme="dark"] .pagination-info[b-cj4b00xqfc],
[data-theme="dark"] .label[b-cj4b00xqfc],
[data-theme="dark"] .form-group label[b-cj4b00xqfc],
[data-theme="dark"] .balance-info .label[b-cj4b00xqfc] {
    color: #9ca3af;
}

[data-theme="dark"] .total-amount[b-cj4b00xqfc],
[data-theme="dark"] .card-content .amount[b-cj4b00xqfc],
[data-theme="dark"] .request-amount[b-cj4b00xqfc],
[data-theme="dark"] .value[b-cj4b00xqfc],
[data-theme="dark"] .detail-row span:last-child[b-cj4b00xqfc],
[data-theme="dark"] .agent-info h4[b-cj4b00xqfc],
[data-theme="dark"] .section-header h2[b-cj4b00xqfc],
[data-theme="dark"] .modal-header h3[b-cj4b00xqfc],
[data-theme="dark"] .agent-info-summary h4[b-cj4b00xqfc],
[data-theme="dark"] .summary-row strong[b-cj4b00xqfc],
[data-theme="dark"] .balance-info .value[b-cj4b00xqfc],
[data-theme="dark"] .empty-state h3[b-cj4b00xqfc],
[data-theme="dark"] .error-state h3[b-cj4b00xqfc],
[data-theme="dark"] .unauthorized-message h3[b-cj4b00xqfc] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-cj4b00xqfc],
[data-theme="dark"] .error-state p[b-cj4b00xqfc],
[data-theme="dark"] .unauthorized-message p[b-cj4b00xqfc] {
    color: #9ca3af;
}

[data-theme="dark"] .total-balance .amount[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #818cf8 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .available-balance .amount[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #34d399 0%, #2dd4bf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .pending-balance .amount[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #fb923c 0%, #f87171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .commission-total .amount[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #818cf8 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .wallet-number[b-cj4b00xqfc],
[data-theme="dark"] .commission-total .count[b-cj4b00xqfc],
[data-theme="dark"] .reference-number[b-cj4b00xqfc] {
    color: #64748b;
}

[data-theme="dark"] .empty-state i[b-cj4b00xqfc] {
    background: linear-gradient(135deg, #818cf8 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .form-control[b-cj4b00xqfc] {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

    [data-theme="dark"] .form-control:focus[b-cj4b00xqfc] {
        border-color: #818cf8;
        box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.1);
    }

[data-theme="dark"] .table th[b-cj4b00xqfc] {
    color: #e2e8f0;
    border-bottom-color: rgba(71, 85, 105, 0.3);
    background-color: rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .table td[b-cj4b00xqfc] {
    border-bottom-color: rgba(71, 85, 105, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .table tbody tr:hover[b-cj4b00xqfc] {
    background-color: rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .agent-header[b-cj4b00xqfc],
[data-theme="dark"] .request-header[b-cj4b00xqfc],
[data-theme="dark"] .modal-header[b-cj4b00xqfc],
[data-theme="dark"] .transaction-card .card-header[b-cj4b00xqfc] {
    background-color: rgba(71, 85, 105, 0.2);
    border-bottom-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .commission-details[b-cj4b00xqfc],
[data-theme="dark"] .request-actions[b-cj4b00xqfc],
[data-theme="dark"] .modal-footer[b-cj4b00xqfc] {
    border-top-color: rgba(71, 85, 105, 0.3);
    background-color: rgba(71, 85, 105, 0.1);
}

[data-theme="dark"] .agent-info i[b-cj4b00xqfc],
[data-theme="dark"] .detail-item i[b-cj4b00xqfc],
[data-theme="dark"] .section-header h2 i[b-cj4b00xqfc],
[data-theme="dark"] .modal-header h3 i[b-cj4b00xqfc] {
    color: #818cf8;
}

[data-theme="dark"] .modal-content[b-cj4b00xqfc] {
    background: rgba(30, 41, 59, 0.98);
}

[data-theme="dark"] .modal-overlay[b-cj4b00xqfc] {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .btn-view-details[b-cj4b00xqfc],
[data-theme="dark"] .btn-view-request[b-cj4b00xqfc] {
    background-color: rgba(129, 140, 248, 0.1);
    color: #818cf8;
}

    [data-theme="dark"] .btn-view-details:hover[b-cj4b00xqfc],
    [data-theme="dark"] .btn-view-request:hover[b-cj4b00xqfc] {
        background-color: rgba(129, 140, 248, 0.2);
    }

[data-theme="dark"] .btn-transaction-details[b-cj4b00xqfc],
[data-theme="dark"] .btn-transaction-details-mobile[b-cj4b00xqfc] {
    background: rgba(129, 140, 248, 0.1);
    color: #818cf8;
}

    [data-theme="dark"] .btn-transaction-details:hover[b-cj4b00xqfc],
    [data-theme="dark"] .btn-transaction-details-mobile:hover[b-cj4b00xqfc] {
        background: rgba(129, 140, 248, 0.2);
    }

[data-theme="dark"] .wallet-balance-check[b-cj4b00xqfc] {
    background-color: rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .warning-message[b-cj4b00xqfc] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}

    [data-theme="dark"] .warning-message i[b-cj4b00xqfc] {
        color: #fbbf24;
    }

[data-theme="dark"] .page-btn[b-cj4b00xqfc] {
    background: rgba(129, 140, 248, 0.1);
    color: #e2e8f0;
}

    [data-theme="dark"] .page-btn:hover:not(:disabled)[b-cj4b00xqfc] {
        background: rgba(129, 140, 248, 0.2);
    }

    [data-theme="dark"] .page-btn.active[b-cj4b00xqfc] {
        background: linear-gradient(135deg, #818cf8 0%, #8b5cf6 100%);
        color: #0f172a;
    }

[data-theme="dark"] td.amount.credit[b-cj4b00xqfc] {
    color: #34d399;
}

[data-theme="dark"] td.amount.debit[b-cj4b00xqfc] {
    color: #f87171;
}

/* Print Styles */
@media print {
    .merchant-wallet-page[b-cj4b00xqfc] {
        padding: 0;
        background: white !important;
    }

        .merchant-wallet-page[b-cj4b00xqfc]::before {
            display: none;
        }

    .filters[b-cj4b00xqfc],
    .btn-action[b-cj4b00xqfc],
    .btn-transaction-details[b-cj4b00xqfc],
    .btn-transaction-details-mobile[b-cj4b00xqfc],
    .commission-actions[b-cj4b00xqfc],
    .request-actions[b-cj4b00xqfc] {
        display: none !important;
    }

    .wallet-card[b-cj4b00xqfc],
    .agent-commission-card[b-cj4b00xqfc],
    .transactions-table[b-cj4b00xqfc],
    .pagination-container[b-cj4b00xqfc],
    .request-card[b-cj4b00xqfc],
    .empty-state[b-cj4b00xqfc],
    .error-state[b-cj4b00xqfc],
    .modal-content[b-cj4b00xqfc],
    .section-header[b-cj4b00xqfc] {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
        background: white !important;
    }

    .card-icon[b-cj4b00xqfc],
    .btn-gradient-primary[b-cj4b00xqfc],
    .btn-gradient-secondary[b-cj4b00xqfc],
    .btn-gradient-success[b-cj4b00xqfc],
    .btn-gradient-warning[b-cj4b00xqfc],
    .btn-gradient-danger[b-cj4b00xqfc] {
        print-color-adjust: exact !important;
    }

    .page-title[b-cj4b00xqfc],
    .total-amount[b-cj4b00xqfc],
    .card-content .amount[b-cj4b00xqfc],
    .commission-total .amount[b-cj4b00xqfc],
    .empty-state i[b-cj4b00xqfc] {
        color: #1f2937 !important;
        -webkit-text-fill-color: #1f2937 !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/MSalesReports.razor.rz.scp.css */

/* ===================================
   SALES REPORTS PAGE - MODERN DESIGN
   صفحة تقارير المبيعات - تصميم عصري احترافي
   مستوحى من تصميم نظام Users.razor.css
   =================================== */

/* Page Container - Modern Background Pattern */
.sales-reports-page[b-nrajdft960] {
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .sales-reports-page[b-nrajdft960]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .sales-reports-page > *[b-nrajdft960] {
        position: relative;
        z-index: 1;
    }

/* Page Header - Glass Effect */
.page-header[b-nrajdft960] {
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    position: relative;
}

.header-content[b-nrajdft960] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.page-title[b-nrajdft960] {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.page-subtitle[b-nrajdft960] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 400;
}

/* Breadcrumb Navigation */
.breadcrumb[b-nrajdft960] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    font-size: 0.875rem;
}

.breadcrumb-link[b-nrajdft960] {
    color: var(--text-tertiary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-fast);
    font-weight: 500;
}

    .breadcrumb-link:hover[b-nrajdft960] {
        color: var(--primary-color);
    }

.breadcrumb-separator[b-nrajdft960] {
    color: var(--border-color);
}

.breadcrumb-current[b-nrajdft960] {
    color: var(--text-primary);
    font-weight: 600;
}

/* Loading State - Elegant */
.loading-container[b-nrajdft960] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--spacing-2xl);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-xl);
}

.spinner-border[b-nrajdft960] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-nrajdft960 0.8s linear infinite;
}

.loading-text[b-nrajdft960] {
    margin-top: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: 1.125rem;
    font-weight: 500;
}

/* Error Container */
.error-container[b-nrajdft960] {
    text-align: center;
    padding: var(--spacing-3xl);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    border: 2px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-xl);
    color: var(--danger-color);
    margin-bottom: var(--spacing-xl);
}

    .error-container i[b-nrajdft960] {
        font-size: 4rem;
        margin-bottom: var(--spacing-lg);
        color: var(--danger-color);
    }

/* Filter Section - Modern Card Design */
.filter-section[b-nrajdft960] {
    margin-bottom: var(--spacing-xl);
}

.filter-card[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

    .filter-card:hover[b-nrajdft960] {
        box-shadow: var(--shadow-xl);
        transform: translateY(-2px);
    }

.filter-title[b-nrajdft960] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.filter-content[b-nrajdft960] {
    padding: var(--spacing-xl);
}

/* Date Range Inputs */
.date-range-group[b-nrajdft960] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.date-input-wrapper[b-nrajdft960] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

    .date-input-wrapper .form-label[b-nrajdft960] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .date-input-wrapper .form-control[b-nrajdft960] {
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        transition: all var(--transition-fast);
    }

        .date-input-wrapper .form-control:focus[b-nrajdft960] {
            background: var(--surface-color);
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* Quick Filter Buttons */
.quick-filters[b-nrajdft960] {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.btn-quick-filter[b-nrajdft960] {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-transform: none;
}

    .btn-quick-filter:hover[b-nrajdft960] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

    .btn-quick-filter.active[b-nrajdft960] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: var(--shadow-md);
    }

/* Summary Cards Grid */
.summary-section[b-nrajdft960] {
    margin-bottom: var(--spacing-xl);
}

    .summary-section .row[b-nrajdft960] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-lg);
    }

.summary-card[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    transition: all var(--transition-base);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-nrajdft960]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity var(--transition-base);
        opacity: 0;
    }

    .summary-card:hover[b-nrajdft960] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: var(--shadow-2xl);
    }

        .summary-card:hover[b-nrajdft960]::before {
            opacity: 1;
        }

    /* Gradient Variants */
    .summary-card.gradient-1 .card-icon[b-nrajdft960] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .summary-card.gradient-2 .card-icon[b-nrajdft960] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .summary-card.gradient-3 .card-icon[b-nrajdft960] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .summary-card.gradient-4 .card-icon[b-nrajdft960] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

.card-icon[b-nrajdft960] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    position: relative;
    box-shadow: var(--shadow-md);
}

.card-content[b-nrajdft960] {
    flex: 1;
}

.card-value[b-nrajdft960] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 var(--spacing-xs);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-label[b-nrajdft960] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm);
    font-weight: 500;
}

.card-trend[b-nrajdft960] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 600;
}

    .card-trend.trend-up[b-nrajdft960] {
        color: var(--success-color);
    }

    .card-trend.trend-down[b-nrajdft960] {
        color: var(--danger-color);
    }

.card-sub-info[b-nrajdft960] {
    margin-top: var(--spacing-sm);
}

    .card-sub-info span[b-nrajdft960] {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--text-primary);
        display: block;
    }

    .card-sub-info small[b-nrajdft960] {
        font-size: 0.875rem;
        color: var(--text-tertiary);
    }

/* Charts Section */
.charts-section[b-nrajdft960] {
    margin-bottom: var(--spacing-xl);
}

    .charts-section .row[b-nrajdft960] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: var(--spacing-lg);
    }

.chart-card[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-base);
}

    .chart-card:hover[b-nrajdft960] {
        box-shadow: var(--shadow-xl);
        transform: translateY(-4px);
    }

.chart-header[b-nrajdft960] {
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-title[b-nrajdft960] {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
}

.chart-controls[b-nrajdft960] {
    display: flex;
    gap: var(--spacing-xs);
}

.btn-chart-type[b-nrajdft960] {
    padding: var(--spacing-sm);
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-chart-type:hover[b-nrajdft960] {
        background: rgba(102, 126, 234, 0.1);
        border-color: var(--primary-color);
    }

    .btn-chart-type.active[b-nrajdft960] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
        color: white;
        box-shadow: var(--shadow-sm);
    }

.chart-body[b-nrajdft960] {
    padding: var(--spacing-xl);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chart-body canvas[b-nrajdft960] {
        max-width: 100%;
        height: auto;
    }

/* No Data State */
.no-data[b-nrajdft960] {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 1.125rem;
}

    .no-data i[b-nrajdft960] {
        font-size: 3rem;
        margin-bottom: var(--spacing-md);
        opacity: 0.5;
    }

/* Category & Payment Lists */
.category-list[b-nrajdft960],
.payment-methods-list[b-nrajdft960] {
    margin-top: var(--spacing-lg);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    padding-top: var(--spacing-lg);
}

.category-item[b-nrajdft960],
.payment-method-item[b-nrajdft960] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-bottom: var(--spacing-sm);
}

    .category-item:hover[b-nrajdft960],
    .payment-method-item:hover[b-nrajdft960] {
        background: rgba(102, 126, 234, 0.05);
    }

.category-info[b-nrajdft960] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-name[b-nrajdft960] {
    font-weight: 600;
    color: var(--text-primary);
}

.category-value[b-nrajdft960] {
    font-weight: 700;
    color: var(--primary-color);
}

.category-bar-container[b-nrajdft960] {
    width: 100px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: var(--spacing-xs) 0;
}

.category-bar[b-nrajdft960] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-sm);
    transition: width var(--transition-base);
}

.category-meta[b-nrajdft960] {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Payment Method Items */
.payment-method-item[b-nrajdft960] {
    justify-content: space-between;
}

    .payment-method-item i[b-nrajdft960] {
        width: 20px;
        color: var(--primary-color);
    }

.method-name[b-nrajdft960] {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
}

.method-count[b-nrajdft960] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.method-value[b-nrajdft960] {
    font-weight: 700;
    color: var(--primary-color);
}

/* Data Cards for Products & Customers */
.data-card[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: var(--spacing-lg);
}

.data-header[b-nrajdft960] {
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-title[b-nrajdft960] {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
}

.btn-export[b-nrajdft960] {
    padding: var(--spacing-sm);
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-export:hover[b-nrajdft960] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.data-body[b-nrajdft960] {
    padding: var(--spacing-xl);
    max-height: 600px;
    overflow-y: auto;
}

/* Product Items */
.top-products-list[b-nrajdft960] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.product-item[b-nrajdft960] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

    .product-item:hover[b-nrajdft960] {
        box-shadow: var(--shadow-md);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

.product-info[b-nrajdft960] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.product-image[b-nrajdft960] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .product-image img[b-nrajdft960] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.product-image-placeholder[b-nrajdft960] {
    color: var(--text-tertiary);
    font-size: 1.5rem;
}

.product-details[b-nrajdft960] {
    flex: 1;
}

.product-name[b-nrajdft960] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
}

.product-meta[b-nrajdft960] {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.product-stats[b-nrajdft960] {
    display: flex;
    gap: var(--spacing-md);
}

.stat-badge[b-nrajdft960] {
    text-align: center;
    padding: var(--spacing-sm);
    background: rgba(102, 126, 234, 0.05);
    border-radius: var(--radius-sm);
    min-width: 80px;
}

    .stat-badge strong[b-nrajdft960] {
        display: block;
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--primary-color);
    }

    .stat-badge small[b-nrajdft960] {
        font-size: 0.75rem;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

/* Customer Items */
.top-customers-list[b-nrajdft960] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.customer-item[b-nrajdft960] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

    .customer-item:hover[b-nrajdft960] {
        box-shadow: var(--shadow-md);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

.customer-avatar[b-nrajdft960] {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.customer-info[b-nrajdft960] {
    flex: 1;
}

.customer-name[b-nrajdft960] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
}

.customer-meta[b-nrajdft960] {
    display: flex;
    gap: var(--spacing-lg);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

    .customer-meta span[b-nrajdft960] {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

.customer-value[b-nrajdft960] {
    text-align: center;
}

.value-badge[b-nrajdft960] {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(102, 126, 234, 0.1);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
}

/* Metrics Section */
.metrics-section[b-nrajdft960] {
    margin-bottom: var(--spacing-xl);
}

.section-title[b-nrajdft960] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
}

.metrics-section .row[b-nrajdft960] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.metric-card[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-base);
}

    .metric-card:hover[b-nrajdft960] {
        box-shadow: var(--shadow-xl);
        transform: translateY(-4px);
    }

.metric-icon[b-nrajdft960] {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: var(--shadow-sm);
}

    .metric-icon.conversion[b-nrajdft960] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .metric-icon.repeat[b-nrajdft960] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .metric-icon.growth[b-nrajdft960] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .metric-icon:not(.conversion):not(.repeat):not(.growth)[b-nrajdft960] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

.metric-content[b-nrajdft960] {
    flex: 1;
}

.metric-value[b-nrajdft960] {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 var(--spacing-xs);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metric-label[b-nrajdft960] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xs);
    font-weight: 500;
}

.metric-desc[b-nrajdft960] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* Insights Section */
.insights-section[b-nrajdft960] {
    margin-bottom: var(--spacing-xl);
}

.insights-grid[b-nrajdft960] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.insight-card[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    transition: all var(--transition-fast);
}

    .insight-card:hover[b-nrajdft960] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        border-color: rgba(102, 126, 234, 0.3);
    }

    .insight-card i[b-nrajdft960] {
        color: var(--primary-color);
        font-size: 1.25rem;
        margin-top: 2px;
    }

    .insight-card p[b-nrajdft960] {
        margin: 0;
        color: var(--text-primary);
        font-weight: 500;
        line-height: 1.6;
    }

/* Export Section */
.export-section[b-nrajdft960] {
    margin-bottom: var(--spacing-xl);
}

.export-actions[b-nrajdft960] {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.btn-export-pdf[b-nrajdft960],
.btn-export-excel[b-nrajdft960],
.btn-export-print[b-nrajdft960] {
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: white;
    text-transform: none;
}

.btn-export-pdf[b-nrajdft960] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.btn-export-excel[b-nrajdft960] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.btn-export-print[b-nrajdft960] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

    .btn-export-pdf:hover[b-nrajdft960],
    .btn-export-excel:hover[b-nrajdft960],
    .btn-export-print:hover[b-nrajdft960] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

/* Unauthorized Container */
.unauthorized-container[b-nrajdft960] {
    text-align: center;
    padding: var(--spacing-3xl);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: var(--backdrop-blur);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    margin: var(--spacing-2xl) auto;
    max-width: 600px;
}

    .unauthorized-container i[b-nrajdft960] {
        font-size: 4rem;
        color: var(--danger-color);
        margin-bottom: var(--spacing-lg);
    }

    .unauthorized-container h2[b-nrajdft960] {
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
    }

    .unauthorized-container p[b-nrajdft960] {
        color: var(--text-secondary);
        margin-bottom: var(--spacing-xl);
    }

/* Gradient Button Styles */
.btn-gradient-primary[b-nrajdft960] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

    .btn-gradient-primary:hover[b-nrajdft960] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

    .btn-gradient-primary:disabled[b-nrajdft960] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

/* Dark Theme Support */
[data-theme="dark"] .sales-reports-page[b-nrajdft960] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .sales-reports-page[b-nrajdft960]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-nrajdft960],
[data-theme="dark"] .filter-card[b-nrajdft960],
[data-theme="dark"] .summary-card[b-nrajdft960],
[data-theme="dark"] .chart-card[b-nrajdft960],
[data-theme="dark"] .data-card[b-nrajdft960],
[data-theme="dark"] .metric-card[b-nrajdft960],
[data-theme="dark"] .loading-container[b-nrajdft960],
[data-theme="dark"] .unauthorized-container[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .filter-title[b-nrajdft960],
[data-theme="dark"] .chart-header[b-nrajdft960],
[data-theme="dark"] .data-header[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .date-input-wrapper .form-control[b-nrajdft960],
[data-theme="dark"] .btn-quick-filter[b-nrajdft960] {
    background: rgba(71, 85, 105, 0.3);
    color: var(--text-primary);
}

[data-theme="dark"] .product-item[b-nrajdft960],
[data-theme="dark"] .customer-item[b-nrajdft960] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .insight-card[b-nrajdft960] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-color: rgba(102, 126, 234, 0.3);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .summary-section .row[b-nrajdft960] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-section .row[b-nrajdft960] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sales-reports-page[b-nrajdft960] {
        padding: var(--spacing-md);
    }

    .page-header[b-nrajdft960] {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .header-content[b-nrajdft960] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .page-title[b-nrajdft960] {
        font-size: 1.75rem;
    }

    .summary-section .row[b-nrajdft960] {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .summary-card[b-nrajdft960] {
        padding: var(--spacing-lg);
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .date-range-group[b-nrajdft960] {
        grid-template-columns: 1fr;
    }

    .quick-filters[b-nrajdft960] {
        justify-content: center;
    }

    .metrics-section .row[b-nrajdft960] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-nrajdft960] {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .product-item[b-nrajdft960],
    .customer-item[b-nrajdft960] {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .product-info[b-nrajdft960] {
        flex-direction: column;
        text-align: center;
    }

    .product-stats[b-nrajdft960] {
        justify-content: center;
    }

    .export-actions[b-nrajdft960] {
        flex-direction: column;
    }

    .btn-export-pdf[b-nrajdft960],
    .btn-export-excel[b-nrajdft960],
    .btn-export-print[b-nrajdft960] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title[b-nrajdft960] {
        font-size: 1.5rem;
    }

    .breadcrumb[b-nrajdft960] {
        font-size: 0.75rem;
    }

    .card-value[b-nrajdft960] {
        font-size: 1.5rem;
    }

    .metric-value[b-nrajdft960] {
        font-size: 1.5rem;
    }

    .chart-body[b-nrajdft960] {
        padding: var(--spacing-md);
        min-height: 250px;
    }

    .data-body[b-nrajdft960] {
        padding: var(--spacing-md);
    }
}

/* Print Styles */
@media print {
    .sales-reports-page[b-nrajdft960] {
        background: white !important;
        padding: 0;
    }

    .filter-section[b-nrajdft960],
    .export-section[b-nrajdft960],
    .btn-export[b-nrajdft960],
    .chart-controls[b-nrajdft960] {
        display: none !important;
    }

    .page-header[b-nrajdft960],
    .summary-card[b-nrajdft960],
    .chart-card[b-nrajdft960],
    .data-card[b-nrajdft960],
    .metric-card[b-nrajdft960] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .chart-body[b-nrajdft960] {
        min-height: 200px;
    }
}

/* Animation Keyframes */
@keyframes spin-b-nrajdft960 {
    0% {
        transform: rotate(0deg);
    }

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

/* Focus States for Accessibility */
.btn-quick-filter:focus[b-nrajdft960],
.btn-chart-type:focus[b-nrajdft960],
.btn-export:focus[b-nrajdft960] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .summary-card[b-nrajdft960],
    .chart-card[b-nrajdft960],
    .data-card[b-nrajdft960],
    .metric-card[b-nrajdft960] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-nrajdft960] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/NewSale.razor.rz.scp.css */
/* ===================================
   NewSale Page - Modern Professional CSS
   تصميم احترافي لصفحة بيع جديد
   =================================== */

/* Main Container */
.pos-container[b-idmijfvh6x] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    padding: 24px;
}

    .pos-container[b-idmijfvh6x]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 300px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

/* Header */
.pos-header[b-idmijfvh6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-left[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-right[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pos-header h1[b-idmijfvh6x] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.date-time[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 16px;
    background: rgba(102, 126, 234, 0.1);
    padding: 10px 16px;
    border-radius: 12px;
}

.btn-icon[b-idmijfvh6x] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-icon:hover[b-idmijfvh6x] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

/* Main Content */
.pos-content[b-idmijfvh6x] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    position: relative;
    z-index: 1;
    flex: 1;
}

/* Products Section */
.products-section[b-idmijfvh6x] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* Category Filters */
.category-filters[b-idmijfvh6x] {
    padding: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.category-scroll[b-idmijfvh6x] {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-tertiary);
}

    .category-scroll[b-idmijfvh6x]::-webkit-scrollbar {
        height: 6px;
    }

    .category-scroll[b-idmijfvh6x]::-webkit-scrollbar-track {
        background: var(--bg-tertiary);
        border-radius: 10px;
    }

    .category-scroll[b-idmijfvh6x]::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }

.category-btn[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-size: 14px;
}

    .category-btn:hover[b-idmijfvh6x] {
        background: rgba(102, 126, 234, 0.1);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

    .category-btn.active[b-idmijfvh6x] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 10px rgba(90, 108, 179, 0.3);
    }

/* Product Search */
.product-search[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    flex-wrap: nowrap;
}


    .product-search i[b-idmijfvh6x] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 16px;
        pointer-events: none;
    }


    .product-search input[b-idmijfvh6x] {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        padding: 12px 20px 12px 45px; /* keep left padding for the search icon */
    }


        .product-search input:focus[b-idmijfvh6x] {
            outline: none;
            background: white;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .product-search input[b-idmijfvh6x]::placeholder {
            color: var(--text-tertiary);
        }

/* Products Grid */
.products-grid[b-idmijfvh6x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-tertiary);
}

    .products-grid[b-idmijfvh6x]::-webkit-scrollbar {
        width: 6px;
    }

    .products-grid[b-idmijfvh6x]::-webkit-scrollbar-track {
        background: var(--bg-tertiary);
        border-radius: 10px;
    }

    .products-grid[b-idmijfvh6x]::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }

.product-card[b-idmijfvh6x] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
}

    .product-card:hover[b-idmijfvh6x] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: var(--primary-color);
    }

    .product-card.in-cart[b-idmijfvh6x] {
        border-color: var(--success-color);
    }

.product-image[b-idmijfvh6x] {
    height: 140px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .product-image img[b-idmijfvh6x] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }

.product-card:hover .product-image img[b-idmijfvh6x] {
    transform: scale(1.05);
}

.no-image[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e6e9f0 0%, #eef1f5 100%);
    color: var(--text-muted);
    font-size: 32px;
}

.stock-badge[b-idmijfvh6x] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
}

    .stock-badge.low[b-idmijfvh6x] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: var(--warning-color);
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .stock-badge.out-of-stock[b-idmijfvh6x] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
        color: var(--danger-color);
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

.product-info[b-idmijfvh6x] {
    padding: 12px;
}

    .product-info h4[b-idmijfvh6x] {
        margin: 0 0 6px 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.product-meta[b-idmijfvh6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.price[b-idmijfvh6x] {
    font-weight: 700;
    color: var(--primary-color);
}

.product-stock[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.in-cart-indicator[b-idmijfvh6x] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--success-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
    animation: pulse-b-idmijfvh6x 2s infinite;
}

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

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

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

.empty-products[b-idmijfvh6x] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
    text-align: center;
}

    .empty-products i[b-idmijfvh6x] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

/* Cart Section */
.cart-section[b-idmijfvh6x] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* Customer Selection */
.customer-selection[b-idmijfvh6x] {
    padding: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .customer-selection h3[b-idmijfvh6x] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 16px 0;
        color: var(--text-primary);
    }

.selected-customer[b-idmijfvh6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.customer-info[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .customer-info i[b-idmijfvh6x] {
        font-size: 28px;
        color: var(--primary-color);
        opacity: 0.8;
    }

    .customer-info h4[b-idmijfvh6x] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .customer-info span[b-idmijfvh6x] {
        font-size: 14px;
        color: var(--text-secondary);
    }

.btn-change[b-idmijfvh6x] {
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary-color);
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-change:hover[b-idmijfvh6x] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

.customer-search[b-idmijfvh6x] {
    position: relative;
    margin-bottom: 12px;
}

    .customer-search input[b-idmijfvh6x] {
        width: 100%;
        padding: 12px 16px;
        background: white;
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 15px;
        transition: all 0.3s;
    }

        .customer-search input:focus[b-idmijfvh6x] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.customer-dropdown[b-idmijfvh6x] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
    max-height: 250px;
    overflow-y: auto;
    margin-top: 8px;
}

.customer-option[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .customer-option:last-child[b-idmijfvh6x] {
        border-bottom: none;
    }

    .customer-option:hover[b-idmijfvh6x] {
        background-color: rgba(102, 126, 234, 0.05);
    }

    .customer-option i[b-idmijfvh6x] {
        color: var(--primary-color);
        font-size: 20px;
    }

    .customer-option div[b-idmijfvh6x] {
        display: flex;
        flex-direction: column;
    }

    .customer-option .name[b-idmijfvh6x] {
        font-weight: 600;
        color: var(--text-primary);
    }

    .customer-option .phone[b-idmijfvh6x] {
        font-size: 13px;
        color: var(--text-secondary);
    }

.btn-add-customer[b-idmijfvh6x] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-add-customer:hover[b-idmijfvh6x] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(59, 201, 104, 0.3);
    }

/* Cart Items */
.cart-items-container[b-idmijfvh6x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    max-height: 40vh;
    overflow: hidden;
}

    .cart-items-container h3[b-idmijfvh6x] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 16px 0;
        color: var(--text-primary);
    }

.cart-items[b-idmijfvh6x] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-tertiary);
}

    .cart-items[b-idmijfvh6x]::-webkit-scrollbar {
        width: 6px;
    }

    .cart-items[b-idmijfvh6x]::-webkit-scrollbar-track {
        background: var(--bg-tertiary);
        border-radius: 10px;
    }

    .cart-items[b-idmijfvh6x]::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }

.items-list[b-idmijfvh6x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-item[b-idmijfvh6x] {
    background: white;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s;
}

    .cart-item:hover[b-idmijfvh6x] {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

.item-info[b-idmijfvh6x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .item-info h5[b-idmijfvh6x] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
    }

.price-control[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-label[b-idmijfvh6x] {
    font-size: 14px;
    color: var(--text-secondary);
}

.price-input[b-idmijfvh6x] {
    width: 90px;
    padding: 6px 8px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.price-currency[b-idmijfvh6x] {
    font-size: 14px;
    color: var(--text-secondary);
}

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

.quantity-control[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.qty-btn[b-idmijfvh6x] {
    background: rgba(102, 126, 234, 0.1);
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-color);
    transition: all 0.3s;
}

    .qty-btn:hover[b-idmijfvh6x] {
        background: var(--primary-color);
        color: white;
    }

.quantity-control input[b-idmijfvh6x] {
    width: 40px;
    height: 32px;
    border: none;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    -moz-appearance: textfield;
}

    .quantity-control input[b-idmijfvh6x]::-webkit-outer-spin-button,
    .quantity-control input[b-idmijfvh6x]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.btn-remove[b-idmijfvh6x] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-remove:hover[b-idmijfvh6x] {
        background: var(--danger-color);
        color: white;
    }

.item-total[b-idmijfvh6x] {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.empty-cart[b-idmijfvh6x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
    text-align: center;
    min-height: 200px;
}

    .empty-cart i[b-idmijfvh6x] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

/* Order Footer */
.order-footer[b-idmijfvh6x] {
    padding: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

/* Agent Mode Toggle */
.agent-mode-toggle[b-idmijfvh6x] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.toggle-switch[b-idmijfvh6x] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .toggle-switch input[type="checkbox"][b-idmijfvh6x] {
        display: none;
    }

.toggle-slider[b-idmijfvh6x] {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: #ccc;
    border-radius: 34px;
    transition: 0.4s;
    margin-left: 10px;
}

    .toggle-slider[b-idmijfvh6x]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.4s;
    }

.toggle-switch input:checked + .toggle-slider[b-idmijfvh6x] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .toggle-switch input:checked + .toggle-slider[b-idmijfvh6x]:before {
        transform: translateX(26px);
    }

.toggle-label[b-idmijfvh6x] {
    margin-left: 10px;
    font-weight: 600;
    font-size: 14px;
}

.text-muted[b-idmijfvh6x] {
    display: block;
    color: var(--text-tertiary);
    font-size: 13px;
    margin-top: 8px;
}

/* Agent Section */
.agent-section[b-idmijfvh6x] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
}

    .agent-section h3[b-idmijfvh6x] {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 12px 0;
        color: var(--text-primary);
    }

.hint[b-idmijfvh6x] {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: -8px 0 12px 0;
}

.form-select[b-idmijfvh6x] {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 16px) center;
    background-size: 12px;
}

    .form-select:focus[b-idmijfvh6x] {
        outline: none;
        background-color: white;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Agents Dropdown */
.agents-dropdown[b-idmijfvh6x] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-tertiary);
}

.dropdown-search[b-idmijfvh6x] {
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

    .dropdown-search i[b-idmijfvh6x] {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
    }

    .dropdown-search input[b-idmijfvh6x] {
        width: 100%;
        padding: 10px 10px 10px 36px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        transition: all 0.3s;
    }

        .dropdown-search input:focus[b-idmijfvh6x] {
            outline: none;
            border-color: var(--primary-color);
        }

.agents-list[b-idmijfvh6x] {
    max-height: 200px;
    overflow-y: auto;
}

.agent-item[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 0;
    border-bottom: 1px solid var(--border-light);
}

    .agent-item:last-child[b-idmijfvh6x] {
        border-bottom: none;
    }

    .agent-item:hover[b-idmijfvh6x] {
        background-color: var(--hover-background);
    }

    .agent-item input[type="checkbox"][b-idmijfvh6x] {
        margin-right: 12px;
        width: 16px;
        height: 16px;
        accent-color: var(--primary-color);
    }

.agent-name[b-idmijfvh6x] {
    flex-grow: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.commission-info[b-idmijfvh6x] {
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
}

.info-row[b-idmijfvh6x] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--text-secondary);
}

    .info-row:last-child[b-idmijfvh6x] {
        margin-bottom: 0;
    }

    .info-row strong[b-idmijfvh6x] {
        color: var(--primary-color);
        font-weight: 700;
    }

/* Selected Agents Chips */
.selected-agents[b-idmijfvh6x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-chip[b-idmijfvh6x] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: var(--primary-color);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .agent-chip button[b-idmijfvh6x] {
        background: none;
        border: none;
        color: inherit;
        margin-left: 8px;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        font-size: 12px;
    }

        .agent-chip button:hover[b-idmijfvh6x] {
            opacity: 0.7;
        }

/* Order Summary */
.order-summary[b-idmijfvh6x] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.summary-row[b-idmijfvh6x] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-secondary);
}

    .summary-row.discount[b-idmijfvh6x] {
        color: var(--danger-color);
    }

    .summary-row.commission[b-idmijfvh6x] {
        color: var(--success-color);
        font-weight: 500;
    }

    .summary-row.total[b-idmijfvh6x] {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        border-top: 1px solid var(--border-light);
        margin-top: 8px;
        padding-top: 12px;
    }

/* Payment Method */
.payment-method[b-idmijfvh6x] {
    margin-bottom: 20px;
}

    .payment-method h3[b-idmijfvh6x] {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 12px 0;
        color: var(--text-primary);
    }

.payment-options[b-idmijfvh6x] {
    display: flex;
    gap: 16px;
}

.payment-option[b-idmijfvh6x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
    position: relative;
}

    .payment-option input[type="radio"][b-idmijfvh6x] {
        position: absolute;
        opacity: 0;
    }

    .payment-option i[b-idmijfvh6x] {
        font-size: 24px;
        color: var(--text-secondary);
        transition: all 0.3s;
    }

    .payment-option span[b-idmijfvh6x] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        transition: all 0.3s;
    }

    .payment-option:hover[b-idmijfvh6x] {
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    }

    .payment-option.selected[b-idmijfvh6x] {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

        .payment-option.selected i[b-idmijfvh6x],
        .payment-option.selected span[b-idmijfvh6x] {
            color: var(--primary-color);
        }

    .payment-option.disabled[b-idmijfvh6x] {
        opacity: 0.5;
        cursor: not-allowed;
    }

        .payment-option.disabled:hover[b-idmijfvh6x] {
            transform: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-color: transparent;
        }

/* Order Notes */
.order-notes[b-idmijfvh6x] {
    margin-bottom: 20px;
}

    .order-notes label[b-idmijfvh6x] {
        display: block;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
        color: var(--text-primary);
    }

    .order-notes textarea[b-idmijfvh6x] {
        width: 100%;
        padding: 12px 16px;
        background: white;
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 15px;
        transition: all 0.3s;
        resize: none;
    }

        .order-notes textarea:focus[b-idmijfvh6x] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* Action Buttons */
.action-buttons[b-idmijfvh6x] {
    display: flex;
    gap: 16px;
}

.btn-clear[b-idmijfvh6x] {
    flex: 1;
    background: white;
    color: var(--danger-color);
    border: 2px solid var(--danger-light);
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-clear:hover:not(:disabled)[b-idmijfvh6x] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
        border-color: transparent;
    }

.btn-process[b-idmijfvh6x] {
    flex: 2;
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .btn-process:hover:not(:disabled)[b-idmijfvh6x] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(59, 201, 104, 0.3);
    }

    .btn-process.installment[b-idmijfvh6x] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
        box-shadow: 0 4px 10px rgba(74, 163, 194, 0.2);
    }

        .btn-process.installment:hover:not(:disabled)[b-idmijfvh6x] {
            box-shadow: 0 8px 20px rgba(74, 163, 194, 0.3);
        }

    .btn-process:disabled[b-idmijfvh6x],
    .btn-clear:disabled[b-idmijfvh6x] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ============================
       Compact Product View & Toggle
       ============================ */

/* زر التبديل */
.btn-view-toggle[b-idmijfvh6x] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    background: white;
    color: var(--text-secondary);
    position: relative;
    z-index: 1; /* bring above the input if they touch */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .btn-view-toggle i[b-idmijfvh6x] {
        font-size: 16px;
        line-height: 1;
        pointer-events: none;
    }

    .btn-view-toggle:hover[b-idmijfvh6x] {
        border-color: var(--primary-color);
        color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }


/* العرض المختصر */
.products-grid.compact-view[b-idmijfvh6x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-card-compact[b-idmijfvh6x] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

    .product-card-compact:hover[b-idmijfvh6x] {
        background: #f8f9fa;
        border-color: var(--primary-color);
    }

    .product-card-compact.in-cart[b-idmijfvh6x] {
        background: #e8f5e9;
        border-color: #4caf50;
    }

.compact-content[b-idmijfvh6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-card-compact .product-name[b-idmijfvh6x] {
    font-weight: 600;
    flex: 1;
    margin-right: 10px;
}

.product-meta-compact[b-idmijfvh6x] {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .product-meta-compact .price[b-idmijfvh6x] {
        font-weight: 700;
        color: var(--primary-color);
    }

.stock-info[b-idmijfvh6x] {
    color: #666;
    font-size: 0.9em;
}

.in-cart-indicator-compact[b-idmijfvh6x] {
    position: absolute;
    top: 8px;
    left: 20px;
    color: #4caf50;
    font-size: 1.2em;
}

/* تحسينات للموبايل */
@media (max-width: 768px) {
    .products-grid:not(.compact-view)[b-idmijfvh6x] {
        grid-template-columns: 1fr;
    }

    .product-card-compact[b-idmijfvh6x] {
        padding: 10px;
    }

        .product-card-compact .product-name[b-idmijfvh6x] {
            font-size: 0.95em;
        }

    .product-meta-compact[b-idmijfvh6x] {
        gap: 10px;
    }

    .btn-view-toggle[b-idmijfvh6x] {
        padding: 6px 10px;
        font-size: 0.9em;
    }
}

/* Loading */
.loading-container[b-idmijfvh6x] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 20px;
}

.spinner-border[b-idmijfvh6x] {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-idmijfvh6x 0.8s linear infinite;
}

.spinner-border-sm[b-idmijfvh6x] {
    width: 20px;
    height: 20px;
    border-width: 3px;
}

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

/* Unauthorized */
.unauthorized-container[b-idmijfvh6x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 400px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

    .unauthorized-container i[b-idmijfvh6x] {
        color: var(--text-muted);
        margin-bottom: 20px;
    }

    .unauthorized-container h3[b-idmijfvh6x] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 16px;
    }

/* Responsive */
@media (max-width: 1200px) {
    .pos-content[b-idmijfvh6x] {
        grid-template-columns: 1fr 350px;
    }
}

@media (max-width: 992px) {
    .pos-content[b-idmijfvh6x] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .products-grid[b-idmijfvh6x] {
        max-height: 400px;
    }

    .cart-items-container[b-idmijfvh6x] {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .pos-container[b-idmijfvh6x] {
        padding: 16px;
    }

    .pos-header[b-idmijfvh6x] {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .header-right[b-idmijfvh6x] {
        width: 100%;
        justify-content: flex-end;
    }

    .products-grid[b-idmijfvh6x] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
        padding: 12px;
    }

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

    .payment-options[b-idmijfvh6x] {
        flex-direction: column;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .pos-container[b-idmijfvh6x] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .pos-container[b-idmijfvh6x]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .pos-header[b-idmijfvh6x],
[data-theme="dark"] .products-section[b-idmijfvh6x],
[data-theme="dark"] .cart-section[b-idmijfvh6x] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .category-filters[b-idmijfvh6x],
[data-theme="dark"] .order-footer[b-idmijfvh6x],
[data-theme="dark"] .customer-selection[b-idmijfvh6x] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

[data-theme="dark"] .product-card[b-idmijfvh6x],
[data-theme="dark"] .selected-customer[b-idmijfvh6x],
[data-theme="dark"] .cart-item[b-idmijfvh6x],
[data-theme="dark"] .agent-section[b-idmijfvh6x],
[data-theme="dark"] .order-summary[b-idmijfvh6x],
[data-theme="dark"] .payment-option[b-idmijfvh6x] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .product-search input[b-idmijfvh6x],
[data-theme="dark"] .customer-search input[b-idmijfvh6x],
[data-theme="dark"] .form-select[b-idmijfvh6x],
[data-theme="dark"] .order-notes textarea[b-idmijfvh6x] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .product-search input:focus[b-idmijfvh6x],
    [data-theme="dark"] .customer-search input:focus[b-idmijfvh6x],
    [data-theme="dark"] .form-select:focus[b-idmijfvh6x],
    [data-theme="dark"] .order-notes textarea:focus[b-idmijfvh6x] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #667eea;
    }

[data-theme="dark"] .product-info h4[b-idmijfvh6x],
[data-theme="dark"] .customer-info h4[b-idmijfvh6x],
[data-theme="dark"] .item-info h5[b-idmijfvh6x] {
    color: #e2e8f0;
}

[data-theme="dark"] .agent-mode-toggle[b-idmijfvh6x] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .agents-dropdown[b-idmijfvh6x],
[data-theme="dark"] .customer-dropdown[b-idmijfvh6x] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .no-image[b-idmijfvh6x] {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
}

[data-theme="dark"] .loading-container[b-idmijfvh6x] {
    background: rgba(15, 23, 42, 0.8);
}

.date-time-editor[b-idmijfvh6x] {
    align-items: center;
    gap: 10px;
}

    .date-time-editor label[b-idmijfvh6x] {
        margin: 0;
        font-weight: 500;
        color: #666;
    }

    .date-time-editor .date-input[b-idmijfvh6x] {
        padding: 5px 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        color: #415cff;
    }

    .date-time-editor .date-note[b-idmijfvh6x] {
        display: block;
        color: #db095e;
        font-size: 17px;
        margin-top: 2px;
    }

        .date-time-editor .date-note i[b-idmijfvh6x] {
            margin-right: 3px;
        }

.installment-formula-section[b-idmijfvh6x] {
    margin: 10px 0;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.formula-row[b-idmijfvh6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.formula-display[b-idmijfvh6x] {
    font-family: 'Courier New', monospace;
    background-color: #e9ecef;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 14px;
    color: #495057;
}

.installment-info[b-idmijfvh6x] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dee2e6;
}

    .installment-info .info-row[b-idmijfvh6x] {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #6c757d;
        margin-bottom: 4px;
    }
/* Products Pagination */
.products-pagination[b-idmijfvh6x] {
    padding: 16px 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
}

.pagination-info[b-idmijfvh6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

    .pagination-info span:first-child[b-idmijfvh6x] {
        color: var(--text-primary);
        font-weight: 600;
    }

.total-count[b-idmijfvh6x] {
    color: var(--primary-color) !important;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.pagination-controls[b-idmijfvh6x] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.pagination-btn[b-idmijfvh6x] {
    background: white;
    border: 2px solid rgba(102, 126, 234, 0.2);
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 14px;
    position: relative;
    overflow: hidden;
}

    .pagination-btn[b-idmijfvh6x]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s;
        border-radius: 8px;
    }

    .pagination-btn span[b-idmijfvh6x],
    .pagination-btn i[b-idmijfvh6x] {
        position: relative;
        z-index: 1;
    }

    .pagination-btn:hover:not(:disabled)[b-idmijfvh6x] {
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

        .pagination-btn:hover:not(:disabled)[b-idmijfvh6x]::before {
            opacity: 0.1;
        }

    .pagination-btn.active[b-idmijfvh6x] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        transform: translateY(-1px);
    }

        .pagination-btn.active[b-idmijfvh6x]::before {
            opacity: 0;
        }

    .pagination-btn:disabled[b-idmijfvh6x] {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
        border-color: rgba(102, 126, 234, 0.1);
    }

        .pagination-btn:disabled:hover[b-idmijfvh6x] {
            transform: none;
            box-shadow: none;
        }

/* Load More Button */
.btn-load-more[b-idmijfvh6x] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(59, 201, 104, 0.3);
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    min-width: 140px;
}

    .btn-load-more[b-idmijfvh6x]::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;
    }

    .btn-load-more:hover:not(:disabled)[b-idmijfvh6x] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(59, 201, 104, 0.4);
    }

        .btn-load-more:hover:not(:disabled)[b-idmijfvh6x]::before {
            left: 100%;
        }

    .btn-load-more:disabled[b-idmijfvh6x] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 4px 12px rgba(59, 201, 104, 0.2);
    }

        .btn-load-more:disabled:hover[b-idmijfvh6x] {
            transform: none;
            box-shadow: 0 4px 12px rgba(59, 201, 104, 0.2);
        }

    .btn-load-more .spinner-border[b-idmijfvh6x] {
        width: 18px;
        height: 18px;
        border-width: 2px;
        border-color: rgba(255, 255, 255, 0.3);
        border-right-color: white;
    }

/* Responsive Pagination */
@media (max-width: 768px) {
    .products-pagination[b-idmijfvh6x] {
        padding: 12px 16px;
        gap: 12px;
    }

    .product-search[b-idmijfvh6x] {
        gap: 6px;
    }

    .btn-view-toggle[b-idmijfvh6x] {
        width: 36px;
        height: 36px;
    }

    .pagination-info[b-idmijfvh6x] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .pagination-controls[b-idmijfvh6x] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .pagination-btn[b-idmijfvh6x] {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .btn-load-more[b-idmijfvh6x] {
        width: 100%;
        margin: 0;
        padding: 14px 24px;
    }

    .total-count[b-idmijfvh6x] {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .pagination-controls[b-idmijfvh6x] {
        justify-content: center;
    }

    .pagination-btn[b-idmijfvh6x] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .pagination-info[b-idmijfvh6x] {
        font-size: 13px;
    }

    .total-count[b-idmijfvh6x] {
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* Dark Theme Support for Pagination */
[data-theme="dark"] .products-pagination[b-idmijfvh6x] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-top-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .pagination-btn[b-idmijfvh6x] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
    color: #cbd5e1;
}

    [data-theme="dark"] .pagination-btn:hover:not(:disabled)[b-idmijfvh6x] {
        border-color: #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

    [data-theme="dark"] .pagination-btn.active[b-idmijfvh6x] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

[data-theme="dark"] .total-count[b-idmijfvh6x] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-color: rgba(102, 126, 234, 0.3);
    color: #a78bfa;
}

[data-theme="dark"] .pagination-info span:first-child[b-idmijfvh6x] {
    color: #e2e8f0;
}

/* Animation for page transitions */
@keyframes fadeInUp-b-idmijfvh6x {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.products-grid .product-card[b-idmijfvh6x] {
    animation: fadeInUp-b-idmijfvh6x 0.3s ease-out;
}

/* Loading state for pagination */
.pagination-loading[b-idmijfvh6x] {
    position: relative;
}

    .pagination-loading[b-idmijfvh6x]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(2px);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Hover effects for better UX */
.pagination-controls:hover .pagination-btn:not(.active):not(:disabled)[b-idmijfvh6x] {
    opacity: 0.7;
}

    .pagination-controls:hover .pagination-btn:not(.active):not(:disabled):hover[b-idmijfvh6x] {
        opacity: 1;
    }

/* Focus states for accessibility */
.pagination-btn:focus-visible[b-idmijfvh6x] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-load-more:focus-visible[b-idmijfvh6x] {
    outline: 2px solid #3bc968;
    outline-offset: 2px;
}
/* Dark theme adjustments */
[data-theme="dark"] .btn-view-toggle[b-idmijfvh6x] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
    color: #cbd5e1;
}

    [data-theme="dark"] .btn-view-toggle:hover[b-idmijfvh6x] {
        border-color: #667eea;
        box-shadow: 0 6px 15px rgba(102, 126, 234, 0.2);
        color: #a78bfa;
    }
/* _content/Sahelly/Components/Pages/Merchant/NotificationsPge.razor.rz.scp.css */
/* Notifications Page Styles */
.notifications-page[b-t6j33ymju1] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
}

/* Header Styles */
.page-header-enhanced[b-t6j33ymju1] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-content[b-t6j33ymju1] {
    flex: 1;
}

.breadcrumb-modern[b-t6j33ymju1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.breadcrumb-item[b-t6j33ymju1] {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .breadcrumb-item:hover[b-t6j33ymju1] {
        color: #007bff;
    }

.breadcrumb-current[b-t6j33ymju1] {
    color: #495057;
    font-weight: 500;
}

.separator[b-t6j33ymju1] {
    color: #dee2e6;
}

.header-title-section[b-t6j33ymju1] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title-modern[b-t6j33ymju1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
}

.title-icon[b-t6j33ymju1] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.page-subtitle-enhanced[b-t6j33ymju1] {
    margin: 8px 0 0 0;
    color: #6c757d;
    font-size: 16px;
}

.header-actions[b-t6j33ymju1] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-primary-modern[b-t6j33ymju1], .btn-secondary-modern[b-t6j33ymju1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary-modern[b-t6j33ymju1] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

    .btn-primary-modern:hover[b-t6j33ymju1] {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
    }

.btn-secondary-modern[b-t6j33ymju1] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-secondary-modern:hover[b-t6j33ymju1] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

/* Loading Styles */
.loading-modern[b-t6j33ymju1] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner-container[b-t6j33ymju1] {
    text-align: center;
}

.spinner-modern[b-t6j33ymju1] {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin-b-t6j33ymju1 1s linear infinite;
    margin: 0 auto 16px;
}

.loading-text-modern[b-t6j33ymju1] {
    color: #6c757d;
    font-size: 16px;
    margin: 0;
}

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

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

@keyframes spinning-b-t6j33ymju1 {
    0% {
        transform: rotate(0deg);
    }

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

.spinning[b-t6j33ymju1] {
    animation: spinning-b-t6j33ymju1 1s linear infinite;
}

/* Statistics Cards */
.stats-cards-row[b-t6j33ymju1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card-modern[b-t6j33ymju1] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

    .stat-card-modern:hover[b-t6j33ymju1] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

.stat-icon-container[b-t6j33ymju1] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.total-card .stat-icon-container[b-t6j33ymju1] {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.unread-card .stat-icon-container[b-t6j33ymju1] {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.high-priority-card .stat-icon-container[b-t6j33ymju1] {
    background: linear-gradient(135deg, #ffc107, #e0a800);
}

.today-card .stat-icon-container[b-t6j33ymju1] {
    background: linear-gradient(135deg, #28a745, #1e7e34);
}

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

.stat-number[b-t6j33ymju1] {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #2c3e50;
}

.stat-label[b-t6j33ymju1] {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

/* Filters Section */
.filters-section-modern[b-t6j33ymju1] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.filters-row[b-t6j33ymju1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.filter-group[b-t6j33ymju1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-t6j33ymju1] {
    font-weight: 500;
    color: #495057;
    font-size: 14px;
    margin: 0;
}

.filter-select[b-t6j33ymju1] {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    color: #495057;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .filter-select:focus[b-t6j33ymju1] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.search-section[b-t6j33ymju1] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.search-input-container[b-t6j33ymju1] {
    flex: 1;
    position: relative;
}

.search-input[b-t6j33ymju1] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .search-input:focus[b-t6j33ymju1] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.search-icon[b-t6j33ymju1] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.clear-search-btn[b-t6j33ymju1] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    .clear-search-btn:hover[b-t6j33ymju1] {
        background: #f8f9fa;
        color: #495057;
    }

.search-btn[b-t6j33ymju1] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .search-btn:hover[b-t6j33ymju1] {
        background: linear-gradient(135deg, #0056b3, #004085);
    }

/* Notifications Container */
.notifications-container[b-t6j33ymju1] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.notifications-list[b-t6j33ymju1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-card[b-t6j33ymju1] {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

    .notification-card:hover[b-t6j33ymju1] {
        border-color: #007bff;
        box-shadow: 0 4px 20px rgba(0, 123, 255, 0.1);
        transform: translateY(-2px);
    }

    .notification-card.unread[b-t6j33ymju1] {
        border-left: 4px solid #007bff;
        background: linear-gradient(to right, rgba(0, 123, 255, 0.02), white);
    }

    .notification-card.read[b-t6j33ymju1] {
        opacity: 0.8;
    }

    .notification-card.urgent[b-t6j33ymju1] {
        border-left: 4px solid #dc3545;
    }

    .notification-card.high[b-t6j33ymju1] {
        border-left: 4px solid #ffc107;
    }

.notification-content[b-t6j33ymju1] {
    padding: 20px;
}

.notification-header[b-t6j33ymju1] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.notification-icon-wrapper[b-t6j33ymju1] {
    position: relative;
}

.notification-icon[b-t6j33ymju1] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

    .notification-icon.order[b-t6j33ymju1] {
        background: linear-gradient(135deg, #007bff, #0056b3);
    }

    .notification-icon.payment[b-t6j33ymju1] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .notification-icon.delivery[b-t6j33ymju1] {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

    .notification-icon.return[b-t6j33ymju1] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .notification-icon.system[b-t6j33ymju1] {
        background: linear-gradient(135deg, #6c757d, #5a6268);
    }

    .notification-icon.success[b-t6j33ymju1] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .notification-icon.warning[b-t6j33ymju1] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .notification-icon.error[b-t6j33ymju1] {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .notification-icon.info[b-t6j33ymju1] {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

.unread-indicator[b-t6j33ymju1] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #dc3545;
    border: 2px solid white;
    border-radius: 50%;
}

.notification-meta[b-t6j33ymju1] {
    flex: 1;
}

.notification-title[b-t6j33ymju1] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.notification-badges[b-t6j33ymju1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.priority-badge[b-t6j33ymju1], .type-badge[b-t6j33ymju1] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .priority-badge.urgent[b-t6j33ymju1] {
        background: #dc3545;
        color: white;
    }

    .priority-badge.high[b-t6j33ymju1] {
        background: #ffc107;
        color: #212529;
    }

    .priority-badge.medium[b-t6j33ymju1] {
        background: #17a2b8;
        color: white;
    }

    .priority-badge.low[b-t6j33ymju1] {
        background: #6c757d;
        color: white;
    }

.type-badge[b-t6j33ymju1] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.notification-time[b-t6j33ymju1] {
    text-align: right;
    min-width: 120px;
}

.time-text[b-t6j33ymju1] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.date-text[b-t6j33ymju1] {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.notification-body[b-t6j33ymju1] {
    margin-bottom: 16px;
}

.notification-message[b-t6j33ymju1] {
    margin: 0;
    color: #495057;
    line-height: 1.5;
    font-size: 14px;
}

.notification-actions[b-t6j33ymju1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #f8f9fa;
    padding-top: 16px;
}

.action-btn[b-t6j33ymju1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    background: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.read-btn[b-t6j33ymju1] {
    border-color: #28a745;
    color: #28a745;
}

    .read-btn:hover[b-t6j33ymju1] {
        background: #28a745;
        color: white;
    }

.view-btn[b-t6j33ymju1] {
    border-color: #007bff;
    color: #007bff;
}

    .view-btn:hover[b-t6j33ymju1] {
        background: #007bff;
        color: white;
    }

.delete-btn[b-t6j33ymju1] {
    border-color: #dc3545;
    color: #dc3545;
}

    .delete-btn:hover[b-t6j33ymju1] {
        background: #dc3545;
        color: white;
    }

/* Empty State */
.empty-state-modern[b-t6j33ymju1] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-t6j33ymju1] {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state-modern h3[b-t6j33ymju1] {
    color: #495057;
    margin-bottom: 12px;
    font-size: 24px;
}

.empty-state-modern p[b-t6j33ymju1] {
    color: #6c757d;
    margin-bottom: 24px;
    font-size: 16px;
}

/* Pagination */
.pagination-modern[b-t6j33ymju1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.pagination-info[b-t6j33ymju1] {
    color: #6c757d;
    font-size: 14px;
}

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

.pagination-btn[b-t6j33ymju1], .pagination-number[b-t6j33ymju1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    background: white;
    color: #495057;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .pagination-btn:hover:not(:disabled)[b-t6j33ymju1], .pagination-number:hover[b-t6j33ymju1] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

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

    .pagination-number.active[b-t6j33ymju1] {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }

/* Unauthorized */
.unauthorized-container[b-t6j33ymju1] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.unauthorized-content[b-t6j33ymju1] {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

    .unauthorized-content i[b-t6j33ymju1] {
        font-size: 48px;
        color: #dc3545;
        margin-bottom: 16px;
    }

    .unauthorized-content h3[b-t6j33ymju1] {
        color: #495057;
        margin-bottom: 12px;
    }

    .unauthorized-content p[b-t6j33ymju1] {
        color: #6c757d;
        margin-bottom: 20px;
    }

/* RTL Support */
[dir="rtl"] .notification-card[b-t6j33ymju1] {
    border-left: none;
    border-right: 4px solid;
}

    [dir="rtl"] .notification-card.unread[b-t6j33ymju1] {
        border-right: 4px solid #007bff;
    }

    [dir="rtl"] .notification-card.urgent[b-t6j33ymju1] {
        border-right: 4px solid #dc3545;
    }

    [dir="rtl"] .notification-card.high[b-t6j33ymju1] {
        border-right: 4px solid #ffc107;
    }

[dir="rtl"] .search-icon[b-t6j33ymju1] {
    right: auto;
    left: 12px;
}

[dir="rtl"] .clear-search-btn[b-t6j33ymju1] {
    right: auto;
    left: 12px;
}

[dir="rtl"] .unread-indicator[b-t6j33ymju1] {
    right: auto;
    left: -2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notifications-page[b-t6j33ymju1] {
        padding: 12px;
    }

    .page-header-enhanced[b-t6j33ymju1] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

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

    .stats-cards-row[b-t6j33ymju1] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .filters-row[b-t6j33ymju1] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .search-section[b-t6j33ymju1] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-header[b-t6j33ymju1] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-time[b-t6j33ymju1] {
        text-align: left;
        min-width: auto;
    }

    .notification-actions[b-t6j33ymju1] {
        justify-content: center;
    }

    .pagination-modern[b-t6j33ymju1] {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-controls[b-t6j33ymju1] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title-modern[b-t6j33ymju1] {
        font-size: 24px;
    }

    .stat-card-modern[b-t6j33ymju1] {
        padding: 16px;
    }

    .stat-number[b-t6j33ymju1] {
        font-size: 24px;
    }

    .notification-content[b-t6j33ymju1] {
        padding: 16px;
    }

    .notification-icon[b-t6j33ymju1] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .notification-title[b-t6j33ymju1] {
        font-size: 14px;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/PrintReceipts.razor.rz.scp.css */

/* Print Receipts Page - Modern Professional Design */
/* ����� ���� ����� ��������� - ������� ���� */

/* Page Container */
.print-receipts-page[b-x3bx2toiwj] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .print-receipts-page[b-x3bx2toiwj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .print-receipts-page > *[b-x3bx2toiwj] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-x3bx2toiwj] {
    margin-bottom: 40px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content[b-x3bx2toiwj] {
    text-align: center;
}

    .header-content h1[b-x3bx2toiwj] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

    .header-content .subtitle[b-x3bx2toiwj] {
        font-size: 18px;
        color: #6b7280;
        margin: 0;
        font-weight: 400;
    }

/* Filter Section */
.filter-section[b-x3bx2toiwj] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
}

.filter-row[b-x3bx2toiwj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: end;
}

.filter-item[b-x3bx2toiwj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-item label[b-x3bx2toiwj] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .filter-item .form-control[b-x3bx2toiwj],
    .filter-item .form-select[b-x3bx2toiwj] {
        width: 100%;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s;
        font-size: 15px;
        color: #1f2937;
    }

        .filter-item .form-control:focus[b-x3bx2toiwj],
        .filter-item .form-select:focus[b-x3bx2toiwj] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

    .filter-item .form-check[b-x3bx2toiwj] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border-radius: 12px;
        transition: all 0.3s;
        cursor: pointer;
    }

        .filter-item .form-check:hover[b-x3bx2toiwj] {
            background: rgba(102, 126, 234, 0.1);
        }

    .filter-item .form-check-input[b-x3bx2toiwj] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #667eea;
        border-radius: 4px;
        margin: 0;
    }

    .filter-item .form-check-label[b-x3bx2toiwj] {
        font-size: 14px;
        font-weight: 500;
        color: #4c1d95;
        cursor: pointer;
        margin: 0;
        text-transform: none;
        letter-spacing: normal;
    }

    /* Filter Button */
    .filter-item .btn[b-x3bx2toiwj] {
        padding: 12px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        font-size: 14px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

        .filter-item .btn:hover[b-x3bx2toiwj] {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

        .filter-item .btn:active[b-x3bx2toiwj] {
            transform: translateY(0);
        }

/* Summary Section */
.summary-section[b-x3bx2toiwj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.summary-card[b-x3bx2toiwj] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .summary-card[b-x3bx2toiwj]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .summary-card:hover[b-x3bx2toiwj] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

        .summary-card:hover[b-x3bx2toiwj]::before {
            opacity: 1;
        }

.summary-icon[b-x3bx2toiwj] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .summary-icon i[b-x3bx2toiwj] {
        position: relative;
        z-index: 1;
    }

.summary-content[b-x3bx2toiwj] {
    flex: 1;
}

    .summary-content h3[b-x3bx2toiwj] {
        font-size: 32px;
        font-weight: 800;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

    .summary-content p[b-x3bx2toiwj] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
    }

/* Print Button in Summary */
.summary-card .btn[b-x3bx2toiwj] {
    padding: 16px 32px;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(67, 233, 123, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    min-width: 200px;
    justify-content: center;
}

    .summary-card .btn:hover:not(:disabled)[b-x3bx2toiwj] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(67, 233, 123, 0.4);
    }

    .summary-card .btn:disabled[b-x3bx2toiwj] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    .summary-card .btn .spinner-border[b-x3bx2toiwj] {
        width: 20px;
        height: 20px;
        border-width: 2px;
        border-color: rgba(255, 255, 255, 0.3);
        border-right-color: white;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .summary-section[b-x3bx2toiwj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-row[b-x3bx2toiwj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .print-receipts-page[b-x3bx2toiwj] {
        padding: 16px;
    }

    .page-header[b-x3bx2toiwj] {
        padding: 20px;
        margin-bottom: 24px;
    }

        .page-header h1[b-x3bx2toiwj] {
            font-size: 28px;
        }

        .page-header .subtitle[b-x3bx2toiwj] {
            font-size: 16px;
        }

    .filter-section[b-x3bx2toiwj] {
        padding: 20px;
    }

    .filter-row[b-x3bx2toiwj] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-section[b-x3bx2toiwj] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-card[b-x3bx2toiwj] {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .summary-icon[b-x3bx2toiwj] {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .summary-content h3[b-x3bx2toiwj] {
        font-size: 24px;
    }

    .summary-card .btn[b-x3bx2toiwj] {
        width: 100%;
        padding: 14px 24px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .page-header h1[b-x3bx2toiwj] {
        font-size: 24px;
    }

    .filter-item .form-control[b-x3bx2toiwj],
    .filter-item .form-select[b-x3bx2toiwj] {
        padding: 10px 14px;
        font-size: 14px;
    }

    .summary-card[b-x3bx2toiwj] {
        padding: 16px;
    }

    .summary-icon[b-x3bx2toiwj] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .summary-content h3[b-x3bx2toiwj] {
        font-size: 20px;
    }

    .summary-content p[b-x3bx2toiwj] {
        font-size: 14px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .print-receipts-page[b-x3bx2toiwj] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .print-receipts-page[b-x3bx2toiwj]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-x3bx2toiwj],
[data-theme="dark"] .filter-section[b-x3bx2toiwj],
[data-theme="dark"] .summary-card[b-x3bx2toiwj] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .header-content h1[b-x3bx2toiwj] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .header-content .subtitle[b-x3bx2toiwj] {
    color: #9ca3af;
}

[data-theme="dark"] .filter-item label[b-x3bx2toiwj] {
    color: #e2e8f0;
}

[data-theme="dark"] .filter-item .form-control[b-x3bx2toiwj],
[data-theme="dark"] .filter-item .form-select[b-x3bx2toiwj] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .filter-item .form-control:focus[b-x3bx2toiwj],
    [data-theme="dark"] .filter-item .form-select:focus[b-x3bx2toiwj] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .filter-item .form-check[b-x3bx2toiwj] {
    background: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .filter-item .form-check:hover[b-x3bx2toiwj] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .filter-item .form-check-label[b-x3bx2toiwj] {
    color: #e2e8f0;
}

[data-theme="dark"] .summary-content h3[b-x3bx2toiwj] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .summary-content p[b-x3bx2toiwj] {
    color: #9ca3af;
}

/* Print Styles */
@media print {
    .print-receipts-page[b-x3bx2toiwj] {
        background: white !important;
    }

    .page-header[b-x3bx2toiwj],
    .filter-section[b-x3bx2toiwj],
    .summary-section[b-x3bx2toiwj] {
        display: none !important;
    }
}

/* Loading State */
.loading-overlay[b-x3bx2toiwj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner[b-x3bx2toiwj] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-x3bx2toiwj 0.8s linear infinite;
}

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

/* Animation Classes */
.fade-in[b-x3bx2toiwj] {
    animation: fadeIn-b-x3bx2toiwj 0.5s ease-in-out;
}

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

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

.slide-up[b-x3bx2toiwj] {
    animation: slideUp-b-x3bx2toiwj 0.3s ease-out;
}

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

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

/* Focus States for Accessibility */
*:focus[b-x3bx2toiwj] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-x3bx2toiwj],
.btn:focus[b-x3bx2toiwj] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

input:focus[b-x3bx2toiwj],
select:focus[b-x3bx2toiwj] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .summary-card[b-x3bx2toiwj],
    .filter-section[b-x3bx2toiwj],
    .page-header[b-x3bx2toiwj] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-x3bx2toiwj] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* RTL Support */
html[dir="rtl"] .summary-card[b-x3bx2toiwj] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .filter-item .form-check[b-x3bx2toiwj] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .summary-card .btn[b-x3bx2toiwj] {
    flex-direction: row-reverse;
}

/* Special Effects */
.gradient-border[b-x3bx2toiwj] {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 20px;
}

    .gradient-border[b-x3bx2toiwj]::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 22px;
        z-index: -1;
    }

/* Hover Effects */
.hover-lift[b-x3bx2toiwj] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .hover-lift:hover[b-x3bx2toiwj] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

/* Pulse Animation for Loading */
.pulse[b-x3bx2toiwj] {
    animation: pulse-b-x3bx2toiwj 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

    50% {
        opacity: 0.5;
    }
}

.collect-modal[b-x3bx2toiwj] {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.collection-summary[b-x3bx2toiwj] {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

    .collection-summary .summary-item[b-x3bx2toiwj] {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

.collection-details[b-x3bx2toiwj] {
    margin-bottom: 20px;
}

    .collection-details h4[b-x3bx2toiwj] {
        margin-bottom: 15px;
        color: #333;
    }

    .collection-details table[b-x3bx2toiwj] {
        width: 100%;
    }

.payment-form .form-group[b-x3bx2toiwj] {
    margin-bottom: 15px;
}

.modal-overlay[b-x3bx2toiwj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-content[b-x3bx2toiwj] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 600px;
}

.modal-header[b-x3bx2toiwj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
}

    .modal-header h3[b-x3bx2toiwj] {
        margin: 0;
        color: #333;
    }

.close-btn[b-x3bx2toiwj] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
}

.modal-body[b-x3bx2toiwj] {
    padding: 20px;
}

.modal-footer[b-x3bx2toiwj] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #dee2e6;
}
/* ����� ������� CSS ���� ������ */
.summary-card .btn-info[b-x3bx2toiwj] {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white;
    transition: all 0.3s ease;
}

    .summary-card .btn-info:hover:not(:disabled)[b-x3bx2toiwj] {
        background-color: #138496;
        border-color: #117a8b;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .summary-card .btn-info:disabled[b-x3bx2toiwj] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ������� ������ ��� ������� */
.print-type-selector[b-x3bx2toiwj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .print-type-selector label[b-x3bx2toiwj] {
        font-weight: 600;
        color: #333;
        margin-bottom: 0.25rem;
    }

    .print-type-selector .form-select[b-x3bx2toiwj] {
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 0.5rem;
        font-size: 0.95rem;
        transition: border-color 0.3s ease;
    }

        .print-type-selector .form-select:focus[b-x3bx2toiwj] {
            border-color: #17a2b8;
            box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
        }

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

.modal-content.collect-modal[b-x3bx2toiwj] {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header[b-x3bx2toiwj] {
    padding: 1.5rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-x3bx2toiwj] {
        margin: 0;
        color: #333;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.close-btn[b-x3bx2toiwj] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

    .close-btn:hover[b-x3bx2toiwj] {
        color: #333;
    }

.modal-body[b-x3bx2toiwj] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.collection-summary[b-x3bx2toiwj] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.summary-item[b-x3bx2toiwj] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 1.1rem;
}

.collection-details[b-x3bx2toiwj] {
    margin-bottom: 1.5rem;
}

    .collection-details h4[b-x3bx2toiwj] {
        margin-bottom: 1rem;
        color: #333;
    }

.payment-form .form-group[b-x3bx2toiwj] {
    margin-bottom: 1rem;
}

.payment-form label[b-x3bx2toiwj] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.modal-footer[b-x3bx2toiwj] {
    padding: 1.5rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
/* _content/Sahelly/Components/Pages/Merchant/ReceiptSettings.razor.rz.scp.css */
.receipt-settings-page[b-1pfpmglrgh] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-1pfpmglrgh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

    .page-header h1[b-1pfpmglrgh] {
        font-size: 1.75rem;
        font-weight: bold;
        color: var(--primary-color);
        margin: 0;
    }

.settings-container[b-1pfpmglrgh] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 2rem;
}

.settings-card[b-1pfpmglrgh] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e0e0e0;
}

    .settings-card:last-of-type[b-1pfpmglrgh] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .settings-card h3[b-1pfpmglrgh] {
        font-size: 1.25rem;
        font-weight: bold;
        color: var(--secondary-color);
        margin-bottom: 1.5rem;
    }

/* Color Picker Styles */
.color-input-wrapper[b-1pfpmglrgh] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.color-picker[b-1pfpmglrgh] {
    width: 80px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}

.color-value[b-1pfpmglrgh] {
    font-family: monospace;
    font-size: 0.9rem;
    color: #666;
}

/* Font Size Selector */
.font-size-selector[b-1pfpmglrgh] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.size-option[b-1pfpmglrgh] {
    position: relative;
    cursor: pointer;
}

    .size-option input[type="radio"][b-1pfpmglrgh] {
        position: absolute;
        opacity: 0;
    }

.size-box[b-1pfpmglrgh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.size-option input[type="radio"]:checked + .size-box[b-1pfpmglrgh] {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.05);
}

.size-box span[b-1pfpmglrgh] {
    margin-top: 0.5rem;
    font-weight: 600;
}

.size-box small[b-1pfpmglrgh] {
    color: #666;
    font-size: 0.8rem;
}

/* Receipts Per Page Selector */
.receipts-per-page-selector[b-1pfpmglrgh] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-option[b-1pfpmglrgh] {
    position: relative;
    cursor: pointer;
}

    .page-option input[type="radio"][b-1pfpmglrgh] {
        position: absolute;
        opacity: 0;
    }

.page-box[b-1pfpmglrgh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 120px;
}

.page-option input[type="radio"]:checked + .page-box[b-1pfpmglrgh] {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.05);
}

.page-preview[b-1pfpmglrgh] {
    width: 80px;
    height: 100px;
    border: 1px solid #ddd;
    background: white;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

.receipt-preview[b-1pfpmglrgh] {
    flex: 1;
    background: #f0f0f0;
    border: 1px solid #ccc;
}

/* Form Actions */
.form-actions[b-1pfpmglrgh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}



.header-actions[b-1pfpmglrgh] {
    display: flex;
    gap: 1rem;
}
/* Responsive */
@media (max-width: 768px) {
    .font-size-selector[b-1pfpmglrgh], .receipts-per-page-selector[b-1pfpmglrgh] {
        justify-content: center;
    }

    .form-actions[b-1pfpmglrgh] {
        flex-direction: column;
        gap: 1rem;
    }

        .form-actions button[b-1pfpmglrgh] {
            width: 100%;
        }
}
/* _content/Sahelly/Components/Pages/Merchant/ReportsDownload.razor.rz.scp.css */
/* ===================================
   Reports Download Page - Modern Professional CSS
   ���� ����� ���� ������� ����� ����� ��������
   =================================== */

/* Page Container */
.reports-download-page[b-ycsxj2jcgy] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .reports-download-page[b-ycsxj2jcgy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .reports-download-page > *[b-ycsxj2jcgy] {
        position: relative;
        z-index: 1;
    }

/* Page Header Modern */
.page-header-modern[b-ycsxj2jcgy] {
    margin-bottom: 24px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.header-content[b-ycsxj2jcgy] {
    text-align: right;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-ycsxj2jcgy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.breadcrumb-link[b-ycsxj2jcgy] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
    font-weight: 500;
}

    .breadcrumb-link:hover[b-ycsxj2jcgy] {
        color: #667eea;
    }

.separator[b-ycsxj2jcgy] {
    color: #d1d5db;
}

.breadcrumb-current[b-ycsxj2jcgy] {
    color: #4c1d95;
    font-weight: 600;
}

/* Page Title */
.page-title[b-ycsxj2jcgy] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .page-title i[b-ycsxj2jcgy] {
        font-size: 24px;
    }

.page-description[b-ycsxj2jcgy] {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Report Selection Container */
.report-selection-container[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 24px;
}

.selection-card[b-ycsxj2jcgy] {
    padding: 20px;
}

.card-title[b-ycsxj2jcgy] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .card-title i[b-ycsxj2jcgy] {
        color: #667eea;
        font-size: 20px;
    }

/* Date Range Section - Compact */
.date-range-section[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.date-inputs[b-ycsxj2jcgy] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.date-input-group[b-ycsxj2jcgy] {
    flex: 1;
}

    .date-input-group label[b-ycsxj2jcgy] {
        font-size: 12px;
        font-weight: 500;
        color: #4c1d95;
        margin-bottom: 4px;
        display: block;
    }

    .date-input-group input[b-ycsxj2jcgy] {
        width: 100%;
        padding: 8px 12px;
        background: rgba(102, 126, 234, 0.05);
        border: 1px solid rgba(102, 126, 234, 0.2);
        border-radius: 8px;
        transition: all 0.2s;
        font-size: 13px;
        color: #1f2937;
    }

        .date-input-group input:focus[b-ycsxj2jcgy] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

/* Quick Filters - Compact */
.quick-filters[b-ycsxj2jcgy] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.quick-filter-btn[b-ycsxj2jcgy] {
    padding: 6px 12px;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    color: #667eea;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

    .quick-filter-btn:hover[b-ycsxj2jcgy] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-1px);
    }

    .quick-filter-btn.active[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
    }

/* Reports Grid - Compact Layout */
.reports-grid[b-ycsxj2jcgy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.report-item[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid rgba(102, 126, 234, 0.1);
    position: relative;
    overflow: hidden;
}

    .report-item:hover[b-ycsxj2jcgy] {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

    .report-item.selected[b-ycsxj2jcgy] {
        border-color: #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

/* Report Icons - Compact */
.report-icon[b-ycsxj2jcgy] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    margin-bottom: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .report-icon.sales[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .report-icon.financial[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .report-icon.inventory[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .report-icon.agents[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .report-icon.returns[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .report-icon.collections[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    }

    .report-icon.inventory-movement[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
    }

.report-item h4[b-ycsxj2jcgy] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.2;
}

.report-item p[b-ycsxj2jcgy] {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide Report Features List for Compact View */
.report-features[b-ycsxj2jcgy] {
    display: none;
}

/* Download Section */
.download-section[b-ycsxj2jcgy] {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.btn-download-pdf[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
}

    .btn-download-pdf:hover:not(:disabled)[b-ycsxj2jcgy] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

    .btn-download-pdf:active:not(:disabled)[b-ycsxj2jcgy] {
        transform: translateY(0);
    }

    .btn-download-pdf:disabled[b-ycsxj2jcgy] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-download-pdf i[b-ycsxj2jcgy] {
        font-size: 16px;
    }

.select-report-message[b-ycsxj2jcgy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6b7280;
}

    .select-report-message i[b-ycsxj2jcgy] {
        font-size: 36px;
        color: #9ca3af;
    }

    .select-report-message p[b-ycsxj2jcgy] {
        font-size: 14px;
        margin: 0;
    }

/* Progress Container - Compact */
.progress-container[b-ycsxj2jcgy] {
    margin-top: 16px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
}

.progress[b-ycsxj2jcgy] {
    width: 100%;
    height: 12px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar[b-ycsxj2jcgy] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 600;
}

.progress-status[b-ycsxj2jcgy] {
    text-align: center;
    font-size: 12px;
    color: #4c1d95;
    font-weight: 500;
    margin: 0;
}

/* Recent Downloads Section - Compact */
.recent-downloads-section[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

.section-title[b-ycsxj2jcgy] {
    font-size: 18px;
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title i[b-ycsxj2jcgy] {
        color: #667eea;
        font-size: 20px;
    }

.downloads-list[b-ycsxj2jcgy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.download-item[b-ycsxj2jcgy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 10px;
    transition: all 0.2s;
    border: 1px solid transparent;
}

    .download-item:hover[b-ycsxj2jcgy] {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.2);
        transform: translateX(-4px);
    }

.download-icon[b-ycsxj2jcgy] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.download-info[b-ycsxj2jcgy] {
    flex: 1;
    min-width: 0;
}

    .download-info h4[b-ycsxj2jcgy] {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 2px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .download-info p[b-ycsxj2jcgy] {
        font-size: 12px;
        color: #6b7280;
        margin: 0 0 2px 0;
    }

.download-date[b-ycsxj2jcgy] {
    font-size: 11px;
    color: #9ca3af;
}

.btn-redownload[b-ycsxj2jcgy] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

    .btn-redownload:hover[b-ycsxj2jcgy] {
        transform: scale(1.1) rotate(180deg);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

/* Unauthorized Container */
.unauthorized-container[b-ycsxj2jcgy] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    max-width: 400px;
    margin: 60px auto;
}

    .unauthorized-container i[b-ycsxj2jcgy] {
        font-size: 60px;
        color: #ef4444;
        margin-bottom: 16px;
    }

    .unauthorized-container h3[b-ycsxj2jcgy] {
        font-size: 24px;
        color: #1f2937;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .unauthorized-container p[b-ycsxj2jcgy] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-primary[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    font-size: 14px;
}

    .btn-primary:hover[b-ycsxj2jcgy] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

/* Spinner */
.spinner-border[b-ycsxj2jcgy] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right-color: white;
    border-radius: 50%;
    animation: spin-b-ycsxj2jcgy 0.8s linear infinite;
}

.spinner-border-sm[b-ycsxj2jcgy] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

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

/* Badge Styles */
.badge-success[b-ycsxj2jcgy] {
    background-color: #d4edda;
    color: #155724;
}

.badge-danger[b-ycsxj2jcgy] {
    background-color: #f8d7da;
    color: #721c24;
}

/* Dark Theme Support */
[data-theme="dark"] .reports-download-page[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .reports-download-page[b-ycsxj2jcgy]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-modern[b-ycsxj2jcgy],
[data-theme="dark"] .report-selection-container[b-ycsxj2jcgy],
[data-theme="dark"] .recent-downloads-section[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .date-range-section[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .report-item[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
    border: 1.5px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .report-item:hover[b-ycsxj2jcgy] {
        border-color: #818cf8;
    }

    [data-theme="dark"] .report-item.selected[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, rgba(129, 140, 248, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
        border-color: #818cf8;
    }

[data-theme="dark"] .card-title[b-ycsxj2jcgy],
[data-theme="dark"] .section-title[b-ycsxj2jcgy] {
    color: #e2e8f0;
}

    [data-theme="dark"] .card-title i[b-ycsxj2jcgy],
    [data-theme="dark"] .section-title i[b-ycsxj2jcgy] {
        color: #a78bfa;
    }

[data-theme="dark"] .page-title[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .breadcrumb-link[b-ycsxj2jcgy] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-link:hover[b-ycsxj2jcgy] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-ycsxj2jcgy] {
    color: #e2e8f0;
}

[data-theme="dark"] .page-description[b-ycsxj2jcgy] {
    color: #9ca3af;
}

[data-theme="dark"] .date-input-group label[b-ycsxj2jcgy] {
    color: #e2e8f0;
}

[data-theme="dark"] .date-input-group input[b-ycsxj2jcgy] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

    [data-theme="dark"] .date-input-group input:focus[b-ycsxj2jcgy] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #818cf8;
    }

[data-theme="dark"] .quick-filter-btn[b-ycsxj2jcgy] {
    background: rgba(129, 140, 248, 0.2);
    color: #a78bfa;
    border-color: rgba(129, 140, 248, 0.3);
}

    [data-theme="dark"] .quick-filter-btn:hover[b-ycsxj2jcgy] {
        background: rgba(129, 140, 248, 0.3);
    }

    [data-theme="dark"] .quick-filter-btn.active[b-ycsxj2jcgy] {
        background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    }

[data-theme="dark"] .report-item h4[b-ycsxj2jcgy] {
    color: #e2e8f0;
}

[data-theme="dark"] .report-item p[b-ycsxj2jcgy] {
    color: #9ca3af;
}

[data-theme="dark"] .download-item[b-ycsxj2jcgy] {
    background: rgba(129, 140, 248, 0.1);
}

    [data-theme="dark"] .download-item:hover[b-ycsxj2jcgy] {
        background: rgba(129, 140, 248, 0.2);
        border-color: rgba(129, 140, 248, 0.3);
    }

[data-theme="dark"] .download-info h4[b-ycsxj2jcgy] {
    color: #e2e8f0;
}

[data-theme="dark"] .download-info p[b-ycsxj2jcgy] {
    color: #9ca3af;
}

[data-theme="dark"] .download-date[b-ycsxj2jcgy] {
    color: #64748b;
}

[data-theme="dark"] .select-report-message[b-ycsxj2jcgy] {
    color: #9ca3af;
}

    [data-theme="dark"] .select-report-message i[b-ycsxj2jcgy] {
        color: #64748b;
    }

[data-theme="dark"] .progress-status[b-ycsxj2jcgy] {
    color: #a78bfa;
}

[data-theme="dark"] .unauthorized-container[b-ycsxj2jcgy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

    [data-theme="dark"] .unauthorized-container h3[b-ycsxj2jcgy] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .unauthorized-container p[b-ycsxj2jcgy] {
        color: #9ca3af;
    }

/* RTL Support */
html[dir="rtl"] .header-content[b-ycsxj2jcgy] {
    text-align: left;
}

html[dir="rtl"] .page-title[b-ycsxj2jcgy] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb-nav[b-ycsxj2jcgy] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb-link[b-ycsxj2jcgy] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .card-title[b-ycsxj2jcgy],
html[dir="rtl"] .section-title[b-ycsxj2jcgy] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .download-item[b-ycsxj2jcgy],
html[dir="rtl"] .select-report-message[b-ycsxj2jcgy] {
    flex-direction: row-reverse;
}

    html[dir="rtl"] .download-item:hover[b-ycsxj2jcgy] {
        transform: translateX(4px);
    }

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

@media (max-width: 768px) {
    .reports-download-page[b-ycsxj2jcgy] {
        padding: 16px;
    }

    .page-header-modern[b-ycsxj2jcgy] {
        padding: 12px;
        margin-bottom: 16px;
    }

    .page-title[b-ycsxj2jcgy] {
        font-size: 22px;
    }

        .page-title i[b-ycsxj2jcgy] {
            font-size: 20px;
        }

    .page-description[b-ycsxj2jcgy] {
        font-size: 14px;
    }

    .selection-card[b-ycsxj2jcgy] {
        padding: 16px;
    }

    .card-title[b-ycsxj2jcgy] {
        font-size: 16px;
    }

    .date-range-section[b-ycsxj2jcgy] {
        padding: 10px;
    }

    .date-inputs[b-ycsxj2jcgy] {
        flex-direction: column;
    }

    .quick-filters[b-ycsxj2jcgy] {
        justify-content: space-between;
    }

    .quick-filter-btn[b-ycsxj2jcgy] {
        flex: 1;
        min-width: 0;
        padding: 6px 8px;
        font-size: 11px;
    }

    .reports-grid[b-ycsxj2jcgy] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .report-item[b-ycsxj2jcgy] {
        padding: 10px;
    }

    .report-icon[b-ycsxj2jcgy] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .report-item h4[b-ycsxj2jcgy] {
        font-size: 13px;
    }

    .report-item p[b-ycsxj2jcgy] {
        font-size: 11px;
    }

    .btn-download-pdf[b-ycsxj2jcgy] {
        width: 100%;
        padding: 10px 24px;
        font-size: 14px;
    }

    .recent-downloads-section[b-ycsxj2jcgy] {
        padding: 16px;
    }

    .download-item[b-ycsxj2jcgy] {
        padding: 10px;
        gap: 10px;
    }

    .download-icon[b-ycsxj2jcgy] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .unauthorized-container[b-ycsxj2jcgy] {
        margin: 40px 16px;
        padding: 40px 20px;
    }

        .unauthorized-container i[b-ycsxj2jcgy] {
            font-size: 48px;
        }

        .unauthorized-container h3[b-ycsxj2jcgy] {
            font-size: 20px;
        }

        .unauthorized-container p[b-ycsxj2jcgy] {
            font-size: 14px;
        }
}

@media (max-width: 480px) {
    .page-title[b-ycsxj2jcgy] {
        font-size: 20px;
        gap: 6px;
    }

    .breadcrumb-nav[b-ycsxj2jcgy] {
        font-size: 11px;
        gap: 4px;
    }

    .reports-grid[b-ycsxj2jcgy] {
        grid-template-columns: 1fr;
    }

    .report-item h4[b-ycsxj2jcgy] {
        font-size: 12px;
    }

    .report-item p[b-ycsxj2jcgy] {
        display: none;
    }

    .quick-filter-btn[b-ycsxj2jcgy] {
        font-size: 10px;
        padding: 4px 6px;
    }

    .btn-download-pdf[b-ycsxj2jcgy] {
        font-size: 13px;
        padding: 8px 20px;
    }

    .download-info h4[b-ycsxj2jcgy] {
        font-size: 12px;
    }

    .download-info p[b-ycsxj2jcgy] {
        font-size: 11px;
    }

    .btn-redownload[b-ycsxj2jcgy] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* Print Styles - Critical for PDF Generation */
@media print {
    .reports-download-page[b-ycsxj2jcgy] {
        background: white !important;
        padding: 10px !important;
    }

    .page-header-modern[b-ycsxj2jcgy] {
        margin-bottom: 10px !important;
        padding: 8px !important;
        box-shadow: none !important;
    }

    .report-selection-container[b-ycsxj2jcgy] {
        box-shadow: none !important;
    }

    .selection-card[b-ycsxj2jcgy] {
        padding: 10px !important;
    }

    .card-title[b-ycsxj2jcgy] {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .date-range-section[b-ycsxj2jcgy] {
        padding: 8px !important;
        margin-bottom: 10px !important;
    }

    .reports-grid[b-ycsxj2jcgy] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .report-item[b-ycsxj2jcgy] {
        padding: 6px !important;
        page-break-inside: avoid;
        border: 1px solid #ddd !important;
    }

    .report-icon[b-ycsxj2jcgy] {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .report-item h4[b-ycsxj2jcgy] {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    .report-item p[b-ycsxj2jcgy] {
        display: none !important;
    }

    .quick-filters[b-ycsxj2jcgy],
    .btn-download-pdf[b-ycsxj2jcgy],
    .btn-redownload[b-ycsxj2jcgy],
    .recent-downloads-section[b-ycsxj2jcgy],
    .progress-container[b-ycsxj2jcgy] {
        display: none !important;
    }

    .download-section[b-ycsxj2jcgy] {
        padding-top: 8px !important;
    }

    /* Force black text for print */
    *[b-ycsxj2jcgy] {
        color: black !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

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

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

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

    to {
        opacity: 1;
    }
}

/* Focus States for Accessibility */
*:focus[b-ycsxj2jcgy] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-ycsxj2jcgy],
.btn:focus[b-ycsxj2jcgy] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

input:focus[b-ycsxj2jcgy] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-download-pdf[b-ycsxj2jcgy],
    .quick-filter-btn[b-ycsxj2jcgy],
    .btn-redownload[b-ycsxj2jcgy] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-ycsxj2jcgy] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/SubscriptionPayment.razor.rz.scp.css */
/* Modern E-Commerce Subscription Payment Page - Professional Design */

/* Page Container */
.subscription-payment-page[b-k256xaarno] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .subscription-payment-page[b-k256xaarno]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .subscription-payment-page > *[b-k256xaarno] {
        position: relative;
        z-index: 1;
    }

/* Enhanced Page Header */
.page-header-enhanced[b-k256xaarno] {
    margin-bottom: 40px;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .page-header-enhanced[b-k256xaarno]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .page-header-enhanced:hover[b-k256xaarno]::before {
        opacity: 1;
    }

/* Modern Breadcrumb */
.breadcrumb-modern[b-k256xaarno] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    direction: rtl;
}

.breadcrumb-item[b-k256xaarno] {
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

    .breadcrumb-item[b-k256xaarno]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        opacity: 0;
        transition: opacity 0.3s;
        z-index: -1;
    }

    .breadcrumb-item:hover[b-k256xaarno] {
        color: #667eea;
        transform: translateY(-2px);
    }

        .breadcrumb-item:hover[b-k256xaarno]::before {
            opacity: 1;
        }

    .breadcrumb-item i[b-k256xaarno] {
        font-size: 16px;
    }

.separator[b-k256xaarno] {
    color: #d1d5db;
    font-weight: bold;
}

.breadcrumb-current[b-k256xaarno] {
    color: #4c1d95;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    padding: 8px 16px;
    border-radius: 12px;
    border: 2px solid rgba(102, 126, 234, 0.2);
}

/* Header Title Section */
.header-title-section[b-k256xaarno] {
    text-align: center;
}

.page-title-modern[b-k256xaarno] {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    direction: rtl;
}

.title-icon[b-k256xaarno] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
    animation: float-b-k256xaarno 6s ease-in-out infinite;
}

.page-subtitle-enhanced[b-k256xaarno] {
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    direction: rtl;
}

.pill-badge[b-k256xaarno] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-right: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Contact Grid */
.contact-grid[b-k256xaarno] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

/* Contact Cards */
.contact-card[b-k256xaarno] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    direction: rtl;
}

    .contact-card[b-k256xaarno]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        transition: all 0.3s;
    }

    .contact-card.sales[b-k256xaarno]::before {
        background: linear-gradient(90deg, #25d366 0%, #128c7e 100%);
    }

    .contact-card.support[b-k256xaarno]::before {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    }

    .contact-card:hover[b-k256xaarno] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

/* Contact Card Header */
.contact-card-header[b-k256xaarno] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    direction: rtl;
}

    .contact-card-header i[b-k256xaarno] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: white;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

.contact-card.sales .contact-card-header i[b-k256xaarno] {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.contact-card.support .contact-card-header i[b-k256xaarno] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.contact-card-header h3[b-k256xaarno] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-note[b-k256xaarno] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.6;
    direction: rtl;
}

/* Contact Items */
.contact-items[b-k256xaarno] {
    margin-bottom: 32px;
}

.contact-item[b-k256xaarno] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s;
    direction: rtl;
}

    .contact-item:last-child[b-k256xaarno] {
        border-bottom: none;
    }

    .contact-item:hover[b-k256xaarno] {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        margin: 0 -16px;
        padding-left: 32px;
        padding-right: 32px;
        border-radius: 12px;
    }

    .contact-item i[b-k256xaarno] {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #667eea;
        font-size: 18px;
        transition: all 0.3s;
    }

    .contact-item:hover i[b-k256xaarno] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: scale(1.1);
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
    }

.contact-text[b-k256xaarno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .contact-text .label[b-k256xaarno] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .contact-text a[b-k256xaarno] {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        text-decoration: none;
        transition: all 0.3s;
        position: relative;
    }

        .contact-text a[b-k256xaarno]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s;
        }

        .contact-text a:hover[b-k256xaarno] {
            color: #667eea;
        }

            .contact-text a:hover[b-k256xaarno]::after {
                width: 100%;
            }

/* Contact Actions */
.contact-actions[b-k256xaarno] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .contact-actions .btn-primary[b-k256xaarno],
    .contact-actions .btn-secondary[b-k256xaarno] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px 24px;
        border-radius: 16px;
        font-weight: 600;
        font-size: 16px;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        position: relative;
        overflow: hidden;
        direction: rtl;
    }

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

        .contact-actions .btn-primary:hover[b-k256xaarno]::before,
        .contact-actions .btn-secondary:hover[b-k256xaarno]::before {
            width: 300px;
            height: 300px;
        }

    .contact-actions .btn-primary[b-k256xaarno] {
        background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
        color: white;
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
    }

        .contact-actions .btn-primary:hover[b-k256xaarno] {
            transform: translateY(-3px);
            box-shadow: 0 0 30px rgba(37, 211, 102, 0.6), 0 12px 25px rgba(37, 211, 102, 0.4);
        }

    .contact-actions .btn-secondary[b-k256xaarno] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

        .contact-actions .btn-secondary:hover[b-k256xaarno] {
            transform: translateY(-3px);
            box-shadow: 0 0 30px rgba(102, 126, 234, 0.6), 0 12px 25px rgba(102, 126, 234, 0.4);
        }

    .contact-actions i[b-k256xaarno] {
        font-size: 18px;
    }

/* Info Section */
.info-section[b-k256xaarno] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.info-item[b-k256xaarno] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    direction: rtl;
}

    .info-item:hover[b-k256xaarno] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

    .info-item i[b-k256xaarno] {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        color: #667eea;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

    .info-item h4[b-k256xaarno] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .info-item p[b-k256xaarno] {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        line-height: 1.6;
    }

/* Actions Footer */
.actions-footer[b-k256xaarno] {
    text-align: center;
    padding: 32px 0;
}

.btn-link[b-k256xaarno] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    direction: rtl;
}

    .btn-link:hover[b-k256xaarno] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        border-color: transparent;
    }

    .btn-link i[b-k256xaarno] {
        font-size: 18px;
        transition: transform 0.3s;
    }

    .btn-link:hover i[b-k256xaarno] {
        transform: translateX(4px);
    }

/* Unauthorized Container */
.unauthorized-container[b-k256xaarno] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 48px;
    margin: 48px auto;
    max-width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    direction: rtl;
}

    .unauthorized-container i[b-k256xaarno] {
        font-size: 80px;
        color: #ef4444;
        margin-bottom: 24px;
        opacity: 0.8;
    }

    .unauthorized-container h3[b-k256xaarno] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .unauthorized-container p[b-k256xaarno] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 32px;
        line-height: 1.6;
    }

    .unauthorized-container .btn-primary[b-k256xaarno] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 16px 32px;
        border-radius: 16px;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

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

/* Animations */
@keyframes float-b-k256xaarno {
    0%, 100% {
        transform: translateY(0);
    }

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

/* Dark Theme Support */
[data-theme="dark"] .subscription-payment-page[b-k256xaarno] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .subscription-payment-page[b-k256xaarno]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header-enhanced[b-k256xaarno],
[data-theme="dark"] .contact-card[b-k256xaarno],
[data-theme="dark"] .info-item[b-k256xaarno],
[data-theme="dark"] .unauthorized-container[b-k256xaarno] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .page-title-modern[b-k256xaarno],
    [data-theme="dark"] .contact-card-header h3[b-k256xaarno],
    [data-theme="dark"] .info-item h4[b-k256xaarno] {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

[data-theme="dark"] .breadcrumb-item[b-k256xaarno] {
    color: #9ca3af;
}

    [data-theme="dark"] .breadcrumb-item:hover[b-k256xaarno] {
        color: #a78bfa;
    }

[data-theme="dark"] .breadcrumb-current[b-k256xaarno] {
    color: #e2e8f0;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(192, 132, 252, 0.15) 100%);
    border-color: rgba(167, 139, 250, 0.3);
}

[data-theme="dark"] .page-subtitle-enhanced[b-k256xaarno],
[data-theme="dark"] .contact-note[b-k256xaarno],
[data-theme="dark"] .info-item p[b-k256xaarno] {
    color: #9ca3af;
}

[data-theme="dark"] .contact-text .label[b-k256xaarno] {
    color: #e2e8f0;
}

[data-theme="dark"] .contact-text a[b-k256xaarno] {
    color: #e2e8f0;
}

    [data-theme="dark"] .contact-text a:hover[b-k256xaarno] {
        color: #a78bfa;
    }

[data-theme="dark"] .btn-link[b-k256xaarno] {
    color: #a78bfa;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.3);
}

    [data-theme="dark"] .btn-link:hover[b-k256xaarno] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .subscription-payment-page[b-k256xaarno] {
        padding: 16px;
    }

    .page-header-enhanced[b-k256xaarno] {
        padding: 20px;
        margin-bottom: 24px;
    }

    .page-title-modern[b-k256xaarno] {
        font-size: 24px;
        flex-direction: column;
        gap: 12px;
    }

    .title-icon[b-k256xaarno] {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .breadcrumb-modern[b-k256xaarno] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .contact-grid[b-k256xaarno] {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 32px;
    }

    .contact-card[b-k256xaarno] {
        padding: 24px;
    }

    .contact-actions[b-k256xaarno] {
        gap: 8px;
    }

        .contact-actions .btn-primary[b-k256xaarno],
        .contact-actions .btn-secondary[b-k256xaarno] {
            padding: 14px 20px;
            font-size: 15px;
        }

    .info-section[b-k256xaarno] {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .info-item[b-k256xaarno] {
        padding: 20px;
    }

    .unauthorized-container[b-k256xaarno] {
        padding: 32px 20px;
        margin: 24px 16px;
    }

        .unauthorized-container i[b-k256xaarno] {
            font-size: 60px;
        }

        .unauthorized-container h3[b-k256xaarno] {
            font-size: 24px;
        }
}

@media (max-width: 480px) {
    .contact-card-header[b-k256xaarno] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .contact-item[b-k256xaarno] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .info-item[b-k256xaarno] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .page-title-modern span[b-k256xaarno] {
        font-size: 20px;
    }
}

/* Print Styles */
@media print {
    .subscription-payment-page[b-k256xaarno] {
        background: white !important;
        padding: 20px;
    }

    .contact-actions[b-k256xaarno],
    .actions-footer[b-k256xaarno] {
        display: none !important;
    }

    .contact-card[b-k256xaarno],
    .info-item[b-k256xaarno] {
        break-inside: avoid;
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .contact-card[b-k256xaarno],
    .info-item[b-k256xaarno],
    .page-header-enhanced[b-k256xaarno] {
        border: 2px solid #000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-k256xaarno] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Merchant/TransferAgentinstallments.razor.rz.scp.css */

/* ===================================
   Transfer Agent Installments Page - Modern Professional CSS
   نظام تحويل مندوب التحصيل - تصميم احترافي حديث
   =================================== */

/* Page Container */
.transfer-agent-page[b-dy0xxnwoko] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .transfer-agent-page[b-dy0xxnwoko]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

/* Main Card */
.card[b-dy0xxnwoko] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Card Header */
.card-header[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px 30px;
    border: none;
    position: relative;
    overflow: hidden;
}

    .card-header[b-dy0xxnwoko]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
    }

    .card-header h3[b-dy0xxnwoko] {
        margin: 0;
        color: white;
        font-size: 28px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .card-header h3 i[b-dy0xxnwoko] {
            font-size: 24px;
            opacity: 0.9;
        }

/* Card Body */
.card-body[b-dy0xxnwoko] {
    padding: 32px;
}

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

.spinner-border[b-dy0xxnwoko] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-dy0xxnwoko 0.8s linear infinite;
}

.loading-container p[b-dy0xxnwoko] {
    margin-top: 20px;
    font-size: 18px;
    color: #6b7280;
    font-weight: 500;
}

/* Search Section */
.search-card[b-dy0xxnwoko] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .search-card:hover[b-dy0xxnwoko] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
        border-color: rgba(102, 126, 234, 0.3);
    }

.card-title[b-dy0xxnwoko] {
    font-size: 20px;
    font-weight: 700;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

    .card-title i[b-dy0xxnwoko] {
        color: #667eea;
        font-size: 18px;
    }

/* Search Input Group */
.input-group[b-dy0xxnwoko] {
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

    .input-group .form-control[b-dy0xxnwoko] {
        padding: 14px 20px;
        font-size: 16px;
        border: 2px solid transparent;
        background: rgba(255, 255, 255, 0.9);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .input-group .form-control:focus[b-dy0xxnwoko] {
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            background: white;
        }

    .input-group .btn-primary[b-dy0xxnwoko] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        padding: 0 28px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        min-width: 120px;
    }

        .input-group .btn-primary:hover:not(:disabled)[b-dy0xxnwoko] {
            transform: translateX(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
        }

        .input-group .btn-primary:disabled[b-dy0xxnwoko] {
            opacity: 0.6;
            cursor: not-allowed;
        }

/* Clear Button */
.btn-secondary[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-secondary:hover[b-dy0xxnwoko] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

/* Results Section */
.results-header[b-dy0xxnwoko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .results-header h5[b-dy0xxnwoko] {
        font-size: 22px;
        font-weight: 700;
        color: #1f2937;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
    }

        .results-header h5 i[b-dy0xxnwoko] {
            color: #667eea;
        }

/* Button Group */
.btn-group[b-dy0xxnwoko] {
    display: flex;
    gap: 8px;
    background: rgba(102, 126, 234, 0.1);
    padding: 4px;
    border-radius: 10px;
}

.btn-outline-primary[b-dy0xxnwoko],
.btn-outline-secondary[b-dy0xxnwoko] {
    background: transparent;
    border: 2px solid transparent;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 14px;
}

.btn-outline-primary[b-dy0xxnwoko] {
    color: #667eea;
}

    .btn-outline-primary:hover[b-dy0xxnwoko] {
        background: #667eea;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

.btn-outline-secondary[b-dy0xxnwoko] {
    color: #6b7280;
}

    .btn-outline-secondary:hover[b-dy0xxnwoko] {
        background: #6b7280;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

/* List Group */
.list-group[b-dy0xxnwoko] {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.list-group-item[b-dy0xxnwoko] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(102, 126, 234, 0.1);
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: -1px;
}

    .list-group-item:first-child[b-dy0xxnwoko] {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .list-group-item:last-child[b-dy0xxnwoko] {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .list-group-item:hover[b-dy0xxnwoko] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        transform: translateX(4px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.1);
        z-index: 1;
        position: relative;
    }

    .list-group-item.list-group-item-primary[b-dy0xxnwoko] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        border-color: rgba(102, 126, 234, 0.3);
    }

/* Customer Info */
.customer-info[b-dy0xxnwoko] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.form-check-input[b-dy0xxnwoko] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    transition: all 0.3s;
    cursor: pointer;
}

    .form-check-input:checked[b-dy0xxnwoko] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

    .form-check-input:hover:not(:checked)[b-dy0xxnwoko] {
        border-color: #667eea;
    }

.customer-name[b-dy0xxnwoko] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.badge[b-dy0xxnwoko] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.badge-secondary[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.badge-warning[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.badge-primary[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.text-muted[b-dy0xxnwoko] {
    color: #6b7280 !important;
    font-size: 14px;
}

    .text-muted i[b-dy0xxnwoko] {
        color: #9333ea;
        margin-right: 4px;
    }

.text-danger[b-dy0xxnwoko] {
    color: #ef4444 !important;
    font-weight: 600;
}

/* Transfer Section */
.transfer-card[b-dy0xxnwoko] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid #667eea;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    transition: all 0.3s;
}

    .transfer-card:hover[b-dy0xxnwoko] {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(102, 126, 234, 0.2);
    }

.card-title.text-primary[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 24px;
}

.form-label[b-dy0xxnwoko] {
    font-size: 16px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 10px;
}

.form-select[b-dy0xxnwoko] {
    padding: 14px 16px;
    font-size: 16px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s;
}

    .form-select:focus[b-dy0xxnwoko] {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        background: white;
    }

    .form-select.is-invalid[b-dy0xxnwoko] {
        border-color: #ef4444;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    }

.invalid-feedback[b-dy0xxnwoko] {
    color: #ef4444;
    font-size: 14px;
    margin-top: 6px;
    font-weight: 500;
}

/* Success Button */
.btn-success[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

    .btn-success:hover:not(:disabled)[b-dy0xxnwoko] {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    }

    .btn-success:disabled[b-dy0xxnwoko] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

/* Selected Customers Summary */
.selected-summary[b-dy0xxnwoko] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid rgba(102, 126, 234, 0.2);
}

    .selected-summary h6[b-dy0xxnwoko] {
        font-size: 16px;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 12px;
    }

.customer-badges[b-dy0xxnwoko] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.badge[b-dy0xxnwoko] {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-right: 32px;
}

.btn-close[b-dy0xxnwoko] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    padding: 0;
    background-size: 12px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

    .btn-close:hover[b-dy0xxnwoko] {
        opacity: 1;
    }

/* Alert Messages */
.alert[b-dy0xxnwoko] {
    padding: 20px 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 500;
    border: none;
}

.alert-info[b-dy0xxnwoko] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
    color: #667eea;
}

    .alert-info i[b-dy0xxnwoko] {
        font-size: 24px;
    }

/* Empty State */
.empty-state[b-dy0xxnwoko] {
    text-align: center;
    padding: 60px 20px;
}

/* Unauthorized Content */
.unauthorized-content[b-dy0xxnwoko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 40px;
}

    .unauthorized-content i[b-dy0xxnwoko] {
        color: #667eea;
        margin-bottom: 24px;
    }

    .unauthorized-content h3[b-dy0xxnwoko] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .unauthorized-content p[b-dy0xxnwoko] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

    .unauthorized-content .btn-primary[b-dy0xxnwoko] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 14px 32px;
        font-size: 16px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

/* Animations */
@keyframes spin-b-dy0xxnwoko {
    to {
        transform: rotate(360deg);
    }
}

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

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

/* Dark Theme Support */
[data-theme="dark"] .transfer-agent-page[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .transfer-agent-page[b-dy0xxnwoko]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .card[b-dy0xxnwoko] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .card-header[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .card-body[b-dy0xxnwoko] {
    color: #e2e8f0;
}

[data-theme="dark"] .search-card[b-dy0xxnwoko] {
    background: linear-gradient(135deg, rgba(90, 108, 179, 0.1) 0%, rgba(98, 81, 139, 0.1) 100%);
    border-color: rgba(90, 108, 179, 0.2);
}

[data-theme="dark"] .card-title[b-dy0xxnwoko] {
    color: #e2e8f0;
}

    [data-theme="dark"] .card-title i[b-dy0xxnwoko] {
        color: #a78bfa;
    }

[data-theme="dark"] .input-group .form-control[b-dy0xxnwoko] {
    background: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
    border-color: transparent;
}

    [data-theme="dark"] .input-group .form-control:focus[b-dy0xxnwoko] {
        background: rgba(71, 85, 105, 0.8);
        border-color: #a78bfa;
    }

[data-theme="dark"] .input-group .btn-primary[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .list-group-item[b-dy0xxnwoko] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .list-group-item:hover[b-dy0xxnwoko] {
        background: linear-gradient(135deg, rgba(90, 108, 179, 0.1) 0%, rgba(98, 81, 139, 0.1) 100%);
    }

    [data-theme="dark"] .list-group-item.list-group-item-primary[b-dy0xxnwoko] {
        background: linear-gradient(135deg, rgba(90, 108, 179, 0.2) 0%, rgba(98, 81, 139, 0.2) 100%);
        border-color: rgba(90, 108, 179, 0.4);
    }

[data-theme="dark"] .customer-name[b-dy0xxnwoko] {
    color: #e2e8f0;
}

[data-theme="dark"] .text-muted[b-dy0xxnwoko] {
    color: #9ca3af !important;
}

    [data-theme="dark"] .text-muted i[b-dy0xxnwoko] {
        color: #a78bfa;
    }

[data-theme="dark"] .form-label[b-dy0xxnwoko] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-select[b-dy0xxnwoko] {
    background: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
    border-color: rgba(90, 108, 179, 0.2);
}

    [data-theme="dark"] .form-select:focus[b-dy0xxnwoko] {
        background: rgba(71, 85, 105, 0.8);
        border-color: #a78bfa;
    }

[data-theme="dark"] .transfer-card[b-dy0xxnwoko] {
    background: linear-gradient(135deg, rgba(90, 108, 179, 0.15) 0%, rgba(98, 81, 139, 0.15) 100%);
    border-color: #5a6cb3;
}

[data-theme="dark"] .btn-secondary[b-dy0xxnwoko] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content h3[b-dy0xxnwoko] {
    color: #e2e8f0;
}

[data-theme="dark"] .unauthorized-content p[b-dy0xxnwoko] {
    color: #9ca3af;
}

[data-theme="dark"] .unauthorized-content i[b-dy0xxnwoko] {
    color: #a78bfa;
}

[data-theme="dark"] .loading-container p[b-dy0xxnwoko] {
    color: #9ca3af;
}

[data-theme="dark"] .results-header h5[b-dy0xxnwoko] {
    color: #e2e8f0;
}

    [data-theme="dark"] .results-header h5 i[b-dy0xxnwoko] {
        color: #a78bfa;
    }

[data-theme="dark"] .alert-info[b-dy0xxnwoko] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    color: #a78bfa;
}

/* Responsive Design */
@media (max-width: 768px) {
    .transfer-agent-page[b-dy0xxnwoko] {
        padding: 16px;
    }

    .card-header[b-dy0xxnwoko] {
        padding: 20px;
    }

        .card-header h3[b-dy0xxnwoko] {
            font-size: 22px;
        }

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

    .input-group[b-dy0xxnwoko] {
        flex-direction: column;
    }

        .input-group .form-control[b-dy0xxnwoko] {
            border-radius: 12px;
            margin-bottom: 12px;
        }

        .input-group .btn-primary[b-dy0xxnwoko] {
            width: 100%;
            border-radius: 12px;
        }

    .btn-secondary[b-dy0xxnwoko] {
        width: 100%;
    }

    .results-header[b-dy0xxnwoko] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .btn-group[b-dy0xxnwoko] {
        width: 100%;
        justify-content: space-between;
    }

    .list-group-item[b-dy0xxnwoko] {
        padding: 16px;
    }

    .customer-info[b-dy0xxnwoko] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-check[b-dy0xxnwoko] {
        margin-bottom: 12px;
    }

    .customer-name[b-dy0xxnwoko] {
        font-size: 16px;
    }

    .btn-success[b-dy0xxnwoko] {
        width: 100%;
        font-size: 16px;
        padding: 14px 24px;
    }

    .selected-summary[b-dy0xxnwoko] {
        margin-top: 20px;
        padding-top: 20px;
    }

    .badge[b-dy0xxnwoko] {
        font-size: 12px;
        padding: 5px 10px;
        padding-right: 28px;
    }

    .loading-container[b-dy0xxnwoko] {
        min-height: 300px;
    }

    .spinner-border[b-dy0xxnwoko] {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 480px) {
    .card-header h3[b-dy0xxnwoko] {
        font-size: 20px;
    }

        .card-header h3 i[b-dy0xxnwoko] {
            font-size: 20px;
        }

    .card-title[b-dy0xxnwoko] {
        font-size: 18px;
    }

    .customer-name[b-dy0xxnwoko] {
        font-size: 15px;
    }

    .badge[b-dy0xxnwoko] {
        font-size: 11px;
    }

    .text-muted[b-dy0xxnwoko] {
        font-size: 13px;
    }
}

/* Print Styles */
@media print {
    .transfer-agent-page[b-dy0xxnwoko] {
        background: white !important;
    }

    .btn[b-dy0xxnwoko],
    .btn-group[b-dy0xxnwoko],
    .form-check-input[b-dy0xxnwoko],
    .btn-close[b-dy0xxnwoko] {
        display: none !important;
    }

    .card[b-dy0xxnwoko] {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }

    .card-header[b-dy0xxnwoko] {
        background: #f3f4f6 !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

        .card-header h3[b-dy0xxnwoko] {
            color: black !important;
        }

    .badge[b-dy0xxnwoko] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Accessibility */
.form-control:focus[b-dy0xxnwoko],
.form-select:focus[b-dy0xxnwoko],
.btn:focus[b-dy0xxnwoko] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-dy0xxnwoko] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/NotificationexampleTest.razor.rz.scp.css */
.stat-box[b-11mvcwlinb] {
    padding: 30px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s;
}

    .stat-box:hover[b-11mvcwlinb] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .stat-box h3[b-11mvcwlinb] {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0;
    }

    .stat-box p[b-11mvcwlinb] {
        margin: 0;
        font-size: 1.1rem;
    }

pre[b-11mvcwlinb] {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    overflow-x: auto;
}

code[b-11mvcwlinb] {
    color: #d63384;
}

.card[b-11mvcwlinb] {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.card-header[b-11mvcwlinb] {
    border: none;
    font-weight: 600;
}

.btn[b-11mvcwlinb] {
    padding: 10px 20px;
    font-weight: 500;
}
/* _content/Sahelly/Components/Pages/PopupTest.razor.rz.scp.css */

/* _content/Sahelly/Components/Pages/PrivacyPolicy.razor.rz.scp.css */

/* ===================================
   Privacy Policy Page - Modern Professional Design
   Based on Users.razor.css architecture
   =================================== */

/* Page Container */
.privacy-policy-page[b-dnucja6tqz] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .privacy-policy-page[b-dnucja6tqz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .privacy-policy-page > *[b-dnucja6tqz] {
        position: relative;
        z-index: 1;
    }

/* Page Header */
.page-header[b-dnucja6tqz] {
    margin-bottom: 40px;
    padding: 48px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.header-background[b-dnucja6tqz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    opacity: 0.7;
}

.animated-gradient[b-dnucja6tqz] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    position: absolute;
    top: 0;
    left: 0;
}

.header-content[b-dnucja6tqz] {
    position: relative;
    z-index: 1;
}

.page-header h1[b-dnucja6tqz] {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.header-subtitle[b-dnucja6tqz] {
    font-size: 18px;
    color: #6b7280;
    margin: 0 auto 16px;
    max-width: 700px;
    font-weight: 400;
}

.last-updated[b-dnucja6tqz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
}

/* Privacy Content Layout */
.privacy-content[b-dnucja6tqz] {
    margin-bottom: 60px;
}

.content-wrapper[b-dnucja6tqz] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

/* Table of Contents */
.table-of-contents[b-dnucja6tqz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .table-of-contents h3[b-dnucja6tqz] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .table-of-contents ul[b-dnucja6tqz] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .table-of-contents li[b-dnucja6tqz] {
        margin-bottom: 12px;
    }

    .table-of-contents a[b-dnucja6tqz] {
        color: #4b5563;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 8px;
        display: block;
        transition: all 0.3s;
        font-weight: 500;
    }

        .table-of-contents a:hover[b-dnucja6tqz] {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            transform: translateX(5px);
        }

/* Main Content */
.privacy-main-content[b-dnucja6tqz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Privacy Sections */
.privacy-section[b-dnucja6tqz] {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .privacy-section:last-child[b-dnucja6tqz] {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }

    .privacy-section h2[b-dnucja6tqz] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        color: #4c1d95;
    }

        .privacy-section h2 i[b-dnucja6tqz] {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 20px;
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
        }

    .privacy-section p[b-dnucja6tqz] {
        color: #4b5563;
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 24px;
    }

    .privacy-section h3[b-dnucja6tqz] {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 16px;
        margin-top: 32px;
        color: #4c1d95;
    }

    .privacy-section h4[b-dnucja6tqz] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 12px;
        color: #4c1d95;
    }

/* Highlight Box */
.highlight-box[b-dnucja6tqz] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

    .highlight-box i[b-dnucja6tqz] {
        font-size: 24px;
        color: #667eea;
        width: 48px;
        height: 48px;
        background: white;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
        flex-shrink: 0;
    }

    .highlight-box p[b-dnucja6tqz] {
        margin: 0;
        font-weight: 500;
        color: #4c1d95;
    }

/* Data Categories */
.data-category[b-dnucja6tqz] {
    margin-bottom: 30px;
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

    .data-category:hover[b-dnucja6tqz] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
    }

    .data-category h3[b-dnucja6tqz] {
        font-size: 18px;
        margin-top: 0;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        color: #4c1d95;
    }

    .data-category ul[b-dnucja6tqz] {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .data-category li[b-dnucja6tqz] {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #4b5563;
        font-weight: 500;
    }

        .data-category li i[b-dnucja6tqz] {
            color: #667eea;
            width: 28px;
            height: 28px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

/* Usage Grid */
.usage-grid[b-dnucja6tqz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.usage-item[b-dnucja6tqz] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .usage-item[b-dnucja6tqz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
    }

    .usage-item:hover[b-dnucja6tqz] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
    }

    .usage-item i[b-dnucja6tqz] {
        font-size: 24px;
        color: #667eea;
        margin-bottom: 16px;
    }

    .usage-item h4[b-dnucja6tqz] {
        font-size: 18px;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .usage-item p[b-dnucja6tqz] {
        color: #4b5563;
        margin: 0;
        font-size: 15px;
    }

/* Protection Measures */
.protection-measures[b-dnucja6tqz] {
    margin-top: 30px;
}

.measure-item[b-dnucja6tqz] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .measure-item:hover[b-dnucja6tqz] {
        transform: translateX(5px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
    }

    .measure-item .icon-wrapper[b-dnucja6tqz] {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
        flex-shrink: 0;
    }

    .measure-item .content h4[b-dnucja6tqz] {
        margin-top: 0;
        margin-bottom: 8px;
        color: #4c1d95;
    }

    .measure-item .content p[b-dnucja6tqz] {
        margin: 0;
        color: #4b5563;
        font-size: 15px;
    }

/* Cookies Types */
.cookies-types[b-dnucja6tqz] {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.cookie-type[b-dnucja6tqz] {
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .cookie-type[b-dnucja6tqz]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cookie-type:hover[b-dnucja6tqz] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
    }

        .cookie-type:hover[b-dnucja6tqz]::after {
            transform: scaleX(1);
        }

    .cookie-type h4[b-dnucja6tqz] {
        margin-top: 0;
        margin-bottom: 16px;
        color: #4c1d95;
        font-size: 18px;
    }

    .cookie-type p[b-dnucja6tqz] {
        margin: 0;
        color: #4b5563;
        font-size: 15px;
    }

/* Third Parties */
.third-parties-list[b-dnucja6tqz] {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.third-party-item[b-dnucja6tqz] {
    background: white;
    padding: 30px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

    .third-party-item:hover[b-dnucja6tqz] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
    }

    .third-party-item i[b-dnucja6tqz] {
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #667eea;
        font-size: 28px;
        margin: 0 auto 20px;
    }

    .third-party-item h4[b-dnucja6tqz] {
        margin-top: 0;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .third-party-item p[b-dnucja6tqz] {
        margin: 0;
        color: #4b5563;
        font-size: 15px;
    }

/* User Rights Grid */
.rights-grid[b-dnucja6tqz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.right-item[b-dnucja6tqz] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .right-item:hover[b-dnucja6tqz] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
    }

    .right-item i[b-dnucja6tqz] {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        margin: 0 auto 20px;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    .right-item h4[b-dnucja6tqz] {
        margin-top: 0;
        margin-bottom: 12px;
        color: #4c1d95;
    }

    .right-item p[b-dnucja6tqz] {
        margin: 0;
        color: #4b5563;
        font-size: 15px;
    }

/* Contact Info */
.contact-info[b-dnucja6tqz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.contact-method[b-dnucja6tqz] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .contact-method:hover[b-dnucja6tqz] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
        border-color: #667eea;
    }

    .contact-method i[b-dnucja6tqz] {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #667eea;
        font-size: 24px;
        flex-shrink: 0;
    }

    .contact-method h4[b-dnucja6tqz] {
        margin-top: 0;
        margin-bottom: 8px;
        color: #4c1d95;
    }

    .contact-method a[b-dnucja6tqz] {
        color: #667eea;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
    }

        .contact-method a:hover[b-dnucja6tqz] {
            color: #4c1d95;
            text-decoration: underline;
        }

    .contact-method p[b-dnucja6tqz] {
        margin: 0;
        color: #4b5563;
    }

/* Dark Theme Support */
[data-theme="dark"] .privacy-policy-page[b-dnucja6tqz] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .privacy-policy-page[b-dnucja6tqz]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .page-header[b-dnucja6tqz],
[data-theme="dark"] .table-of-contents[b-dnucja6tqz],
[data-theme="dark"] .privacy-main-content[b-dnucja6tqz] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .header-subtitle[b-dnucja6tqz] {
    color: #9ca3af;
}

[data-theme="dark"] .last-updated[b-dnucja6tqz] {
    color: #e2e8f0;
    background: linear-gradient(135deg, rgba(90, 108, 179, 0.2) 0%, rgba(98, 81, 139, 0.2) 100%);
}

[data-theme="dark"] .table-of-contents a[b-dnucja6tqz] {
    color: #cbd5e1;
}

    [data-theme="dark"] .table-of-contents a:hover[b-dnucja6tqz] {
        background: rgba(102, 126, 234, 0.2);
        color: #a78bfa;
    }

[data-theme="dark"] .privacy-section h2[b-dnucja6tqz] {
    color: #e2e8f0;
}

[data-theme="dark"] .privacy-section h3[b-dnucja6tqz],
[data-theme="dark"] .privacy-section h4[b-dnucja6tqz] {
    color: #e2e8f0;
}

[data-theme="dark"] .privacy-section p[b-dnucja6tqz] {
    color: #cbd5e1;
}

[data-theme="dark"] .highlight-box[b-dnucja6tqz] {
    background: linear-gradient(135deg, rgba(90, 108, 179, 0.2) 0%, rgba(98, 81, 139, 0.2) 100%);
}

    [data-theme="dark"] .highlight-box i[b-dnucja6tqz] {
        background: #1e293b;
        color: #a78bfa;
    }

    [data-theme="dark"] .highlight-box p[b-dnucja6tqz] {
        color: #e2e8f0;
    }

[data-theme="dark"] .data-category[b-dnucja6tqz],
[data-theme="dark"] .usage-item[b-dnucja6tqz],
[data-theme="dark"] .measure-item[b-dnucja6tqz],
[data-theme="dark"] .cookie-type[b-dnucja6tqz],
[data-theme="dark"] .third-party-item[b-dnucja6tqz],
[data-theme="dark"] .right-item[b-dnucja6tqz],
[data-theme="dark"] .contact-method[b-dnucja6tqz] {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .data-category h3[b-dnucja6tqz] {
        border-color: rgba(71, 85, 105, 0.3);
        color: #e2e8f0;
    }

    [data-theme="dark"] .data-category li[b-dnucja6tqz] {
        color: #cbd5e1;
    }

        [data-theme="dark"] .data-category li i[b-dnucja6tqz] {
            color: #a78bfa;
            background: rgba(167, 139, 250, 0.2);
        }

    [data-theme="dark"] .usage-item h4[b-dnucja6tqz],
    [data-theme="dark"] .measure-item .content h4[b-dnucja6tqz],
    [data-theme="dark"] .cookie-type h4[b-dnucja6tqz],
    [data-theme="dark"] .third-party-item h4[b-dnucja6tqz],
    [data-theme="dark"] .right-item h4[b-dnucja6tqz],
    [data-theme="dark"] .contact-method h4[b-dnucja6tqz] {
        color: #e2e8f0;
    }

    [data-theme="dark"] .usage-item p[b-dnucja6tqz],
    [data-theme="dark"] .measure-item .content p[b-dnucja6tqz],
    [data-theme="dark"] .cookie-type p[b-dnucja6tqz],
    [data-theme="dark"] .third-party-item p[b-dnucja6tqz],
    [data-theme="dark"] .right-item p[b-dnucja6tqz],
    [data-theme="dark"] .contact-method p[b-dnucja6tqz] {
        color: #cbd5e1;
    }

    [data-theme="dark"] .usage-item i[b-dnucja6tqz],
    [data-theme="dark"] .third-party-item i[b-dnucja6tqz] {
        color: #a78bfa;
    }

    [data-theme="dark"] .third-party-item i[b-dnucja6tqz],
    [data-theme="dark"] .contact-method i[b-dnucja6tqz] {
        background: linear-gradient(135deg, rgba(90, 108, 179, 0.2) 0%, rgba(98, 81, 139, 0.2) 100%);
        color: #a78bfa;
    }

    [data-theme="dark"] .contact-method a[b-dnucja6tqz] {
        color: #a78bfa;
    }

        [data-theme="dark"] .contact-method a:hover[b-dnucja6tqz] {
            color: #c4b5fd;
        }

/* Responsive Adjustments */
@media (max-width: 992px) {
    .content-wrapper[b-dnucja6tqz] {
        grid-template-columns: 1fr;
    }

    .table-of-contents[b-dnucja6tqz] {
        position: static;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .page-header[b-dnucja6tqz] {
        padding: 32px 16px;
    }

        .page-header h1[b-dnucja6tqz] {
            font-size: 28px;
        }

    .privacy-main-content[b-dnucja6tqz] {
        padding: 24px;
    }

    .privacy-section h2[b-dnucja6tqz] {
        font-size: 24px;
    }

    .data-category ul[b-dnucja6tqz],
    .usage-grid[b-dnucja6tqz],
    .cookies-types[b-dnucja6tqz],
    .third-parties-list[b-dnucja6tqz],
    .rights-grid[b-dnucja6tqz],
    .contact-info[b-dnucja6tqz] {
        grid-template-columns: 1fr;
    }

    .measure-item[b-dnucja6tqz] {
        flex-direction: column;
        text-align: center;
    }

        .measure-item .icon-wrapper[b-dnucja6tqz] {
            margin-bottom: 16px;
        }
}

/* Print Styles */
@media print {
    .privacy-policy-page[b-dnucja6tqz] {
        background: white;
        padding: 20px;
    }

        .privacy-policy-page[b-dnucja6tqz]::before {
            display: none;
        }

    .page-header[b-dnucja6tqz] {
        background: white;
        box-shadow: none;
        border: none;
    }

    .content-wrapper[b-dnucja6tqz] {
        grid-template-columns: 1fr;
    }

    .table-of-contents[b-dnucja6tqz] {
        display: none;
    }

    .privacy-main-content[b-dnucja6tqz] {
        background: white;
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .data-category[b-dnucja6tqz],
    .usage-item[b-dnucja6tqz],
    .measure-item[b-dnucja6tqz],
    .cookie-type[b-dnucja6tqz],
    .third-party-item[b-dnucja6tqz],
    .right-item[b-dnucja6tqz],
    .contact-method[b-dnucja6tqz] {
        box-shadow: none;
        border: 1px solid #eee;
    }
}
/* _content/Sahelly/Components/Pages/Public/Cart.razor.rz.scp.css */
/* =================================== 
   Shopping Cart - Modern Professional CSS
   Based on the Sahelly Design System
   =================================== */

/* Page Container */
.cart-container[b-3eqh00evpy] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .cart-container[b-3eqh00evpy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .cart-container > *[b-3eqh00evpy] {
        position: relative;
        z-index: 1;
    }

/* Cart Content */
.cart-content[b-3eqh00evpy] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Cart Header */
.cart-header[b-3eqh00evpy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 24px 32px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .cart-header h1[b-3eqh00evpy] {
        font-size: 32px;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
        line-height: 1.2;
    }

        .cart-header h1 i[b-3eqh00evpy] {
            font-size: 28px;
        }

.items-count[b-3eqh00evpy] {
    font-size: 18px;
    font-weight: 500;
    color: #6b7280;
    margin-left: 8px;
}

.clear-cart-btn[b-3eqh00evpy] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%);
    color: #dc2626;
    border: 1px solid rgba(245, 87, 108, 0.3);
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
}

    .clear-cart-btn:hover[b-3eqh00evpy] {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(208, 78, 95, 0.3);
    }

    .clear-cart-btn i[b-3eqh00evpy] {
        font-size: 16px;
    }

/* Cart Main Layout */
.cart-main[b-3eqh00evpy] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
}

/* Cart Items Section */
.cart-items-section[b-3eqh00evpy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Cart Item */
.cart-item[b-3eqh00evpy] {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .cart-item:hover[b-3eqh00evpy] {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        border-color: #667eea;
    }

    .cart-item[b-3eqh00evpy]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
    }

    .cart-item:hover[b-3eqh00evpy]::before {
        opacity: 1;
    }

.item-image[b-3eqh00evpy] {
    width: 100%;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
}

    .item-image img[b-3eqh00evpy] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .item-image:hover img[b-3eqh00evpy] {
        transform: scale(1.08);
    }

.no-image[b-3eqh00evpy] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 32px;
}

.item-details[b-3eqh00evpy] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
}

.item-name[b-3eqh00evpy] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px;
}

.item-sku[b-3eqh00evpy] {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
}

.item-price-info[b-3eqh00evpy] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0 16px;
}

.unit-price[b-3eqh00evpy] {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.original-price[b-3eqh00evpy] {
    font-size: 16px;
    color: #9ca3af;
    text-decoration: line-through;
}

.discount-badge[b-3eqh00evpy] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.item-controls[b-3eqh00evpy] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
}

.quantity-controls[b-3eqh00evpy] {
    display: flex;
    align-items: center;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
    padding: 2px;
}

.qty-btn[b-3eqh00evpy] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    border-radius: 8px;
}

    .qty-btn:hover:not(:disabled)[b-3eqh00evpy] {
        background: rgba(102, 126, 234, 0.2);
    }

    .qty-btn:disabled[b-3eqh00evpy] {
        color: #d1d5db;
        cursor: not-allowed;
    }

.qty-input[b-3eqh00evpy] {
    width: 45px;
    height: 34px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    -moz-appearance: textfield;
}

    .qty-input[b-3eqh00evpy]::-webkit-inner-spin-button,
    .qty-input[b-3eqh00evpy]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.remove-item-btn[b-3eqh00evpy] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(245, 87, 108, 0.1);
    color: #dc2626;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
}

    .remove-item-btn:hover[b-3eqh00evpy] {
        background: rgba(245, 87, 108, 0.2);
        transform: translateY(-1px);
    }

    .remove-item-btn i[b-3eqh00evpy] {
        font-size: 12px;
    }

.item-total[b-3eqh00evpy] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 10px;
}

.total-label[b-3eqh00evpy] {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.total-price[b-3eqh00evpy] {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cart Summary */
.cart-summary[b-3eqh00evpy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: sticky;
    top: 24px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

    .cart-summary h3[b-3eqh00evpy] {
        font-size: 22px;
        font-weight: 700;
        margin: 0 0 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.summary-details[b-3eqh00evpy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row[b-3eqh00evpy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #4b5563;
}

    .summary-row.total[b-3eqh00evpy] {
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        margin-top: 8px;
    }

    .summary-row.discount[b-3eqh00evpy] {
        color: #10b981;
    }

.divider[b-3eqh00evpy] {
    height: 1px;
    background: linear-gradient(to right, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1), rgba(102, 126, 234, 0.1));
    margin: 8px 0;
}

/* Coupon Section */
.coupon-section[b-3eqh00evpy] {
    margin: 8px 0;
}

    .coupon-section h4[b-3eqh00evpy] {
        font-size: 16px;
        font-weight: 600;
        color: #4b5563;
        margin: 0 0 12px;
    }

.coupon-input-group[b-3eqh00evpy] {
    display: flex;
    gap: 8px;
}

.coupon-input[b-3eqh00evpy] {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s;
}

    .coupon-input:focus[b-3eqh00evpy] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.apply-coupon-btn[b-3eqh00evpy] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(90, 108, 179, 0.2);
}

    .apply-coupon-btn:hover:not(:disabled)[b-3eqh00evpy] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(90, 108, 179, 0.3);
    }

    .apply-coupon-btn:disabled[b-3eqh00evpy] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.coupon-message[b-3eqh00evpy] {
    font-size: 13px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .coupon-message.success[b-3eqh00evpy] {
        color: #10b981;
    }

    .coupon-message.error[b-3eqh00evpy] {
        color: #dc2626;
    }

/* Checkout Button */
.checkout-btn[b-3eqh00evpy] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    color: white;
    border: none;
    width: 100%;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(59, 201, 104, 0.2);
}

    .checkout-btn:hover:not(:disabled)[b-3eqh00evpy] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(59, 201, 104, 0.3);
    }

    .checkout-btn:disabled[b-3eqh00evpy] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .checkout-btn i[b-3eqh00evpy] {
        font-size: 16px;
    }

/* Security Info */
.security-info[b-3eqh00evpy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
    color: #6b7280;
    font-size: 14px;
}

    .security-info i[b-3eqh00evpy] {
        color: #10b981;
    }

/* Continue Shopping */
.continue-shopping-link[b-3eqh00evpy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    padding: 8px;
    border-radius: 10px;
}

    .continue-shopping-link:hover[b-3eqh00evpy] {
        color: #4f46e5;
        background: rgba(102, 126, 234, 0.1);
    }

/* Empty Cart */
.empty-cart[b-3eqh00evpy] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    margin: 0 auto;
}

.empty-icon[b-3eqh00evpy] {
    font-size: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
}

.empty-cart h3[b-3eqh00evpy] {
    font-size: 28px;
    color: #4c1d95;
    margin-bottom: 12px;
    font-weight: 700;
}

.empty-cart p[b-3eqh00evpy] {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 32px;
}

.continue-shopping-btn[b-3eqh00evpy] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(90, 108, 179, 0.3);
    text-decoration: none;
}

    .continue-shopping-btn:hover[b-3eqh00evpy] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(90, 108, 179, 0.4);
    }

/* Loading Container */
.loading-container[b-3eqh00evpy] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-container[b-3eqh00evpy] {
    text-align: center;
}

.spinner[b-3eqh00evpy] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-3eqh00evpy 0.8s linear infinite;
    margin: 0 auto 20px;
}

.spinner-container p[b-3eqh00evpy] {
    font-size: 18px;
    color: #6b7280;
}

.spinner-small[b-3eqh00evpy] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right-color: white;
    border-radius: 50%;
    animation: spin-b-3eqh00evpy 0.8s linear infinite;
    display: inline-block;
}

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

/* Dark Theme */
[data-theme="dark"] .cart-container[b-3eqh00evpy] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .cart-container[b-3eqh00evpy]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .cart-header[b-3eqh00evpy],
[data-theme="dark"] .cart-item[b-3eqh00evpy],
[data-theme="dark"] .cart-summary[b-3eqh00evpy],
[data-theme="dark"] .empty-cart[b-3eqh00evpy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .item-name[b-3eqh00evpy] {
    color: #e2e8f0;
}

[data-theme="dark"] .item-sku[b-3eqh00evpy] {
    color: #94a3b8;
}

[data-theme="dark"] .no-image[b-3eqh00evpy] {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    color: #64748b;
}

[data-theme="dark"] .qty-input[b-3eqh00evpy] {
    color: #e2e8f0;
}

[data-theme="dark"] .summary-row[b-3eqh00evpy] {
    color: #cbd5e1;
}

    [data-theme="dark"] .summary-row.total[b-3eqh00evpy] {
        color: #f1f5f9;
    }

[data-theme="dark"] .coupon-input[b-3eqh00evpy] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(102, 126, 234, 0.3);
}

    [data-theme="dark"] .coupon-input:focus[b-3eqh00evpy] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .coupon-section h4[b-3eqh00evpy] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-cart h3[b-3eqh00evpy] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-cart p[b-3eqh00evpy] {
    color: #94a3b8;
}

[data-theme="dark"] .security-info[b-3eqh00evpy] {
    color: #94a3b8;
}

[data-theme="dark"] .quantity-controls[b-3eqh00evpy] {
    background: rgba(102, 126, 234, 0.2);
}

/* Responsive Design */
@media (max-width: 992px) {
    .cart-main[b-3eqh00evpy] {
        grid-template-columns: 1fr;
    }

    .cart-header[b-3eqh00evpy] {
        padding: 20px;
    }

        .cart-header h1[b-3eqh00evpy] {
            font-size: 24px;
        }

            .cart-header h1 i[b-3eqh00evpy] {
                font-size: 22px;
            }
}

@media (max-width: 768px) {
    .cart-container[b-3eqh00evpy] {
        padding: 16px;
    }

    .cart-item[b-3eqh00evpy] {
        grid-template-columns: 100px 1fr;
        grid-template-rows: auto auto;
        padding: 16px;
    }

    .item-image[b-3eqh00evpy] {
        height: 100px;
        grid-row: 1 / 3;
    }

    .item-details[b-3eqh00evpy] {
        grid-column: 2;
    }

    .item-total[b-3eqh00evpy] {
        grid-column: 2;
        grid-row: 2;
        align-items: flex-start;
        padding-left: 0;
    }

    .item-name[b-3eqh00evpy] {
        font-size: 16px;
    }

    .item-controls[b-3eqh00evpy] {
        margin-top: 12px;
    }

    .empty-cart[b-3eqh00evpy] {
        padding: 60px 20px;
    }

    .empty-icon[b-3eqh00evpy] {
        font-size: 80px;
    }

    .empty-cart h3[b-3eqh00evpy] {
        font-size: 24px;
    }

    .empty-cart p[b-3eqh00evpy] {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .cart-header[b-3eqh00evpy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .clear-cart-btn[b-3eqh00evpy] {
        width: 100%;
        justify-content: center;
    }

    .item-controls[b-3eqh00evpy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .remove-item-btn[b-3eqh00evpy] {
        width: 100%;
        justify-content: center;
    }

    .unit-price[b-3eqh00evpy] {
        font-size: 18px;
    }

    .original-price[b-3eqh00evpy] {
        font-size: 14px;
    }

    .cart-summary[b-3eqh00evpy] {
        padding: 20px;
    }

        .cart-summary h3[b-3eqh00evpy] {
            font-size: 20px;
        }

    .coupon-input-group[b-3eqh00evpy] {
        flex-direction: column;
    }

    .apply-coupon-btn[b-3eqh00evpy] {
        width: 100%;
    }
}

/* RTL Support */
html[dir="rtl"] .item-total[b-3eqh00evpy] {
    align-items: flex-start;
}

html[dir="rtl"] .item-controls[b-3eqh00evpy] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .cart-item[b-3eqh00evpy] {
    direction: rtl;
}

/* Print Styles */
@media print {
    .cart-container[b-3eqh00evpy] {
        background: white !important;
        padding: 0;
    }

        .cart-container[b-3eqh00evpy]::before {
            display: none;
        }

    .cart-header[b-3eqh00evpy],
    .cart-item[b-3eqh00evpy],
    .cart-summary[b-3eqh00evpy],
    .empty-cart[b-3eqh00evpy] {
        box-shadow: none;
        border: 1px solid #e5e7eb;
        background: white !important;
        break-inside: avoid;
    }

    .clear-cart-btn[b-3eqh00evpy],
    .coupon-section[b-3eqh00evpy],
    .checkout-btn[b-3eqh00evpy],
    .continue-shopping-link[b-3eqh00evpy],
    .security-info[b-3eqh00evpy] {
        display: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .cart-item[b-3eqh00evpy],
    .cart-summary[b-3eqh00evpy],
    .empty-cart[b-3eqh00evpy],
    .cart-header[b-3eqh00evpy] {
        border: 2px solid #000;
    }

        .unit-price[b-3eqh00evpy],
        .total-price[b-3eqh00evpy],
        .cart-header h1[b-3eqh00evpy],
        .cart-summary h3[b-3eqh00evpy] {
            background: none;
            -webkit-text-fill-color: currentColor;
        }

    .checkout-btn[b-3eqh00evpy],
    .continue-shopping-btn[b-3eqh00evpy] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-3eqh00evpy] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/CategoriesPge.razor.rz.scp.css */

/* ===================================
   Categories Page - Modern E-Commerce Design
   Following Sahelly Design System
   =================================== */

/* Page Container */
.categories-page[b-6irpctbuxk] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
}

/* Hero Section */
.hero-section[b-6irpctbuxk] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 80px 0 60px;
    margin-bottom: 48px;
}

.hero-background[b-6irpctbuxk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.animated-gradient[b-6irpctbuxk] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient( 45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.1) 100% );
    animation: gradientShift-b-6irpctbuxk 20s ease infinite;
}

@keyframes gradientShift-b-6irpctbuxk {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-25%, -25%) rotate(180deg);
    }

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

.floating-shapes[b-6irpctbuxk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    .floating-shapes[b-6irpctbuxk]::before,
    .floating-shapes[b-6irpctbuxk]::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        animation: float-b-6irpctbuxk 20s infinite;
    }

    .floating-shapes[b-6irpctbuxk]::before {
        width: 300px;
        height: 300px;
        top: -150px;
        right: -150px;
    }

    .floating-shapes[b-6irpctbuxk]::after {
        width: 200px;
        height: 200px;
        bottom: -100px;
        left: -100px;
        animation-delay: -10s;
    }

@keyframes float-b-6irpctbuxk {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) rotate(180deg);
    }
}

.hero-content[b-6irpctbuxk] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero-title[b-6irpctbuxk] {
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hero-subtitle[b-6irpctbuxk] {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    font-weight: 400;
}

/* Search Box */
.category-search[b-6irpctbuxk] {
    max-width: 600px;
    margin: 0 auto;
}

.search-box[b-6irpctbuxk] {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 60px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .search-box:hover[b-6irpctbuxk],
    .search-box:focus-within[b-6irpctbuxk] {
        transform: translateY(-2px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }

    .search-box i[b-6irpctbuxk] {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
        font-size: 20px;
    }

    .search-box input[b-6irpctbuxk] {
        width: 100%;
        padding: 20px 24px 20px 60px;
        border: none;
        background: transparent;
        font-size: 16px;
        color: #1e293b;
        font-weight: 500;
    }

        .search-box input[b-6irpctbuxk]::placeholder {
            color: #94a3b8;
        }

        .search-box input:focus[b-6irpctbuxk] {
            outline: none;
        }

/* Section Headers */
.section-header[b-6irpctbuxk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

    .section-header h2[b-6irpctbuxk] {
        font-size: 32px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

/* View Options */
.view-options[b-6irpctbuxk] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.view-btn[b-6irpctbuxk] {
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #667eea;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

    .view-btn:hover[b-6irpctbuxk] {
        color: #764ba2;
        background: rgba(102, 126, 234, 0.1);
    }

    .view-btn.active[b-6irpctbuxk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

/* Featured Categories */
.featured-categories[b-6irpctbuxk] {
    margin-bottom: 64px;
}

.featured-grid[b-6irpctbuxk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.featured-category-card[b-6irpctbuxk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

    .featured-category-card[b-6irpctbuxk]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 0;
    }

    .featured-category-card:hover[b-6irpctbuxk] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

        .featured-category-card:hover[b-6irpctbuxk]::before {
            opacity: 0.05;
        }

.category-banner[b-6irpctbuxk] {
    height: 200px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

    .category-banner img[b-6irpctbuxk] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

.featured-category-card:hover .category-banner img[b-6irpctbuxk] {
    transform: scale(1.1);
}

.banner-placeholder[b-6irpctbuxk] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

    .banner-placeholder i[b-6irpctbuxk] {
        font-size: 60px;
        color: #667eea;
        opacity: 0.5;
    }

.category-info[b-6irpctbuxk] {
    padding: 24px;
    position: relative;
    z-index: 1;
}

    .category-info h3[b-6irpctbuxk] {
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8px;
    }

    .category-info p[b-6irpctbuxk] {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 16px;
        line-height: 1.6;
    }

.category-stats[b-6irpctbuxk] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-count[b-6irpctbuxk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

    .product-count i[b-6irpctbuxk] {
        color: #667eea;
    }

.new-badge[b-6irpctbuxk] {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* All Categories Container */
.categories-container[b-6irpctbuxk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .categories-container.grid[b-6irpctbuxk] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 24px;
    }

/* Category Item */
.category-item[b-6irpctbuxk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .category-item:hover[b-6irpctbuxk] {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    }

.parent-category[b-6irpctbuxk] {
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative;
}

.category-main[b-6irpctbuxk] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

    .category-main:hover[b-6irpctbuxk] {
        transform: translateX(4px);
    }

.category-icon[b-6irpctbuxk] {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .category-icon img[b-6irpctbuxk] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .category-icon i[b-6irpctbuxk] {
        font-size: 32px;
        color: #667eea;
    }

.category-details h3[b-6irpctbuxk] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.category-details p[b-6irpctbuxk] {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.5;
}

.category-meta[b-6irpctbuxk] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

    .category-meta span[b-6irpctbuxk] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

.expand-btn[b-6irpctbuxk] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: none;
    color: #667eea;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

    .expand-btn:hover[b-6irpctbuxk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

/* Subcategories */
.subcategories[b-6irpctbuxk] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    padding: 20px;
    animation: slideDown-b-6irpctbuxk 0.3s ease;
}

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

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

.subcategory-item[b-6irpctbuxk] {
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 12px;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

    .subcategory-item:last-child[b-6irpctbuxk] {
        margin-bottom: 0;
    }

    .subcategory-item:hover[b-6irpctbuxk] {
        transform: translateX(8px);
        border-color: #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

.subcategory-icon[b-6irpctbuxk] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

    .subcategory-icon img[b-6irpctbuxk] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .subcategory-icon i[b-6irpctbuxk] {
        font-size: 20px;
        color: #667eea;
    }

.subcategory-info[b-6irpctbuxk] {
    flex: 1;
}

    .subcategory-info h4[b-6irpctbuxk] {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .subcategory-info .count[b-6irpctbuxk] {
        font-size: 13px;
        color: #94a3b8;
    }

.navigate-icon[b-6irpctbuxk] {
    color: #cbd5e1;
    transition: all 0.3s;
}

.subcategory-item:hover .navigate-icon[b-6irpctbuxk] {
    color: #667eea;
    transform: translateX(4px);
}

/* No Categories Found */
.no-categories[b-6irpctbuxk] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .no-categories i[b-6irpctbuxk] {
        font-size: 80px;
        color: #e2e8f0;
        margin-bottom: 24px;
    }

    .no-categories h3[b-6irpctbuxk] {
        font-size: 24px;
        color: #64748b;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .no-categories p[b-6irpctbuxk] {
        font-size: 16px;
        color: #94a3b8;
    }

/* Popular Products Section */
.popular-products-section[b-6irpctbuxk] {
    margin-top: 64px;
    margin-bottom: 48px;
}

.category-products[b-6irpctbuxk] {
    margin-bottom: 48px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.category-header[b-6irpctbuxk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .category-header h3[b-6irpctbuxk] {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
    }

        .category-header h3 i[b-6irpctbuxk] {
            color: #f59e0b;
        }

.view-all[b-6irpctbuxk] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

    .view-all:hover[b-6irpctbuxk] {
        color: #764ba2;
        transform: translateX(-4px);
    }

.products-carousel[b-6irpctbuxk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.product-card.compact[b-6irpctbuxk] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0;
}

    .product-card.compact:hover[b-6irpctbuxk] {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        border-color: #667eea;
    }

.product-card .product-image[b-6irpctbuxk] {
    height: 180px;
    overflow: hidden;
    background: #f8fafc;
}

    .product-card .product-image img[b-6irpctbuxk] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
    }

.product-card:hover .product-image img[b-6irpctbuxk] {
    transform: scale(1.05);
}

.product-card .no-image[b-6irpctbuxk] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

    .product-card .no-image i[b-6irpctbuxk] {
        font-size: 48px;
        color: #cbd5e1;
    }

.product-card .product-info[b-6irpctbuxk] {
    padding: 16px;
}

    .product-card .product-info h4[b-6irpctbuxk] {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 8px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.product-card .price[b-6irpctbuxk] {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Loading States */
.categories-loading[b-6irpctbuxk] {
    padding: 40px 0;
}

.loading-grid[b-6irpctbuxk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.category-skeleton[b-6irpctbuxk] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.skeleton-icon[b-6irpctbuxk] {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer-b-6irpctbuxk 1.5s infinite;
    flex-shrink: 0;
}

.skeleton-content[b-6irpctbuxk] {
    flex: 1;
}

.skeleton-line[b-6irpctbuxk] {
    height: 16px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer-b-6irpctbuxk 1.5s infinite;
    border-radius: 8px;
    margin-bottom: 12px;
}

    .skeleton-line.short[b-6irpctbuxk] {
        width: 60%;
    }

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

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

/* Dark Theme Support */
[data-theme="dark"] .categories-page[b-6irpctbuxk] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .hero-section[b-6irpctbuxk] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .search-box[b-6irpctbuxk] {
    background: rgba(30, 41, 59, 0.95);
}

    [data-theme="dark"] .search-box input[b-6irpctbuxk] {
        color: #f1f5f9;
    }

[data-theme="dark"] .featured-category-card[b-6irpctbuxk],
[data-theme="dark"] .category-item[b-6irpctbuxk],
[data-theme="dark"] .category-products[b-6irpctbuxk],
[data-theme="dark"] .no-categories[b-6irpctbuxk] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .category-info h3[b-6irpctbuxk],
[data-theme="dark"] .category-details h3[b-6irpctbuxk],
[data-theme="dark"] .category-header h3[b-6irpctbuxk],
[data-theme="dark"] .subcategory-info h4[b-6irpctbuxk],
[data-theme="dark"] .product-card .product-info h4[b-6irpctbuxk] {
    color: #f1f5f9;
}

[data-theme="dark"] .category-info p[b-6irpctbuxk],
[data-theme="dark"] .category-details p[b-6irpctbuxk] {
    color: #94a3b8;
}

[data-theme="dark"] .product-count[b-6irpctbuxk],
[data-theme="dark"] .category-meta[b-6irpctbuxk],
[data-theme="dark"] .subcategory-info .count[b-6irpctbuxk] {
    color: #cbd5e1;
}

[data-theme="dark"] .subcategory-item[b-6irpctbuxk] {
    background: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .subcategory-item:hover[b-6irpctbuxk] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .product-card.compact[b-6irpctbuxk] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .view-all[b-6irpctbuxk] {
    color: #a78bfa;
}

    [data-theme="dark"] .view-all:hover[b-6irpctbuxk] {
        color: #c084fc;
    }

[data-theme="dark"] .expand-btn[b-6irpctbuxk] {
    color: #a78bfa;
}

    [data-theme="dark"] .expand-btn:hover[b-6irpctbuxk] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

[data-theme="dark"] .view-btn[b-6irpctbuxk] {
    color: #a78bfa;
}

    [data-theme="dark"] .view-btn.active[b-6irpctbuxk] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

[data-theme="dark"] .navigate-icon[b-6irpctbuxk] {
    color: #64748b;
}

[data-theme="dark"] .subcategory-item:hover .navigate-icon[b-6irpctbuxk] {
    color: #a78bfa;
}

[data-theme="dark"] .category-skeleton[b-6irpctbuxk],
[data-theme="dark"] .skeleton-icon[b-6irpctbuxk],
[data-theme="dark"] .skeleton-line[b-6irpctbuxk] {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
}

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

@media (max-width: 768px) {
    .hero-title[b-6irpctbuxk] {
        font-size: 36px;
    }

    .hero-subtitle[b-6irpctbuxk] {
        font-size: 18px;
    }

    .section-header[b-6irpctbuxk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

        .section-header h2[b-6irpctbuxk] {
            font-size: 28px;
        }

    .categories-container.grid[b-6irpctbuxk] {
        grid-template-columns: 1fr;
    }

    .featured-grid[b-6irpctbuxk] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .category-main[b-6irpctbuxk] {
        flex-direction: column;
        text-align: center;
    }

    .products-carousel[b-6irpctbuxk] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .category-header[b-6irpctbuxk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .category-products[b-6irpctbuxk] {
        padding: 20px;
    }

    .loading-grid[b-6irpctbuxk] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-section[b-6irpctbuxk] {
        padding: 60px 0 40px;
    }

    .hero-title[b-6irpctbuxk] {
        font-size: 28px;
    }

    .hero-subtitle[b-6irpctbuxk] {
        font-size: 16px;
    }

    .search-box input[b-6irpctbuxk] {
        padding: 16px 20px 16px 48px;
        font-size: 14px;
    }

    .category-icon[b-6irpctbuxk] {
        width: 60px;
        height: 60px;
    }

    .parent-category[b-6irpctbuxk] {
        padding: 16px;
    }

    .subcategory-icon[b-6irpctbuxk] {
        width: 40px;
        height: 40px;
    }

    .product-card .product-image[b-6irpctbuxk] {
        height: 150px;
    }
}

/* RTL Support */
html[dir="rtl"] .category-main:hover[b-6irpctbuxk] {
    transform: translateX(-4px);
}

html[dir="rtl"] .subcategory-item:hover[b-6irpctbuxk] {
    transform: translateX(-8px);
}

html[dir="rtl"] .subcategory-icon[b-6irpctbuxk] {
    margin-right: 0;
    margin-left: 16px;
}

html[dir="rtl"] .view-all:hover[b-6irpctbuxk] {
    transform: translateX(4px);
}

html[dir="rtl"] .navigate-icon[b-6irpctbuxk] {
    transform: scaleX(-1);
}

html[dir="rtl"] .subcategory-item:hover .navigate-icon[b-6irpctbuxk] {
    transform: translateX(-4px) scaleX(-1);
}

html[dir="rtl"] .search-box i[b-6irpctbuxk] {
    left: auto;
    right: 24px;
}

html[dir="rtl"] .search-box input[b-6irpctbuxk] {
    padding: 20px 60px 20px 24px;
}

/* Print Styles */
@media print {
    .hero-section[b-6irpctbuxk],
    .view-options[b-6irpctbuxk],
    .expand-btn[b-6irpctbuxk],
    .navigate-icon[b-6irpctbuxk] {
        display: none !important;
    }

    .categories-page[b-6irpctbuxk] {
        background: white !important;
    }

    .category-item[b-6irpctbuxk],
    .featured-category-card[b-6irpctbuxk] {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* Focus States for Accessibility */
.view-btn:focus[b-6irpctbuxk],
.expand-btn:focus[b-6irpctbuxk],
.search-box input:focus[b-6irpctbuxk] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.featured-category-card:focus[b-6irpctbuxk],
.category-main:focus[b-6irpctbuxk],
.subcategory-item:focus[b-6irpctbuxk],
.product-card:focus[b-6irpctbuxk] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .featured-category-card[b-6irpctbuxk],
    .category-item[b-6irpctbuxk],
    .subcategory-item[b-6irpctbuxk],
    .product-card[b-6irpctbuxk] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-6irpctbuxk] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/Checkout.razor.rz.scp.css */

/* ===================================
   Checkout Page - Modern Professional CSS
   تصميم صفحة الدفع بأسلوب احترافي حديث
   =================================== */

/* Page Container - Modern E-Commerce Style */
.checkout-page[b-js9844a4hx] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .checkout-page[b-js9844a4hx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .checkout-page > *[b-js9844a4hx] {
        position: relative;
        z-index: 1;
    }

/* Loading State */
.checkout-loading[b-js9844a4hx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

.loading-spinner[b-js9844a4hx] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-js9844a4hx 1s linear infinite;
    margin-bottom: 20px;
}

.checkout-loading p[b-js9844a4hx] {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Empty Cart State */
.empty-cart[b-js9844a4hx] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 600px;
}

    .empty-cart i[b-js9844a4hx] {
        font-size: 120px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-cart h3[b-js9844a4hx] {
        font-size: 32px;
        color: var(--text-primary);
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-cart p[b-js9844a4hx] {
        font-size: 18px;
        color: var(--text-secondary);
        margin-bottom: 30px;
    }

.btn-continue-shopping[b-js9844a4hx] {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-continue-shopping:hover[b-js9844a4hx] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Checkout Header */
.checkout-header[b-js9844a4hx] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .checkout-header h1[b-js9844a4hx] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
        line-height: 1.2;
    }

/* Checkout Steps Indicator */
.checkout-steps[b-js9844a4hx] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
}

    .checkout-steps[b-js9844a4hx]::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 20%;
        right: 20%;
        height: 2px;
        background: linear-gradient(90deg, var(--border-color) 0%, var(--primary-color) 50%, var(--border-color) 100%);
        z-index: 0;
    }

.step[b-js9844a4hx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    min-width: 120px;
}

.step-number[b-js9844a4hx] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

.step-title[b-js9844a4hx] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    transition: color 0.3s;
}

.step.active .step-number[b-js9844a4hx] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: var(--glow-primary);
    transform: scale(1.1);
}

.step.active .step-title[b-js9844a4hx] {
    color: var(--primary-color);
}

.step.completed .step-number[b-js9844a4hx] {
    background: var(--gradient-success);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(59, 201, 104, 0.3);
}

.step.completed .step-title[b-js9844a4hx] {
    color: var(--success-color);
}

/* Main Content Layout */
.checkout-content[b-js9844a4hx] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.checkout-main[b-js9844a4hx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .checkout-main[b-js9844a4hx]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .checkout-main:hover[b-js9844a4hx]::before {
        opacity: 1;
    }

/* Checkout Step Base Styles */
.checkout-step[b-js9844a4hx] {
    animation: fadeInUp-b-js9844a4hx 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

    .checkout-step h2[b-js9844a4hx] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .checkout-step h2[b-js9844a4hx]::before {
            content: '';
            width: 4px;
            height: 32px;
            background: var(--gradient-primary);
            border-radius: 2px;
        }

    .checkout-step h3[b-js9844a4hx] {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .checkout-step h3[b-js9844a4hx]::before {
            content: '';
            width: 3px;
            height: 20px;
            background: var(--gradient-secondary);
            border-radius: 2px;
        }

/* Form Styles */
.form-grid[b-js9844a4hx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.form-group[b-js9844a4hx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-js9844a4hx] {
        grid-column: 1 / -1;
    }

    .form-group label[b-js9844a4hx] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-group input[b-js9844a4hx],
    .form-group select[b-js9844a4hx] {
        padding: 14px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 15px;
        color: var(--text-primary);
        min-height: 48px;
    }

        .form-group input:hover[b-js9844a4hx],
        .form-group select:hover[b-js9844a4hx] {
            border-color: var(--border-hover);
            background: rgba(102, 126, 234, 0.08);
        }

        .form-group input:focus[b-js9844a4hx],
        .form-group select:focus[b-js9844a4hx] {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        .form-group input[b-js9844a4hx]::placeholder {
            color: var(--text-tertiary);
        }

/* Contact Info Section */
.contact-info[b-js9844a4hx] {
    margin-bottom: 40px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Shipping Address Section */
.shipping-address[b-js9844a4hx] {
    margin-bottom: 40px;
}

.saved-addresses[b-js9844a4hx] {
    margin-bottom: 32px;
}

    .saved-addresses h4[b-js9844a4hx] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

.address-option[b-js9844a4hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .address-option[b-js9844a4hx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-primary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .address-option:hover[b-js9844a4hx] {
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

        .address-option:hover[b-js9844a4hx]::before {
            transform: scaleY(1);
        }

    .address-option.selected[b-js9844a4hx] {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    }

        .address-option.selected[b-js9844a4hx]::before {
            transform: scaleY(1);
        }

.address-content[b-js9844a4hx] {
    flex: 1;
}

.address-text[b-js9844a4hx] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.address-city[b-js9844a4hx] {
    font-size: 14px;
    color: var(--text-secondary);
}

.address-actions[b-js9844a4hx] {
    display: flex;
    gap: 8px;
}

.btn-edit[b-js9844a4hx] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

    .btn-edit:hover[b-js9844a4hx] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* New Address Section */
.new-address[b-js9844a4hx] {
    padding: 24px;
    background: rgba(118, 75, 162, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(118, 75, 162, 0.1);
}

.address-toggle[b-js9844a4hx] {
    margin-bottom: 20px;
}

    .address-toggle label[b-js9844a4hx] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .address-toggle label input[type="checkbox"][b-js9844a4hx] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

.address-form[b-js9844a4hx] {
    animation: slideDown-b-js9844a4hx 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shipping Method Section */
.shipping-method[b-js9844a4hx] {
    margin-bottom: 40px;
}

.shipping-option[b-js9844a4hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .shipping-option[b-js9844a4hx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-secondary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .shipping-option:hover[b-js9844a4hx] {
        border-color: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);
    }

        .shipping-option:hover[b-js9844a4hx]::before {
            transform: scaleY(1);
        }

    .shipping-option.selected[b-js9844a4hx] {
        border-color: var(--secondary-color);
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(45, 212, 191, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
    }

        .shipping-option.selected[b-js9844a4hx]::before {
            transform: scaleY(1);
        }

.method-info h4[b-js9844a4hx] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.method-info p[b-js9844a4hx] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.delivery-time[b-js9844a4hx] {
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
}

.method-cost[b-js9844a4hx] {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Payment Methods Section */
.payment-methods[b-js9844a4hx] {
    margin-bottom: 40px;
}

.payment-method[b-js9844a4hx] {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

    .payment-method[b-js9844a4hx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-warm);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .payment-method:hover[b-js9844a4hx] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
    }

        .payment-method:hover[b-js9844a4hx]::before {
            transform: scaleY(1);
        }

    .payment-method.selected[b-js9844a4hx] {
        border-color: var(--accent-color);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
    }

        .payment-method.selected[b-js9844a4hx]::before {
            transform: scaleY(1);
        }

.method-header[b-js9844a4hx] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.method-logo[b-js9844a4hx] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .method-logo img[b-js9844a4hx] {
        max-width: 40px;
        max-height: 40px;
        object-fit: contain;
    }

    .method-logo i[b-js9844a4hx] {
        font-size: 24px;
        color: var(--accent-color);
    }

.method-info[b-js9844a4hx] {
    flex: 1;
}

    .method-info h3[b-js9844a4hx] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .method-info p[b-js9844a4hx] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.fee-info[b-js9844a4hx] {
    font-size: 13px;
    color: var(--warning-color);
    font-weight: 500;
}

/* Card Details Section */
.card-details[b-js9844a4hx] {
    padding: 24px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    animation: slideDown-b-js9844a4hx 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .card-details h4[b-js9844a4hx] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
    }

.expiry-inputs[b-js9844a4hx] {
    display: flex;
    gap: 12px;
}

    .expiry-inputs select[b-js9844a4hx] {
        flex: 1;
    }

/* Step Actions */
.step-actions[b-js9844a4hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.btn-back[b-js9844a4hx],
.btn-next[b-js9844a4hx],
.btn-place-order[b-js9844a4hx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-back[b-js9844a4hx] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: var(--text-secondary);
}

    .btn-back:hover[b-js9844a4hx] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.btn-next[b-js9844a4hx] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-next:hover[b-js9844a4hx] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .btn-next:disabled[b-js9844a4hx] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-place-order[b-js9844a4hx] {
    background: var(--gradient-success);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    position: relative;
}

    .btn-place-order:hover:not(:disabled)[b-js9844a4hx] {
        transform: translateY(-3px);
        box-shadow: var(--glow-secondary), 0 8px 25px rgba(16, 185, 129, 0.4);
    }

    .btn-place-order:disabled[b-js9844a4hx] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Loading States */
.loading-section[b-js9844a4hx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
}

.spinner[b-js9844a4hx] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-js9844a4hx 1s linear infinite;
    margin-bottom: 16px;
}

/* No Options States */
.no-payment-methods[b-js9844a4hx],
.no-installment-available[b-js9844a4hx],
.no-installment-options[b-js9844a4hx] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(248, 113, 113, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.1);
}

    .no-payment-methods i[b-js9844a4hx],
    .no-installment-available i[b-js9844a4hx],
    .no-installment-options i[b-js9844a4hx] {
        font-size: 48px;
        color: var(--warning-color);
        margin-bottom: 16px;
        display: block;
    }

    .no-payment-methods p[b-js9844a4hx],
    .no-installment-available p[b-js9844a4hx],
    .no-installment-options p[b-js9844a4hx] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

/* Order Review Section */
.order-review[b-js9844a4hx] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.review-section[b-js9844a4hx] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .review-section:hover[b-js9844a4hx] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-color);
    }

    .review-section h3[b-js9844a4hx] {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

.review-content[b-js9844a4hx] {
    margin-bottom: 16px;
}

    .review-content p[b-js9844a4hx] {
        margin-bottom: 8px;
        font-size: 15px;
        color: var(--text-primary);
    }

        .review-content p strong[b-js9844a4hx] {
            color: var(--text-primary);
            font-weight: 600;
            margin-right: 8px;
        }

.btn-edit-small[b-js9844a4hx] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    top: 20px;
    right: 20px;
}

    .btn-edit-small:hover[b-js9844a4hx] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* Order Items Review */
.order-items-review[b-js9844a4hx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-item[b-js9844a4hx] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    transition: all 0.3s;
}

    .review-item:hover[b-js9844a4hx] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

.item-image[b-js9844a4hx] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

    .item-image img[b-js9844a4hx] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.item-info[b-js9844a4hx] {
    flex: 1;
}

    .item-info h4[b-js9844a4hx] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .item-info p[b-js9844a4hx] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.item-total[b-js9844a4hx] {
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Order Totals */
.review-totals[b-js9844a4hx] {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 20px;
}

.total-line[b-js9844a4hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-primary);
}

    .total-line.discount[b-js9844a4hx] {
        color: var(--success-color);
    }

    .total-line.total[b-js9844a4hx] {
        border-top: 1px solid var(--border-color);
        margin-top: 8px;
        padding-top: 16px;
        font-size: 18px;
        font-weight: 700;
    }

    .total-line.highlight[b-js9844a4hx] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        margin: 8px -8px;
        padding: 12px 8px;
        border-radius: 6px;
        font-weight: 600;
        color: var(--primary-color);
    }

.installment-breakdown[b-js9844a4hx] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Terms Agreement */
.terms-agreement[b-js9844a4hx] {
    margin: 32px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .terms-agreement label[b-js9844a4hx] {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .terms-agreement label input[type="checkbox"][b-js9844a4hx] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

        .terms-agreement label a[b-js9844a4hx] {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
        }

            .terms-agreement label a:hover[b-js9844a4hx] {
                text-decoration: underline;
            }

/* Order Summary Panel (Sidebar) */
.checkout-sidebar[b-js9844a4hx] {
    position: sticky;
    top: 24px;
}

.order-summary[b-js9844a4hx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .order-summary[b-js9844a4hx]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .order-summary:hover[b-js9844a4hx]::before {
        opacity: 1;
    }

    .order-summary h3[b-js9844a4hx] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
    }

/* Summary Items */
.summary-items[b-js9844a4hx] {
    margin-bottom: 24px;
}

.summary-item[b-js9844a4hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.item-details[b-js9844a4hx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name[b-js9844a4hx] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.item-quantity[b-js9844a4hx] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-price[b-js9844a4hx] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Summary Totals */
.summary-totals[b-js9844a4hx] {
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    margin-bottom: 24px;
}

/* Discount Code Section */
.discount-code[b-js9844a4hx] {
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.discount-toggle[b-js9844a4hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background-color 0.3s;
}

    .discount-toggle:hover[b-js9844a4hx] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .discount-toggle span[b-js9844a4hx] {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .discount-toggle i[b-js9844a4hx] {
        color: var(--primary-color);
        transition: transform 0.3s;
    }

.discount-form[b-js9844a4hx] {
    padding: 20px;
    background: white;
    display: flex;
    gap: 8px;
    animation: slideDown-b-js9844a4hx 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .discount-form input[b-js9844a4hx] {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
    }

        .discount-form input:focus[b-js9844a4hx] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

    .discount-form button[b-js9844a4hx] {
        background: var(--gradient-primary);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .discount-form button:hover:not(:disabled)[b-js9844a4hx] {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .discount-form button:disabled[b-js9844a4hx] {
            opacity: 0.6;
            cursor: not-allowed;
        }

.applied-discount[b-js9844a4hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.discount-info[b-js9844a4hx] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success-color);
    font-weight: 600;
}

    .discount-info i[b-js9844a4hx] {
        font-size: 16px;
    }

.remove-discount[b-js9844a4hx] {
    background: transparent;
    border: 1px solid var(--success-color);
    color: var(--success-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .remove-discount:hover[b-js9844a4hx] {
        background: var(--success-color);
        color: white;
    }

/* Security Info */
.security-info[b-js9844a4hx] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.security-badges[b-js9844a4hx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-badge[b-js9844a4hx] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--success-color);
    font-weight: 500;
}

    .security-badge i[b-js9844a4hx] {
        font-size: 16px;
    }

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

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

@keyframes slideDown-b-js9844a4hx {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

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

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

/* Responsive Design */
@media (max-width: 1200px) {
    .checkout-content[b-js9844a4hx] {
        grid-template-columns: 1fr 350px;
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .checkout-content[b-js9844a4hx] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .checkout-sidebar[b-js9844a4hx] {
        position: static;
        order: -1;
    }

    .order-summary[b-js9844a4hx] {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .checkout-page[b-js9844a4hx] {
        padding: 16px;
    }

    .checkout-header[b-js9844a4hx] {
        padding: 16px;
        margin-bottom: 24px;
    }

        .checkout-header h1[b-js9844a4hx] {
            font-size: 28px;
        }

    .checkout-steps[b-js9844a4hx] {
        gap: 12px;
    }

    .step[b-js9844a4hx] {
        min-width: 80px;
    }

    .step-number[b-js9844a4hx] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .step-title[b-js9844a4hx] {
        font-size: 12px;
    }

    .checkout-main[b-js9844a4hx] {
        padding: 24px;
    }

    .checkout-step h2[b-js9844a4hx] {
        font-size: 24px;
    }

    .form-grid[b-js9844a4hx] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .address-option[b-js9844a4hx],
    .shipping-option[b-js9844a4hx],
    .payment-method[b-js9844a4hx] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .btn-edit-small[b-js9844a4hx] {
        position: static;
        margin-top: 16px;
        width: 100%;
    }

    .step-actions[b-js9844a4hx] {
        flex-direction: column;
        gap: 12px;
    }

    .btn-back[b-js9844a4hx],
    .btn-next[b-js9844a4hx],
    .btn-place-order[b-js9844a4hx] {
        width: 100%;
    }

    .order-summary[b-js9844a4hx] {
        padding: 20px;
    }

    .method-header[b-js9844a4hx] {
        padding: 16px;
    }

    .card-details[b-js9844a4hx] {
        padding: 16px;
    }

    .expiry-inputs[b-js9844a4hx] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .checkout-page[b-js9844a4hx] {
        padding: 12px;
    }

    .checkout-header h1[b-js9844a4hx] {
        font-size: 24px;
    }

    .checkout-steps[b-js9844a4hx] {
        gap: 8px;
    }

    .step[b-js9844a4hx] {
        min-width: 60px;
    }

    .step-number[b-js9844a4hx] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .step-title[b-js9844a4hx] {
        font-size: 10px;
    }

    .checkout-main[b-js9844a4hx] {
        padding: 16px;
    }

    .order-summary[b-js9844a4hx] {
        padding: 16px;
    }

    .review-item[b-js9844a4hx] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .item-image[b-js9844a4hx] {
        width: 60px;
        height: 60px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .checkout-page[b-js9844a4hx] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .checkout-page[b-js9844a4hx]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .checkout-main[b-js9844a4hx],
[data-theme="dark"] .order-summary[b-js9844a4hx],
[data-theme="dark"] .checkout-header[b-js9844a4hx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .address-option[b-js9844a4hx],
[data-theme="dark"] .shipping-option[b-js9844a4hx],
[data-theme="dark"] .payment-method[b-js9844a4hx],
[data-theme="dark"] .review-section[b-js9844a4hx] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-group input[b-js9844a4hx],
[data-theme="dark"] .form-group select[b-js9844a4hx] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .form-group input:focus[b-js9844a4hx],
    [data-theme="dark"] .form-group select:focus[b-js9844a4hx] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #5a6cb3;
    }

[data-theme="dark"] .contact-info[b-js9844a4hx],
[data-theme="dark"] .new-address[b-js9844a4hx] {
    background: rgba(90, 108, 179, 0.1);
    border-color: rgba(90, 108, 179, 0.2);
}

[data-theme="dark"] .step-number[b-js9844a4hx] {
    background: rgba(71, 85, 105, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
    color: #9ca3af;
}

[data-theme="dark"] .step.active .step-number[b-js9844a4hx] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    box-shadow: 0 2px 8px rgba(90, 108, 179, 0.3);
}

[data-theme="dark"] .step.completed .step-number[b-js9844a4hx] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    box-shadow: 0 2px 8px rgba(59, 201, 104, 0.3);
}

[data-theme="dark"] .empty-cart[b-js9844a4hx],
[data-theme="dark"] .checkout-loading[b-js9844a4hx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

/* Print Styles */
@media print {
    .checkout-page[b-js9844a4hx] {
        background: white !important;
        padding: 0;
    }

    .checkout-header[b-js9844a4hx],
    .step-actions[b-js9844a4hx],
    .btn-edit-small[b-js9844a4hx],
    .security-info[b-js9844a4hx],
    .discount-code[b-js9844a4hx] {
        display: none !important;
    }

    .checkout-content[b-js9844a4hx] {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .checkout-main[b-js9844a4hx],
    .order-summary[b-js9844a4hx] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}
/* ===================================
   Payment Method Options - Specific Styles
   تصميم خيارات الدفع المحددة
   =================================== */

/* Payment Options Grid - للتخطيط الجديد */
.payment-options[b-js9844a4hx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Individual Payment Option Card */
.payment-option[b-js9844a4hx] {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .payment-option:hover[b-js9844a4hx] {
        border-color: #3b82f6;
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    }

    .payment-option.selected[b-js9844a4hx] {
        border-color: #3b82f6;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
    }

/* Payment Option Header */
.payment-option-header[b-js9844a4hx] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

    .payment-option-header i[b-js9844a4hx] {
        font-size: 32px;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        border-radius: 12px;
        color: #6b7280;
        transition: all 0.3s ease;
    }

/* Installment Payment Icon */
.payment-option .fa-calendar-alt[b-js9844a4hx] {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
}

/* Cash on Delivery Icon */
.payment-option .fa-money-bill-wave[b-js9844a4hx] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.payment-name[b-js9844a4hx] {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
}

/* Payment Description */
.payment-description[b-js9844a4hx] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Installment Info Badge */
.installment-info[b-js9844a4hx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #059669;
    margin-top: auto;
}

    .installment-info i[b-js9844a4hx] {
        font-size: 14px;
        color: #059669;
        width: auto;
        height: auto;
        background: none;
    }

/* Installment Warning Badge */
.installment-warning[b-js9844a4hx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #d97706;
    margin-top: auto;
}

    .installment-warning i[b-js9844a4hx] {
        font-size: 14px;
        color: #d97706;
        width: auto;
        height: auto;
        background: none;
    }

/* Selected State Enhancements */
.payment-option.selected .payment-option-header i[b-js9844a4hx] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.payment-option.selected .payment-name[b-js9844a4hx] {
    color: #3b82f6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .payment-options[b-js9844a4hx] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .payment-option[b-js9844a4hx] {
        padding: 20px;
    }

    .payment-option-header[b-js9844a4hx] {
        gap: 12px;
    }

        .payment-option-header i[b-js9844a4hx] {
            width: 48px;
            height: 48px;
            font-size: 24px;
        }

    .payment-name[b-js9844a4hx] {
        font-size: 18px;
    }

    .installment-info[b-js9844a4hx],
    .installment-warning[b-js9844a4hx] {
        padding: 10px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .payment-option[b-js9844a4hx] {
        padding: 16px;
    }

    .payment-option-header[b-js9844a4hx] {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

        .payment-option-header i[b-js9844a4hx] {
            width: 40px;
            height: 40px;
            font-size: 20px;
        }

    .payment-name[b-js9844a4hx] {
        font-size: 16px;
    }
}

/* Animation for when payment options appear */
.payment-option[b-js9844a4hx] {
    animation: slideInUp-b-js9844a4hx 0.4s ease-out;
    animation-fill-mode: both;
}

    .payment-option:nth-child(1)[b-js9844a4hx] {
        animation-delay: 0.1s;
    }

    .payment-option:nth-child(2)[b-js9844a4hx] {
        animation-delay: 0.2s;
    }

    .payment-option:nth-child(3)[b-js9844a4hx] {
        animation-delay: 0.3s;
    }

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

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

/* Dark Theme Support */
[data-theme="dark"] .payment-option[b-js9844a4hx] {
    background: #1f2937;
    border-color: #374151;
}

    [data-theme="dark"] .payment-option:hover[b-js9844a4hx] {
        border-color: #3b82f6;
    }

    [data-theme="dark"] .payment-option.selected[b-js9844a4hx] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
        border-color: #3b82f6;
    }

[data-theme="dark"] .payment-name[b-js9844a4hx] {
    color: #f9fafb;
}

[data-theme="dark"] .payment-option.selected .payment-name[b-js9844a4hx] {
    color: #60a5fa;
}

[data-theme="dark"] .payment-description[b-js9844a4hx] {
    color: #9ca3af;
}
/* Card Payment Details */
.card-payment-details[b-js9844a4hx] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    padding: 32px;
    margin: 32px 0;
}

    .card-payment-details h4[b-js9844a4hx] {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 24px;
        text-align: center;
        position: relative;
    }

        .card-payment-details h4[b-js9844a4hx]::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: var(--gradient-primary);
            border-radius: 2px;
        }

/* No Payment Selected State */
.no-payment-selected[b-js9844a4hx] {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.05) 0%, rgba(107, 114, 128, 0.05) 100%);
    border: 1px solid rgba(156, 163, 175, 0.2);
    border-radius: 12px;
    margin: 32px 0;
}

    .no-payment-selected p[b-js9844a4hx] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
        font-style: italic;
    }

/* Step Actions Enhancement */
.step-actions[b-js9844a4hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

/* Responsive Design for New Elements */
@media (max-width: 768px) {
    .card-payment-details[b-js9844a4hx] {
        padding: 24px;
        margin: 24px 0;
    }

    .no-payment-selected[b-js9844a4hx] {
        padding: 30px 16px;
        margin: 24px 0;
    }

    .step-actions[b-js9844a4hx] {
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
        padding-top: 24px;
    }

    .btn-back[b-js9844a4hx],
    .btn-next[b-js9844a4hx] {
        width: 100%;
    }
}
/* _content/Sahelly/Components/Pages/Public/Component/CashPaymentStep.razor.rz.scp.css */

/* ===================================
   Checkout Page - Modern Professional CSS
   تصميم صفحة الدفع بأسلوب احترافي حديث
   =================================== */

/* Page Container - Modern E-Commerce Style */
.checkout-page[b-uav0f0whet] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .checkout-page[b-uav0f0whet]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .checkout-page > *[b-uav0f0whet] {
        position: relative;
        z-index: 1;
    }

/* Loading State */
.checkout-loading[b-uav0f0whet] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

.loading-spinner[b-uav0f0whet] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-uav0f0whet 1s linear infinite;
    margin-bottom: 20px;
}

.checkout-loading p[b-uav0f0whet] {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Empty Cart State */
.empty-cart[b-uav0f0whet] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 600px;
}

    .empty-cart i[b-uav0f0whet] {
        font-size: 120px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-cart h3[b-uav0f0whet] {
        font-size: 32px;
        color: var(--text-primary);
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-cart p[b-uav0f0whet] {
        font-size: 18px;
        color: var(--text-secondary);
        margin-bottom: 30px;
    }

.btn-continue-shopping[b-uav0f0whet] {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-continue-shopping:hover[b-uav0f0whet] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Checkout Header */
.checkout-header[b-uav0f0whet] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .checkout-header h1[b-uav0f0whet] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
        line-height: 1.2;
    }

/* Checkout Steps Indicator */
.checkout-steps[b-uav0f0whet] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
}

    .checkout-steps[b-uav0f0whet]::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 20%;
        right: 20%;
        height: 2px;
        background: linear-gradient(90deg, var(--border-color) 0%, var(--primary-color) 50%, var(--border-color) 100%);
        z-index: 0;
    }

.step[b-uav0f0whet] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    min-width: 120px;
}

.step-number[b-uav0f0whet] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

.step-title[b-uav0f0whet] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    transition: color 0.3s;
}

.step.active .step-number[b-uav0f0whet] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: var(--glow-primary);
    transform: scale(1.1);
}

.step.active .step-title[b-uav0f0whet] {
    color: var(--primary-color);
}

.step.completed .step-number[b-uav0f0whet] {
    background: var(--gradient-success);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(59, 201, 104, 0.3);
}

.step.completed .step-title[b-uav0f0whet] {
    color: var(--success-color);
}

/* Main Content Layout */
.checkout-content[b-uav0f0whet] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.checkout-main[b-uav0f0whet] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .checkout-main[b-uav0f0whet]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .checkout-main:hover[b-uav0f0whet]::before {
        opacity: 1;
    }

/* Checkout Step Base Styles */
.checkout-step[b-uav0f0whet] {
    animation: fadeInUp-b-uav0f0whet 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

    .checkout-step h2[b-uav0f0whet] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .checkout-step h2[b-uav0f0whet]::before {
            content: '';
            width: 4px;
            height: 32px;
            background: var(--gradient-primary);
            border-radius: 2px;
        }

    .checkout-step h3[b-uav0f0whet] {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .checkout-step h3[b-uav0f0whet]::before {
            content: '';
            width: 3px;
            height: 20px;
            background: var(--gradient-secondary);
            border-radius: 2px;
        }

/* Form Styles */
.form-grid[b-uav0f0whet] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.form-group[b-uav0f0whet] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-uav0f0whet] {
        grid-column: 1 / -1;
    }

    .form-group label[b-uav0f0whet] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-group input[b-uav0f0whet],
    .form-group select[b-uav0f0whet] {
        padding: 14px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 15px;
        color: var(--text-primary);
        min-height: 48px;
    }

        .form-group input:hover[b-uav0f0whet],
        .form-group select:hover[b-uav0f0whet] {
            border-color: var(--border-hover);
            background: rgba(102, 126, 234, 0.08);
        }

        .form-group input:focus[b-uav0f0whet],
        .form-group select:focus[b-uav0f0whet] {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        .form-group input[b-uav0f0whet]::placeholder {
            color: var(--text-tertiary);
        }

/* Contact Info Section */
.contact-info[b-uav0f0whet] {
    margin-bottom: 40px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Shipping Address Section */
.shipping-address[b-uav0f0whet] {
    margin-bottom: 40px;
}

.saved-addresses[b-uav0f0whet] {
    margin-bottom: 32px;
}

    .saved-addresses h4[b-uav0f0whet] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

.address-option[b-uav0f0whet] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .address-option[b-uav0f0whet]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-primary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .address-option:hover[b-uav0f0whet] {
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

        .address-option:hover[b-uav0f0whet]::before {
            transform: scaleY(1);
        }

    .address-option.selected[b-uav0f0whet] {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    }

        .address-option.selected[b-uav0f0whet]::before {
            transform: scaleY(1);
        }

.address-content[b-uav0f0whet] {
    flex: 1;
}

.address-text[b-uav0f0whet] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.address-city[b-uav0f0whet] {
    font-size: 14px;
    color: var(--text-secondary);
}

.address-actions[b-uav0f0whet] {
    display: flex;
    gap: 8px;
}

.btn-edit[b-uav0f0whet] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

    .btn-edit:hover[b-uav0f0whet] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* New Address Section */
.new-address[b-uav0f0whet] {
    padding: 24px;
    background: rgba(118, 75, 162, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(118, 75, 162, 0.1);
}

.address-toggle[b-uav0f0whet] {
    margin-bottom: 20px;
}

    .address-toggle label[b-uav0f0whet] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .address-toggle label input[type="checkbox"][b-uav0f0whet] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

.address-form[b-uav0f0whet] {
    animation: slideDown-b-uav0f0whet 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shipping Method Section */
.shipping-method[b-uav0f0whet] {
    margin-bottom: 40px;
}

.shipping-option[b-uav0f0whet] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .shipping-option[b-uav0f0whet]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-secondary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .shipping-option:hover[b-uav0f0whet] {
        border-color: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);
    }

        .shipping-option:hover[b-uav0f0whet]::before {
            transform: scaleY(1);
        }

    .shipping-option.selected[b-uav0f0whet] {
        border-color: var(--secondary-color);
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(45, 212, 191, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
    }

        .shipping-option.selected[b-uav0f0whet]::before {
            transform: scaleY(1);
        }

.method-info h4[b-uav0f0whet] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.method-info p[b-uav0f0whet] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.delivery-time[b-uav0f0whet] {
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
}

.method-cost[b-uav0f0whet] {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Payment Methods Section */
.payment-methods[b-uav0f0whet] {
    margin-bottom: 40px;
}

.payment-method[b-uav0f0whet] {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

    .payment-method[b-uav0f0whet]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-warm);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .payment-method:hover[b-uav0f0whet] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
    }

        .payment-method:hover[b-uav0f0whet]::before {
            transform: scaleY(1);
        }

    .payment-method.selected[b-uav0f0whet] {
        border-color: var(--accent-color);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
    }

        .payment-method.selected[b-uav0f0whet]::before {
            transform: scaleY(1);
        }

.method-header[b-uav0f0whet] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.method-logo[b-uav0f0whet] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .method-logo img[b-uav0f0whet] {
        max-width: 40px;
        max-height: 40px;
        object-fit: contain;
    }

    .method-logo i[b-uav0f0whet] {
        font-size: 24px;
        color: var(--accent-color);
    }

.method-info[b-uav0f0whet] {
    flex: 1;
}

    .method-info h3[b-uav0f0whet] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .method-info p[b-uav0f0whet] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.fee-info[b-uav0f0whet] {
    font-size: 13px;
    color: var(--warning-color);
    font-weight: 500;
}

/* Card Details Section */
.card-details[b-uav0f0whet] {
    padding: 24px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    animation: slideDown-b-uav0f0whet 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .card-details h4[b-uav0f0whet] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
    }

.expiry-inputs[b-uav0f0whet] {
    display: flex;
    gap: 12px;
}

    .expiry-inputs select[b-uav0f0whet] {
        flex: 1;
    }

/* Step Actions */
.step-actions[b-uav0f0whet] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.btn-back[b-uav0f0whet],
.btn-next[b-uav0f0whet],
.btn-place-order[b-uav0f0whet] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-back[b-uav0f0whet] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: var(--text-secondary);
}

    .btn-back:hover[b-uav0f0whet] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.btn-next[b-uav0f0whet] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-next:hover[b-uav0f0whet] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .btn-next:disabled[b-uav0f0whet] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-place-order[b-uav0f0whet] {
    background: var(--gradient-success);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    position: relative;
}

    .btn-place-order:hover:not(:disabled)[b-uav0f0whet] {
        transform: translateY(-3px);
        box-shadow: var(--glow-secondary), 0 8px 25px rgba(16, 185, 129, 0.4);
    }

    .btn-place-order:disabled[b-uav0f0whet] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Loading States */
.loading-section[b-uav0f0whet] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
}

.spinner[b-uav0f0whet] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-uav0f0whet 1s linear infinite;
    margin-bottom: 16px;
}

/* No Options States */
.no-payment-methods[b-uav0f0whet],
.no-installment-available[b-uav0f0whet],
.no-installment-options[b-uav0f0whet] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(248, 113, 113, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.1);
}

    .no-payment-methods i[b-uav0f0whet],
    .no-installment-available i[b-uav0f0whet],
    .no-installment-options i[b-uav0f0whet] {
        font-size: 48px;
        color: var(--warning-color);
        margin-bottom: 16px;
        display: block;
    }

    .no-payment-methods p[b-uav0f0whet],
    .no-installment-available p[b-uav0f0whet],
    .no-installment-options p[b-uav0f0whet] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

/* Order Review Section */
.order-review[b-uav0f0whet] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.review-section[b-uav0f0whet] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .review-section:hover[b-uav0f0whet] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-color);
    }

    .review-section h3[b-uav0f0whet] {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

.review-content[b-uav0f0whet] {
    margin-bottom: 16px;
}

    .review-content p[b-uav0f0whet] {
        margin-bottom: 8px;
        font-size: 15px;
        color: var(--text-primary);
    }

        .review-content p strong[b-uav0f0whet] {
            color: var(--text-primary);
            font-weight: 600;
            margin-right: 8px;
        }

.btn-edit-small[b-uav0f0whet] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    top: 20px;
    right: 20px;
}

    .btn-edit-small:hover[b-uav0f0whet] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* Order Items Review */
.order-items-review[b-uav0f0whet] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-item[b-uav0f0whet] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    transition: all 0.3s;
}

    .review-item:hover[b-uav0f0whet] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

.item-image[b-uav0f0whet] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

    .item-image img[b-uav0f0whet] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.item-info[b-uav0f0whet] {
    flex: 1;
}

    .item-info h4[b-uav0f0whet] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .item-info p[b-uav0f0whet] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.item-total[b-uav0f0whet] {
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Order Totals */
.review-totals[b-uav0f0whet] {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 20px;
}

.total-line[b-uav0f0whet] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-primary);
}

    .total-line.discount[b-uav0f0whet] {
        color: var(--success-color);
    }

    .total-line.total[b-uav0f0whet] {
        border-top: 1px solid var(--border-color);
        margin-top: 8px;
        padding-top: 16px;
        font-size: 18px;
        font-weight: 700;
    }

    .total-line.highlight[b-uav0f0whet] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        margin: 8px -8px;
        padding: 12px 8px;
        border-radius: 6px;
        font-weight: 600;
        color: var(--primary-color);
    }

.installment-breakdown[b-uav0f0whet] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Terms Agreement */
.terms-agreement[b-uav0f0whet] {
    margin: 32px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .terms-agreement label[b-uav0f0whet] {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .terms-agreement label input[type="checkbox"][b-uav0f0whet] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

        .terms-agreement label a[b-uav0f0whet] {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
        }

            .terms-agreement label a:hover[b-uav0f0whet] {
                text-decoration: underline;
            }

/* Order Summary Panel (Sidebar) */
.checkout-sidebar[b-uav0f0whet] {
    position: sticky;
    top: 24px;
}

.order-summary[b-uav0f0whet] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .order-summary[b-uav0f0whet]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .order-summary:hover[b-uav0f0whet]::before {
        opacity: 1;
    }

    .order-summary h3[b-uav0f0whet] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
    }

/* Summary Items */
.summary-items[b-uav0f0whet] {
    margin-bottom: 24px;
}

.summary-item[b-uav0f0whet] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.item-details[b-uav0f0whet] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name[b-uav0f0whet] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.item-quantity[b-uav0f0whet] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-price[b-uav0f0whet] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Summary Totals */
.summary-totals[b-uav0f0whet] {
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    margin-bottom: 24px;
}

/* Discount Code Section */
.discount-code[b-uav0f0whet] {
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.discount-toggle[b-uav0f0whet] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background-color 0.3s;
}

    .discount-toggle:hover[b-uav0f0whet] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .discount-toggle span[b-uav0f0whet] {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .discount-toggle i[b-uav0f0whet] {
        color: var(--primary-color);
        transition: transform 0.3s;
    }

.discount-form[b-uav0f0whet] {
    padding: 20px;
    background: white;
    display: flex;
    gap: 8px;
    animation: slideDown-b-uav0f0whet 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .discount-form input[b-uav0f0whet] {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
    }

        .discount-form input:focus[b-uav0f0whet] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

    .discount-form button[b-uav0f0whet] {
        background: var(--gradient-primary);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .discount-form button:hover:not(:disabled)[b-uav0f0whet] {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .discount-form button:disabled[b-uav0f0whet] {
            opacity: 0.6;
            cursor: not-allowed;
        }

.applied-discount[b-uav0f0whet] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.discount-info[b-uav0f0whet] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success-color);
    font-weight: 600;
}

    .discount-info i[b-uav0f0whet] {
        font-size: 16px;
    }

.remove-discount[b-uav0f0whet] {
    background: transparent;
    border: 1px solid var(--success-color);
    color: var(--success-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .remove-discount:hover[b-uav0f0whet] {
        background: var(--success-color);
        color: white;
    }

/* Security Info */
.security-info[b-uav0f0whet] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.security-badges[b-uav0f0whet] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-badge[b-uav0f0whet] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--success-color);
    font-weight: 500;
}

    .security-badge i[b-uav0f0whet] {
        font-size: 16px;
    }

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

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

@keyframes slideDown-b-uav0f0whet {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

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

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

/* Responsive Design */
@media (max-width: 1200px) {
    .checkout-content[b-uav0f0whet] {
        grid-template-columns: 1fr 350px;
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .checkout-content[b-uav0f0whet] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .checkout-sidebar[b-uav0f0whet] {
        position: static;
        order: -1;
    }

    .order-summary[b-uav0f0whet] {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .checkout-page[b-uav0f0whet] {
        padding: 16px;
    }

    .checkout-header[b-uav0f0whet] {
        padding: 16px;
        margin-bottom: 24px;
    }

        .checkout-header h1[b-uav0f0whet] {
            font-size: 28px;
        }

    .checkout-steps[b-uav0f0whet] {
        gap: 12px;
    }

    .step[b-uav0f0whet] {
        min-width: 80px;
    }

    .step-number[b-uav0f0whet] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .step-title[b-uav0f0whet] {
        font-size: 12px;
    }

    .checkout-main[b-uav0f0whet] {
        padding: 24px;
    }

    .checkout-step h2[b-uav0f0whet] {
        font-size: 24px;
    }

    .form-grid[b-uav0f0whet] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .address-option[b-uav0f0whet],
    .shipping-option[b-uav0f0whet],
    .payment-method[b-uav0f0whet] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .btn-edit-small[b-uav0f0whet] {
        position: static;
        margin-top: 16px;
        width: 100%;
    }

    .step-actions[b-uav0f0whet] {
        flex-direction: column;
        gap: 12px;
    }

    .btn-back[b-uav0f0whet],
    .btn-next[b-uav0f0whet],
    .btn-place-order[b-uav0f0whet] {
        width: 100%;
    }

    .order-summary[b-uav0f0whet] {
        padding: 20px;
    }

    .method-header[b-uav0f0whet] {
        padding: 16px;
    }

    .card-details[b-uav0f0whet] {
        padding: 16px;
    }

    .expiry-inputs[b-uav0f0whet] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .checkout-page[b-uav0f0whet] {
        padding: 12px;
    }

    .checkout-header h1[b-uav0f0whet] {
        font-size: 24px;
    }

    .checkout-steps[b-uav0f0whet] {
        gap: 8px;
    }

    .step[b-uav0f0whet] {
        min-width: 60px;
    }

    .step-number[b-uav0f0whet] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .step-title[b-uav0f0whet] {
        font-size: 10px;
    }

    .checkout-main[b-uav0f0whet] {
        padding: 16px;
    }

    .order-summary[b-uav0f0whet] {
        padding: 16px;
    }

    .review-item[b-uav0f0whet] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .item-image[b-uav0f0whet] {
        width: 60px;
        height: 60px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .checkout-page[b-uav0f0whet] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .checkout-page[b-uav0f0whet]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .checkout-main[b-uav0f0whet],
[data-theme="dark"] .order-summary[b-uav0f0whet],
[data-theme="dark"] .checkout-header[b-uav0f0whet] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .address-option[b-uav0f0whet],
[data-theme="dark"] .shipping-option[b-uav0f0whet],
[data-theme="dark"] .payment-method[b-uav0f0whet],
[data-theme="dark"] .review-section[b-uav0f0whet] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-group input[b-uav0f0whet],
[data-theme="dark"] .form-group select[b-uav0f0whet] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .form-group input:focus[b-uav0f0whet],
    [data-theme="dark"] .form-group select:focus[b-uav0f0whet] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #5a6cb3;
    }

[data-theme="dark"] .contact-info[b-uav0f0whet],
[data-theme="dark"] .new-address[b-uav0f0whet] {
    background: rgba(90, 108, 179, 0.1);
    border-color: rgba(90, 108, 179, 0.2);
}

[data-theme="dark"] .step-number[b-uav0f0whet] {
    background: rgba(71, 85, 105, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
    color: #9ca3af;
}

[data-theme="dark"] .step.active .step-number[b-uav0f0whet] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    box-shadow: 0 2px 8px rgba(90, 108, 179, 0.3);
}

[data-theme="dark"] .step.completed .step-number[b-uav0f0whet] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    box-shadow: 0 2px 8px rgba(59, 201, 104, 0.3);
}

[data-theme="dark"] .empty-cart[b-uav0f0whet],
[data-theme="dark"] .checkout-loading[b-uav0f0whet] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

/* Print Styles */
@media print {
    .checkout-page[b-uav0f0whet] {
        background: white !important;
        padding: 0;
    }

    .checkout-header[b-uav0f0whet],
    .step-actions[b-uav0f0whet],
    .btn-edit-small[b-uav0f0whet],
    .security-info[b-uav0f0whet],
    .discount-code[b-uav0f0whet] {
        display: none !important;
    }

    .checkout-content[b-uav0f0whet] {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .checkout-main[b-uav0f0whet],
    .order-summary[b-uav0f0whet] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/Component/InstallmentPaymentStep.razor.rz.scp.css */

/* ===================================
   InstallmentPaymentStep - Modern E-Commerce Design
   نظام تصميم حديث متناسق مع باقي المكونات
   =================================== */

/* Main Container */
.checkout-step.payment-step[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .checkout-step.payment-step[b-ke6o6rp5ky]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(20, 184, 166, 0.03) 100%);
        transform: rotate(45deg);
        pointer-events: none;
        z-index: 0;
    }

    .checkout-step.payment-step > *[b-ke6o6rp5ky] {
        position: relative;
        z-index: 1;
    }

/* Dark Theme Support */
[data-theme="dark"] .checkout-step.payment-step[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

    [data-theme="dark"] .checkout-step.payment-step[b-ke6o6rp5ky]::before {
        background: linear-gradient(135deg, rgba(129, 140, 248, 0.05) 0%, rgba(45, 212, 191, 0.05) 100%);
    }

/* Page Title */
.checkout-step h2[b-ke6o6rp5ky] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

[data-theme="dark"] .checkout-step h2[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Loading Section */
.loading-section[b-ke6o6rp5ky] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

    .loading-section .spinner[b-ke6o6rp5ky] {
        width: 64px;
        height: 64px;
        border: 4px solid rgba(99, 102, 241, 0.1);
        border-top: 4px solid #667eea;
        border-radius: 50%;
        animation: spin-b-ke6o6rp5ky 1s linear infinite;
        margin-bottom: 24px;
    }

    .loading-section p[b-ke6o6rp5ky] {
        font-size: 1.125rem;
        color: var(--text-secondary);
        font-weight: 500;
        margin: 0;
    }

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

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

/* Installment Content */
.installment-content[b-ke6o6rp5ky] {
    display: grid;
    gap: 32px;
}

/* Cart Summary */
.cart-summary[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    border: 1px solid rgba(99, 102, 241, 0.1);
    position: relative;
    overflow: hidden;
}

    .cart-summary[b-ke6o6rp5ky]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .cart-summary h3[b-ke6o6rp5ky] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.total-amount[b-ke6o6rp5ky] {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
}

[data-theme="dark"] .cart-summary[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .total-amount[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Installment Options */
.installment-options h4[b-ke6o6rp5ky] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .installment-options h4[b-ke6o6rp5ky]::before {
        content: '💳';
        font-size: 1.75rem;
        filter: grayscale(100%);
        transition: filter 0.3s;
    }

    .installment-options h4:hover[b-ke6o6rp5ky]::before {
        filter: grayscale(0%);
    }

/* Installment Option Cards */
.installment-option[b-ke6o6rp5ky] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08);
}

    .installment-option[b-ke6o6rp5ky]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, rgba(99, 102, 241, 0.05), transparent);
        transform: translateX(100%);
        transition: transform 0.6s ease;
        pointer-events: none;
    }

    .installment-option:hover[b-ke6o6rp5ky] {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
        border-color: rgba(99, 102, 241, 0.3);
    }

        .installment-option:hover[b-ke6o6rp5ky]::before {
            transform: translateX(-100%);
        }

    .installment-option.selected[b-ke6o6rp5ky] {
        border-color: #667eea;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 12px 40px rgba(99, 102, 241, 0.2);
        transform: translateY(-2px);
    }

        .installment-option.selected[b-ke6o6rp5ky]::after {
            content: '✓';
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 16px;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

[data-theme="dark"] .installment-option[b-ke6o6rp5ky] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

    [data-theme="dark"] .installment-option:hover[b-ke6o6rp5ky] {
        border-color: rgba(129, 140, 248, 0.5);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .installment-option.selected[b-ke6o6rp5ky] {
        border-color: #a78bfa;
        background: linear-gradient(135deg, rgba(129, 140, 248, 0.15) 0%, rgba(192, 132, 252, 0.15) 100%);
        box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.3), 0 12px 40px rgba(0, 0, 0, 0.3);
    }

        [data-theme="dark"] .installment-option.selected[b-ke6o6rp5ky]::after {
            background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        }

/* Option Info */
.option-info[b-ke6o6rp5ky] {
    position: relative;
    z-index: 1;
}

.option-header[b-ke6o6rp5ky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.option-name[b-ke6o6rp5ky] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.months[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .months[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
}

/* Option Details */
.option-details[b-ke6o6rp5ky] {
    margin-top: 12px;
}

.description[b-ke6o6rp5ky] {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.financial-info[b-ke6o6rp5ky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.monthly-amount[b-ke6o6rp5ky] {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.interest-rate[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[data-theme="dark"] .financial-info[b-ke6o6rp5ky] {
    background: rgba(129, 140, 248, 0.1);
    border-color: rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .monthly-amount[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Amount Limits */
.amount-limits[b-ke6o6rp5ky] {
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

    .amount-limits span[b-ke6o6rp5ky] {
        padding: 4px 8px;
        background: rgba(99, 102, 241, 0.1);
        border-radius: 8px;
        border: 1px solid rgba(99, 102, 241, 0.2);
    }

[data-theme="dark"] .amount-limits span[b-ke6o6rp5ky] {
    background: rgba(129, 140, 248, 0.1);
    border-color: rgba(129, 140, 248, 0.2);
}

/* Down Payment Section */
.down-payment-section[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 20px;
    padding: 24px;
    margin-top: 24px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

    .down-payment-section label[b-ke6o6rp5ky] {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .down-payment-section input[b-ke6o6rp5ky] {
        width: 100%;
        padding: 16px 20px;
        font-size: 1.125rem;
        font-weight: 600;
        border: 2px solid rgba(99, 102, 241, 0.2);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.9);
        color: var(--text-primary);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-align: center;
    }

        .down-payment-section input:focus[b-ke6o6rp5ky] {
            outline: none;
            border-color: #667eea;
            background: white;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
            transform: translateY(-2px);
        }

    .down-payment-section small[b-ke6o6rp5ky] {
        display: block;
        margin-top: 8px;
        font-size: 0.875rem;
        color: var(--text-secondary);
        text-align: center;
        font-weight: 500;
    }

[data-theme="dark"] .down-payment-section[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(129, 140, 248, 0.2);
}

    [data-theme="dark"] .down-payment-section input[b-ke6o6rp5ky] {
        background: rgba(30, 41, 59, 0.9);
        border-color: rgba(129, 140, 248, 0.3);
    }

        [data-theme="dark"] .down-payment-section input:focus[b-ke6o6rp5ky] {
            border-color: #a78bfa;
            background: rgba(30, 41, 59, 1);
            box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
        }

/* Installment Summary */
.installment-summary[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-top: 24px;
    border: 1px solid rgba(99, 102, 241, 0.1);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.1);
}

    .installment-summary h5[b-ke6o6rp5ky] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(99, 102, 241, 0.1);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .installment-summary h5[b-ke6o6rp5ky]::before {
            content: '📊';
            font-size: 1.25rem;
        }

.summary-line[b-ke6o6rp5ky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.05);
}

    .summary-line:last-child[b-ke6o6rp5ky] {
        border-bottom: none;
    }

    .summary-line.highlight[b-ke6o6rp5ky] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        padding: 16px 20px;
        border-radius: 12px;
        margin-top: 12px;
        font-weight: 700;
        font-size: 1.125rem;
        border: 2px solid rgba(99, 102, 241, 0.2);
    }

        .summary-line.highlight span:last-child[b-ke6o6rp5ky] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 1.25rem;
            font-weight: 800;
        }

[data-theme="dark"] .installment-summary[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(129, 140, 248, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .summary-line[b-ke6o6rp5ky] {
    border-bottom-color: rgba(129, 140, 248, 0.1);
}

    [data-theme="dark"] .summary-line.highlight[b-ke6o6rp5ky] {
        background: linear-gradient(135deg, rgba(129, 140, 248, 0.15) 0%, rgba(192, 132, 252, 0.15) 100%);
        border-color: rgba(129, 140, 248, 0.3);
    }

        [data-theme="dark"] .summary-line.highlight span:last-child[b-ke6o6rp5ky] {
            background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

/* No Installment Available */
.no-installment-available[b-ke6o6rp5ky] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.05) 0%, rgba(240, 147, 251, 0.05) 100%);
    border-radius: 20px;
    border: 2px dashed rgba(245, 87, 108, 0.2);
}

    .no-installment-available i[b-ke6o6rp5ky] {
        font-size: 4rem;
        color: #f5576c;
        margin-bottom: 16px;
        filter: drop-shadow(0 4px 8px rgba(245, 87, 108, 0.2));
    }

    .no-installment-available p[b-ke6o6rp5ky] {
        font-size: 1.25rem;
        color: var(--text-secondary);
        margin: 0;
        font-weight: 500;
    }

/* Step Actions */
.step-actions[b-ke6o6rp5ky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.btn-back[b-ke6o6rp5ky],
.btn-next[b-ke6o6rp5ky] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none;
    letter-spacing: 0.025em;
    position: relative;
    overflow: hidden;
    min-height: 52px;
}

.btn-back[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .btn-back:hover[b-ke6o6rp5ky] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .btn-back:active[b-ke6o6rp5ky] {
        transform: translateY(0);
    }

.btn-next[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

    .btn-next:hover:not(:disabled)[b-ke6o6rp5ky] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4);
    }

    .btn-next:disabled[b-ke6o6rp5ky] {
        background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
        cursor: not-allowed;
        opacity: 0.6;
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .btn-next:active:not(:disabled)[b-ke6o6rp5ky] {
        transform: translateY(-1px);
    }

[data-theme="dark"] .btn-back[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    color: #e5e7eb;
}

    [data-theme="dark"] .btn-back:hover[b-ke6o6rp5ky] {
        background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
    }

[data-theme="dark"] .btn-next[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
}

    [data-theme="dark"] .btn-next:hover:not(:disabled)[b-ke6o6rp5ky] {
        background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    }

    [data-theme="dark"] .btn-next:disabled[b-ke6o6rp5ky] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .checkout-step.payment-step[b-ke6o6rp5ky] {
        padding: 20px;
        border-radius: 16px;
    }

    .checkout-step h2[b-ke6o6rp5ky] {
        font-size: 1.75rem;
        margin-bottom: 24px;
    }

    .installment-content[b-ke6o6rp5ky] {
        gap: 24px;
    }

    .cart-summary[b-ke6o6rp5ky] {
        padding: 20px;
    }

    .total-amount[b-ke6o6rp5ky] {
        font-size: 2rem;
    }

    .installment-option[b-ke6o6rp5ky] {
        padding: 20px;
        margin-bottom: 12px;
    }

    .option-header[b-ke6o6rp5ky] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .financial-info[b-ke6o6rp5ky] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .monthly-amount[b-ke6o6rp5ky] {
        font-size: 1.25rem;
    }

    .amount-limits[b-ke6o6rp5ky] {
        flex-direction: column;
        gap: 8px;
    }

    .down-payment-section[b-ke6o6rp5ky],
    .installment-summary[b-ke6o6rp5ky] {
        padding: 20px;
    }

    .step-actions[b-ke6o6rp5ky] {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .btn-back[b-ke6o6rp5ky],
    .btn-next[b-ke6o6rp5ky] {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .loading-section[b-ke6o6rp5ky] {
        padding: 60px 20px;
    }

    .no-installment-available[b-ke6o6rp5ky] {
        padding: 60px 20px;
    }

        .no-installment-available i[b-ke6o6rp5ky] {
            font-size: 3rem;
        }

        .no-installment-available p[b-ke6o6rp5ky] {
            font-size: 1.125rem;
        }
}

@media (max-width: 480px) {
    .checkout-step.payment-step[b-ke6o6rp5ky] {
        padding: 16px;
        margin: 0 -8px 16px;
    }

    .checkout-step h2[b-ke6o6rp5ky] {
        font-size: 1.5rem;
    }

    .cart-summary[b-ke6o6rp5ky] {
        padding: 16px;
    }

    .total-amount[b-ke6o6rp5ky] {
        font-size: 1.75rem;
    }

    .installment-option[b-ke6o6rp5ky] {
        padding: 16px;
    }

    .option-name[b-ke6o6rp5ky] {
        font-size: 1.125rem;
    }

    .months[b-ke6o6rp5ky] {
        padding: 4px 12px;
        font-size: 0.75rem;
    }

    .monthly-amount[b-ke6o6rp5ky] {
        font-size: 1.125rem;
    }

    .down-payment-section input[b-ke6o6rp5ky] {
        padding: 14px 16px;
        font-size: 1rem;
    }

    .summary-line[b-ke6o6rp5ky] {
        font-size: 0.9rem;
        padding: 10px 0;
    }

        .summary-line.highlight[b-ke6o6rp5ky] {
            padding: 14px 16px;
            font-size: 1rem;
        }

            .summary-line.highlight span:last-child[b-ke6o6rp5ky] {
                font-size: 1.125rem;
            }
}

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

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

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

    to {
        opacity: 1;
    }
}

.installment-option[b-ke6o6rp5ky] {
    animation: slideInUp-b-ke6o6rp5ky 0.5s ease-out forwards;
}

    .installment-option:nth-child(1)[b-ke6o6rp5ky] {
        animation-delay: 0.1s;
    }

    .installment-option:nth-child(2)[b-ke6o6rp5ky] {
        animation-delay: 0.2s;
    }

    .installment-option:nth-child(3)[b-ke6o6rp5ky] {
        animation-delay: 0.3s;
    }

    .installment-option:nth-child(4)[b-ke6o6rp5ky] {
        animation-delay: 0.4s;
    }

.down-payment-section[b-ke6o6rp5ky],
.installment-summary[b-ke6o6rp5ky] {
    animation: fadeIn-b-ke6o6rp5ky 0.6s ease-out forwards;
}

/* Enhanced Hover Effects */
.installment-option:hover .option-name[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

[data-theme="dark"] .installment-option:hover .option-name[b-ke6o6rp5ky] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Focus States for Accessibility */
.installment-option:focus[b-ke6o6rp5ky] {
    outline: 3px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}

.btn-back:focus[b-ke6o6rp5ky],
.btn-next:focus[b-ke6o6rp5ky] {
    outline: 3px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}

.down-payment-section input:focus[b-ke6o6rp5ky] {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .installment-option[b-ke6o6rp5ky] {
        border-width: 3px;
    }

        .installment-option.selected[b-ke6o6rp5ky] {
            border-width: 4px;
        }

    .btn-back[b-ke6o6rp5ky],
    .btn-next[b-ke6o6rp5ky] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .installment-option[b-ke6o6rp5ky],
    .down-payment-section[b-ke6o6rp5ky],
    .installment-summary[b-ke6o6rp5ky],
    .btn-back[b-ke6o6rp5ky],
    .btn-next[b-ke6o6rp5ky],
    .loading-section .spinner[b-ke6o6rp5ky] {
        animation: none;
        transition: none;
    }

        .installment-option[b-ke6o6rp5ky]::before {
            display: none;
        }
}

/* Print Styles */
@media print {
    .checkout-step.payment-step[b-ke6o6rp5ky] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }

    .step-actions[b-ke6o6rp5ky] {
        display: none !important;
    }

    .installment-option[b-ke6o6rp5ky]::before,
    .installment-option[b-ke6o6rp5ky]::after {
        display: none !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/Component/NotificationComponent.razor.rz.scp.css */
/* Notification Wrapper */
.notification-wrapper[b-4vk38ltt6m] {
    position: relative;
    display: inline-block;
}

/* Notification Bell */
.notification-bell[b-4vk38ltt6m] {
    position: relative;
    background: none;
    border: none;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.3s;
}

    .notification-bell:hover[b-4vk38ltt6m] {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .notification-bell i[b-4vk38ltt6m] {
        font-size: 20px;
        color: #4b5563;
        transition: all 0.3s;
    }

    .notification-bell:hover i[b-4vk38ltt6m] {
        color: #1f2937;
        transform: rotate(-15deg);
    }

/* Notification Badge */
.notification-badge[b-4vk38ltt6m] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    animation: pulse-b-4vk38ltt6m 2s infinite;
}

@keyframes pulse-b-4vk38ltt6m {
    0% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

    50% {
        box-shadow: 0 2px 16px rgba(239, 68, 68, 0.5);
    }

    100% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }
}

/* Notification Dropdown */
.notification-dropdown[b-4vk38ltt6m] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-width: 90vw;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    animation: slideDown-b-4vk38ltt6m 0.3s ease-out;
}

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

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

/* Notification Header */
.notification-header[b-4vk38ltt6m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}

    .notification-header h4[b-4vk38ltt6m] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
    }

.notification-actions[b-4vk38ltt6m] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mark-all-read[b-4vk38ltt6m] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .mark-all-read:hover[b-4vk38ltt6m] {
        background-color: rgba(59, 130, 246, 0.1);
    }

.close-notifications[b-4vk38ltt6m] {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.2s;
}

    .close-notifications:hover[b-4vk38ltt6m] {
        background-color: rgba(0, 0, 0, 0.05);
        color: #374151;
    }

/* Notification Body */
.notification-body[b-4vk38ltt6m] {
    max-height: 400px;
    overflow-y: auto;
    background: white;
}

.notification-loading[b-4vk38ltt6m] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.no-notifications[b-4vk38ltt6m] {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

    .no-notifications i[b-4vk38ltt6m] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .no-notifications p[b-4vk38ltt6m] {
        margin: 0;
        font-size: 16px;
    }

/* Notification List */
.notification-list[b-4vk38ltt6m] {
    padding: 0;
}

.notification-item[b-4vk38ltt6m] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
}

    .notification-item:hover[b-4vk38ltt6m] {
        background-color: #f9fafb;
    }

    .notification-item.unread[b-4vk38ltt6m] {
        background-color: #eff6ff;
    }

        .notification-item.unread:hover[b-4vk38ltt6m] {
            background-color: #dbeafe;
        }

/* Notification Icon */
.notification-icon[b-4vk38ltt6m] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

    .notification-icon.success[b-4vk38ltt6m] {
        background-color: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .notification-icon.error[b-4vk38ltt6m] {
        background-color: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .notification-icon.warning[b-4vk38ltt6m] {
        background-color: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .notification-icon.info[b-4vk38ltt6m] {
        background-color: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    .notification-icon.order[b-4vk38ltt6m] {
        background-color: rgba(139, 92, 246, 0.1);
        color: #8b5cf6;
    }

    .notification-icon.payment[b-4vk38ltt6m] {
        background-color: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

/* Notification Content */
.notification-content[b-4vk38ltt6m] {
    flex: 1;
    min-width: 0;
}

    .notification-content h6[b-4vk38ltt6m] {
        margin: 0 0 4px 0;
        font-size: 15px;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.3;
    }

    .notification-content p[b-4vk38ltt6m] {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #6b7280;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.notification-time[b-4vk38ltt6m] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #9ca3af;
}

    .notification-time i[b-4vk38ltt6m] {
        font-size: 12px;
    }

/* Notification Delete */
.notification-delete[b-4vk38ltt6m] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    opacity: 0;
}

.notification-item:hover .notification-delete[b-4vk38ltt6m] {
    opacity: 1;
}

.notification-delete:hover[b-4vk38ltt6m] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Notification Footer */
.notification-footer[b-4vk38ltt6m] {
    padding: 12px 20px;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

    .notification-footer a[b-4vk38ltt6m] {
        color: #3b82f6;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
    }

        .notification-footer a:hover[b-4vk38ltt6m] {
            color: #2563eb;
            text-decoration: underline;
        }

/* Backdrop */
.notification-backdrop[b-4vk38ltt6m] {
    display: none;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    .notification-bell:hover[b-4vk38ltt6m] {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .notification-bell i[b-4vk38ltt6m] {
        color: #d1d5db;
    }

    .notification-bell:hover i[b-4vk38ltt6m] {
        color: #f3f4f6;
    }

    .notification-dropdown[b-4vk38ltt6m] {
        background: #1f2937;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    .notification-header[b-4vk38ltt6m] {
        background: linear-gradient(135deg, #1f2937, #111827);
        border-color: #374151;
    }

        .notification-header h4[b-4vk38ltt6m] {
            color: #f3f4f6;
        }

    .notification-body[b-4vk38ltt6m] {
        background: #1f2937;
    }

    .notification-item[b-4vk38ltt6m] {
        border-color: #374151;
    }

        .notification-item:hover[b-4vk38ltt6m] {
            background-color: #374151;
        }

        .notification-item.unread[b-4vk38ltt6m] {
            background-color: rgba(59, 130, 246, 0.1);
        }

    .notification-content h6[b-4vk38ltt6m] {
        color: #f3f4f6;
    }

    .notification-content p[b-4vk38ltt6m] {
        color: #d1d5db;
    }

    .notification-footer[b-4vk38ltt6m] {
        background: #111827;
        border-color: #374151;
    }
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .notification-dropdown[b-4vk38ltt6m] {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        animation: slideUp-b-4vk38ltt6m 0.3s ease-out;
    }

    @keyframes slideUp-b-4vk38ltt6m {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .notification-body[b-4vk38ltt6m] {
        max-height: 60vh;
    }

    .notification-backdrop[b-4vk38ltt6m] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        animation: fadeIn-b-4vk38ltt6m 0.3s;
    }

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

        to {
            opacity: 1;
        }
    }
}
/* _content/Sahelly/Components/Pages/Public/Component/OrderSummaryPanel.razor.rz.scp.css */

/* ===================================
   Checkout Page - Modern Professional CSS
   تصميم صفحة الدفع بأسلوب احترافي حديث
   =================================== */

/* Page Container - Modern E-Commerce Style */
.checkout-page[b-phlfyprixe] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .checkout-page[b-phlfyprixe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .checkout-page > *[b-phlfyprixe] {
        position: relative;
        z-index: 1;
    }

/* Loading State */
.checkout-loading[b-phlfyprixe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

.loading-spinner[b-phlfyprixe] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-phlfyprixe 1s linear infinite;
    margin-bottom: 20px;
}

.checkout-loading p[b-phlfyprixe] {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Empty Cart State */
.empty-cart[b-phlfyprixe] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 600px;
}

    .empty-cart i[b-phlfyprixe] {
        font-size: 120px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-cart h3[b-phlfyprixe] {
        font-size: 32px;
        color: var(--text-primary);
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-cart p[b-phlfyprixe] {
        font-size: 18px;
        color: var(--text-secondary);
        margin-bottom: 30px;
    }

.btn-continue-shopping[b-phlfyprixe] {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-continue-shopping:hover[b-phlfyprixe] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Checkout Header */
.checkout-header[b-phlfyprixe] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .checkout-header h1[b-phlfyprixe] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
        line-height: 1.2;
    }

/* Checkout Steps Indicator */
.checkout-steps[b-phlfyprixe] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
}

    .checkout-steps[b-phlfyprixe]::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 20%;
        right: 20%;
        height: 2px;
        background: linear-gradient(90deg, var(--border-color) 0%, var(--primary-color) 50%, var(--border-color) 100%);
        z-index: 0;
    }

.step[b-phlfyprixe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    min-width: 120px;
}

.step-number[b-phlfyprixe] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

.step-title[b-phlfyprixe] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    transition: color 0.3s;
}

.step.active .step-number[b-phlfyprixe] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: var(--glow-primary);
    transform: scale(1.1);
}

.step.active .step-title[b-phlfyprixe] {
    color: var(--primary-color);
}

.step.completed .step-number[b-phlfyprixe] {
    background: var(--gradient-success);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(59, 201, 104, 0.3);
}

.step.completed .step-title[b-phlfyprixe] {
    color: var(--success-color);
}

/* Main Content Layout */
.checkout-content[b-phlfyprixe] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.checkout-main[b-phlfyprixe] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .checkout-main[b-phlfyprixe]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .checkout-main:hover[b-phlfyprixe]::before {
        opacity: 1;
    }

/* Checkout Step Base Styles */
.checkout-step[b-phlfyprixe] {
    animation: fadeInUp-b-phlfyprixe 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

    .checkout-step h2[b-phlfyprixe] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .checkout-step h2[b-phlfyprixe]::before {
            content: '';
            width: 4px;
            height: 32px;
            background: var(--gradient-primary);
            border-radius: 2px;
        }

    .checkout-step h3[b-phlfyprixe] {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .checkout-step h3[b-phlfyprixe]::before {
            content: '';
            width: 3px;
            height: 20px;
            background: var(--gradient-secondary);
            border-radius: 2px;
        }

/* Form Styles */
.form-grid[b-phlfyprixe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.form-group[b-phlfyprixe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-phlfyprixe] {
        grid-column: 1 / -1;
    }

    .form-group label[b-phlfyprixe] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-group input[b-phlfyprixe],
    .form-group select[b-phlfyprixe] {
        padding: 14px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 15px;
        color: var(--text-primary);
        min-height: 48px;
    }

        .form-group input:hover[b-phlfyprixe],
        .form-group select:hover[b-phlfyprixe] {
            border-color: var(--border-hover);
            background: rgba(102, 126, 234, 0.08);
        }

        .form-group input:focus[b-phlfyprixe],
        .form-group select:focus[b-phlfyprixe] {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        .form-group input[b-phlfyprixe]::placeholder {
            color: var(--text-tertiary);
        }

/* Contact Info Section */
.contact-info[b-phlfyprixe] {
    margin-bottom: 40px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Shipping Address Section */
.shipping-address[b-phlfyprixe] {
    margin-bottom: 40px;
}

.saved-addresses[b-phlfyprixe] {
    margin-bottom: 32px;
}

    .saved-addresses h4[b-phlfyprixe] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

.address-option[b-phlfyprixe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .address-option[b-phlfyprixe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-primary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .address-option:hover[b-phlfyprixe] {
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

        .address-option:hover[b-phlfyprixe]::before {
            transform: scaleY(1);
        }

    .address-option.selected[b-phlfyprixe] {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    }

        .address-option.selected[b-phlfyprixe]::before {
            transform: scaleY(1);
        }

.address-content[b-phlfyprixe] {
    flex: 1;
}

.address-text[b-phlfyprixe] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.address-city[b-phlfyprixe] {
    font-size: 14px;
    color: var(--text-secondary);
}

.address-actions[b-phlfyprixe] {
    display: flex;
    gap: 8px;
}

.btn-edit[b-phlfyprixe] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

    .btn-edit:hover[b-phlfyprixe] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* New Address Section */
.new-address[b-phlfyprixe] {
    padding: 24px;
    background: rgba(118, 75, 162, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(118, 75, 162, 0.1);
}

.address-toggle[b-phlfyprixe] {
    margin-bottom: 20px;
}

    .address-toggle label[b-phlfyprixe] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .address-toggle label input[type="checkbox"][b-phlfyprixe] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

.address-form[b-phlfyprixe] {
    animation: slideDown-b-phlfyprixe 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shipping Method Section */
.shipping-method[b-phlfyprixe] {
    margin-bottom: 40px;
}

.shipping-option[b-phlfyprixe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .shipping-option[b-phlfyprixe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-secondary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .shipping-option:hover[b-phlfyprixe] {
        border-color: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);
    }

        .shipping-option:hover[b-phlfyprixe]::before {
            transform: scaleY(1);
        }

    .shipping-option.selected[b-phlfyprixe] {
        border-color: var(--secondary-color);
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(45, 212, 191, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
    }

        .shipping-option.selected[b-phlfyprixe]::before {
            transform: scaleY(1);
        }

.method-info h4[b-phlfyprixe] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.method-info p[b-phlfyprixe] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.delivery-time[b-phlfyprixe] {
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
}

.method-cost[b-phlfyprixe] {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Payment Methods Section */
.payment-methods[b-phlfyprixe] {
    margin-bottom: 40px;
}

.payment-method[b-phlfyprixe] {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

    .payment-method[b-phlfyprixe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-warm);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .payment-method:hover[b-phlfyprixe] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
    }

        .payment-method:hover[b-phlfyprixe]::before {
            transform: scaleY(1);
        }

    .payment-method.selected[b-phlfyprixe] {
        border-color: var(--accent-color);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
    }

        .payment-method.selected[b-phlfyprixe]::before {
            transform: scaleY(1);
        }

.method-header[b-phlfyprixe] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.method-logo[b-phlfyprixe] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .method-logo img[b-phlfyprixe] {
        max-width: 40px;
        max-height: 40px;
        object-fit: contain;
    }

    .method-logo i[b-phlfyprixe] {
        font-size: 24px;
        color: var(--accent-color);
    }

.method-info[b-phlfyprixe] {
    flex: 1;
}

    .method-info h3[b-phlfyprixe] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .method-info p[b-phlfyprixe] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.fee-info[b-phlfyprixe] {
    font-size: 13px;
    color: var(--warning-color);
    font-weight: 500;
}

/* Card Details Section */
.card-details[b-phlfyprixe] {
    padding: 24px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    animation: slideDown-b-phlfyprixe 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .card-details h4[b-phlfyprixe] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
    }

.expiry-inputs[b-phlfyprixe] {
    display: flex;
    gap: 12px;
}

    .expiry-inputs select[b-phlfyprixe] {
        flex: 1;
    }

/* Step Actions */
.step-actions[b-phlfyprixe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.btn-back[b-phlfyprixe],
.btn-next[b-phlfyprixe],
.btn-place-order[b-phlfyprixe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-back[b-phlfyprixe] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: var(--text-secondary);
}

    .btn-back:hover[b-phlfyprixe] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.btn-next[b-phlfyprixe] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-next:hover[b-phlfyprixe] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .btn-next:disabled[b-phlfyprixe] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-place-order[b-phlfyprixe] {
    background: var(--gradient-success);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    position: relative;
}

    .btn-place-order:hover:not(:disabled)[b-phlfyprixe] {
        transform: translateY(-3px);
        box-shadow: var(--glow-secondary), 0 8px 25px rgba(16, 185, 129, 0.4);
    }

    .btn-place-order:disabled[b-phlfyprixe] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Loading States */
.loading-section[b-phlfyprixe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
}

.spinner[b-phlfyprixe] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-phlfyprixe 1s linear infinite;
    margin-bottom: 16px;
}

/* No Options States */
.no-payment-methods[b-phlfyprixe],
.no-installment-available[b-phlfyprixe],
.no-installment-options[b-phlfyprixe] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(248, 113, 113, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.1);
}

    .no-payment-methods i[b-phlfyprixe],
    .no-installment-available i[b-phlfyprixe],
    .no-installment-options i[b-phlfyprixe] {
        font-size: 48px;
        color: var(--warning-color);
        margin-bottom: 16px;
        display: block;
    }

    .no-payment-methods p[b-phlfyprixe],
    .no-installment-available p[b-phlfyprixe],
    .no-installment-options p[b-phlfyprixe] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

/* Order Review Section */
.order-review[b-phlfyprixe] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.review-section[b-phlfyprixe] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .review-section:hover[b-phlfyprixe] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-color);
    }

    .review-section h3[b-phlfyprixe] {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

.review-content[b-phlfyprixe] {
    margin-bottom: 16px;
}

    .review-content p[b-phlfyprixe] {
        margin-bottom: 8px;
        font-size: 15px;
        color: var(--text-primary);
    }

        .review-content p strong[b-phlfyprixe] {
            color: var(--text-primary);
            font-weight: 600;
            margin-right: 8px;
        }

.btn-edit-small[b-phlfyprixe] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    top: 20px;
    right: 20px;
}

    .btn-edit-small:hover[b-phlfyprixe] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* Order Items Review */
.order-items-review[b-phlfyprixe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-item[b-phlfyprixe] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    transition: all 0.3s;
}

    .review-item:hover[b-phlfyprixe] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

.item-image[b-phlfyprixe] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

    .item-image img[b-phlfyprixe] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.item-info[b-phlfyprixe] {
    flex: 1;
}

    .item-info h4[b-phlfyprixe] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .item-info p[b-phlfyprixe] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.item-total[b-phlfyprixe] {
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Order Totals */
.review-totals[b-phlfyprixe] {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 20px;
}

.total-line[b-phlfyprixe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-primary);
}

    .total-line.discount[b-phlfyprixe] {
        color: var(--success-color);
    }

    .total-line.total[b-phlfyprixe] {
        border-top: 1px solid var(--border-color);
        margin-top: 8px;
        padding-top: 16px;
        font-size: 18px;
        font-weight: 700;
    }

    .total-line.highlight[b-phlfyprixe] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        margin: 8px -8px;
        padding: 12px 8px;
        border-radius: 6px;
        font-weight: 600;
        color: var(--primary-color);
    }

.installment-breakdown[b-phlfyprixe] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Terms Agreement */
.terms-agreement[b-phlfyprixe] {
    margin: 32px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .terms-agreement label[b-phlfyprixe] {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .terms-agreement label input[type="checkbox"][b-phlfyprixe] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

        .terms-agreement label a[b-phlfyprixe] {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
        }

            .terms-agreement label a:hover[b-phlfyprixe] {
                text-decoration: underline;
            }

/* Order Summary Panel (Sidebar) */
.checkout-sidebar[b-phlfyprixe] {
    position: sticky;
    top: 24px;
}

.order-summary[b-phlfyprixe] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .order-summary[b-phlfyprixe]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .order-summary:hover[b-phlfyprixe]::before {
        opacity: 1;
    }

    .order-summary h3[b-phlfyprixe] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
    }

/* Summary Items */
.summary-items[b-phlfyprixe] {
    margin-bottom: 24px;
}

.summary-item[b-phlfyprixe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.item-details[b-phlfyprixe] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name[b-phlfyprixe] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.item-quantity[b-phlfyprixe] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-price[b-phlfyprixe] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Summary Totals */
.summary-totals[b-phlfyprixe] {
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    margin-bottom: 24px;
}

/* Discount Code Section */
.discount-code[b-phlfyprixe] {
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.discount-toggle[b-phlfyprixe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background-color 0.3s;
}

    .discount-toggle:hover[b-phlfyprixe] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .discount-toggle span[b-phlfyprixe] {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .discount-toggle i[b-phlfyprixe] {
        color: var(--primary-color);
        transition: transform 0.3s;
    }

.discount-form[b-phlfyprixe] {
    padding: 20px;
    background: white;
    display: flex;
    gap: 8px;
    animation: slideDown-b-phlfyprixe 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .discount-form input[b-phlfyprixe] {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
    }

        .discount-form input:focus[b-phlfyprixe] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

    .discount-form button[b-phlfyprixe] {
        background: var(--gradient-primary);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .discount-form button:hover:not(:disabled)[b-phlfyprixe] {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .discount-form button:disabled[b-phlfyprixe] {
            opacity: 0.6;
            cursor: not-allowed;
        }

.applied-discount[b-phlfyprixe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.discount-info[b-phlfyprixe] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success-color);
    font-weight: 600;
}

    .discount-info i[b-phlfyprixe] {
        font-size: 16px;
    }

.remove-discount[b-phlfyprixe] {
    background: transparent;
    border: 1px solid var(--success-color);
    color: var(--success-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .remove-discount:hover[b-phlfyprixe] {
        background: var(--success-color);
        color: white;
    }

/* Security Info */
.security-info[b-phlfyprixe] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.security-badges[b-phlfyprixe] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-badge[b-phlfyprixe] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--success-color);
    font-weight: 500;
}

    .security-badge i[b-phlfyprixe] {
        font-size: 16px;
    }

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

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

@keyframes slideDown-b-phlfyprixe {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

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

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

/* Responsive Design */
@media (max-width: 1200px) {
    .checkout-content[b-phlfyprixe] {
        grid-template-columns: 1fr 350px;
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .checkout-content[b-phlfyprixe] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .checkout-sidebar[b-phlfyprixe] {
        position: static;
        order: -1;
    }

    .order-summary[b-phlfyprixe] {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .checkout-page[b-phlfyprixe] {
        padding: 16px;
    }

    .checkout-header[b-phlfyprixe] {
        padding: 16px;
        margin-bottom: 24px;
    }

        .checkout-header h1[b-phlfyprixe] {
            font-size: 28px;
        }

    .checkout-steps[b-phlfyprixe] {
        gap: 12px;
    }

    .step[b-phlfyprixe] {
        min-width: 80px;
    }

    .step-number[b-phlfyprixe] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .step-title[b-phlfyprixe] {
        font-size: 12px;
    }

    .checkout-main[b-phlfyprixe] {
        padding: 24px;
    }

    .checkout-step h2[b-phlfyprixe] {
        font-size: 24px;
    }

    .form-grid[b-phlfyprixe] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .address-option[b-phlfyprixe],
    .shipping-option[b-phlfyprixe],
    .payment-method[b-phlfyprixe] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .btn-edit-small[b-phlfyprixe] {
        position: static;
        margin-top: 16px;
        width: 100%;
    }

    .step-actions[b-phlfyprixe] {
        flex-direction: column;
        gap: 12px;
    }

    .btn-back[b-phlfyprixe],
    .btn-next[b-phlfyprixe],
    .btn-place-order[b-phlfyprixe] {
        width: 100%;
    }

    .order-summary[b-phlfyprixe] {
        padding: 20px;
    }

    .method-header[b-phlfyprixe] {
        padding: 16px;
    }

    .card-details[b-phlfyprixe] {
        padding: 16px;
    }

    .expiry-inputs[b-phlfyprixe] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .checkout-page[b-phlfyprixe] {
        padding: 12px;
    }

    .checkout-header h1[b-phlfyprixe] {
        font-size: 24px;
    }

    .checkout-steps[b-phlfyprixe] {
        gap: 8px;
    }

    .step[b-phlfyprixe] {
        min-width: 60px;
    }

    .step-number[b-phlfyprixe] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .step-title[b-phlfyprixe] {
        font-size: 10px;
    }

    .checkout-main[b-phlfyprixe] {
        padding: 16px;
    }

    .order-summary[b-phlfyprixe] {
        padding: 16px;
    }

    .review-item[b-phlfyprixe] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .item-image[b-phlfyprixe] {
        width: 60px;
        height: 60px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .checkout-page[b-phlfyprixe] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .checkout-page[b-phlfyprixe]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .checkout-main[b-phlfyprixe],
[data-theme="dark"] .order-summary[b-phlfyprixe],
[data-theme="dark"] .checkout-header[b-phlfyprixe] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .address-option[b-phlfyprixe],
[data-theme="dark"] .shipping-option[b-phlfyprixe],
[data-theme="dark"] .payment-method[b-phlfyprixe],
[data-theme="dark"] .review-section[b-phlfyprixe] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-group input[b-phlfyprixe],
[data-theme="dark"] .form-group select[b-phlfyprixe] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .form-group input:focus[b-phlfyprixe],
    [data-theme="dark"] .form-group select:focus[b-phlfyprixe] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #5a6cb3;
    }

[data-theme="dark"] .contact-info[b-phlfyprixe],
[data-theme="dark"] .new-address[b-phlfyprixe] {
    background: rgba(90, 108, 179, 0.1);
    border-color: rgba(90, 108, 179, 0.2);
}

[data-theme="dark"] .step-number[b-phlfyprixe] {
    background: rgba(71, 85, 105, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
    color: #9ca3af;
}

[data-theme="dark"] .step.active .step-number[b-phlfyprixe] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    box-shadow: 0 2px 8px rgba(90, 108, 179, 0.3);
}

[data-theme="dark"] .step.completed .step-number[b-phlfyprixe] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    box-shadow: 0 2px 8px rgba(59, 201, 104, 0.3);
}

[data-theme="dark"] .empty-cart[b-phlfyprixe],
[data-theme="dark"] .checkout-loading[b-phlfyprixe] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

/* Print Styles */
@media print {
    .checkout-page[b-phlfyprixe] {
        background: white !important;
        padding: 0;
    }

    .checkout-header[b-phlfyprixe],
    .step-actions[b-phlfyprixe],
    .btn-edit-small[b-phlfyprixe],
    .security-info[b-phlfyprixe],
    .discount-code[b-phlfyprixe] {
        display: none !important;
    }

    .checkout-content[b-phlfyprixe] {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .checkout-main[b-phlfyprixe],
    .order-summary[b-phlfyprixe] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/Component/PopupComponent.razor.rz.scp.css */
/* Popup Overlay */
.popup-overlay[b-qoxz0jz3j7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .popup-overlay.show[b-qoxz0jz3j7] {
        opacity: 1;
        visibility: visible;
    }

/* Popup Dialog */
.popup-dialog[b-qoxz0jz3j7] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.popup-overlay.show .popup-dialog[b-qoxz0jz3j7] {
    transform: scale(1) translateY(0);
}

/* Animation Classes */
.popup-dialog.fade-in[b-qoxz0jz3j7] {
    animation: fadeInUp-b-qoxz0jz3j7 0.3s ease-out;
}

.popup-dialog.slide-down[b-qoxz0jz3j7] {
    animation: slideDown-b-qoxz0jz3j7 0.3s ease-out;
}

.popup-dialog.zoom-in[b-qoxz0jz3j7] {
    animation: zoomIn-b-qoxz0jz3j7 0.3s ease-out;
}

.popup-dialog.bounce-in[b-qoxz0jz3j7] {
    animation: bounceIn-b-qoxz0jz3j7 0.5s ease-out;
}

/* Dialog Sizes */
.popup-dialog.small[b-qoxz0jz3j7] {
    max-width: 400px;
}

.popup-dialog.medium[b-qoxz0jz3j7] {
    max-width: 600px;
}

.popup-dialog.large[b-qoxz0jz3j7] {
    max-width: 800px;
}

.popup-dialog.xlarge[b-qoxz0jz3j7] {
    max-width: 1000px;
}

/* Popup Header */
.popup-header[b-qoxz0jz3j7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
}

.popup-header-content[b-qoxz0jz3j7] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.popup-icon[b-qoxz0jz3j7] {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Type-specific styling */
.popup-header.success[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-bottom-color: #86efac;
}

    .popup-header.success .popup-icon[b-qoxz0jz3j7] {
        color: #16a34a;
        background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
    }

.popup-header.error[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-bottom-color: #fca5a5;
}

    .popup-header.error .popup-icon[b-qoxz0jz3j7] {
        color: #dc2626;
        background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    }

.popup-header.warning[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-bottom-color: #fcd34d;
}

    .popup-header.warning .popup-icon[b-qoxz0jz3j7] {
        color: #d97706;
        background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
    }

.popup-header.info[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom-color: #93c5fd;
}

    .popup-header.info .popup-icon[b-qoxz0jz3j7] {
        color: #2563eb;
        background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }

.popup-header.question[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-bottom-color: #c4b5fd;
}

    .popup-header.question .popup-icon[b-qoxz0jz3j7] {
        color: #7c3aed;
        background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    }

.popup-header.delete[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-bottom-color: #f87171;
}

    .popup-header.delete .popup-icon[b-qoxz0jz3j7] {
        color: #b91c1c;
        background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
    }

.popup-title[b-qoxz0jz3j7] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
    letter-spacing: -0.025em;
}

.popup-close[b-qoxz0jz3j7] {
    background: white;
    border: 2px solid #e5e7eb;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .popup-close:hover[b-qoxz0jz3j7] {
        background-color: #f3f4f6;
        border-color: #d1d5db;
        color: #374151;
        transform: rotate(90deg);
    }

/* Popup Body */
.popup-body[b-qoxz0jz3j7] {
    padding: 32px 24px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.popup-message[b-qoxz0jz3j7] {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

.popup-input-group[b-qoxz0jz3j7] {
    margin-top: 24px;
}

    .popup-input-group .form-control[b-qoxz0jz3j7] {
        font-size: 16px;
        padding: 12px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        transition: all 0.2s;
        width: 100%;
    }

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

    .popup-input-group textarea.form-control[b-qoxz0jz3j7] {
        resize: vertical;
        min-height: 100px;
    }

    .popup-input-group .invalid-feedback[b-qoxz0jz3j7] {
        margin-top: 8px;
        font-size: 14px;
        color: #ef4444;
    }

/* Popup Footer */
.popup-footer[b-qoxz0jz3j7] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
    justify-content: flex-end;
    flex-wrap: wrap;
}

    .popup-footer .btn[b-qoxz0jz3j7] {
        padding: 10px 20px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 2px solid transparent;
        min-width: 100px;
        justify-content: center;
    }

        .popup-footer .btn:hover[b-qoxz0jz3j7] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .popup-footer .btn:active[b-qoxz0jz3j7] {
            transform: translateY(0);
        }

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

/* Loading State */
.popup-loading[b-qoxz0jz3j7] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(2px);
}

    .popup-loading .spinner-border[b-qoxz0jz3j7] {
        width: 40px;
        height: 40px;
        border-width: 4px;
    }

/* Custom Button Styles */
.btn-success[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border-color: #16a34a;
}

    .btn-success:hover[b-qoxz0jz3j7] {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    }

.btn-danger[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: #dc2626;
}

    .btn-danger:hover[b-qoxz0jz3j7] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    }

.btn-primary[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: #2563eb;
}

    .btn-primary:hover[b-qoxz0jz3j7] {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    }

.btn-secondary[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border-color: #4b5563;
}

    .btn-secondary:hover[b-qoxz0jz3j7] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    }

.btn-warning[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-color: #d97706;
}

    .btn-warning:hover[b-qoxz0jz3j7] {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    }

.btn-info[b-qoxz0jz3j7] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border-color: #0891b2;
}

    .btn-info:hover[b-qoxz0jz3j7] {
        background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    }

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

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

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

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

@keyframes zoomIn-b-qoxz0jz3j7 {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

@keyframes bounceIn-b-qoxz0jz3j7 {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

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

/* Responsive Design */
@media (max-width: 768px) {
    .popup-dialog[b-qoxz0jz3j7] {
        width: 95%;
        margin: 10px;
        max-height: 95vh;
    }

    .popup-header[b-qoxz0jz3j7] {
        padding: 20px;
    }

    .popup-icon[b-qoxz0jz3j7] {
        width: 48px;
        height: 48px;
        font-size: 28px;
    }

    .popup-title[b-qoxz0jz3j7] {
        font-size: 18px;
    }

    .popup-body[b-qoxz0jz3j7] {
        padding: 20px;
    }

    .popup-footer[b-qoxz0jz3j7] {
        padding: 16px 20px;
        justify-content: stretch;
    }

        .popup-footer .btn[b-qoxz0jz3j7] {
            flex: 1;
            min-width: 0;
        }
}

@media (max-width: 480px) {
    .popup-header-content[b-qoxz0jz3j7] {
        gap: 12px;
    }

    .popup-icon[b-qoxz0jz3j7] {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .popup-footer[b-qoxz0jz3j7] {
        gap: 8px;
    }

        .popup-footer .btn[b-qoxz0jz3j7] {
            padding: 8px 16px;
            font-size: 14px;
        }
}

/* Dark Theme Support */
[data-theme="dark"] .popup-overlay[b-qoxz0jz3j7] {
    background-color: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .popup-dialog[b-qoxz0jz3j7] {
    background: #1f2937;
    color: #f3f4f6;
}

[data-theme="dark"] .popup-header[b-qoxz0jz3j7] {
    background: linear-gradient(to right, #1f2937, #111827);
    border-bottom-color: #374151;
}

[data-theme="dark"] .popup-title[b-qoxz0jz3j7] {
    color: #f3f4f6;
}

[data-theme="dark"] .popup-message[b-qoxz0jz3j7] {
    color: #d1d5db;
}

[data-theme="dark"] .popup-footer[b-qoxz0jz3j7] {
    background-color: #111827;
    border-top-color: #374151;
}

[data-theme="dark"] .popup-close[b-qoxz0jz3j7] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

    [data-theme="dark"] .popup-close:hover[b-qoxz0jz3j7] {
        background-color: #4b5563;
        border-color: #6b7280;
        color: #d1d5db;
    }

[data-theme="dark"] .popup-input-group .form-control[b-qoxz0jz3j7] {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

    [data-theme="dark"] .popup-input-group .form-control:focus[b-qoxz0jz3j7] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
    }

[data-theme="dark"] .popup-loading[b-qoxz0jz3j7] {
    background-color: rgba(17, 24, 39, 0.9);
}

/* RTL Support */
.rtl .popup-header-content[b-qoxz0jz3j7] {
    flex-direction: row-reverse;
}

.rtl .popup-footer[b-qoxz0jz3j7] {
    justify-content: flex-start;
}

.rtl .popup-close:hover[b-qoxz0jz3j7] {
    transform: rotate(-90deg);
}

/* Print Styles */
@media print {
    .popup-overlay[b-qoxz0jz3j7] {
        display: none !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/Component/ReviewOrderStep.razor.rz.scp.css */

/* ===================================
   Checkout Page - Modern Professional CSS
   تصميم صفحة الدفع بأسلوب احترافي حديث
   =================================== */

/* Page Container - Modern E-Commerce Style */
.checkout-page[b-zt3hpmf7jv] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .checkout-page[b-zt3hpmf7jv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .checkout-page > *[b-zt3hpmf7jv] {
        position: relative;
        z-index: 1;
    }

/* Loading State */
.checkout-loading[b-zt3hpmf7jv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

.loading-spinner[b-zt3hpmf7jv] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-zt3hpmf7jv 1s linear infinite;
    margin-bottom: 20px;
}

.checkout-loading p[b-zt3hpmf7jv] {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Empty Cart State */
.empty-cart[b-zt3hpmf7jv] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 600px;
}

    .empty-cart i[b-zt3hpmf7jv] {
        font-size: 120px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-cart h3[b-zt3hpmf7jv] {
        font-size: 32px;
        color: var(--text-primary);
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-cart p[b-zt3hpmf7jv] {
        font-size: 18px;
        color: var(--text-secondary);
        margin-bottom: 30px;
    }

.btn-continue-shopping[b-zt3hpmf7jv] {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-continue-shopping:hover[b-zt3hpmf7jv] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Checkout Header */
.checkout-header[b-zt3hpmf7jv] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .checkout-header h1[b-zt3hpmf7jv] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
        line-height: 1.2;
    }

/* Checkout Steps Indicator */
.checkout-steps[b-zt3hpmf7jv] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
}

    .checkout-steps[b-zt3hpmf7jv]::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 20%;
        right: 20%;
        height: 2px;
        background: linear-gradient(90deg, var(--border-color) 0%, var(--primary-color) 50%, var(--border-color) 100%);
        z-index: 0;
    }

.step[b-zt3hpmf7jv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    min-width: 120px;
}

.step-number[b-zt3hpmf7jv] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

.step-title[b-zt3hpmf7jv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    transition: color 0.3s;
}

.step.active .step-number[b-zt3hpmf7jv] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: var(--glow-primary);
    transform: scale(1.1);
}

.step.active .step-title[b-zt3hpmf7jv] {
    color: var(--primary-color);
}

.step.completed .step-number[b-zt3hpmf7jv] {
    background: var(--gradient-success);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(59, 201, 104, 0.3);
}

.step.completed .step-title[b-zt3hpmf7jv] {
    color: var(--success-color);
}

/* Main Content Layout */
.checkout-content[b-zt3hpmf7jv] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.checkout-main[b-zt3hpmf7jv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .checkout-main[b-zt3hpmf7jv]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .checkout-main:hover[b-zt3hpmf7jv]::before {
        opacity: 1;
    }

/* Checkout Step Base Styles */
.checkout-step[b-zt3hpmf7jv] {
    animation: fadeInUp-b-zt3hpmf7jv 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

    .checkout-step h2[b-zt3hpmf7jv] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .checkout-step h2[b-zt3hpmf7jv]::before {
            content: '';
            width: 4px;
            height: 32px;
            background: var(--gradient-primary);
            border-radius: 2px;
        }

    .checkout-step h3[b-zt3hpmf7jv] {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .checkout-step h3[b-zt3hpmf7jv]::before {
            content: '';
            width: 3px;
            height: 20px;
            background: var(--gradient-secondary);
            border-radius: 2px;
        }

/* Form Styles */
.form-grid[b-zt3hpmf7jv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.form-group[b-zt3hpmf7jv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-zt3hpmf7jv] {
        grid-column: 1 / -1;
    }

    .form-group label[b-zt3hpmf7jv] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-group input[b-zt3hpmf7jv],
    .form-group select[b-zt3hpmf7jv] {
        padding: 14px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 15px;
        color: var(--text-primary);
        min-height: 48px;
    }

        .form-group input:hover[b-zt3hpmf7jv],
        .form-group select:hover[b-zt3hpmf7jv] {
            border-color: var(--border-hover);
            background: rgba(102, 126, 234, 0.08);
        }

        .form-group input:focus[b-zt3hpmf7jv],
        .form-group select:focus[b-zt3hpmf7jv] {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        .form-group input[b-zt3hpmf7jv]::placeholder {
            color: var(--text-tertiary);
        }

/* Contact Info Section */
.contact-info[b-zt3hpmf7jv] {
    margin-bottom: 40px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Shipping Address Section */
.shipping-address[b-zt3hpmf7jv] {
    margin-bottom: 40px;
}

.saved-addresses[b-zt3hpmf7jv] {
    margin-bottom: 32px;
}

    .saved-addresses h4[b-zt3hpmf7jv] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

.address-option[b-zt3hpmf7jv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .address-option[b-zt3hpmf7jv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-primary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .address-option:hover[b-zt3hpmf7jv] {
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

        .address-option:hover[b-zt3hpmf7jv]::before {
            transform: scaleY(1);
        }

    .address-option.selected[b-zt3hpmf7jv] {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    }

        .address-option.selected[b-zt3hpmf7jv]::before {
            transform: scaleY(1);
        }

.address-content[b-zt3hpmf7jv] {
    flex: 1;
}

.address-text[b-zt3hpmf7jv] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.address-city[b-zt3hpmf7jv] {
    font-size: 14px;
    color: var(--text-secondary);
}

.address-actions[b-zt3hpmf7jv] {
    display: flex;
    gap: 8px;
}

.btn-edit[b-zt3hpmf7jv] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

    .btn-edit:hover[b-zt3hpmf7jv] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* New Address Section */
.new-address[b-zt3hpmf7jv] {
    padding: 24px;
    background: rgba(118, 75, 162, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(118, 75, 162, 0.1);
}

.address-toggle[b-zt3hpmf7jv] {
    margin-bottom: 20px;
}

    .address-toggle label[b-zt3hpmf7jv] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .address-toggle label input[type="checkbox"][b-zt3hpmf7jv] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

.address-form[b-zt3hpmf7jv] {
    animation: slideDown-b-zt3hpmf7jv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shipping Method Section */
.shipping-method[b-zt3hpmf7jv] {
    margin-bottom: 40px;
}

.shipping-option[b-zt3hpmf7jv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .shipping-option[b-zt3hpmf7jv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-secondary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .shipping-option:hover[b-zt3hpmf7jv] {
        border-color: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);
    }

        .shipping-option:hover[b-zt3hpmf7jv]::before {
            transform: scaleY(1);
        }

    .shipping-option.selected[b-zt3hpmf7jv] {
        border-color: var(--secondary-color);
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(45, 212, 191, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
    }

        .shipping-option.selected[b-zt3hpmf7jv]::before {
            transform: scaleY(1);
        }

.method-info h4[b-zt3hpmf7jv] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.method-info p[b-zt3hpmf7jv] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.delivery-time[b-zt3hpmf7jv] {
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
}

.method-cost[b-zt3hpmf7jv] {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Payment Methods Section */
.payment-methods[b-zt3hpmf7jv] {
    margin-bottom: 40px;
}

.payment-method[b-zt3hpmf7jv] {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

    .payment-method[b-zt3hpmf7jv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-warm);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .payment-method:hover[b-zt3hpmf7jv] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
    }

        .payment-method:hover[b-zt3hpmf7jv]::before {
            transform: scaleY(1);
        }

    .payment-method.selected[b-zt3hpmf7jv] {
        border-color: var(--accent-color);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
    }

        .payment-method.selected[b-zt3hpmf7jv]::before {
            transform: scaleY(1);
        }

.method-header[b-zt3hpmf7jv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.method-logo[b-zt3hpmf7jv] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .method-logo img[b-zt3hpmf7jv] {
        max-width: 40px;
        max-height: 40px;
        object-fit: contain;
    }

    .method-logo i[b-zt3hpmf7jv] {
        font-size: 24px;
        color: var(--accent-color);
    }

.method-info[b-zt3hpmf7jv] {
    flex: 1;
}

    .method-info h3[b-zt3hpmf7jv] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .method-info p[b-zt3hpmf7jv] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.fee-info[b-zt3hpmf7jv] {
    font-size: 13px;
    color: var(--warning-color);
    font-weight: 500;
}

/* Card Details Section */
.card-details[b-zt3hpmf7jv] {
    padding: 24px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    animation: slideDown-b-zt3hpmf7jv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .card-details h4[b-zt3hpmf7jv] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
    }

.expiry-inputs[b-zt3hpmf7jv] {
    display: flex;
    gap: 12px;
}

    .expiry-inputs select[b-zt3hpmf7jv] {
        flex: 1;
    }

/* Step Actions */
.step-actions[b-zt3hpmf7jv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.btn-back[b-zt3hpmf7jv],
.btn-next[b-zt3hpmf7jv],
.btn-place-order[b-zt3hpmf7jv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-back[b-zt3hpmf7jv] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: var(--text-secondary);
}

    .btn-back:hover[b-zt3hpmf7jv] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.btn-next[b-zt3hpmf7jv] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-next:hover[b-zt3hpmf7jv] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .btn-next:disabled[b-zt3hpmf7jv] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-place-order[b-zt3hpmf7jv] {
    background: var(--gradient-success);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    position: relative;
}

    .btn-place-order:hover:not(:disabled)[b-zt3hpmf7jv] {
        transform: translateY(-3px);
        box-shadow: var(--glow-secondary), 0 8px 25px rgba(16, 185, 129, 0.4);
    }

    .btn-place-order:disabled[b-zt3hpmf7jv] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Loading States */
.loading-section[b-zt3hpmf7jv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
}

.spinner[b-zt3hpmf7jv] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-zt3hpmf7jv 1s linear infinite;
    margin-bottom: 16px;
}

/* No Options States */
.no-payment-methods[b-zt3hpmf7jv],
.no-installment-available[b-zt3hpmf7jv],
.no-installment-options[b-zt3hpmf7jv] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(248, 113, 113, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.1);
}

    .no-payment-methods i[b-zt3hpmf7jv],
    .no-installment-available i[b-zt3hpmf7jv],
    .no-installment-options i[b-zt3hpmf7jv] {
        font-size: 48px;
        color: var(--warning-color);
        margin-bottom: 16px;
        display: block;
    }

    .no-payment-methods p[b-zt3hpmf7jv],
    .no-installment-available p[b-zt3hpmf7jv],
    .no-installment-options p[b-zt3hpmf7jv] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

/* Order Review Section */
.order-review[b-zt3hpmf7jv] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.review-section[b-zt3hpmf7jv] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .review-section:hover[b-zt3hpmf7jv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-color);
    }

    .review-section h3[b-zt3hpmf7jv] {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

.review-content[b-zt3hpmf7jv] {
    margin-bottom: 16px;
}

    .review-content p[b-zt3hpmf7jv] {
        margin-bottom: 8px;
        font-size: 15px;
        color: var(--text-primary);
    }

        .review-content p strong[b-zt3hpmf7jv] {
            color: var(--text-primary);
            font-weight: 600;
            margin-right: 8px;
        }

.btn-edit-small[b-zt3hpmf7jv] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    top: 20px;
    right: 20px;
}

    .btn-edit-small:hover[b-zt3hpmf7jv] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* Order Items Review */
.order-items-review[b-zt3hpmf7jv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-item[b-zt3hpmf7jv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    transition: all 0.3s;
}

    .review-item:hover[b-zt3hpmf7jv] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

.item-image[b-zt3hpmf7jv] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

    .item-image img[b-zt3hpmf7jv] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.item-info[b-zt3hpmf7jv] {
    flex: 1;
}

    .item-info h4[b-zt3hpmf7jv] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .item-info p[b-zt3hpmf7jv] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.item-total[b-zt3hpmf7jv] {
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Order Totals */
.review-totals[b-zt3hpmf7jv] {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 20px;
}

.total-line[b-zt3hpmf7jv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-primary);
}

    .total-line.discount[b-zt3hpmf7jv] {
        color: var(--success-color);
    }

    .total-line.total[b-zt3hpmf7jv] {
        border-top: 1px solid var(--border-color);
        margin-top: 8px;
        padding-top: 16px;
        font-size: 18px;
        font-weight: 700;
    }

    .total-line.highlight[b-zt3hpmf7jv] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        margin: 8px -8px;
        padding: 12px 8px;
        border-radius: 6px;
        font-weight: 600;
        color: var(--primary-color);
    }

.installment-breakdown[b-zt3hpmf7jv] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Terms Agreement */
.terms-agreement[b-zt3hpmf7jv] {
    margin: 32px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .terms-agreement label[b-zt3hpmf7jv] {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .terms-agreement label input[type="checkbox"][b-zt3hpmf7jv] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

        .terms-agreement label a[b-zt3hpmf7jv] {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
        }

            .terms-agreement label a:hover[b-zt3hpmf7jv] {
                text-decoration: underline;
            }

/* Order Summary Panel (Sidebar) */
.checkout-sidebar[b-zt3hpmf7jv] {
    position: sticky;
    top: 24px;
}

.order-summary[b-zt3hpmf7jv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .order-summary[b-zt3hpmf7jv]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .order-summary:hover[b-zt3hpmf7jv]::before {
        opacity: 1;
    }

    .order-summary h3[b-zt3hpmf7jv] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
    }

/* Summary Items */
.summary-items[b-zt3hpmf7jv] {
    margin-bottom: 24px;
}

.summary-item[b-zt3hpmf7jv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.item-details[b-zt3hpmf7jv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name[b-zt3hpmf7jv] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.item-quantity[b-zt3hpmf7jv] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-price[b-zt3hpmf7jv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Summary Totals */
.summary-totals[b-zt3hpmf7jv] {
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    margin-bottom: 24px;
}

/* Discount Code Section */
.discount-code[b-zt3hpmf7jv] {
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.discount-toggle[b-zt3hpmf7jv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background-color 0.3s;
}

    .discount-toggle:hover[b-zt3hpmf7jv] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .discount-toggle span[b-zt3hpmf7jv] {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .discount-toggle i[b-zt3hpmf7jv] {
        color: var(--primary-color);
        transition: transform 0.3s;
    }

.discount-form[b-zt3hpmf7jv] {
    padding: 20px;
    background: white;
    display: flex;
    gap: 8px;
    animation: slideDown-b-zt3hpmf7jv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .discount-form input[b-zt3hpmf7jv] {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
    }

        .discount-form input:focus[b-zt3hpmf7jv] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

    .discount-form button[b-zt3hpmf7jv] {
        background: var(--gradient-primary);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .discount-form button:hover:not(:disabled)[b-zt3hpmf7jv] {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .discount-form button:disabled[b-zt3hpmf7jv] {
            opacity: 0.6;
            cursor: not-allowed;
        }

.applied-discount[b-zt3hpmf7jv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.discount-info[b-zt3hpmf7jv] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success-color);
    font-weight: 600;
}

    .discount-info i[b-zt3hpmf7jv] {
        font-size: 16px;
    }

.remove-discount[b-zt3hpmf7jv] {
    background: transparent;
    border: 1px solid var(--success-color);
    color: var(--success-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .remove-discount:hover[b-zt3hpmf7jv] {
        background: var(--success-color);
        color: white;
    }

/* Security Info */
.security-info[b-zt3hpmf7jv] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.security-badges[b-zt3hpmf7jv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-badge[b-zt3hpmf7jv] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--success-color);
    font-weight: 500;
}

    .security-badge i[b-zt3hpmf7jv] {
        font-size: 16px;
    }

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

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

@keyframes slideDown-b-zt3hpmf7jv {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

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

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

/* Responsive Design */
@media (max-width: 1200px) {
    .checkout-content[b-zt3hpmf7jv] {
        grid-template-columns: 1fr 350px;
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .checkout-content[b-zt3hpmf7jv] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .checkout-sidebar[b-zt3hpmf7jv] {
        position: static;
        order: -1;
    }

    .order-summary[b-zt3hpmf7jv] {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .checkout-page[b-zt3hpmf7jv] {
        padding: 16px;
    }

    .checkout-header[b-zt3hpmf7jv] {
        padding: 16px;
        margin-bottom: 24px;
    }

        .checkout-header h1[b-zt3hpmf7jv] {
            font-size: 28px;
        }

    .checkout-steps[b-zt3hpmf7jv] {
        gap: 12px;
    }

    .step[b-zt3hpmf7jv] {
        min-width: 80px;
    }

    .step-number[b-zt3hpmf7jv] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .step-title[b-zt3hpmf7jv] {
        font-size: 12px;
    }

    .checkout-main[b-zt3hpmf7jv] {
        padding: 24px;
    }

    .checkout-step h2[b-zt3hpmf7jv] {
        font-size: 24px;
    }

    .form-grid[b-zt3hpmf7jv] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .address-option[b-zt3hpmf7jv],
    .shipping-option[b-zt3hpmf7jv],
    .payment-method[b-zt3hpmf7jv] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .btn-edit-small[b-zt3hpmf7jv] {
        position: static;
        margin-top: 16px;
        width: 100%;
    }

    .step-actions[b-zt3hpmf7jv] {
        flex-direction: column;
        gap: 12px;
    }

    .btn-back[b-zt3hpmf7jv],
    .btn-next[b-zt3hpmf7jv],
    .btn-place-order[b-zt3hpmf7jv] {
        width: 100%;
    }

    .order-summary[b-zt3hpmf7jv] {
        padding: 20px;
    }

    .method-header[b-zt3hpmf7jv] {
        padding: 16px;
    }

    .card-details[b-zt3hpmf7jv] {
        padding: 16px;
    }

    .expiry-inputs[b-zt3hpmf7jv] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .checkout-page[b-zt3hpmf7jv] {
        padding: 12px;
    }

    .checkout-header h1[b-zt3hpmf7jv] {
        font-size: 24px;
    }

    .checkout-steps[b-zt3hpmf7jv] {
        gap: 8px;
    }

    .step[b-zt3hpmf7jv] {
        min-width: 60px;
    }

    .step-number[b-zt3hpmf7jv] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .step-title[b-zt3hpmf7jv] {
        font-size: 10px;
    }

    .checkout-main[b-zt3hpmf7jv] {
        padding: 16px;
    }

    .order-summary[b-zt3hpmf7jv] {
        padding: 16px;
    }

    .review-item[b-zt3hpmf7jv] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .item-image[b-zt3hpmf7jv] {
        width: 60px;
        height: 60px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .checkout-page[b-zt3hpmf7jv] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .checkout-page[b-zt3hpmf7jv]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .checkout-main[b-zt3hpmf7jv],
[data-theme="dark"] .order-summary[b-zt3hpmf7jv],
[data-theme="dark"] .checkout-header[b-zt3hpmf7jv] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .address-option[b-zt3hpmf7jv],
[data-theme="dark"] .shipping-option[b-zt3hpmf7jv],
[data-theme="dark"] .payment-method[b-zt3hpmf7jv],
[data-theme="dark"] .review-section[b-zt3hpmf7jv] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-group input[b-zt3hpmf7jv],
[data-theme="dark"] .form-group select[b-zt3hpmf7jv] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .form-group input:focus[b-zt3hpmf7jv],
    [data-theme="dark"] .form-group select:focus[b-zt3hpmf7jv] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #5a6cb3;
    }

[data-theme="dark"] .contact-info[b-zt3hpmf7jv],
[data-theme="dark"] .new-address[b-zt3hpmf7jv] {
    background: rgba(90, 108, 179, 0.1);
    border-color: rgba(90, 108, 179, 0.2);
}

[data-theme="dark"] .step-number[b-zt3hpmf7jv] {
    background: rgba(71, 85, 105, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
    color: #9ca3af;
}

[data-theme="dark"] .step.active .step-number[b-zt3hpmf7jv] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    box-shadow: 0 2px 8px rgba(90, 108, 179, 0.3);
}

[data-theme="dark"] .step.completed .step-number[b-zt3hpmf7jv] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    box-shadow: 0 2px 8px rgba(59, 201, 104, 0.3);
}

[data-theme="dark"] .empty-cart[b-zt3hpmf7jv],
[data-theme="dark"] .checkout-loading[b-zt3hpmf7jv] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

/* Print Styles */
@media print {
    .checkout-page[b-zt3hpmf7jv] {
        background: white !important;
        padding: 0;
    }

    .checkout-header[b-zt3hpmf7jv],
    .step-actions[b-zt3hpmf7jv],
    .btn-edit-small[b-zt3hpmf7jv],
    .security-info[b-zt3hpmf7jv],
    .discount-code[b-zt3hpmf7jv] {
        display: none !important;
    }

    .checkout-content[b-zt3hpmf7jv] {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .checkout-main[b-zt3hpmf7jv],
    .order-summary[b-zt3hpmf7jv] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/Component/ShippingStep.razor.rz.scp.css */

/* ===================================
   Checkout Page - Modern Professional CSS
   تصميم صفحة الدفع بأسلوب احترافي حديث
   =================================== */

/* Page Container - Modern E-Commerce Style */
.checkout-page[b-af4od85c1c] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .checkout-page[b-af4od85c1c]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .checkout-page > *[b-af4od85c1c] {
        position: relative;
        z-index: 1;
    }

/* Loading State */
.checkout-loading[b-af4od85c1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 500px;
}

.loading-spinner[b-af4od85c1c] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-af4od85c1c 1s linear infinite;
    margin-bottom: 20px;
}

.checkout-loading p[b-af4od85c1c] {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Empty Cart State */
.empty-cart[b-af4od85c1c] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 600px;
}

    .empty-cart i[b-af4od85c1c] {
        font-size: 120px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
        display: block;
    }

    .empty-cart h3[b-af4od85c1c] {
        font-size: 32px;
        color: var(--text-primary);
        margin-bottom: 12px;
        font-weight: 700;
    }

    .empty-cart p[b-af4od85c1c] {
        font-size: 18px;
        color: var(--text-secondary);
        margin-bottom: 30px;
    }

.btn-continue-shopping[b-af4od85c1c] {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-continue-shopping:hover[b-af4od85c1c] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Checkout Header */
.checkout-header[b-af4od85c1c] {
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .checkout-header h1[b-af4od85c1c] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
        line-height: 1.2;
    }

/* Checkout Steps Indicator */
.checkout-steps[b-af4od85c1c] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
}

    .checkout-steps[b-af4od85c1c]::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 20%;
        right: 20%;
        height: 2px;
        background: linear-gradient(90deg, var(--border-color) 0%, var(--primary-color) 50%, var(--border-color) 100%);
        z-index: 0;
    }

.step[b-af4od85c1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    min-width: 120px;
}

.step-number[b-af4od85c1c] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
}

.step-title[b-af4od85c1c] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    transition: color 0.3s;
}

.step.active .step-number[b-af4od85c1c] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: var(--glow-primary);
    transform: scale(1.1);
}

.step.active .step-title[b-af4od85c1c] {
    color: var(--primary-color);
}

.step.completed .step-number[b-af4od85c1c] {
    background: var(--gradient-success);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(59, 201, 104, 0.3);
}

.step.completed .step-title[b-af4od85c1c] {
    color: var(--success-color);
}

/* Main Content Layout */
.checkout-content[b-af4od85c1c] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.checkout-main[b-af4od85c1c] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .checkout-main[b-af4od85c1c]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .checkout-main:hover[b-af4od85c1c]::before {
        opacity: 1;
    }

/* Checkout Step Base Styles */
.checkout-step[b-af4od85c1c] {
    animation: fadeInUp-b-af4od85c1c 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

    .checkout-step h2[b-af4od85c1c] {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 32px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .checkout-step h2[b-af4od85c1c]::before {
            content: '';
            width: 4px;
            height: 32px;
            background: var(--gradient-primary);
            border-radius: 2px;
        }

    .checkout-step h3[b-af4od85c1c] {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .checkout-step h3[b-af4od85c1c]::before {
            content: '';
            width: 3px;
            height: 20px;
            background: var(--gradient-secondary);
            border-radius: 2px;
        }

/* Form Styles */
.form-grid[b-af4od85c1c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.form-group[b-af4od85c1c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-af4od85c1c] {
        grid-column: 1 / -1;
    }

    .form-group label[b-af4od85c1c] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-group input[b-af4od85c1c],
    .form-group select[b-af4od85c1c] {
        padding: 14px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 15px;
        color: var(--text-primary);
        min-height: 48px;
    }

        .form-group input:hover[b-af4od85c1c],
        .form-group select:hover[b-af4od85c1c] {
            border-color: var(--border-hover);
            background: rgba(102, 126, 234, 0.08);
        }

        .form-group input:focus[b-af4od85c1c],
        .form-group select:focus[b-af4od85c1c] {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        .form-group input[b-af4od85c1c]::placeholder {
            color: var(--text-tertiary);
        }

/* Contact Info Section */
.contact-info[b-af4od85c1c] {
    margin-bottom: 40px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Shipping Address Section */
.shipping-address[b-af4od85c1c] {
    margin-bottom: 40px;
}

.saved-addresses[b-af4od85c1c] {
    margin-bottom: 32px;
}

    .saved-addresses h4[b-af4od85c1c] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

.address-option[b-af4od85c1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .address-option[b-af4od85c1c]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-primary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .address-option:hover[b-af4od85c1c] {
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

        .address-option:hover[b-af4od85c1c]::before {
            transform: scaleY(1);
        }

    .address-option.selected[b-af4od85c1c] {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    }

        .address-option.selected[b-af4od85c1c]::before {
            transform: scaleY(1);
        }

.address-content[b-af4od85c1c] {
    flex: 1;
}

.address-text[b-af4od85c1c] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.address-city[b-af4od85c1c] {
    font-size: 14px;
    color: var(--text-secondary);
}

.address-actions[b-af4od85c1c] {
    display: flex;
    gap: 8px;
}

.btn-edit[b-af4od85c1c] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

    .btn-edit:hover[b-af4od85c1c] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* New Address Section */
.new-address[b-af4od85c1c] {
    padding: 24px;
    background: rgba(118, 75, 162, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(118, 75, 162, 0.1);
}

.address-toggle[b-af4od85c1c] {
    margin-bottom: 20px;
}

    .address-toggle label[b-af4od85c1c] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .address-toggle label input[type="checkbox"][b-af4od85c1c] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

.address-form[b-af4od85c1c] {
    animation: slideDown-b-af4od85c1c 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shipping Method Section */
.shipping-method[b-af4od85c1c] {
    margin-bottom: 40px;
}

.shipping-option[b-af4od85c1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .shipping-option[b-af4od85c1c]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-secondary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .shipping-option:hover[b-af4od85c1c] {
        border-color: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);
    }

        .shipping-option:hover[b-af4od85c1c]::before {
            transform: scaleY(1);
        }

    .shipping-option.selected[b-af4od85c1c] {
        border-color: var(--secondary-color);
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(45, 212, 191, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
    }

        .shipping-option.selected[b-af4od85c1c]::before {
            transform: scaleY(1);
        }

.method-info h4[b-af4od85c1c] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.method-info p[b-af4od85c1c] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.delivery-time[b-af4od85c1c] {
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
}

.method-cost[b-af4od85c1c] {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Payment Methods Section */
.payment-methods[b-af4od85c1c] {
    margin-bottom: 40px;
}

.payment-method[b-af4od85c1c] {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

    .payment-method[b-af4od85c1c]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-warm);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .payment-method:hover[b-af4od85c1c] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
    }

        .payment-method:hover[b-af4od85c1c]::before {
            transform: scaleY(1);
        }

    .payment-method.selected[b-af4od85c1c] {
        border-color: var(--accent-color);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
    }

        .payment-method.selected[b-af4od85c1c]::before {
            transform: scaleY(1);
        }

.method-header[b-af4od85c1c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.method-logo[b-af4od85c1c] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .method-logo img[b-af4od85c1c] {
        max-width: 40px;
        max-height: 40px;
        object-fit: contain;
    }

    .method-logo i[b-af4od85c1c] {
        font-size: 24px;
        color: var(--accent-color);
    }

.method-info[b-af4od85c1c] {
    flex: 1;
}

    .method-info h3[b-af4od85c1c] {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .method-info p[b-af4od85c1c] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.fee-info[b-af4od85c1c] {
    font-size: 13px;
    color: var(--warning-color);
    font-weight: 500;
}

/* Card Details Section */
.card-details[b-af4od85c1c] {
    padding: 24px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    animation: slideDown-b-af4od85c1c 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .card-details h4[b-af4od85c1c] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-primary);
    }

.expiry-inputs[b-af4od85c1c] {
    display: flex;
    gap: 12px;
}

    .expiry-inputs select[b-af4od85c1c] {
        flex: 1;
    }

/* Step Actions */
.step-actions[b-af4od85c1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.btn-back[b-af4od85c1c],
.btn-next[b-af4od85c1c],
.btn-place-order[b-af4od85c1c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-back[b-af4od85c1c] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: var(--text-secondary);
}

    .btn-back:hover[b-af4od85c1c] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.btn-next[b-af4od85c1c] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-next:hover[b-af4od85c1c] {
        transform: translateY(-3px);
        box-shadow: var(--glow-primary), 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .btn-next:disabled[b-af4od85c1c] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-place-order[b-af4od85c1c] {
    background: var(--gradient-success);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    position: relative;
}

    .btn-place-order:hover:not(:disabled)[b-af4od85c1c] {
        transform: translateY(-3px);
        box-shadow: var(--glow-secondary), 0 8px 25px rgba(16, 185, 129, 0.4);
    }

    .btn-place-order:disabled[b-af4od85c1c] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Loading States */
.loading-section[b-af4od85c1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
}

.spinner[b-af4od85c1c] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-af4od85c1c 1s linear infinite;
    margin-bottom: 16px;
}

/* No Options States */
.no-payment-methods[b-af4od85c1c],
.no-installment-available[b-af4od85c1c],
.no-installment-options[b-af4od85c1c] {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(248, 113, 113, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.1);
}

    .no-payment-methods i[b-af4od85c1c],
    .no-installment-available i[b-af4od85c1c],
    .no-installment-options i[b-af4od85c1c] {
        font-size: 48px;
        color: var(--warning-color);
        margin-bottom: 16px;
        display: block;
    }

    .no-payment-methods p[b-af4od85c1c],
    .no-installment-available p[b-af4od85c1c],
    .no-installment-options p[b-af4od85c1c] {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

/* Order Review Section */
.order-review[b-af4od85c1c] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.review-section[b-af4od85c1c] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .review-section:hover[b-af4od85c1c] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-color);
    }

    .review-section h3[b-af4od85c1c] {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

.review-content[b-af4od85c1c] {
    margin-bottom: 16px;
}

    .review-content p[b-af4od85c1c] {
        margin-bottom: 8px;
        font-size: 15px;
        color: var(--text-primary);
    }

        .review-content p strong[b-af4od85c1c] {
            color: var(--text-primary);
            font-weight: 600;
            margin-right: 8px;
        }

.btn-edit-small[b-af4od85c1c] {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    top: 20px;
    right: 20px;
}

    .btn-edit-small:hover[b-af4od85c1c] {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

/* Order Items Review */
.order-items-review[b-af4od85c1c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-item[b-af4od85c1c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    transition: all 0.3s;
}

    .review-item:hover[b-af4od85c1c] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

.item-image[b-af4od85c1c] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

    .item-image img[b-af4od85c1c] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.item-info[b-af4od85c1c] {
    flex: 1;
}

    .item-info h4[b-af4od85c1c] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .item-info p[b-af4od85c1c] {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

.item-total[b-af4od85c1c] {
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Order Totals */
.review-totals[b-af4od85c1c] {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 20px;
}

.total-line[b-af4od85c1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-primary);
}

    .total-line.discount[b-af4od85c1c] {
        color: var(--success-color);
    }

    .total-line.total[b-af4od85c1c] {
        border-top: 1px solid var(--border-color);
        margin-top: 8px;
        padding-top: 16px;
        font-size: 18px;
        font-weight: 700;
    }

    .total-line.highlight[b-af4od85c1c] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        margin: 8px -8px;
        padding: 12px 8px;
        border-radius: 6px;
        font-weight: 600;
        color: var(--primary-color);
    }

.installment-breakdown[b-af4od85c1c] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Terms Agreement */
.terms-agreement[b-af4od85c1c] {
    margin: 32px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

    .terms-agreement label[b-af4od85c1c] {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: var(--text-primary);
        cursor: pointer;
        user-select: none;
    }

        .terms-agreement label input[type="checkbox"][b-af4od85c1c] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

        .terms-agreement label a[b-af4od85c1c] {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
        }

            .terms-agreement label a:hover[b-af4od85c1c] {
                text-decoration: underline;
            }

/* Order Summary Panel (Sidebar) */
.checkout-sidebar[b-af4od85c1c] {
    position: sticky;
    top: 24px;
}

.order-summary[b-af4od85c1c] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

    .order-summary[b-af4od85c1c]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.05) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity 0.3s;
        opacity: 0;
        pointer-events: none;
    }

    .order-summary:hover[b-af4od85c1c]::before {
        opacity: 1;
    }

    .order-summary h3[b-af4od85c1c] {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
    }

/* Summary Items */
.summary-items[b-af4od85c1c] {
    margin-bottom: 24px;
}

.summary-item[b-af4od85c1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.item-details[b-af4od85c1c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name[b-af4od85c1c] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.item-quantity[b-af4od85c1c] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-price[b-af4od85c1c] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Summary Totals */
.summary-totals[b-af4od85c1c] {
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    margin-bottom: 24px;
}

/* Discount Code Section */
.discount-code[b-af4od85c1c] {
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.discount-toggle[b-af4od85c1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background-color 0.3s;
}

    .discount-toggle:hover[b-af4od85c1c] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    }

    .discount-toggle span[b-af4od85c1c] {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .discount-toggle i[b-af4od85c1c] {
        color: var(--primary-color);
        transition: transform 0.3s;
    }

.discount-form[b-af4od85c1c] {
    padding: 20px;
    background: white;
    display: flex;
    gap: 8px;
    animation: slideDown-b-af4od85c1c 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .discount-form input[b-af4od85c1c] {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
    }

        .discount-form input:focus[b-af4od85c1c] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

    .discount-form button[b-af4od85c1c] {
        background: var(--gradient-primary);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .discount-form button:hover:not(:disabled)[b-af4od85c1c] {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .discount-form button:disabled[b-af4od85c1c] {
            opacity: 0.6;
            cursor: not-allowed;
        }

.applied-discount[b-af4od85c1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.discount-info[b-af4od85c1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success-color);
    font-weight: 600;
}

    .discount-info i[b-af4od85c1c] {
        font-size: 16px;
    }

.remove-discount[b-af4od85c1c] {
    background: transparent;
    border: 1px solid var(--success-color);
    color: var(--success-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .remove-discount:hover[b-af4od85c1c] {
        background: var(--success-color);
        color: white;
    }

/* Security Info */
.security-info[b-af4od85c1c] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.security-badges[b-af4od85c1c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-badge[b-af4od85c1c] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--success-color);
    font-weight: 500;
}

    .security-badge i[b-af4od85c1c] {
        font-size: 16px;
    }

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

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

@keyframes slideDown-b-af4od85c1c {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

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

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

/* Responsive Design */
@media (max-width: 1200px) {
    .checkout-content[b-af4od85c1c] {
        grid-template-columns: 1fr 350px;
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .checkout-content[b-af4od85c1c] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .checkout-sidebar[b-af4od85c1c] {
        position: static;
        order: -1;
    }

    .order-summary[b-af4od85c1c] {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .checkout-page[b-af4od85c1c] {
        padding: 16px;
    }

    .checkout-header[b-af4od85c1c] {
        padding: 16px;
        margin-bottom: 24px;
    }

        .checkout-header h1[b-af4od85c1c] {
            font-size: 28px;
        }

    .checkout-steps[b-af4od85c1c] {
        gap: 12px;
    }

    .step[b-af4od85c1c] {
        min-width: 80px;
    }

    .step-number[b-af4od85c1c] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .step-title[b-af4od85c1c] {
        font-size: 12px;
    }

    .checkout-main[b-af4od85c1c] {
        padding: 24px;
    }

    .checkout-step h2[b-af4od85c1c] {
        font-size: 24px;
    }

    .form-grid[b-af4od85c1c] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .address-option[b-af4od85c1c],
    .shipping-option[b-af4od85c1c],
    .payment-method[b-af4od85c1c] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .btn-edit-small[b-af4od85c1c] {
        position: static;
        margin-top: 16px;
        width: 100%;
    }

    .step-actions[b-af4od85c1c] {
        flex-direction: column;
        gap: 12px;
    }

    .btn-back[b-af4od85c1c],
    .btn-next[b-af4od85c1c],
    .btn-place-order[b-af4od85c1c] {
        width: 100%;
    }

    .order-summary[b-af4od85c1c] {
        padding: 20px;
    }

    .method-header[b-af4od85c1c] {
        padding: 16px;
    }

    .card-details[b-af4od85c1c] {
        padding: 16px;
    }

    .expiry-inputs[b-af4od85c1c] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .checkout-page[b-af4od85c1c] {
        padding: 12px;
    }

    .checkout-header h1[b-af4od85c1c] {
        font-size: 24px;
    }

    .checkout-steps[b-af4od85c1c] {
        gap: 8px;
    }

    .step[b-af4od85c1c] {
        min-width: 60px;
    }

    .step-number[b-af4od85c1c] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .step-title[b-af4od85c1c] {
        font-size: 10px;
    }

    .checkout-main[b-af4od85c1c] {
        padding: 16px;
    }

    .order-summary[b-af4od85c1c] {
        padding: 16px;
    }

    .review-item[b-af4od85c1c] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .item-image[b-af4od85c1c] {
        width: 60px;
        height: 60px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .checkout-page[b-af4od85c1c] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .checkout-page[b-af4od85c1c]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .checkout-main[b-af4od85c1c],
[data-theme="dark"] .order-summary[b-af4od85c1c],
[data-theme="dark"] .checkout-header[b-af4od85c1c] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .address-option[b-af4od85c1c],
[data-theme="dark"] .shipping-option[b-af4od85c1c],
[data-theme="dark"] .payment-method[b-af4od85c1c],
[data-theme="dark"] .review-section[b-af4od85c1c] {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-group input[b-af4od85c1c],
[data-theme="dark"] .form-group select[b-af4od85c1c] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .form-group input:focus[b-af4od85c1c],
    [data-theme="dark"] .form-group select:focus[b-af4od85c1c] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #5a6cb3;
    }

[data-theme="dark"] .contact-info[b-af4od85c1c],
[data-theme="dark"] .new-address[b-af4od85c1c] {
    background: rgba(90, 108, 179, 0.1);
    border-color: rgba(90, 108, 179, 0.2);
}

[data-theme="dark"] .step-number[b-af4od85c1c] {
    background: rgba(71, 85, 105, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
    color: #9ca3af;
}

[data-theme="dark"] .step.active .step-number[b-af4od85c1c] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    box-shadow: 0 2px 8px rgba(90, 108, 179, 0.3);
}

[data-theme="dark"] .step.completed .step-number[b-af4od85c1c] {
    background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    box-shadow: 0 2px 8px rgba(59, 201, 104, 0.3);
}

[data-theme="dark"] .empty-cart[b-af4od85c1c],
[data-theme="dark"] .checkout-loading[b-af4od85c1c] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

/* Print Styles */
@media print {
    .checkout-page[b-af4od85c1c] {
        background: white !important;
        padding: 0;
    }

    .checkout-header[b-af4od85c1c],
    .step-actions[b-af4od85c1c],
    .btn-edit-small[b-af4od85c1c],
    .security-info[b-af4od85c1c],
    .discount-code[b-af4od85c1c] {
        display: none !important;
    }

    .checkout-content[b-af4od85c1c] {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .checkout-main[b-af4od85c1c],
    .order-summary[b-af4od85c1c] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/Component/ToastComponent.razor.rz.scp.css */
/* Toast Container */
.toast-container[b-x72ov6vsoe] {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
}

    .toast-container.rtl[b-x72ov6vsoe] {
        left: auto;
        right: 20px;
    }

/* Toast Base */
.toast[b-x72ov6vsoe] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateX(-100%);
    position: relative;
    overflow: hidden;
}

.rtl .toast[b-x72ov6vsoe] {
    transform: translateX(100%);
}

.toast.show[b-x72ov6vsoe] {
    opacity: 1;
    transform: translateX(0);
}

.toast.hide[b-x72ov6vsoe] {
    opacity: 0;
    transform: translateX(-100%);
}

.rtl .toast.hide[b-x72ov6vsoe] {
    transform: translateX(100%);
}

/* Toast Icon */
.toast-icon[b-x72ov6vsoe] {
    font-size: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
}

/* Toast Content */
.toast-content[b-x72ov6vsoe] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-x72ov6vsoe] {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.4;
}

.toast-message[b-x72ov6vsoe] {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
}

/* Toast Close Button */
.toast-close[b-x72ov6vsoe] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 8px;
    margin: -8px -8px -8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .toast-close:hover[b-x72ov6vsoe] {
        background-color: rgba(0, 0, 0, 0.05);
        color: #4b5563;
    }

/* Toast Types */
.toast[b-x72ov6vsoe]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    transition: width 0.3s;
}

.rtl .toast[b-x72ov6vsoe]::before {
    right: auto;
    left: auto;
    right: 0;
}

.toast:hover[b-x72ov6vsoe]::before {
    width: 6px;
}

/* Success Toast */
.toast-success[b-x72ov6vsoe]::before {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.toast-success .toast-icon[b-x72ov6vsoe] {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}

/* Error Toast */
.toast-error[b-x72ov6vsoe]::before {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.toast-error .toast-icon[b-x72ov6vsoe] {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

/* Warning Toast */
.toast-warning[b-x72ov6vsoe]::before {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.toast-warning .toast-icon[b-x72ov6vsoe] {
    color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.1);
}

/* Info Toast */
.toast-info[b-x72ov6vsoe]::before {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.toast-info .toast-icon[b-x72ov6vsoe] {
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
    .toast[b-x72ov6vsoe] {
        background: rgba(30, 41, 59, 0.98);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .toast-title[b-x72ov6vsoe] {
        color: #f1f5f9;
    }

    .toast-message[b-x72ov6vsoe] {
        color: #cbd5e1;
    }

    .toast-close[b-x72ov6vsoe] {
        color: #64748b;
    }

        .toast-close:hover[b-x72ov6vsoe] {
            background-color: rgba(255, 255, 255, 0.1);
            color: #cbd5e1;
        }
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .toast-container[b-x72ov6vsoe] {
        left: 10px;
        right: 10px;
        max-width: none;
    }

        .toast-container.rtl[b-x72ov6vsoe] {
            left: 10px;
            right: 10px;
        }

    .toast[b-x72ov6vsoe] {
        font-size: 14px;
    }

    .toast-icon[b-x72ov6vsoe] {
        font-size: 20px;
        width: 32px;
        height: 32px;
    }
}

/* Animations */
@keyframes slideIn-b-x72ov6vsoe {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

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

@keyframes slideOut-b-x72ov6vsoe {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}
/* _content/Sahelly/Components/Pages/Public/ForgotPassword.razor.rz.scp.css */

/* Auth Container with Modern Gradient Background */
.auth-container[b-m17argxe7c] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow: hidden;
}

    .auth-container[b-m17argxe7c]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

/* Auth Card - Glass Morphism Effect */
.auth-card[b-m17argxe7c] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    padding: var(--spacing-xl);
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    animation: fadeInUp-b-m17argxe7c 0.5s ease-out;
    transition: all var(--transition-base);
}

    .auth-card[b-m17argxe7c]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: opacity var(--transition-base);
        opacity: 0;
    }

    .auth-card:hover[b-m17argxe7c]::before {
        opacity: 0.5;
    }

/* Logo Styling */
.auth-logo[b-m17argxe7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

    .auth-logo svg[b-m17argxe7c] {
        margin-bottom: var(--spacing-md);
        filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
        animation: float-b-m17argxe7c 6s ease-in-out infinite;
    }

    .auth-logo h1[b-m17argxe7c] {
        font-size: 1.75rem;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

/* Header Styling */
.auth-header[b-m17argxe7c] {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

    .auth-header h2[b-m17argxe7c] {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: var(--spacing-xs);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

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

/* Auth Form Styling */
.auth-form[b-m17argxe7c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Form Group Styling */
.form-group[b-m17argxe7c] {
    margin-bottom: var(--spacing-md);
}

    .form-group label[b-m17argxe7c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

        .form-group label i[b-m17argxe7c] {
            color: #764ba2;
        }

.form-control[b-m17argxe7c] {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

    .form-control:hover[b-m17argxe7c] {
        border-color: rgba(102, 126, 234, 0.3);
    }

    .form-control:focus[b-m17argxe7c] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Error Message Styling */
.validation-message[b-m17argxe7c] {
    color: var(--danger-color);
    font-size: 0.8rem;
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Recovery Method Selection */
.recovery-method-selection[b-m17argxe7c] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.recovery-option[b-m17argxe7c] {
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .recovery-option:hover[b-m17argxe7c] {
        border-color: rgba(102, 126, 234, 0.3);
        background: rgba(102, 126, 234, 0.1);
    }

    .recovery-option input[type="radio"][b-m17argxe7c] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

        .recovery-option input[type="radio"]:checked + .option-content[b-m17argxe7c] {
            color: #667eea;
        }

            .recovery-option input[type="radio"]:checked + .option-content i[b-m17argxe7c] {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

.option-content[b-m17argxe7c] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    color: var(--text-secondary);
    font-weight: 500;
}

    .option-content i[b-m17argxe7c] {
        font-size: 1.25rem;
        color: var(--text-tertiary);
    }

/* Verification Code Input */
.code-input-container[b-m17argxe7c] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.code-input[b-m17argxe7c] {
    width: 100%;
    height: 60px;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background: rgba(102, 126, 234, 0.05);
    transition: all var(--transition-fast);
}

    .code-input:hover[b-m17argxe7c] {
        border-color: rgba(102, 126, 234, 0.3);
    }

    .code-input:focus[b-m17argxe7c] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Info Message */
.info-message[b-m17argxe7c] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

    .info-message i[b-m17argxe7c] {
        color: #667eea;
        font-size: 1.25rem;
        margin-top: 2px;
    }

    .info-message p[b-m17argxe7c] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.95rem;
    }

/* Resend Section */
.resend-section[b-m17argxe7c] {
    display: flex;
    justify-content: center;
    margin: var(--spacing-md) 0;
}

.timer-text[b-m17argxe7c] {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    margin: 0;
}

.timer-value[b-m17argxe7c] {
    color: #667eea;
    font-weight: 700;
}

.resend-link[b-m17argxe7c] {
    color: #667eea;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .resend-link:hover[b-m17argxe7c] {
        color: #764ba2;
        text-decoration: underline;
    }

    .resend-link:disabled[b-m17argxe7c] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Password Input Wrapper */
.password-input-wrapper[b-m17argxe7c] {
    position: relative;
}

.toggle-password[b-m17argxe7c] {
    position: absolute;
    top: 50%;
    left: var(--spacing-lg);
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
}

    .toggle-password:hover[b-m17argxe7c] {
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

/* Password Requirements */
.password-requirements[b-m17argxe7c] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(129, 140, 248, 0.05) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

    .password-requirements p[b-m17argxe7c] {
        margin-top: 0;
        margin-bottom: var(--spacing-sm);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    .password-requirements ul[b-m17argxe7c] {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .password-requirements li[b-m17argxe7c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-tertiary);
        font-size: 0.85rem;
    }

        .password-requirements li i[b-m17argxe7c] {
            width: 16px;
            text-align: center;
        }

        .password-requirements li.valid[b-m17argxe7c] {
            color: var(--success-color);
        }

            .password-requirements li.valid i[b-m17argxe7c] {
                color: var(--success-color);
            }

/* Primary Button - Gradient Style */
.btn-primary[b-m17argxe7c] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-primary:hover[b-m17argxe7c] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-m17argxe7c] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

/* Footer */
.auth-footer[b-m17argxe7c] {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.back-link[b-m17argxe7c] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition-fast);
}

    .back-link:hover[b-m17argxe7c] {
        color: #667eea;
        transform: translateX(-3px);
    }

/* Alert Styling */
.alert[b-m17argxe7c] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    animation: slideUp-b-m17argxe7c 0.3s ease-out;
}

    .alert[b-m17argxe7c]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
    }

    .alert i[b-m17argxe7c] {
        font-size: 1.25rem;
    }

.alert-success[b-m17argxe7c] {
    background: linear-gradient(135deg, rgba(59, 201, 104, 0.1) 0%, rgba(50, 209, 183, 0.1) 100%);
    color: var(--success-color);
}

    .alert-success[b-m17argxe7c]::before {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

.alert-danger[b-m17argxe7c] {
    background: linear-gradient(135deg, rgba(208, 78, 95, 0.1) 0%, rgba(205, 125, 219, 0.1) 100%);
    color: var(--danger-color);
}

    .alert-danger[b-m17argxe7c]::before {
        background: linear-gradient(135deg, #d04e5f 0%, #cd7ddb 100%);
    }

/* Spinner for loading states */
.spinner-border[b-m17argxe7c] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-m17argxe7c 0.75s linear infinite;
}

.spinner-border-sm[b-m17argxe7c] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

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

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

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

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

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

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

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

/* Dark Theme Support */
[data-theme="dark"] .auth-container[b-m17argxe7c] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .auth-container[b-m17argxe7c]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .auth-card[b-m17argxe7c] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .form-control[b-m17argxe7c] {
    background: rgba(71, 85, 105, 0.3);
    color: var(--text-inverse);
}

    [data-theme="dark"] .form-control:focus[b-m17argxe7c] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .auth-header p[b-m17argxe7c] {
    color: var(--text-muted);
}

[data-theme="dark"] .recovery-option[b-m17argxe7c] {
    background: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .recovery-option:hover[b-m17argxe7c] {
        background: rgba(102, 126, 234, 0.2);
        border-color: rgba(102, 126, 234, 0.3);
    }

[data-theme="dark"] .code-input[b-m17argxe7c] {
    background: rgba(71, 85, 105, 0.3);
    color: var(--text-inverse);
}

    [data-theme="dark"] .code-input:focus[b-m17argxe7c] {
        background: rgba(71, 85, 105, 0.5);
    }

[data-theme="dark"] .password-requirements[b-m17argxe7c] {
    background: rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .info-message[b-m17argxe7c] {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .auth-footer[b-m17argxe7c] {
    border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .back-link[b-m17argxe7c] {
    color: var(--text-muted);
}

    [data-theme="dark"] .back-link:hover[b-m17argxe7c] {
        color: var(--primary-color);
    }

/* Responsive Design */
@media (max-width: 576px) {
    .auth-card[b-m17argxe7c] {
        padding: var(--spacing-lg);
        border-radius: var(--radius-xl);
    }

    .auth-logo h1[b-m17argxe7c] {
        font-size: 1.5rem;
    }

    .auth-header h2[b-m17argxe7c] {
        font-size: 1.75rem;
    }

    .recovery-method-selection[b-m17argxe7c] {
        grid-template-columns: 1fr;
    }

    .code-input[b-m17argxe7c] {
        height: 50px;
        font-size: 1.25rem;
    }
}

/* RTL Support */
html[dir="rtl"] .toggle-password[b-m17argxe7c] {
    right: auto;
    left: var(--spacing-lg);
}

html[dir="rtl"] .back-link:hover[b-m17argxe7c] {
    transform: translateX(3px);
}

html[dir="rtl"] .recovery-option[b-m17argxe7c],
html[dir="rtl"] .form-group label[b-m17argxe7c],
html[dir="rtl"] .option-content[b-m17argxe7c],
html[dir="rtl"] .back-link[b-m17argxe7c] {
    flex-direction: row-reverse;
}

.code-input-container[b-m17argxe7c] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 20px 0;
}

.code-input[b-m17argxe7c] {
    width: 45px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .code-input:focus[b-m17argxe7c] {
        border-color: #6366f1;
        outline: none;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .code-input:not(:placeholder-shown)[b-m17argxe7c] {
        border-color: #10b981;
    }

/* Add number indicators below inputs */
.code-input-wrapper[b-m17argxe7c] {
    position: relative;
    display: inline-block;
}

.code-input-number[b-m17argxe7c] {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #6b7280;
}
/* _content/Sahelly/Components/Pages/Public/LicenseAdmin.razor.rz.scp.css */

/* _content/Sahelly/Components/Pages/Public/Login.razor.rz.scp.css */
.auth-container[b-irqgvgdrg5] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.auth-card[b-irqgvgdrg5] {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
}

.auth-logo[b-irqgvgdrg5] {
    text-align: center;
    margin-bottom: 32px;
}

    .auth-logo h1[b-irqgvgdrg5] {
        margin-top: 16px;
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.auth-header[b-irqgvgdrg5] {
    text-align: center;
    margin-bottom: 32px;
}

    .auth-header h2[b-irqgvgdrg5] {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 8px;
    }

    .auth-header p[b-irqgvgdrg5] {
        color: #6b7280;
        font-size: 16px;
    }

.auth-form[b-irqgvgdrg5] {
    margin-bottom: 24px;
}

.form-group[b-irqgvgdrg5] {
    margin-bottom: 20px;
}

    .form-group label[b-irqgvgdrg5] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
    }

        .form-group label i[b-irqgvgdrg5] {
            color: #6366f1;
            width: 16px;
        }

.form-control[b-irqgvgdrg5] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.2s ease;
    background: #f9fafb;
}

    .form-control:focus[b-irqgvgdrg5] {
        outline: none;
        border-color: #6366f1;
        background: white;
    }

    .form-control:disabled[b-irqgvgdrg5] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.password-input-wrapper[b-irqgvgdrg5] {
    position: relative;
}

.toggle-password[b-irqgvgdrg5] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
}

.form-options[b-irqgvgdrg5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.checkbox-label[b-irqgvgdrg5] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #4b5563;
}

    .checkbox-label input[type="checkbox"][b-irqgvgdrg5] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.forgot-link[b-irqgvgdrg5] {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}

    .forgot-link:hover[b-irqgvgdrg5] {
        text-decoration: underline;
    }

.btn-primary[b-irqgvgdrg5] {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-primary:hover:not(:disabled)[b-irqgvgdrg5] {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

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

    .btn-primary:disabled[b-irqgvgdrg5] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.auth-divider[b-irqgvgdrg5] {
    text-align: center;
    margin: 24px 0;
    position: relative;
}

    .auth-divider span[b-irqgvgdrg5] {
        background: white;
        padding: 0 16px;
        color: #9ca3af;
        position: relative;
    }

    .auth-divider[b-irqgvgdrg5]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #e5e7eb;
    }

.social-login[b-irqgvgdrg5] {
    margin-bottom: 24px;
}

.social-btn[b-irqgvgdrg5] {
    width: 100%;
    padding: 12px 24px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #374151;
}

    .social-btn:hover:not(:disabled)[b-irqgvgdrg5] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .social-btn i[b-irqgvgdrg5] {
        font-size: 20px;
    }

    .social-btn.google i[b-irqgvgdrg5] {
        color: #ea4335;
    }

.auth-footer[b-irqgvgdrg5] {
    text-align: center;
    color: #6b7280;
}

    .auth-footer a[b-irqgvgdrg5] {
        color: #6366f1;
        text-decoration: none;
        font-weight: 600;
    }

        .auth-footer a:hover[b-irqgvgdrg5] {
            text-decoration: underline;
        }

.alert[b-irqgvgdrg5] {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-danger[b-irqgvgdrg5] {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert i[b-irqgvgdrg5] {
    font-size: 18px;
}

.validation-message[b-irqgvgdrg5] {
    color: #ef4444;
    font-size: 14px;
    margin-top: 4px;
}

/* Dark theme support */
.dark-theme .auth-card[b-irqgvgdrg5] {
    background: #1f2937;
}

.dark-theme .auth-header h2[b-irqgvgdrg5] {
    color: #f3f4f6;
}

.dark-theme .auth-header p[b-irqgvgdrg5] {
    color: #9ca3af;
}

.dark-theme .form-control[b-irqgvgdrg5] {
    background: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

    .dark-theme .form-control:focus[b-irqgvgdrg5] {
        background: #1f2937;
        border-color: #6366f1;
    }

.dark-theme .form-group label[b-irqgvgdrg5] {
    color: #e5e7eb;
}

.dark-theme .social-btn[b-irqgvgdrg5] {
    background: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

    .dark-theme .social-btn:hover:not(:disabled)[b-irqgvgdrg5] {
        background: #1f2937;
    }

/* RTL Support */
.rtl .form-group label[b-irqgvgdrg5] {
    flex-direction: row-reverse;
}

.rtl .toggle-password[b-irqgvgdrg5] {
    right: auto;
    left: 12px;
}

.rtl .checkbox-label[b-irqgvgdrg5] {
    flex-direction: row-reverse;
}

@media (max-width: 480px) {
    .auth-card[b-irqgvgdrg5] {
        padding: 32px 24px;
    }

    .auth-header h2[b-irqgvgdrg5] {
        font-size: 24px;
    }
}
/* _content/Sahelly/Components/Pages/Public/MerchantStore.razor.rz.scp.css */

/* ===================================
   Merchant Store Page - Modern E-Commerce CSS
   تصميم احترافي متطور للمتجر الإلكتروني
   =================================== */

/* Page Container - Glass Morphism Effect */
.merchant-store-page[b-wtkd6vpa1l] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow-x: hidden;
}

    .merchant-store-page[b-wtkd6vpa1l]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 600px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

/* Loading State - Modern Spinner */
.store-loading[b-wtkd6vpa1l] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    position: relative;
    z-index: 1;
}

.loading-spinner[b-wtkd6vpa1l] {
    width: 80px;
    height: 80px;
    position: relative;
}

    .loading-spinner[b-wtkd6vpa1l]::before,
    .loading-spinner[b-wtkd6vpa1l]::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 4px solid transparent;
        border-top-color: #667eea;
        animation: spin-b-wtkd6vpa1l 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }

    .loading-spinner[b-wtkd6vpa1l]::after {
        animation-delay: -0.45s;
        border-top-color: #764ba2;
    }

/* Store Not Found - Modern Empty State */
.store-not-found[b-wtkd6vpa1l] {
    text-align: center;
    padding: 100px 20px;
    position: relative;
    z-index: 1;
}

    .store-not-found i[b-wtkd6vpa1l] {
        font-size: 120px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 32px;
        display: block;
        animation: float-b-wtkd6vpa1l 3s ease-in-out infinite;
    }

    .store-not-found h2[b-wtkd6vpa1l] {
        font-size: 36px;
        font-weight: 800;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .store-not-found p[b-wtkd6vpa1l] {
        font-size: 18px;
        color: #6b7280;
        margin-bottom: 32px;
    }

.btn-back[b-wtkd6vpa1l] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-back:hover[b-wtkd6vpa1l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Store Header - Modern Hero Section */
.store-header[b-wtkd6vpa1l] {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: 0 0 40px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 48px;
    overflow: hidden;
}

.store-banner[b-wtkd6vpa1l] {
    height: 300px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .store-banner img[b-wtkd6vpa1l] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.9;
    }

    .store-banner .default-banner[b-wtkd6vpa1l] {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
    }

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

/* Store Info Section */
.store-info[b-wtkd6vpa1l] {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 0 32px 32px;
    margin-top: -60px;
    position: relative;
}

.store-logo[b-wtkd6vpa1l] {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    border: 4px solid white;
}

    .store-logo img[b-wtkd6vpa1l] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .store-logo .default-logo[b-wtkd6vpa1l] {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-size: 48px;
    }

.store-details[b-wtkd6vpa1l] {
    flex: 1;
    padding-top: 70px;
}

    .store-details h1[b-wtkd6vpa1l] {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.store-description[b-wtkd6vpa1l] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.6;
}

.store-meta[b-wtkd6vpa1l] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.store-rating[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars[b-wtkd6vpa1l] {
    display: flex;
    gap: 2px;
}

    .stars i[b-wtkd6vpa1l] {
        color: #e5e7eb;
        font-size: 16px;
        transition: color 0.3s;
    }

        .stars i.filled[b-wtkd6vpa1l] {
            color: #fbbf24;
            filter: drop-shadow(0 0 2px #fbbf24);
        }

.store-stats[b-wtkd6vpa1l] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-item[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

    .stat-item i[b-wtkd6vpa1l] {
        color: #9333ea;
        font-size: 16px;
    }

.store-actions[b-wtkd6vpa1l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    padding-top: 70px;
}

.installment-badge[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: #f59e0b;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.btn-follow[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-follow:hover[b-wtkd6vpa1l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Store Layout - Main Content Area */
.store-layout[b-wtkd6vpa1l] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    position: relative;
    z-index: 1;
}

/* Sidebar - Modern Filter Panel */
.store-sidebar[b-wtkd6vpa1l] {
    position: sticky;
    top: 24px;
    height: fit-content;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
}

    .store-sidebar[b-wtkd6vpa1l]::-webkit-scrollbar {
        width: 6px;
    }

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

    .store-sidebar[b-wtkd6vpa1l]::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.3);
        border-radius: 3px;
    }

.sidebar-section[b-wtkd6vpa1l] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .sidebar-section:hover[b-wtkd6vpa1l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    .sidebar-section h3[b-wtkd6vpa1l] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #4c1d95;
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Category Items - Modern Radio Buttons */
.store-categories[b-wtkd6vpa1l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-item[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

    .category-item[b-wtkd6vpa1l]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
        transition: left 0.5s;
    }

    .category-item:hover[b-wtkd6vpa1l] {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.2);
    }

        .category-item:hover[b-wtkd6vpa1l]::before {
            left: 100%;
        }

    .category-item.active[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        border-color: #667eea;
        color: #4c1d95;
        font-weight: 600;
    }

    .category-item input[type="radio"][b-wtkd6vpa1l] {
        display: none;
    }

    .category-item span:first-of-type[b-wtkd6vpa1l] {
        flex: 1;
    }

    .category-item .count[b-wtkd6vpa1l] {
        color: #9ca3af;
        font-size: 12px;
        font-weight: 500;
    }

/* Price Filter - Modern Input Design */
.price-filter[b-wtkd6vpa1l] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-direction: column;
}

    .price-filter input[b-wtkd6vpa1l] {
        flex: 1;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 14px;
        transition: all 0.3s;
        color: #1f2937;
    }

        .price-filter input:focus[b-wtkd6vpa1l] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .price-filter input[b-wtkd6vpa1l]::placeholder {
            color: #9ca3af;
        }

    .price-filter span[b-wtkd6vpa1l] {
        color: #9ca3af;
        font-weight: 500;
    }

.btn-apply-filter[b-wtkd6vpa1l] {
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-apply-filter:hover[b-wtkd6vpa1l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Filter Checkboxes - Modern Style */
.filter-checkbox[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    transition: all 0.3s;
}

    .filter-checkbox:hover[b-wtkd6vpa1l] {
        color: #667eea;
    }

    .filter-checkbox input[type="checkbox"][b-wtkd6vpa1l] {
        width: 20px;
        height: 20px;
        accent-color: #667eea;
        cursor: pointer;
    }

    .filter-checkbox span[b-wtkd6vpa1l] {
        font-size: 14px;
        font-weight: 500;
        color: #4b5563;
        transition: color 0.3s;
    }

    .filter-checkbox:hover span[b-wtkd6vpa1l] {
        color: #667eea;
    }

/* Store Content Area */
.store-content[b-wtkd6vpa1l] {
    min-height: 600px;
}

/* Content Toolbar - Search and Sort */
.content-toolbar[b-wtkd6vpa1l] {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Search Box - Modern Design */
.search-box[b-wtkd6vpa1l] {
    flex: 1;
    position: relative;
}

    .search-box i[b-wtkd6vpa1l] {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 18px;
    }

    .search-box input[b-wtkd6vpa1l] {
        width: 100%;
        padding: 14px 20px 14px 50px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 50px;
        font-size: 15px;
        transition: all 0.3s;
    }

        .search-box input:focus[b-wtkd6vpa1l] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.toolbar-actions[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sort-select[b-wtkd6vpa1l] {
    padding: 12px 20px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s;
}

    .sort-select:focus[b-wtkd6vpa1l] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* View Mode Toggle - Modern Switch */
.view-mode[b-wtkd6vpa1l] {
    display: flex;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

    .view-mode button[b-wtkd6vpa1l] {
        padding: 10px 14px;
        background: transparent;
        border: none;
        color: #667eea;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 16px;
    }

        .view-mode button:hover[b-wtkd6vpa1l] {
            color: #764ba2;
            background: rgba(102, 126, 234, 0.1);
        }

        .view-mode button.active[b-wtkd6vpa1l] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

/* Results Info Bar */
.results-info[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #4c1d95;
}

.search-term[b-wtkd6vpa1l] {
    color: #667eea;
    font-weight: 600;
}

/* Products Loading State */
.products-loading[b-wtkd6vpa1l] {
    padding: 40px 0;
}

.loading-grid[b-wtkd6vpa1l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.product-skeleton[b-wtkd6vpa1l] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.skeleton-image[b-wtkd6vpa1l] {
    height: 280px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer-b-wtkd6vpa1l 1.5s infinite;
}

.skeleton-content[b-wtkd6vpa1l] {
    padding: 20px;
}

.skeleton-line[b-wtkd6vpa1l] {
    height: 16px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer-b-wtkd6vpa1l 1.5s infinite;
    border-radius: 8px;
    margin-bottom: 12px;
}

    .skeleton-line.short[b-wtkd6vpa1l] {
        width: 60%;
    }

    .skeleton-line.medium[b-wtkd6vpa1l] {
        width: 80%;
    }

/* No Products State */
.no-products[b-wtkd6vpa1l] {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

    .no-products i[b-wtkd6vpa1l] {
        font-size: 80px;
        color: #e5e7eb;
        margin-bottom: 24px;
        display: block;
    }

    .no-products h3[b-wtkd6vpa1l] {
        font-size: 24px;
        font-weight: 700;
        color: #4c1d95;
        margin-bottom: 12px;
    }

    .no-products p[b-wtkd6vpa1l] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-reset[b-wtkd6vpa1l] {
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-reset:hover[b-wtkd6vpa1l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

/* Products Grid - Modern Card Design */
.products-grid[b-wtkd6vpa1l] {
    display: grid;
    gap: 24px;
    margin-bottom: 48px;
}

    .products-grid.grid[b-wtkd6vpa1l] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .products-grid.list[b-wtkd6vpa1l] {
        grid-template-columns: 1fr;
    }

/* Product Card - Modern E-Commerce Style */
.product-card[b-wtkd6vpa1l] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
}

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

    .product-card:hover[b-wtkd6vpa1l] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

        .product-card:hover[b-wtkd6vpa1l]::before {
            opacity: 1;
            animation: shimmer-b-wtkd6vpa1l 2s infinite;
        }

/* Product Image Container */
.product-image[b-wtkd6vpa1l] {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: #f9fafb;
}

.products-grid.list .product-image[b-wtkd6vpa1l] {
    height: 200px;
    width: 200px;
    flex-shrink: 0;
}

.product-image img[b-wtkd6vpa1l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-image img[b-wtkd6vpa1l] {
    transform: scale(1.1);
}

.product-image .no-image[b-wtkd6vpa1l] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    font-size: 48px;
}

/* Product Badges */
.product-badges[b-wtkd6vpa1l] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badge[b-wtkd6vpa1l] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
}

    .badge.sale[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(236, 72, 153, 0.9) 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

    .badge.installment[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.9) 0%, rgba(245, 158, 11, 0.9) 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
    }

/* Quick Actions */
.quick-actions[b-wtkd6vpa1l] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .quick-actions[b-wtkd6vpa1l] {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.btn-quick-view[b-wtkd6vpa1l],
.btn-wishlist[b-wtkd6vpa1l] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    color: #667eea;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-quick-view:hover[b-wtkd6vpa1l],
    .btn-wishlist:hover[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

/* Product Info Section */
.product-info[b-wtkd6vpa1l] {
    padding: 24px;
}

.products-grid.list .product-card[b-wtkd6vpa1l] {
    display: flex;
}

.products-grid.list .product-info[b-wtkd6vpa1l] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-name[b-wtkd6vpa1l] {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s;
}

.product-card:hover .product-name[b-wtkd6vpa1l] {
    color: #667eea;
}

.product-category[b-wtkd6vpa1l] {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 12px;
    font-weight: 500;
}

/* Product Rating */
.product-rating[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.rating-count[b-wtkd6vpa1l] {
    font-size: 13px;
    color: #6b7280;
}

/* Product Price */
.product-price[b-wtkd6vpa1l] {
    margin-bottom: 16px;
}

.current-price[b-wtkd6vpa1l],
.sale-price[b-wtkd6vpa1l] {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.original-price[b-wtkd6vpa1l] {
    font-size: 16px;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 8px;
}

.installment-price[b-wtkd6vpa1l] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-radius: 8px;
    font-size: 14px;
    color: #d97706;
    font-weight: 600;
}

    .installment-price i[b-wtkd6vpa1l] {
        font-size: 16px;
    }

/* Stock Status */
.stock-status[b-wtkd6vpa1l] {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

    .stock-status span[b-wtkd6vpa1l] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 8px;
    }

.in-stock[b-wtkd6vpa1l] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.low-stock[b-wtkd6vpa1l] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.out-of-stock[b-wtkd6vpa1l] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Add to Cart Button */
.btn-add-to-cart[b-wtkd6vpa1l] {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

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

    .btn-add-to-cart:hover[b-wtkd6vpa1l] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

        .btn-add-to-cart:hover[b-wtkd6vpa1l]::before {
            width: 300px;
            height: 300px;
        }

    .btn-add-to-cart:active[b-wtkd6vpa1l] {
        transform: translateY(0);
    }

    .btn-add-to-cart:disabled[b-wtkd6vpa1l] {
        background: #e5e7eb;
        color: #9ca3af;
        cursor: not-allowed;
        box-shadow: none;
    }

        .btn-add-to-cart:disabled:hover[b-wtkd6vpa1l] {
            transform: none;
        }

/* Pagination - Modern Style */
.pagination[b-wtkd6vpa1l] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 32px 0;
}

.page-btn[b-wtkd6vpa1l] {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    border-radius: 12px;
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .page-btn:hover:not(:disabled)[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

.page-dots[b-wtkd6vpa1l] {
    color: #9ca3af;
    font-weight: 600;
    padding: 0 8px;
}

/* Animations */
@keyframes spin-b-wtkd6vpa1l {
    to {
        transform: rotate(360deg);
    }
}

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

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

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

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

/* Dark Theme Support */
[data-theme="dark"] .merchant-store-page[b-wtkd6vpa1l] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .store-header[b-wtkd6vpa1l] {
    background: #1e293b;
}

[data-theme="dark"] .sidebar-section[b-wtkd6vpa1l],
[data-theme="dark"] .content-toolbar[b-wtkd6vpa1l],
[data-theme="dark"] .product-card[b-wtkd6vpa1l] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .store-details h1[b-wtkd6vpa1l],
    [data-theme="dark"] .sidebar-section h3[b-wtkd6vpa1l],
    [data-theme="dark"] .no-products h3[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

[data-theme="dark"] .product-name[b-wtkd6vpa1l] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-card:hover .product-name[b-wtkd6vpa1l] {
    color: #a78bfa;
}

[data-theme="dark"] .store-description[b-wtkd6vpa1l],
[data-theme="dark"] .stat-item[b-wtkd6vpa1l],
[data-theme="dark"] .product-category[b-wtkd6vpa1l],
[data-theme="dark"] .rating-count[b-wtkd6vpa1l] {
    color: #9ca3af;
}

[data-theme="dark"] .category-item[b-wtkd6vpa1l],
[data-theme="dark"] .price-filter input[b-wtkd6vpa1l],
[data-theme="dark"] .search-box input[b-wtkd6vpa1l],
[data-theme="dark"] .sort-select[b-wtkd6vpa1l] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .category-item:hover[b-wtkd6vpa1l] {
        background: rgba(167, 139, 250, 0.1);
        border-color: rgba(167, 139, 250, 0.3);
    }

    [data-theme="dark"] .category-item.active[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(192, 132, 252, 0.2) 100%);
        border-color: #a78bfa;
        color: #e2e8f0;
    }

    [data-theme="dark"] .price-filter input:focus[b-wtkd6vpa1l],
    [data-theme="dark"] .search-box input:focus[b-wtkd6vpa1l],
    [data-theme="dark"] .sort-select:focus[b-wtkd6vpa1l] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
        box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.1);
    }

[data-theme="dark"] .view-mode[b-wtkd6vpa1l] {
    background: rgba(167, 139, 250, 0.2);
}

    [data-theme="dark"] .view-mode button[b-wtkd6vpa1l] {
        color: #a78bfa;
    }

        [data-theme="dark"] .view-mode button.active[b-wtkd6vpa1l] {
            background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        }

[data-theme="dark"] .results-info[b-wtkd6vpa1l] {
    background: rgba(167, 139, 250, 0.1);
    color: #e2e8f0;
}

[data-theme="dark"] .search-term[b-wtkd6vpa1l] {
    color: #a78bfa;
}

[data-theme="dark"] .product-image .no-image[b-wtkd6vpa1l] {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    color: #64748b;
}

[data-theme="dark"] .btn-quick-view[b-wtkd6vpa1l],
[data-theme="dark"] .btn-wishlist[b-wtkd6vpa1l] {
    background: rgba(30, 41, 59, 0.95);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-quick-view:hover[b-wtkd6vpa1l],
    [data-theme="dark"] .btn-wishlist:hover[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

[data-theme="dark"] .current-price[b-wtkd6vpa1l],
[data-theme="dark"] .sale-price[b-wtkd6vpa1l] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .btn-add-to-cart[b-wtkd6vpa1l] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .page-btn[b-wtkd6vpa1l] {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

    [data-theme="dark"] .page-btn:hover:not(:disabled)[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

    [data-theme="dark"] .page-btn.active[b-wtkd6vpa1l] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .store-layout[b-wtkd6vpa1l] {
        grid-template-columns: 250px 1fr;
        gap: 24px;
    }

    .products-grid.grid[b-wtkd6vpa1l] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 992px) {
    .store-info[b-wtkd6vpa1l] {
        flex-wrap: wrap;
    }

    .store-details[b-wtkd6vpa1l] {
        padding-top: 20px;
    }

    .store-actions[b-wtkd6vpa1l] {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 20px;
    }

    .store-layout[b-wtkd6vpa1l] {
        grid-template-columns: 1fr;
    }

    .store-sidebar[b-wtkd6vpa1l] {
        position: relative;
        top: auto;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }

    .products-grid.grid[b-wtkd6vpa1l] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .store-header[b-wtkd6vpa1l] {
        border-radius: 0 0 24px 24px;
        margin-bottom: 32px;
    }

    .store-banner[b-wtkd6vpa1l] {
        height: 200px;
    }

    .store-info[b-wtkd6vpa1l] {
        padding: 0 20px 20px;
        gap: 20px;
    }

    .store-logo[b-wtkd6vpa1l] {
        width: 80px;
        height: 80px;
    }

        .store-logo .default-logo[b-wtkd6vpa1l] {
            font-size: 32px;
        }

    .store-details h1[b-wtkd6vpa1l] {
        font-size: 24px;
    }

    .store-meta[b-wtkd6vpa1l] {
        gap: 16px;
    }

    .store-stats[b-wtkd6vpa1l] {
        gap: 12px;
    }

    .stat-item[b-wtkd6vpa1l] {
        font-size: 12px;
    }

    .container[b-wtkd6vpa1l] {
        padding: 0 16px;
    }

    .content-toolbar[b-wtkd6vpa1l] {
        flex-direction: column;
        gap: 16px;
    }

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

    .products-grid.grid[b-wtkd6vpa1l] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .product-image[b-wtkd6vpa1l] {
        height: 180px;
    }

    .product-info[b-wtkd6vpa1l] {
        padding: 16px;
    }

    .product-name[b-wtkd6vpa1l] {
        font-size: 14px;
    }

    .current-price[b-wtkd6vpa1l],
    .sale-price[b-wtkd6vpa1l] {
        font-size: 18px;
    }

    .btn-add-to-cart[b-wtkd6vpa1l] {
        padding: 12px 16px;
        font-size: 14px;
    }

    .pagination[b-wtkd6vpa1l] {
        padding: 24px 0;
    }

    .page-btn[b-wtkd6vpa1l] {
        min-width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

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

    .store-sidebar[b-wtkd6vpa1l] {
        grid-template-columns: 1fr;
    }

    .sidebar-section[b-wtkd6vpa1l] {
        padding: 20px;
    }

    .quick-actions[b-wtkd6vpa1l] {
        bottom: 8px;
    }

    .btn-quick-view[b-wtkd6vpa1l],
    .btn-wishlist[b-wtkd6vpa1l] {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .merchant-store-page[b-wtkd6vpa1l] {
        background: white !important;
    }

    .store-sidebar[b-wtkd6vpa1l],
    .content-toolbar[b-wtkd6vpa1l],
    .quick-actions[b-wtkd6vpa1l],
    .pagination[b-wtkd6vpa1l],
    .btn-follow[b-wtkd6vpa1l],
    .btn-add-to-cart[b-wtkd6vpa1l],
    .no-products button[b-wtkd6vpa1l] {
        display: none !important;
    }

    .products-grid[b-wtkd6vpa1l] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .product-card[b-wtkd6vpa1l] {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* RTL Support */
html[dir="rtl"] .search-box i[b-wtkd6vpa1l] {
    left: auto;
    right: 20px;
}

html[dir="rtl"] .search-box input[b-wtkd6vpa1l] {
    padding: 14px 50px 14px 20px;
}

html[dir="rtl"] .product-badges[b-wtkd6vpa1l] {
    right: auto;
    left: 16px;
}

html[dir="rtl"] .original-price[b-wtkd6vpa1l] {
    margin-left: 0;
    margin-right: 8px;
}

html[dir="rtl"] .stat-item i[b-wtkd6vpa1l],
html[dir="rtl"] .installment-price i[b-wtkd6vpa1l] {
    margin-right: 0;
    margin-left: 8px;
}

/* Accessibility */
.product-card:focus-visible[b-wtkd6vpa1l],
.category-item:focus-visible[b-wtkd6vpa1l],
.btn-add-to-cart:focus-visible[b-wtkd6vpa1l] {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Performance Optimization */
.product-card[b-wtkd6vpa1l],
.product-image img[b-wtkd6vpa1l] {
    will-change: transform;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .product-card[b-wtkd6vpa1l] {
        border: 2px solid currentColor;
    }

    .btn-add-to-cart[b-wtkd6vpa1l] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *[b-wtkd6vpa1l],
    *[b-wtkd6vpa1l]::before,
    *[b-wtkd6vpa1l]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Public/Product.razor.rz.scp.css */
/* ===================================
   Products Page - Modern E-Commerce Design
   Inspired by Users.razor.css Architecture
   =================================== */

/* Page Container */
.products-page[b-a5s4wytyrz] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow-x: hidden;
}

    .products-page[b-a5s4wytyrz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 500px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

/* Header Section */
.products-header[b-a5s4wytyrz] {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 32px 0;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.header-content[b-a5s4wytyrz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.page-title[b-a5s4wytyrz] {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.header-actions[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    max-width: 600px;
}

/* Location Indicator */
.location-indicator[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    color: #4c1d95;
    white-space: nowrap;
}

    .location-indicator:hover[b-a5s4wytyrz] {
        transform: translateY(-2px);
        border-color: #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

    .location-indicator i:first-child[b-a5s4wytyrz] {
        color: #667eea;
        font-size: 16px;
    }

    .location-indicator i:last-child[b-a5s4wytyrz] {
        font-size: 12px;
        opacity: 0.6;
    }

/* Search Bar */
.search-bar[b-a5s4wytyrz] {
    flex: 1;
    position: relative;
}

    .search-bar i[b-a5s4wytyrz] {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 18px;
    }

    .search-bar input[b-a5s4wytyrz] {
        width: 100%;
        padding: 14px 20px 14px 48px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 20px;
        font-size: 15px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .search-bar input:focus[b-a5s4wytyrz] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* Products Layout */
.products-layout[b-a5s4wytyrz] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    position: relative;
    z-index: 1;
}

/* Filters Sidebar */
.filters-sidebar[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: fit-content;
    position: sticky;
    top: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filters-header[b-a5s4wytyrz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

    .filters-header h3[b-a5s4wytyrz] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.close-filters[b-a5s4wytyrz] {
    display: none;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: all 0.3s;
}

    .close-filters:hover[b-a5s4wytyrz] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

/* Filter Sections */
.filter-section[b-a5s4wytyrz] {
    margin-bottom: 32px;
}

    .filter-section h4[b-a5s4wytyrz] {
        font-size: 16px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Categories List */
.categories-list[b-a5s4wytyrz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-item[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .category-item:hover[b-a5s4wytyrz] {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.2);
    }

    .category-item.active[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .category-item input[b-a5s4wytyrz] {
        display: none;
    }

    .category-item .count[b-a5s4wytyrz] {
        font-size: 13px;
        opacity: 0.7;
        font-weight: 500;
    }

/* Price Range */
.price-inputs[b-a5s4wytyrz] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    flex-direction: column-reverse;
}

    .price-inputs input[b-a5s4wytyrz] {
        flex: 1;
        padding: 10px 14px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 14px;
        transition: all 0.3s;
    }

        .price-inputs input:focus[b-a5s4wytyrz] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

    .price-inputs span[b-a5s4wytyrz] {
        color: #9ca3af;
        font-weight: 500;
    }

.apply-price-btn[b-a5s4wytyrz] {
    width: 100%;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .apply-price-btn:hover[b-a5s4wytyrz] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Distance Options */
.distance-options[b-a5s4wytyrz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.distance-item[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

    .distance-item:hover[b-a5s4wytyrz] {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.2);
    }

    .distance-item input[type="radio"]:checked + span[b-a5s4wytyrz] {
        color: #667eea;
        font-weight: 600;
    }

    .distance-item input[b-a5s4wytyrz] {
        margin-right: 10px;
        accent-color: #667eea;
    }

/* Filter Checkboxes */
.filter-checkbox[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.3s;
}

    .filter-checkbox:hover[b-a5s4wytyrz] {
        background: rgba(102, 126, 234, 0.1);
    }

    .filter-checkbox input[b-a5s4wytyrz] {
        width: 18px;
        height: 18px;
        accent-color: #667eea;
        cursor: pointer;
    }

/* Filter Actions */
.filters-actions[b-a5s4wytyrz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.btn-apply-filters[b-a5s4wytyrz],
.btn-reset-filters[b-a5s4wytyrz] {
    width: 100%;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.btn-apply-filters[b-a5s4wytyrz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-apply-filters:hover[b-a5s4wytyrz] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

.btn-reset-filters[b-a5s4wytyrz] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

    .btn-reset-filters:hover[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Products Content */
.products-content[b-a5s4wytyrz] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Products Toolbar */
.products-toolbar[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.toolbar-left[b-a5s4wytyrz],
.toolbar-right[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-filters-mobile[b-a5s4wytyrz] {
    display: none;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-filters-mobile:hover[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
    }

.results-count[b-a5s4wytyrz] {
    font-size: 16px;
    color: #4c1d95;
    font-weight: 600;
}

.sort-select[b-a5s4wytyrz] {
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    color: #4c1d95;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

    .sort-select:focus[b-a5s4wytyrz] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* View Mode */
.view-mode[b-a5s4wytyrz] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

    .view-mode button[b-a5s4wytyrz] {
        padding: 8px 12px;
        background: transparent;
        border: none;
        color: #667eea;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 16px;
    }

        .view-mode button:hover[b-a5s4wytyrz] {
            color: #764ba2;
            background: rgba(102, 126, 234, 0.1);
        }

        .view-mode button.active[b-a5s4wytyrz] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

/* Products Container */
.products-container[b-a5s4wytyrz] {
    display: grid;
    gap: 24px;
}

    .products-container.grid[b-a5s4wytyrz] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .products-container.list[b-a5s4wytyrz] {
        grid-template-columns: 1fr;
    }

/* Product Card */
.product-card[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    cursor: pointer;
}

    .product-card[b-a5s4wytyrz]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s;
        transform: rotate(45deg);
        pointer-events: none;
    }

    .product-card:hover[b-a5s4wytyrz] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

        .product-card:hover[b-a5s4wytyrz]::before {
            opacity: 0.05;
        }

    .product-card.same-city[b-a5s4wytyrz] {
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
    }

/* City Priority Badge */
.city-priority-badge[b-a5s4wytyrz] {
    position: absolute;
    top: 16px;
    left: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .city-priority-badge i[b-a5s4wytyrz] {
        font-size: 14px;
    }

/* Distance Badge */
.distance-badge[b-a5s4wytyrz] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.9) 0%, rgba(16, 185, 129, 0.9) 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .distance-badge.same-city-distance[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

    .distance-badge.no-location[b-a5s4wytyrz] {
        background: linear-gradient(135deg, rgba(107, 114, 128, 0.9) 0%, rgba(75, 85, 99, 0.9) 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .distance-badge i[b-a5s4wytyrz] {
        font-size: 12px;
    }

/* Product Image */
.product-image[b-a5s4wytyrz] {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
}

    .product-image img[b-a5s4wytyrz] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

.product-card:hover .product-image img[b-a5s4wytyrz] {
    transform: scale(1.1);
}

.no-image[b-a5s4wytyrz] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 48px;
}

/* Product Badges */
.product-badges[b-a5s4wytyrz] {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.badge[b-a5s4wytyrz] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .badge.sale[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
        color: white;
    }

    .badge.installment[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
        display: flex;
        align-items: center;
        gap: 4px;
    }

/* Quick Actions */
.quick-actions[b-a5s4wytyrz] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
}

.product-card:hover .quick-actions[b-a5s4wytyrz] {
    opacity: 1;
}

.quick-actions button[b-a5s4wytyrz] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    color: #4c1d95;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .quick-actions button:hover[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: scale(1.1);
    }

/* Product Info */
.product-info[b-a5s4wytyrz] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Merchant Info */
.merchant-info[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

    .merchant-info.same-city-merchant[b-a5s4wytyrz] {
        color: #667eea;
    }

    .merchant-info i[b-a5s4wytyrz] {
        color: #9333ea;
        font-size: 14px;
    }

.merchant-location[b-a5s4wytyrz] {
    color: #9ca3af;
    font-size: 12px;
}

    .merchant-location.same-city[b-a5s4wytyrz] {
        color: #667eea;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .merchant-location.same-city i[b-a5s4wytyrz] {
            color: #10b981;
            font-size: 12px;
        }

/* Product Name */
.product-name[b-a5s4wytyrz] {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Product Rating */
.product-rating[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars[b-a5s4wytyrz] {
    display: flex;
    gap: 2px;
}

    .stars i[b-a5s4wytyrz] {
        color: #e5e7eb;
        font-size: 14px;
        transition: color 0.3s;
    }

        .stars i.filled[b-a5s4wytyrz] {
            color: #fbbf24;
            text-shadow: 0 0 4px rgba(251, 191, 36, 0.3);
        }

.rating-count[b-a5s4wytyrz] {
    font-size: 13px;
    color: #6b7280;
}

/* Product Price */
.product-price[b-a5s4wytyrz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.current-price[b-a5s4wytyrz],
.sale-price[b-a5s4wytyrz] {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.original-price[b-a5s4wytyrz] {
    font-size: 16px;
    color: #9ca3af;
    text-decoration: line-through;
}

.installment-price[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #10b981;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    padding: 6px 12px;
    border-radius: 8px;
    width: fit-content;
}

    .installment-price i[b-a5s4wytyrz] {
        font-size: 16px;
    }

/* Stock Status */
.stock-status[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

    .stock-status .in-stock[b-a5s4wytyrz] {
        color: #10b981;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .stock-status .low-stock[b-a5s4wytyrz] {
        color: #f59e0b;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .stock-status .out-of-stock[b-a5s4wytyrz] {
        color: #ef4444;
        display: flex;
        align-items: center;
        gap: 4px;
    }

/* Add to Cart Button */
.btn-add-to-cart[b-a5s4wytyrz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

    .btn-add-to-cart:hover:not(:disabled)[b-a5s4wytyrz] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-add-to-cart:disabled[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        cursor: not-allowed;
        opacity: 0.6;
    }

    .btn-add-to-cart i[b-a5s4wytyrz] {
        font-size: 16px;
    }

/* List View Specific */
.products-container.list .product-card[b-a5s4wytyrz] {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 200px;
}

.products-container.list .product-image[b-a5s4wytyrz] {
    height: 100%;
}

.products-container.list .product-info[b-a5s4wytyrz] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr auto;
    gap: 8px;
    padding: 20px;
}

.products-container.list .product-name[b-a5s4wytyrz] {
    grid-column: 1 / -1;
}

.products-container.list .product-price[b-a5s4wytyrz] {
    grid-column: 2;
    grid-row: 2 / 4;
    text-align: right;
}

.products-container.list .btn-add-to-cart[b-a5s4wytyrz] {
    grid-column: 1 / -1;
    margin-top: auto;
}

/* Loading States */
.products-loading[b-a5s4wytyrz] {
    padding: 40px 0;
}

.loading-grid[b-a5s4wytyrz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.product-skeleton[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.skeleton-image[b-a5s4wytyrz] {
    height: 280px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-a5s4wytyrz 1.5s infinite;
}

.skeleton-content[b-a5s4wytyrz] {
    padding: 24px;
}

.skeleton-line[b-a5s4wytyrz] {
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-a5s4wytyrz 1.5s infinite;
    border-radius: 8px;
    margin-bottom: 12px;
}

    .skeleton-line.short[b-a5s4wytyrz] {
        width: 60%;
    }

    .skeleton-line.medium[b-a5s4wytyrz] {
        width: 80%;
    }

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

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

/* No Products Found */
.no-products[b-a5s4wytyrz] {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .no-products i[b-a5s4wytyrz] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .no-products h3[b-a5s4wytyrz] {
        font-size: 24px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .no-products p[b-a5s4wytyrz] {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 24px;
    }

.btn-reset[b-a5s4wytyrz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-reset:hover[b-a5s4wytyrz] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

/* Pagination */
.pagination[b-a5s4wytyrz] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.page-btn[b-a5s4wytyrz] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
}

    .page-btn:hover:not(:disabled)[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

.page-dots[b-a5s4wytyrz] {
    color: #9ca3af;
    font-weight: 600;
    padding: 0 8px;
}

/* Location Modal */
.modal-backdrop[b-a5s4wytyrz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-a5s4wytyrz 0.3s;
}

.modal-content[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    animation: slideUp-b-a5s4wytyrz 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header[b-a5s4wytyrz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

    .modal-header h3[b-a5s4wytyrz] {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.close-modal[b-a5s4wytyrz] {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: all 0.3s;
}

    .close-modal:hover[b-a5s4wytyrz] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transform: rotate(90deg);
    }

.modal-body[b-a5s4wytyrz] {
    padding: 24px;
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

.btn-use-current-location[b-a5s4wytyrz] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

    .btn-use-current-location:hover[b-a5s4wytyrz] {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-use-current-location i[b-a5s4wytyrz] {
        font-size: 18px;
    }

.location-search[b-a5s4wytyrz] {
    margin-bottom: 20px;
}

    .location-search input[b-a5s4wytyrz] {
        width: 100%;
        padding: 14px 20px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 15px;
        transition: all 0.3s;
    }

        .location-search input:focus[b-a5s4wytyrz] {
            outline: none;
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

.cities-list[b-a5s4wytyrz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.city-item[b-a5s4wytyrz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    text-align: right;
    font-size: 15px;
    color: #4b5563;
}

    .city-item:hover[b-a5s4wytyrz] {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.2);
        color: #667eea;
    }

    .city-item i[b-a5s4wytyrz] {
        color: #9333ea;
        font-size: 16px;
    }

/* Dark Theme Support */
[data-theme="dark"] .products-page[b-a5s4wytyrz] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .products-page[b-a5s4wytyrz]::before {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .products-header[b-a5s4wytyrz],
[data-theme="dark"] .filters-sidebar[b-a5s4wytyrz],
[data-theme="dark"] .products-toolbar[b-a5s4wytyrz],
[data-theme="dark"] .product-card[b-a5s4wytyrz],
[data-theme="dark"] .no-products[b-a5s4wytyrz],
[data-theme="dark"] .pagination[b-a5s4wytyrz],
[data-theme="dark"] .modal-content[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .page-title[b-a5s4wytyrz],
[data-theme="dark"] .filters-header h3[b-a5s4wytyrz],
[data-theme="dark"] .modal-header h3[b-a5s4wytyrz],
[data-theme="dark"] .current-price[b-a5s4wytyrz],
[data-theme="dark"] .sale-price[b-a5s4wytyrz] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .search-bar input[b-a5s4wytyrz],
[data-theme="dark"] .price-inputs input[b-a5s4wytyrz],
[data-theme="dark"] .sort-select[b-a5s4wytyrz],
[data-theme="dark"] .location-search input[b-a5s4wytyrz],
[data-theme="dark"] .category-item[b-a5s4wytyrz],
[data-theme="dark"] .distance-item[b-a5s4wytyrz],
[data-theme="dark"] .filter-checkbox[b-a5s4wytyrz],
[data-theme="dark"] .city-item[b-a5s4wytyrz] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

    [data-theme="dark"] .search-bar input:focus[b-a5s4wytyrz],
    [data-theme="dark"] .price-inputs input:focus[b-a5s4wytyrz],
    [data-theme="dark"] .sort-select:focus[b-a5s4wytyrz],
    [data-theme="dark"] .location-search input:focus[b-a5s4wytyrz] {
        background: rgba(71, 85, 105, 0.5);
        border-color: #a78bfa;
    }

[data-theme="dark"] .location-indicator[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .results-count[b-a5s4wytyrz],
[data-theme="dark"] .filter-section h4[b-a5s4wytyrz] {
    color: #e2e8f0;
}

[data-theme="dark"] .product-name[b-a5s4wytyrz] {
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-info[b-a5s4wytyrz] {
    color: #9ca3af;
}

[data-theme="dark"] .view-mode[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.2);
}

    [data-theme="dark"] .view-mode button[b-a5s4wytyrz] {
        color: #a78bfa;
    }

        [data-theme="dark"] .view-mode button.active[b-a5s4wytyrz] {
            background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
            color: white;
        }

[data-theme="dark"] .no-products p[b-a5s4wytyrz],
[data-theme="dark"] .rating-count[b-a5s4wytyrz],
[data-theme="dark"] .original-price[b-a5s4wytyrz] {
    color: #9ca3af;
}

[data-theme="dark"] .quick-actions button[b-a5s4wytyrz] {
    background: rgba(30, 41, 59, 0.95);
    color: #e2e8f0;
}

    [data-theme="dark"] .quick-actions button:hover[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .btn-filters-mobile[b-a5s4wytyrz] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

    [data-theme="dark"] .btn-filters-mobile:hover[b-a5s4wytyrz] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .page-btn[b-a5s4wytyrz] {
    background: rgba(167, 139, 250, 0.2);
    color: #e2e8f0;
}

[data-theme="dark"] .close-modal[b-a5s4wytyrz],
[data-theme="dark"] .close-filters[b-a5s4wytyrz] {
    color: #9ca3af;
}

    [data-theme="dark"] .close-modal:hover[b-a5s4wytyrz],
    [data-theme="dark"] .close-filters:hover[b-a5s4wytyrz] {
        color: #e2e8f0;
        background: rgba(167, 139, 250, 0.1);
    }

/* Animations */
@keyframes fadeIn-b-a5s4wytyrz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

/* Responsive Design */
@media (max-width: 1200px) {
    .products-layout[b-a5s4wytyrz] {
        grid-template-columns: 240px 1fr;
    }

    .products-container.grid[b-a5s4wytyrz] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 992px) {
    .products-layout[b-a5s4wytyrz] {
        grid-template-columns: 1fr;
    }

    .filters-sidebar[b-a5s4wytyrz] {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        height: 100%;
        z-index: 1001;
        border-radius: 0;
        padding-top: 60px;
        animation: slideInRight 0.3s;
    }

        .filters-sidebar.show[b-a5s4wytyrz] {
            display: block;
        }

    html[dir="ltr"] .filters-sidebar[b-a5s4wytyrz] {
        left: 0;
        right: auto;
        animation: slideInLeft 0.3s;
    }

    .close-filters[b-a5s4wytyrz] {
        display: block;
    }

    .btn-filters-mobile[b-a5s4wytyrz] {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .products-page[b-a5s4wytyrz] {
        padding-bottom: 80px; /* Space for mobile navigation */
    }

    .products-header[b-a5s4wytyrz] {
        padding: 20px 0;
        margin-bottom: 24px;
    }

    .header-content[b-a5s4wytyrz] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title[b-a5s4wytyrz] {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .header-actions[b-a5s4wytyrz] {
        flex-direction: column;
        max-width: 100%;
        gap: 12px;
    }

    .products-container.grid[b-a5s4wytyrz] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }

    .product-card[b-a5s4wytyrz] {
        border-radius: 16px;
    }

    .product-image[b-a5s4wytyrz] {
        height: 200px;
    }

    .product-info[b-a5s4wytyrz] {
        padding: 16px;
        gap: 8px;
    }

    .product-name[b-a5s4wytyrz] {
        font-size: 15px;
    }

    .current-price[b-a5s4wytyrz],
    .sale-price[b-a5s4wytyrz] {
        font-size: 20px;
    }

    .btn-add-to-cart[b-a5s4wytyrz] {
        padding: 12px 16px;
        font-size: 14px;
    }

    .products-toolbar[b-a5s4wytyrz] {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left[b-a5s4wytyrz],
    .toolbar-right[b-a5s4wytyrz] {
        justify-content: space-between;
        width: 100%;
    }

    .modal-content[b-a5s4wytyrz] {
        width: 95%;
        margin: 20px;
    }

    .filters-sidebar[b-a5s4wytyrz] {
        width: 100%;
    }

    .pagination[b-a5s4wytyrz] {
        padding: 20px;
        gap: 4px;
    }

    .page-btn[b-a5s4wytyrz] {
        padding: 8px 10px;
        min-width: 36px;
        font-size: 14px;
    }

    .city-priority-badge[b-a5s4wytyrz],
    .distance-badge[b-a5s4wytyrz] {
        font-size: 11px;
        padding: 6px 10px;
    }

    .badge[b-a5s4wytyrz] {
        font-size: 11px;
        padding: 4px 8px;
    }

    .quick-actions[b-a5s4wytyrz] {
        display: none;
    }
}

@media (max-width: 480px) {
    .products-container.grid[b-a5s4wytyrz] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-info[b-a5s4wytyrz] {
        padding: 12px;
    }

    .product-name[b-a5s4wytyrz] {
        font-size: 14px;
        -webkit-line-clamp: 1;
    }

    .merchant-info[b-a5s4wytyrz] {
        font-size: 12px;
    }

    .installment-price[b-a5s4wytyrz] {
        font-size: 12px;
        padding: 4px 8px;
    }

    .products-container.list .product-card[b-a5s4wytyrz] {
        grid-template-columns: 100px 1fr;
        height: auto;
    }

    .products-container.list .product-info[b-a5s4wytyrz] {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .products-container.list .product-price[b-a5s4wytyrz] {
        grid-column: 1;
        text-align: left;
    }
}

/* RTL Support */
html[dir="rtl"] .search-bar i[b-a5s4wytyrz] {
    left: auto;
    right: 20px;
}

html[dir="rtl"] .search-bar input[b-a5s4wytyrz] {
    padding: 14px 48px 14px 20px;
}

html[dir="rtl"] .city-item[b-a5s4wytyrz] {
    text-align: left;
}

html[dir="rtl"] .merchant-location.same-city[b-a5s4wytyrz] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .distance-item input[b-a5s4wytyrz] {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="rtl"] .products-container.list .product-price[b-a5s4wytyrz] {
    text-align: left;
}

html[dir="rtl"] .city-priority-badge[b-a5s4wytyrz] {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .distance-badge[b-a5s4wytyrz] {
    right: auto;
    left: 16px;
}

html[dir="rtl"] .product-badges[b-a5s4wytyrz] {
    left: auto;
    right: 16px;
}

/* Print Styles */
@media print {
    .products-header[b-a5s4wytyrz],
    .filters-sidebar[b-a5s4wytyrz],
    .products-toolbar[b-a5s4wytyrz],
    .pagination[b-a5s4wytyrz],
    .btn-add-to-cart[b-a5s4wytyrz],
    .quick-actions[b-a5s4wytyrz] {
        display: none !important;
    }

    .products-layout[b-a5s4wytyrz] {
        grid-template-columns: 1fr;
    }

    .product-card[b-a5s4wytyrz] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }
}
/* _content/Sahelly/Components/Pages/Public/ProductView.razor.rz.scp.css */
/* ===================================
   Product Page - Modern Professional CSS
   ���� ������ - ����� ���� ��������
   =================================== */

/* Product Page Container */
.product-page[b-innxfpsjt6] {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
}

    .product-page[b-innxfpsjt6]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .product-page > *[b-innxfpsjt6] {
        position: relative;
        z-index: 1;
    }

/* Loading State - Modern */
.loading-container[b-innxfpsjt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 20px;
}

.loading-spinner[b-innxfpsjt6] {
    margin-bottom: 24px;
}

.spinner[b-innxfpsjt6] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-right-color: #667eea;
    border-radius: 50%;
    animation: spin-b-innxfpsjt6 0.8s linear infinite;
}

.loading-text[b-innxfpsjt6] {
    color: #4c1d95;
    font-weight: 600;
    margin: 0;
}

/* Error State - Modern */
.error-container[b-innxfpsjt6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px;
}

.error-content[b-innxfpsjt6] {
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

.error-icon[b-innxfpsjt6] {
    font-size: 80px;
    color: #f97316;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-content h3[b-innxfpsjt6] {
    font-size: 28px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 16px;
}

.error-content p[b-innxfpsjt6] {
    color: #6b7280;
    font-size: 16px;
    margin-bottom: 32px;
}

.error-actions[b-innxfpsjt6] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Breadcrumb Navigation - Modern */
.breadcrumb-container[b-innxfpsjt6] {
    margin-bottom: 32px;
}

.breadcrumb[b-innxfpsjt6] {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 20px 24px;
    margin: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    font-size: 14px;
}

.breadcrumb-item[b-innxfpsjt6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .breadcrumb-item a[b-innxfpsjt6] {
        color: #6b7280;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.3s;
        font-weight: 500;
        padding: 8px 12px;
        border-radius: 10px;
    }

        .breadcrumb-item a:hover[b-innxfpsjt6] {
            color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

    .breadcrumb-item.active[b-innxfpsjt6] {
        color: #4c1d95;
        font-weight: 600;
        padding: 8px 12px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border-radius: 10px;
    }

    .breadcrumb-item:not(:last-child)[b-innxfpsjt6]::after {
        content: '>';
        color: #d1d5db;
        margin: 0 8px;
        font-weight: 600;
    }

/* Product Images Section - Modern */
.product-images[b-innxfpsjt6] {
    margin-bottom: 32px;
}

.main-image-container[b-innxfpsjt6] {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    aspect-ratio: 1 / 1;
}

.main-product-image[b-innxfpsjt6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-image-container:hover .main-product-image[b-innxfpsjt6] {
    transform: scale(1.05);
}

.zoom-overlay[b-innxfpsjt6] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0;
    transform: scale(0.8);
}

.main-image-container:hover .zoom-overlay[b-innxfpsjt6] {
    opacity: 1;
    transform: scale(1);
}

.zoom-overlay:hover[b-innxfpsjt6] {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

/* Product Badges - Modern */
.product-badges[b-innxfpsjt6] {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badge[b-innxfpsjt6] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

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

    .badge:hover[b-innxfpsjt6]::before {
        left: 100%;
    }

.badge-sale[b-innxfpsjt6] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.badge-installment[b-innxfpsjt6] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.badge-limited[b-innxfpsjt6] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* Thumbnail Images - Modern */
.thumbnail-images[b-innxfpsjt6] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
}

    .thumbnail-images[b-innxfpsjt6]::-webkit-scrollbar {
        display: none;
    }

.thumbnail-item[b-innxfpsjt6] {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid transparent;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .thumbnail-item:hover[b-innxfpsjt6] {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .thumbnail-item.active[b-innxfpsjt6] {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
        transform: translateY(-2px);
    }

    .thumbnail-item img[b-innxfpsjt6] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* No Image Placeholder - Modern */
.no-image-placeholder[b-innxfpsjt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    color: #9ca3af;
    border: 2px dashed #d1d5db;
}

    .no-image-placeholder i[b-innxfpsjt6] {
        font-size: 80px;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Product Information Section - Modern */
.product-info[b-innxfpsjt6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Product Header - Modern */
.product-header[b-innxfpsjt6] {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.product-title[b-innxfpsjt6] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.product-title-en[b-innxfpsjt6] {
    font-size: 1.25rem;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 16px;
    font-style: italic;
}

/* Product Rating - Modern */
.product-rating[b-innxfpsjt6] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stars[b-innxfpsjt6] {
    display: flex;
    gap: 4px;
}

    .stars i[b-innxfpsjt6] {
        font-size: 20px;
        color: #fbbf24;
        filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3));
    }

        .stars i.bi-star[b-innxfpsjt6] {
            color: #d1d5db;
        }

.rating-text[b-innxfpsjt6] {
    color: #6b7280;
    font-weight: 500;
    font-size: 14px;
}

/* Product Meta - Modern */
.product-meta[b-innxfpsjt6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.sku-section[b-innxfpsjt6],
.availability-section[b-innxfpsjt6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .sku-section .label[b-innxfpsjt6],
    .availability-section .label[b-innxfpsjt6] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .sku-section .value[b-innxfpsjt6] {
        font-size: 16px;
        font-weight: 700;
        color: #667eea;
        font-family: 'Courier New', monospace;
        background: rgba(102, 126, 234, 0.1);
        padding: 8px 12px;
        border-radius: 8px;
        display: inline-block;
        width: fit-content;
    }

/* Availability Status - Modern */
.availability[b-innxfpsjt6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

    .availability.available[b-innxfpsjt6] {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
        color: #059669;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .availability.limited[b-innxfpsjt6] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .availability.unavailable[b-innxfpsjt6] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

/* Pricing Section - Modern */
.pricing-section[b-innxfpsjt6] {
    margin-bottom: 32px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 20px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    position: relative;
    overflow: hidden;
}

    .pricing-section[b-innxfpsjt6]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent);
        transform: rotate(45deg);
        animation: shimmer-b-innxfpsjt6 3s ease-in-out infinite;
    }

.price-container[b-innxfpsjt6] {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.current-price[b-innxfpsjt6] {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.original-price[b-innxfpsjt6] {
    font-size: 1.5rem;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 500;
}

.savings[b-innxfpsjt6] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Installment Info - Modern */
.installment-info[b-innxfpsjt6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(45, 212, 191, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid rgba(20, 184, 166, 0.2);
    color: #0d9488;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

    .installment-info i[b-innxfpsjt6] {
        font-size: 20px;
        color: #14b8a6;
    }

/* Merchant Section - Modern */
.merchant-section[b-innxfpsjt6] {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.merchant-info[b-innxfpsjt6] {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .merchant-info i[b-innxfpsjt6] {
        font-size: 24px;
        color: #667eea;
        padding: 12px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 12px;
    }

.merchant-details[b-innxfpsjt6] {
    flex: 1;
}

.merchant-name[b-innxfpsjt6] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.merchant-badge[b-innxfpsjt6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Purchase Section - Modern */
.purchase-section[b-innxfpsjt6] {
    margin-bottom: 32px;
}

.quantity-selector[b-innxfpsjt6] {
    margin-bottom: 24px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.quantity-label[b-innxfpsjt6] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quantity-controls[b-innxfpsjt6] {
    display: flex;
    align-items: center;
    gap: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.1);
    width: fit-content;
}

.qty-btn[b-innxfpsjt6] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 18px;
    font-weight: 600;
}

    .qty-btn:hover:not(:disabled)[b-innxfpsjt6] {
        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        transform: scale(1.05);
    }

    .qty-btn:disabled[b-innxfpsjt6] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

.qty-input[b-innxfpsjt6] {
    width: 80px;
    height: 48px;
    border: none;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    background: white;
    outline: none;
}

/* Action Buttons - Modern */
.action-buttons[b-innxfpsjt6] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.btn-add-to-cart[b-innxfpsjt6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

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

    .btn-add-to-cart:hover[b-innxfpsjt6]::before {
        width: 300px;
        height: 300px;
    }

    .btn-add-to-cart:hover[b-innxfpsjt6] {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
    }

    .btn-add-to-cart:disabled[b-innxfpsjt6] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.btn-wishlist[b-innxfpsjt6] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 16px;
    border-radius: 16px;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-wishlist:hover[b-innxfpsjt6] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

/* Out of Stock Section - Modern */
.out-of-stock-section[b-innxfpsjt6] {
    text-align: center;
    padding: 32px;
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.1) 0%, rgba(107, 114, 128, 0.1) 100%);
    border-radius: 16px;
    border: 2px dashed rgba(156, 163, 175, 0.3);
    margin-bottom: 32px;
}

.btn-notify[b-innxfpsjt6] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
}

    .btn-notify:hover[b-innxfpsjt6] {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(249, 115, 22, 0.4);
    }

/* Share Section - Modern */
.share-section[b-innxfpsjt6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.share-label[b-innxfpsjt6] {
    font-weight: 600;
    color: #4c1d95;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.share-buttons[b-innxfpsjt6] {
    display: flex;
    gap: 12px;
}

.share-btn[b-innxfpsjt6] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 20px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .share-btn.whatsapp[b-innxfpsjt6] {
        background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    }

    .share-btn.facebook[b-innxfpsjt6] {
        background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%);
    }

    .share-btn.copy-link[b-innxfpsjt6] {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    }

    .share-btn:hover[b-innxfpsjt6] {
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

/* Product Tabs - Modern */
.product-tabs[b-innxfpsjt6] {
    margin-top: 48px;
}

.tabs-nav[b-innxfpsjt6] {
    display: flex;
    gap: 4px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .tabs-nav[b-innxfpsjt6]::-webkit-scrollbar {
        display: none;
    }

.tab-btn[b-innxfpsjt6] {
    flex: 1;
    min-width: fit-content;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 16px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

    .tab-btn[b-innxfpsjt6]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s;
        z-index: -1;
        border-radius: 16px;
    }

    .tab-btn:hover[b-innxfpsjt6] {
        color: #667eea;
        transform: translateY(-2px);
    }

        .tab-btn:hover[b-innxfpsjt6]::before {
            opacity: 0.1;
        }

    .tab-btn.active[b-innxfpsjt6] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        transform: translateY(-2px);
    }

        .tab-btn.active[b-innxfpsjt6]::before {
            opacity: 1;
        }

/* Tab Content - Modern */
.tab-content[b-innxfpsjt6] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 300px;
}

/* Description Content - Modern */
.description-content[b-innxfpsjt6] {
    line-height: 1.8;
}

.description-text[b-innxfpsjt6] {
    font-size: 16px;
    color: #374151;
    text-align: justify;
}

.no-description[b-innxfpsjt6] {
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    padding: 40px;
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.1) 0%, rgba(107, 114, 128, 0.1) 100%);
    border-radius: 12px;
    border: 2px dashed rgba(156, 163, 175, 0.3);
}

/* Specifications Content - Modern */
.specifications-content[b-innxfpsjt6] {
    overflow-x: auto;
}

.specs-grid[b-innxfpsjt6] {
    display: grid;
    gap: 16px;
}

.spec-item[b-innxfpsjt6] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s;
}

    .spec-item:hover[b-innxfpsjt6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        border-color: rgba(102, 126, 234, 0.2);
    }

.spec-name[b-innxfpsjt6] {
    font-weight: 700;
    color: #4c1d95;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value[b-innxfpsjt6] {
    color: #374151;
    font-weight: 500;
}

/* Reviews Content - Modern */
.reviews-content[b-innxfpsjt6] {
    text-align: center;
}

.reviews-summary[b-innxfpsjt6] {
    margin-bottom: 32px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.rating-overview[b-innxfpsjt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.overall-rating[b-innxfpsjt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.rating-number[b-innxfpsjt6] {
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rating-stars[b-innxfpsjt6] {
    display: flex;
    gap: 8px;
}

    .rating-stars i[b-innxfpsjt6] {
        font-size: 32px;
        color: #fbbf24;
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
    }

        .rating-stars i.bi-star[b-innxfpsjt6] {
            color: #d1d5db;
        }

.reviews-count[b-innxfpsjt6] {
    color: #6b7280;
    font-weight: 600;
    font-size: 18px;
}

.reviews-placeholder[b-innxfpsjt6] {
    padding: 60px;
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.1) 0%, rgba(107, 114, 128, 0.1) 100%);
    border-radius: 16px;
    border: 2px dashed rgba(156, 163, 175, 0.3);
    color: #9ca3af;
    font-style: italic;
    font-size: 18px;
}

/* Modern Button Styles */
.btn[b-innxfpsjt6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: none;
    font-size: 16px;
}

.btn-primary[b-innxfpsjt6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .btn-primary:hover[b-innxfpsjt6] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

.btn-outline-secondary[b-innxfpsjt6] {
    background: transparent;
    color: #6b7280;
    border: 2px solid rgba(107, 114, 128, 0.3);
}

    .btn-outline-secondary:hover[b-innxfpsjt6] {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(107, 114, 128, 0.3);
    }

/* Spinner */
.spinner-border[b-innxfpsjt6] {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-right-color: currentColor;
    border-radius: 50%;
    animation: spin-b-innxfpsjt6 0.8s linear infinite;
}

.spinner-border-sm[b-innxfpsjt6] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Animations */
@keyframes spin-b-innxfpsjt6 {
    0% {
        transform: rotate(0deg);
    }

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

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

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

@keyframes slideInUp-b-innxfpsjt6 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Dark Theme Support */
[data-theme="dark"] .product-page[b-innxfpsjt6] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .product-page[b-innxfpsjt6]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .product-info[b-innxfpsjt6],
[data-theme="dark"] .main-image-container[b-innxfpsjt6],
[data-theme="dark"] .tab-content[b-innxfpsjt6],
[data-theme="dark"] .breadcrumb[b-innxfpsjt6],
[data-theme="dark"] .tabs-nav[b-innxfpsjt6] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .product-title[b-innxfpsjt6] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .product-title-en[b-innxfpsjt6] {
    color: #9ca3af;
}

[data-theme="dark"] .rating-text[b-innxfpsjt6],
[data-theme="dark"] .quantity-label[b-innxfpsjt6],
[data-theme="dark"] .share-label[b-innxfpsjt6] {
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-name[b-innxfpsjt6] {
    color: #e2e8f0;
}

[data-theme="dark"] .spec-name[b-innxfpsjt6] {
    color: #e2e8f0;
}

[data-theme="dark"] .spec-value[b-innxfpsjt6],
[data-theme="dark"] .description-text[b-innxfpsjt6] {
    color: #cbd5e1;
}

[data-theme="dark"] .reviews-count[b-innxfpsjt6] {
    color: #9ca3af;
}

[data-theme="dark"] .quantity-controls[b-innxfpsjt6] {
    background: #334155;
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .qty-input[b-innxfpsjt6] {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .tab-btn[b-innxfpsjt6] {
    color: #9ca3af;
}

    [data-theme="dark"] .tab-btn:hover[b-innxfpsjt6] {
        color: #a78bfa;
    }

[data-theme="dark"] .no-description[b-innxfpsjt6],
[data-theme="dark"] .reviews-placeholder[b-innxfpsjt6] {
    color: #6b7280;
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.2) 0%, rgba(51, 65, 85, 0.2) 100%);
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .rating-number[b-innxfpsjt6] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .product-page[b-innxfpsjt6] {
        padding: 16px;
    }

    .product-info[b-innxfpsjt6] {
        padding: 24px;
    }

    .pricing-section[b-innxfpsjt6] {
        padding: 24px;
    }
}

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

    .breadcrumb[b-innxfpsjt6] {
        padding: 16px;
        font-size: 12px;
        flex-wrap: wrap;
    }

    .product-info[b-innxfpsjt6] {
        padding: 20px;
        margin-top: 20px;
    }

    .product-title[b-innxfpsjt6] {
        font-size: 1.5rem;
    }

    .product-title-en[b-innxfpsjt6] {
        font-size: 1rem;
    }

    .product-meta[b-innxfpsjt6] {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .pricing-section[b-innxfpsjt6] {
        padding: 20px;
    }

    .current-price[b-innxfpsjt6] {
        font-size: 2rem;
    }

    .original-price[b-innxfpsjt6] {
        font-size: 1.25rem;
    }

    .action-buttons[b-innxfpsjt6] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .btn-add-to-cart[b-innxfpsjt6],
    .btn-wishlist[b-innxfpsjt6] {
        padding: 14px 20px;
        font-size: 14px;
    }

    .share-section[b-innxfpsjt6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .tabs-nav[b-innxfpsjt6] {
        padding: 6px;
        margin-bottom: 16px;
    }

    .tab-btn[b-innxfpsjt6] {
        padding: 12px 16px;
        font-size: 14px;
    }

    .tab-content[b-innxfpsjt6] {
        padding: 20px;
    }

    .specs-grid[b-innxfpsjt6] {
        gap: 12px;
    }

    .spec-item[b-innxfpsjt6] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px;
    }

    .rating-number[b-innxfpsjt6] {
        font-size: 3rem;
    }

    .rating-stars i[b-innxfpsjt6] {
        font-size: 24px;
    }

    .quantity-controls[b-innxfpsjt6] {
        margin: 0 auto;
    }

    .merchant-info[b-innxfpsjt6] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .thumbnail-images[b-innxfpsjt6] {
        justify-content: center;
        gap: 8px;
    }

    .thumbnail-item[b-innxfpsjt6] {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .product-page[b-innxfpsjt6] {
        padding: 8px;
    }

    .product-info[b-innxfpsjt6] {
        padding: 16px;
    }

    .product-title[b-innxfpsjt6] {
        font-size: 1.25rem;
    }

    .current-price[b-innxfpsjt6] {
        font-size: 1.75rem;
    }

    .pricing-section[b-innxfpsjt6],
    .tab-content[b-innxfpsjt6] {
        padding: 16px;
    }

    .quantity-selector[b-innxfpsjt6] {
        padding: 16px;
    }

    .btn-add-to-cart[b-innxfpsjt6],
    .btn-wishlist[b-innxfpsjt6] {
        padding: 12px 16px;
        font-size: 13px;
    }

    .share-btn[b-innxfpsjt6] {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .error-content[b-innxfpsjt6] {
        padding: 40px 20px;
    }

    .error-icon[b-innxfpsjt6] {
        font-size: 60px;
    }

    .error-content h3[b-innxfpsjt6] {
        font-size: 20px;
    }

    .error-actions[b-innxfpsjt6] {
        flex-direction: column;
        gap: 12px;
    }
}

/* Print Styles */
@media print {
    .product-page[b-innxfpsjt6] {
        background: white !important;
        padding: 0;
    }

    .zoom-overlay[b-innxfpsjt6],
    .share-section[b-innxfpsjt6],
    .action-buttons[b-innxfpsjt6],
    .purchase-section[b-innxfpsjt6],
    .breadcrumb[b-innxfpsjt6] {
        display: none !important;
    }

    .product-info[b-innxfpsjt6],
    .main-image-container[b-innxfpsjt6],
    .tab-content[b-innxfpsjt6] {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .product-badges[b-innxfpsjt6] {
        position: static;
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin-bottom: 16px;
    }

    .badge[b-innxfpsjt6] {
        color: black !important;
        background: #f3f4f6 !important;
        border: 1px solid #d1d5db !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-primary[b-innxfpsjt6],
    .btn-add-to-cart[b-innxfpsjt6] {
        border: 2px solid currentColor;
    }

    .badge[b-innxfpsjt6] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-innxfpsjt6] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus States for Accessibility */
*:focus[b-innxfpsjt6] {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

button:focus[b-innxfpsjt6],
.btn:focus[b-innxfpsjt6] {
    outline: 3px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* Selection Styles */
[b-innxfpsjt6]::selection {
    background: rgba(102, 126, 234, 0.2);
    color: #1f2937;
}

[b-innxfpsjt6]::-moz-selection {
    background: rgba(102, 126, 234, 0.2);
    color: #1f2937;
}
/* _content/Sahelly/Components/Pages/Public/Register.razor.rz.scp.css */
/* Auth Container */
.auth-container[b-6x6p8povma] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.auth-card[b-6x6p8povma] {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    padding: 48px;
    position: relative;
    overflow: hidden;
}

/* Auth Header */
.auth-header[b-6x6p8povma] {
    text-align: center;
    margin-bottom: 48px;
    animation: fadeIn-b-6x6p8povma 0.6s ease-out;
}

.auth-logo[b-6x6p8povma] {
    width: 120px;
    height: auto;
    margin-bottom: 24px;
}

.auth-header h2[b-6x6p8povma] {
    font-size: 32px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}

.auth-header p[b-6x6p8povma] {
    color: #64748b;
    font-size: 16px;
}

/* Account Type Selection */
.account-type-selection[b-6x6p8povma] {
    animation: fadeInUp-b-6x6p8povma 0.8s ease-out 0.3s both;
}

    .account-type-selection h3[b-6x6p8povma] {
        text-align: center;
        font-size: 24px;
        font-weight: 600;
        color: #1a202c;
        margin-bottom: 32px;
    }

.account-type-cards[b-6x6p8povma] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.account-type-card[b-6x6p8povma] {
    padding: 32px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .account-type-card:hover[b-6x6p8povma] {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
        border-color: #6366f1;
    }

    .account-type-card.merchant:hover[b-6x6p8povma] {
        border-color: #8b5cf6;
        box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
    }

/* Card Icons */
.card-icon[b-6x6p8povma] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 36px;
    transition: all 0.3s ease;
}

    .card-icon.customer[b-6x6p8povma] {
        background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
        color: #6366f1;
    }

    .card-icon.merchant[b-6x6p8povma] {
        background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
        color: #8b5cf6;
    }

.account-type-card h4[b-6x6p8povma] {
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 12px;
}

.account-type-card p[b-6x6p8povma] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.account-type-card ul[b-6x6p8povma] {
    list-style: none;
    padding: 0;
    text-align: right;
}

    .account-type-card ul li[b-6x6p8povma] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: #475569;
        font-size: 14px;
    }

        .account-type-card ul li i[b-6x6p8povma] {
            color: #10b981;
            font-size: 12px;
        }

/* Registration Steps */
.registration-steps[b-6x6p8povma] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 48px;
    padding: 0 20px;
    position: relative;
}

    .registration-steps[b-6x6p8povma]::before {
        content: '';
        position: absolute;
        top: 20px;
        right: 40px;
        left: 40px;
        height: 2px;
        background: #e5e7eb;
        z-index: 0;
    }

.step[b-6x6p8povma] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.step-number[b-6x6p8povma] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.step.active .step-number[b-6x6p8povma] {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

.step.completed .step-number[b-6x6p8povma] {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.step span[b-6x6p8povma] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.step.active span[b-6x6p8povma] {
    color: #1a202c;
}

/* Form Steps */
.form-step[b-6x6p8povma] {
    animation: fadeIn-b-6x6p8povma 0.4s ease-out;
}

    .form-step h3[b-6x6p8povma] {
        font-size: 24px;
        font-weight: 600;
        color: #1a202c;
        margin-bottom: 32px;
    }

/* Form Groups */
.form-group[b-6x6p8povma] {
    margin-bottom: 24px;
}

    .form-group label[b-6x6p8povma] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 8px;
    }

        .form-group label i[b-6x6p8povma] {
            font-size: 16px;
            color: #6366f1;
        }

.form-control[b-6x6p8povma] {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s ease;
    background-color: #f8fafc;
}

    .form-control:focus[b-6x6p8povma] {
        outline: none;
        border-color: #6366f1;
        background-color: #ffffff;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

.form-row[b-6x6p8povma] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* Password Input Wrapper */
.password-input-wrapper[b-6x6p8povma] {
    position: relative;
}

.toggle-password[b-6x6p8povma] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

    .toggle-password:hover[b-6x6p8povma] {
        color: #475569;
    }

/* Document Upload */
.document-upload[b-6x6p8povma] {
    margin-bottom: 24px;
}

    .document-upload label[b-6x6p8povma] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 8px;
    }

.upload-area[b-6x6p8povma] {
    position: relative;
    width: 100%;
    height: 200px;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8fafc;
    overflow: hidden;
}

    .upload-area:hover[b-6x6p8povma] {
        border-color: #6366f1;
        background: #f0f4ff;
    }

    .upload-area.circular[b-6x6p8povma] {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin: 0 auto;
    }

    .upload-area img[b-6x6p8povma] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }

    .upload-area i[b-6x6p8povma] {
        font-size: 48px;
        color: #94a3b8;
        margin-bottom: 12px;
        transition: all 0.3s ease;
    }

    .upload-area:hover i[b-6x6p8povma] {
        color: #6366f1;
        transform: scale(1.1);
    }

    .upload-area p[b-6x6p8povma] {
        color: #64748b;
        font-size: 14px;
        font-weight: 500;
        margin: 0;
    }

/* Remove Image Button */
.remove-image[b-6x6p8povma] {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    z-index: 10;
}

    .remove-image:hover[b-6x6p8povma] {
        background-color: #dc2626;
        transform: scale(1.1);
    }

    .remove-image.circular[b-6x6p8povma] {
        top: 5px;
        right: 5px;
    }

/* Upload Progress */
.upload-progress[b-6x6p8povma] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    margin-top: 20px;
    color: #0369a1;
}

/* Subscription Preview */
.subscription-preview[b-6x6p8povma] {
    background: linear-gradient(135deg, #f0f4ff, #e0e7ff);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid #c7d2fe;
}

    .subscription-preview h4[b-6x6p8povma] {
        font-size: 18px;
        font-weight: 600;
        color: #1a202c;
        margin-bottom: 16px;
    }

.plan-info[b-6x6p8povma] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

    .plan-info i[b-6x6p8povma] {
        font-size: 28px;
        color: #6366f1;
        flex-shrink: 0;
    }

    .plan-info strong[b-6x6p8povma] {
        display: block;
        color: #1a202c;
        font-size: 16px;
        margin-bottom: 4px;
    }

    .plan-info p[b-6x6p8povma] {
        color: #64748b;
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
    }

/* Terms Agreement */
.terms-agreement[b-6x6p8povma] {
    margin-bottom: 24px;
}

.checkbox-label[b-6x6p8povma] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

    .checkbox-label input[type="checkbox"][b-6x6p8povma] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .checkbox-label span[b-6x6p8povma] {
        color: #475569;
        font-size: 14px;
        line-height: 1.6;
    }

    .checkbox-label a[b-6x6p8povma] {
        color: #6366f1;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }

        .checkbox-label a:hover[b-6x6p8povma] {
            color: #4f46e5;
            text-decoration: underline;
        }

/* Form Navigation */
.form-navigation[b-6x6p8povma] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Buttons */
.btn-primary[b-6x6p8povma] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover:not(:disabled)[b-6x6p8povma] {
        transform: translateY(-2px);
        box-shadow: 0 12px 20px rgba(99, 102, 241, 0.2);
    }

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

.btn-secondary[b-6x6p8povma] {
    background: #f3f4f6;
    color: #374151;
    border: none;
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-secondary:hover:not(:disabled)[b-6x6p8povma] {
        background: #e5e7eb;
    }

.btn-text[b-6x6p8povma] {
    background: none;
    border: none;
    color: #6366f1;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-text:hover[b-6x6p8povma] {
        color: #4f46e5;
    }

/* Alerts */
.alert[b-6x6p8povma] {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideDown-b-6x6p8povma 0.3s ease-out;
}

.alert-danger[b-6x6p8povma] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert-success[b-6x6p8povma] {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.btn-close[b-6x6p8povma] {
    margin-right: auto;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

    .btn-close:hover[b-6x6p8povma] {
        opacity: 1;
    }

/* Validation Messages */
.validation-message[b-6x6p8povma] {
    color: #dc2626;
    font-size: 13px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Spinner */
.spinner-border[b-6x6p8povma] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-6x6p8povma .75s linear infinite;
}

.spinner-border-sm[b-6x6p8povma] {
    width: 0.8rem;
    height: 0.8rem;
    border-width: 0.15em;
}

/* Animations */
@keyframes fadeIn-b-6x6p8povma {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp-b-6x6p8povma {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

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

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

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

/* RTL Support */
[dir="rtl"] .form-navigation[b-6x6p8povma] {
    flex-direction: row-reverse;
}

[dir="rtl"] .step[b-6x6p8povma]::before {
    right: auto;
    left: -100%;
}

[dir="rtl"] .form-group label i[b-6x6p8povma] {
    margin-left: 8px;
    margin-right: 0;
}

[dir="rtl"] .checkbox-label[b-6x6p8povma] {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-close[b-6x6p8povma] {
    margin-right: 0;
    margin-left: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .auth-card[b-6x6p8povma] {
        padding: 32px 24px;
    }

    .registration-steps[b-6x6p8povma] {
        padding: 0 10px;
    }

    .step span[b-6x6p8povma] {
        display: none;
    }

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

    .account-type-cards[b-6x6p8povma] {
        grid-template-columns: 1fr;
    }

    .upload-area[b-6x6p8povma] {
        height: 160px;
    }

        .upload-area.circular[b-6x6p8povma] {
            width: 120px;
            height: 120px;
        }
}
/* _content/Sahelly/Components/Pages/Public/Stores.razor.rz.scp.css */
/* ===================================
   Stores Page - Modern Professional Design
   Following app.css architecture and Users.razor.css patterns
   =================================== */

/* Page Container */
.stores-page[b-0derhk0zqy] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow-x: hidden;
}

    .stores-page[b-0derhk0zqy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 600px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

/* Hero Section */
.stores-hero[b-0derhk0zqy] {
    position: relative;
    padding: 100px 0 60px;
    margin-bottom: 40px;
    z-index: 1;
}

.hero-background[b-0derhk0zqy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
}

.animated-gradient[b-0derhk0zqy] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%);
    background-size: 400% 400%;
    animation: gradientShift-b-0derhk0zqy 15s ease infinite;
    opacity: 0.15;
}

@keyframes gradientShift-b-0derhk0zqy {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

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

.floating-shapes[b-0derhk0zqy] {
    position: absolute;
    width: 100%;
    height: 100%;
}

    .floating-shapes[b-0derhk0zqy]::before,
    .floating-shapes[b-0derhk0zqy]::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        animation: float-b-0derhk0zqy 20s ease-in-out infinite;
    }

    .floating-shapes[b-0derhk0zqy]::before {
        width: 400px;
        height: 400px;
        top: -100px;
        right: -100px;
    }

    .floating-shapes[b-0derhk0zqy]::after {
        width: 300px;
        height: 300px;
        bottom: -50px;
        left: -50px;
        animation-delay: -10s;
    }

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

    33% {
        transform: translateY(-30px) rotate(120deg);
    }

    66% {
        transform: translateY(30px) rotate(240deg);
    }
}

/* Hero Content */
.hero-content[b-0derhk0zqy] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-title[b-0derhk0zqy] {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hero-subtitle[b-0derhk0zqy] {
    font-size: 20px;
    color: #6b7280;
    margin-bottom: 40px;
    font-weight: 400;
    line-height: 1.6;
}

/* Search Bar */
.store-search[b-0derhk0zqy] {
    max-width: 600px;
    margin: 0 auto;
}

.search-box[b-0derhk0zqy] {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 2px solid rgba(102, 126, 234, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .search-box:focus-within[b-0derhk0zqy] {
        transform: translateY(-2px);
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
    }

    .search-box i[b-0derhk0zqy] {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        color: #9333ea;
        font-size: 20px;
        transition: all 0.3s;
    }

    .search-box:focus-within i[b-0derhk0zqy] {
        color: #667eea;
    }

    .search-box input[b-0derhk0zqy] {
        width: 100%;
        padding: 18px 24px 18px 60px;
        border: none;
        background: transparent;
        font-size: 16px;
        color: #1f2937;
        outline: none;
    }

        .search-box input[b-0derhk0zqy]::placeholder {
            color: #9ca3af;
        }

/* Filter Section */
.filter-section[b-0derhk0zqy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.filter-header[b-0derhk0zqy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .filter-header h3[b-0derhk0zqy] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.btn-reset[b-0derhk0zqy] {
    background: transparent;
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-reset:hover[b-0derhk0zqy] {
        background: rgba(102, 126, 234, 0.1);
        border-color: #667eea;
        transform: translateY(-1px);
    }

.filter-options[b-0derhk0zqy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: end;
}

.filter-group[b-0derhk0zqy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .filter-group label[b-0derhk0zqy] {
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .filter-group select[b-0derhk0zqy] {
        width: 100%;
        padding: 12px 16px;
        background: rgba(102, 126, 234, 0.05);
        border: 2px solid transparent;
        border-radius: 12px;
        font-size: 15px;
        color: #1f2937;
        cursor: pointer;
        transition: all 0.3s;
        outline: none;
    }

        .filter-group select:hover[b-0derhk0zqy] {
            border-color: rgba(102, 126, 234, 0.3);
        }

        .filter-group select:focus[b-0derhk0zqy] {
            background: white;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

/* View Mode Toggle */
.view-mode[b-0derhk0zqy] {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    width: fit-content;
    margin-left: auto;
}

    .view-mode button[b-0derhk0zqy] {
        padding: 10px 14px;
        background: transparent;
        border: none;
        color: #667eea;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 16px;
    }

        .view-mode button:hover[b-0derhk0zqy] {
            color: #764ba2;
            background: rgba(102, 126, 234, 0.1);
        }

        .view-mode button.active[b-0derhk0zqy] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

/* Results Info */
.results-info[b-0derhk0zqy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 16px;
    color: #4c1d95;
    font-weight: 600;
}

.search-term[b-0derhk0zqy] {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
}

/* Stores Grid */
.stores-grid[b-0derhk0zqy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

    .stores-grid.list[b-0derhk0zqy] {
        grid-template-columns: 1fr;
    }

/* Store Card */
.store-card[b-0derhk0zqy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

    .store-card[b-0derhk0zqy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 0;
    }

    .store-card:hover[b-0derhk0zqy] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
    }

        .store-card:hover[b-0derhk0zqy]::before {
            opacity: 0.05;
        }

/* List View Specific */
.stores-grid.list .store-card[b-0derhk0zqy] {
    display: flex;
    align-items: center;
    padding: 20px;
}

.stores-grid.list .store-banner[b-0derhk0zqy] {
    width: 200px;
    height: 120px;
    border-radius: 12px;
    margin-right: 24px;
    flex-shrink: 0;
}

.stores-grid.list .store-logo[b-0derhk0zqy] {
    position: absolute;
    top: 20px;
    left: 180px;
    width: 60px;
    height: 60px;
}

.stores-grid.list .store-info[b-0derhk0zqy] {
    flex: 1;
    padding: 0;
}

/* Store Banner */
.store-banner[b-0derhk0zqy] {
    height: 180px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .store-banner img[b-0derhk0zqy] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

.store-card:hover .store-banner img[b-0derhk0zqy] {
    transform: scale(1.1);
}

.default-banner[b-0derhk0zqy] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .default-banner .pattern[b-0derhk0zqy] {
        position: absolute;
        width: 200%;
        height: 200%;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
        animation: patternMove-b-0derhk0zqy 20s linear infinite;
    }

@keyframes patternMove-b-0derhk0zqy {
    0% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* Store Logo */
.store-logo[b-0derhk0zqy] {
    position: absolute;
    top: 140px;
    left: 24px;
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 16px;
    padding: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
    z-index: 2;
}

.store-card:hover .store-logo[b-0derhk0zqy] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.store-logo img[b-0derhk0zqy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.default-logo[b-0derhk0zqy] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    font-size: 32px;
}

/* Store Info */
.store-info[b-0derhk0zqy] {
    padding: 60px 24px 24px;
    position: relative;
    z-index: 1;
}

.store-name[b-0derhk0zqy] {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.3;
}

.store-description[b-0derhk0zqy] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Store Stats */
.store-stats[b-0derhk0zqy] {
    margin-bottom: 20px;
}

.store-rating[b-0derhk0zqy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.stars[b-0derhk0zqy] {
    display: flex;
    gap: 2px;
}

    .stars i[b-0derhk0zqy] {
        font-size: 14px;
        color: #e5e7eb;
        transition: all 0.3s;
    }

        .stars i.filled[b-0derhk0zqy] {
            color: #fbbf24;
            text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
        }

.store-rating span[b-0derhk0zqy] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.stat-items[b-0derhk0zqy] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.stat-item[b-0derhk0zqy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

    .stat-item i[b-0derhk0zqy] {
        color: #9333ea;
        font-size: 14px;
    }

    .stat-item.installment[b-0derhk0zqy] {
        background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
        color: #059669;
        padding: 4px 12px;
        border-radius: 20px;
        border: 1px solid rgba(67, 233, 123, 0.3);
    }

        .stat-item.installment i[b-0derhk0zqy] {
            color: #059669;
        }

/* Store Actions */
.store-actions[b-0derhk0zqy] {
    display: flex;
    gap: 12px;
}

.btn-visit-store[b-0derhk0zqy] {
    flex: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-visit-store:hover[b-0derhk0zqy] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .btn-visit-store i[b-0derhk0zqy] {
        transition: transform 0.3s;
    }

    .btn-visit-store:hover i[b-0derhk0zqy] {
        transform: translateX(-4px);
    }

/* No Stores State */
.no-stores[b-0derhk0zqy] {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .no-stores i[b-0derhk0zqy] {
        font-size: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 24px;
    }

    .no-stores h3[b-0derhk0zqy] {
        font-size: 28px;
        color: #4c1d95;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .no-stores p[b-0derhk0zqy] {
        font-size: 18px;
        color: #6b7280;
    }

/* Loading State */
.stores-loading[b-0derhk0zqy] {
    min-height: 400px;
}

.loading-grid[b-0derhk0zqy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.store-skeleton[b-0derhk0zqy] {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.skeleton-banner[b-0derhk0zqy] {
    height: 180px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer-b-0derhk0zqy 1.5s infinite;
}

.skeleton-content[b-0derhk0zqy] {
    padding: 60px 24px 24px;
    position: relative;
}

.skeleton-logo[b-0derhk0zqy] {
    position: absolute;
    top: -40px;
    left: 24px;
    width: 80px;
    height: 80px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer-b-0derhk0zqy 1.5s infinite;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.skeleton-line[b-0derhk0zqy] {
    height: 20px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer-b-0derhk0zqy 1.5s infinite;
    border-radius: 8px;
    margin-bottom: 12px;
}

    .skeleton-line.short[b-0derhk0zqy] {
        width: 60%;
    }

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

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

/* Pagination */
.pagination[b-0derhk0zqy] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
}

.page-btn[b-0derhk0zqy] {
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 10px;
    color: #4c1d95;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    min-width: 42px;
    font-size: 14px;
}

    .page-btn:hover:not(:disabled)[b-0derhk0zqy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .page-btn.active[b-0derhk0zqy] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

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

.page-dots[b-0derhk0zqy] {
    color: #9ca3af;
    font-weight: 600;
    padding: 0 8px;
}

/* Dark Theme Support */
[data-theme="dark"] .stores-page[b-0derhk0zqy] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

    [data-theme="dark"] .stores-page[b-0derhk0zqy]::before {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        opacity: 0.05;
    }

[data-theme="dark"] .animated-gradient[b-0derhk0zqy] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 25%, #cd7ddb 50%, #4096b4 75%, #5a6cb3 100%);
    opacity: 0.1;
}

[data-theme="dark"] .hero-title[b-0derhk0zqy] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .hero-subtitle[b-0derhk0zqy] {
    color: #9ca3af;
}

[data-theme="dark"] .search-box[b-0derhk0zqy],
[data-theme="dark"] .filter-section[b-0derhk0zqy],
[data-theme="dark"] .store-card[b-0derhk0zqy],
[data-theme="dark"] .no-stores[b-0derhk0zqy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

    [data-theme="dark"] .search-box input[b-0derhk0zqy],
    [data-theme="dark"] .filter-group select[b-0derhk0zqy] {
        background: rgba(71, 85, 105, 0.3);
        color: #e2e8f0;
    }

        [data-theme="dark"] .search-box input:focus[b-0derhk0zqy],
        [data-theme="dark"] .filter-group select:focus[b-0derhk0zqy] {
            background: rgba(71, 85, 105, 0.5);
            border-color: #a78bfa;
        }

[data-theme="dark"] .filter-header h3[b-0derhk0zqy] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .filter-group label[b-0derhk0zqy] {
    color: #e2e8f0;
}

[data-theme="dark"] .results-info[b-0derhk0zqy] {
    color: #e2e8f0;
}

[data-theme="dark"] .search-term[b-0derhk0zqy] {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

[data-theme="dark"] .store-name[b-0derhk0zqy] {
    color: #e2e8f0;
}

[data-theme="dark"] .store-description[b-0derhk0zqy] {
    color: #9ca3af;
}

[data-theme="dark"] .stat-item[b-0derhk0zqy] {
    color: #9ca3af;
}

    [data-theme="dark"] .stat-item i[b-0derhk0zqy] {
        color: #a78bfa;
    }

[data-theme="dark"] .btn-reset[b-0derhk0zqy] {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}

    [data-theme="dark"] .btn-reset:hover[b-0derhk0zqy] {
        background: rgba(167, 139, 250, 0.1);
        border-color: #a78bfa;
    }

[data-theme="dark"] .view-mode[b-0derhk0zqy] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.2);
}

    [data-theme="dark"] .view-mode button[b-0derhk0zqy] {
        color: #a78bfa;
    }

        [data-theme="dark"] .view-mode button:hover[b-0derhk0zqy] {
            color: #c084fc;
            background: rgba(167, 139, 250, 0.1);
        }

        [data-theme="dark"] .view-mode button.active[b-0derhk0zqy] {
            background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
            color: white;
        }

[data-theme="dark"] .page-btn[b-0derhk0zqy] {
    background: rgba(167, 139, 250, 0.2);
    color: #e2e8f0;
}

    [data-theme="dark"] .page-btn:hover:not(:disabled)[b-0derhk0zqy] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

    [data-theme="dark"] .page-btn.active[b-0derhk0zqy] {
        background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
        color: white;
    }

[data-theme="dark"] .store-skeleton[b-0derhk0zqy] {
    background: rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .skeleton-banner[b-0derhk0zqy],
[data-theme="dark"] .skeleton-logo[b-0derhk0zqy],
[data-theme="dark"] .skeleton-line[b-0derhk0zqy] {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
}

[data-theme="dark"] .default-banner[b-0derhk0zqy] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .btn-visit-store[b-0derhk0zqy] {
    background: linear-gradient(135deg, #5a6cb3 0%, #62518b 100%);
}

[data-theme="dark"] .search-box i[b-0derhk0zqy] {
    color: #a78bfa;
}

[data-theme="dark"] .search-box:focus-within i[b-0derhk0zqy] {
    color: #c084fc;
}

[data-theme="dark"] .no-stores i[b-0derhk0zqy] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .no-stores h3[b-0derhk0zqy] {
    color: #e2e8f0;
}

[data-theme="dark"] .no-stores p[b-0derhk0zqy] {
    color: #9ca3af;
}

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

@media (max-width: 768px) {
    .stores-hero[b-0derhk0zqy] {
        padding: 60px 0 40px;
    }

    .hero-title[b-0derhk0zqy] {
        font-size: 36px;
    }

    .hero-subtitle[b-0derhk0zqy] {
        font-size: 18px;
    }

    .filter-options[b-0derhk0zqy] {
        grid-template-columns: 1fr;
    }

    .view-mode[b-0derhk0zqy] {
        width: 100%;
        justify-content: center;
    }

    .stores-grid[b-0derhk0zqy] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

        .stores-grid.list .store-card[b-0derhk0zqy] {
            flex-direction: column;
            align-items: stretch;
        }

        .stores-grid.list .store-banner[b-0derhk0zqy] {
            width: 100%;
            margin-right: 0;
            margin-bottom: 40px;
        }

        .stores-grid.list .store-logo[b-0derhk0zqy] {
            left: 24px;
            top: auto;
            bottom: -30px;
        }

    .store-card[b-0derhk0zqy] {
        border-radius: 16px;
    }

    .store-info[b-0derhk0zqy] {
        padding: 50px 20px 20px;
    }

    .stores-grid.list .store-info[b-0derhk0zqy] {
        padding: 40px 20px 20px;
    }

    .pagination[b-0derhk0zqy] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .page-btn[b-0derhk0zqy] {
        padding: 8px 12px;
        font-size: 13px;
        min-width: 36px;
    }
}

@media (max-width: 480px) {
    .hero-title[b-0derhk0zqy] {
        font-size: 28px;
    }

    .hero-subtitle[b-0derhk0zqy] {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .filter-section[b-0derhk0zqy] {
        padding: 16px;
    }

    .store-banner[b-0derhk0zqy] {
        height: 140px;
    }

    .store-logo[b-0derhk0zqy] {
        width: 60px;
        height: 60px;
        top: 110px;
        left: 16px;
    }

    .store-info[b-0derhk0zqy] {
        padding: 40px 16px 16px;
    }

    .store-name[b-0derhk0zqy] {
        font-size: 18px;
    }

    .btn-visit-store[b-0derhk0zqy] {
        padding: 10px 20px;
        font-size: 14px;
    }

    .stat-items[b-0derhk0zqy] {
        gap: 12px;
    }

    .stat-item[b-0derhk0zqy] {
        font-size: 12px;
    }

    .no-stores[b-0derhk0zqy] {
        padding: 60px 20px;
    }

        .no-stores i[b-0derhk0zqy] {
            font-size: 60px;
        }

        .no-stores h3[b-0derhk0zqy] {
            font-size: 24px;
        }

        .no-stores p[b-0derhk0zqy] {
            font-size: 16px;
        }
}

/* RTL Support */
html[dir="rtl"] .search-box i[b-0derhk0zqy] {
    left: auto;
    right: 24px;
}

html[dir="rtl"] .search-box input[b-0derhk0zqy] {
    padding: 18px 60px 18px 24px;
}

html[dir="rtl"] .store-logo[b-0derhk0zqy] {
    left: auto;
    right: 24px;
}

html[dir="rtl"] .stores-grid.list .store-logo[b-0derhk0zqy] {
    left: auto;
    right: 180px;
}

html[dir="rtl"] .stores-grid.list .store-banner[b-0derhk0zqy] {
    margin-right: 0;
    margin-left: 24px;
}

html[dir="rtl"] .btn-visit-store i[b-0derhk0zqy] {
    transform: scaleX(-1);
}

html[dir="rtl"] .btn-visit-store:hover i[b-0derhk0zqy] {
    transform: scaleX(-1) translateX(4px);
}

html[dir="rtl"] .stat-item i[b-0derhk0zqy] {
    margin-right: 0;
    margin-left: 6px;
}

html[dir="rtl"] .view-mode[b-0derhk0zqy] {
    margin-left: 0;
    margin-right: auto;
}

/* Print Styles */
@media print {
    .stores-hero[b-0derhk0zqy],
    .filter-section[b-0derhk0zqy],
    .view-mode[b-0derhk0zqy],
    .pagination[b-0derhk0zqy],
    .btn-visit-store[b-0derhk0zqy] {
        display: none !important;
    }

    .stores-page[b-0derhk0zqy] {
        background: white !important;
    }

    .store-card[b-0derhk0zqy] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

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

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

.store-card[b-0derhk0zqy] {
    animation: fadeInUp-b-0derhk0zqy 0.6s ease-out;
}

    /* Animation delays for store cards */
    .store-card:nth-child(1)[b-0derhk0zqy] {
        animation-delay: 0.05s;
    }

    .store-card:nth-child(2)[b-0derhk0zqy] {
        animation-delay: 0.1s;
    }

    .store-card:nth-child(3)[b-0derhk0zqy] {
        animation-delay: 0.15s;
    }

    .store-card:nth-child(4)[b-0derhk0zqy] {
        animation-delay: 0.2s;
    }

    .store-card:nth-child(5)[b-0derhk0zqy] {
        animation-delay: 0.25s;
    }

    .store-card:nth-child(6)[b-0derhk0zqy] {
        animation-delay: 0.3s;
    }

    .store-card:nth-child(7)[b-0derhk0zqy] {
        animation-delay: 0.35s;
    }

    .store-card:nth-child(8)[b-0derhk0zqy] {
        animation-delay: 0.4s;
    }

    .store-card:nth-child(9)[b-0derhk0zqy] {
        animation-delay: 0.45s;
    }

    .store-card:nth-child(10)[b-0derhk0zqy] {
        animation-delay: 0.5s;
    }

    .store-card:nth-child(11)[b-0derhk0zqy] {
        animation-delay: 0.55s;
    }

    .store-card:nth-child(12)[b-0derhk0zqy] {
        animation-delay: 0.6s;
    }

/* Focus States for Accessibility */
*:focus-visible[b-0derhk0zqy] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .store-card[b-0derhk0zqy] {
        border: 2px solid currentColor;
    }

    .btn-visit-store[b-0derhk0zqy] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-0derhk0zqy] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/Sahelly/Components/Pages/Sharehold/ShareholderDashboard.razor.rz.scp.css */

/* Shareholder Dashboard Styles - Modern Professional Design */

.shareholder-public-dashboard[b-9rqjqtuznz] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    padding: 24px;
    position: relative;
}

    .shareholder-public-dashboard[b-9rqjqtuznz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0.1;
        z-index: 0;
        border-radius: 0 0 50% 50%;
    }

    .shareholder-public-dashboard > *[b-9rqjqtuznz] {
        position: relative;
        z-index: 1;
    }

/* Login Section */
.login-container[b-9rqjqtuznz] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.login-card[b-9rqjqtuznz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 480px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.brand-logo[b-9rqjqtuznz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

    .brand-logo i[b-9rqjqtuznz] {
        font-size: 36px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .brand-logo h1[b-9rqjqtuznz] {
        font-size: 28px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
    }

.login-subtitle[b-9rqjqtuznz] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.login-form[b-9rqjqtuznz] {
    margin-top: 32px;
}

.form-group[b-9rqjqtuznz] {
    margin-bottom: 24px;
}

    .form-group label[b-9rqjqtuznz] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #4c1d95;
        margin-bottom: 8px;
    }

        .form-group label i[b-9rqjqtuznz] {
            color: #667eea;
        }

.form-control[b-9rqjqtuznz] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s;
}

    .form-control:focus[b-9rqjqtuznz] {
        outline: none;
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.btn-login[b-9rqjqtuznz] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

    .btn-login:hover[b-9rqjqtuznz] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

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

.login-footer[b-9rqjqtuznz] {
    text-align: center;
    margin-top: 24px;
}

    .login-footer small[b-9rqjqtuznz] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
    }

        .login-footer small i[b-9rqjqtuznz] {
            color: #667eea;
        }

/* Dashboard Content */
.dashboard-content[b-9rqjqtuznz] {
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-header[b-9rqjqtuznz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-info[b-9rqjqtuznz] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-container[b-9rqjqtuznz] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-circle[b-9rqjqtuznz] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.header-text h2[b-9rqjqtuznz] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1f2937;
}

.merchant-name[b-9rqjqtuznz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 8px;
}

    .merchant-name i[b-9rqjqtuznz] {
        color: #667eea;
    }

.status-badge[b-9rqjqtuznz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

    .status-badge.active[b-9rqjqtuznz] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
        color: #059669;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .status-badge.inactive[b-9rqjqtuznz] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

.btn-logout[b-9rqjqtuznz] {
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    transition: all 0.3s;
}

    .btn-logout:hover[b-9rqjqtuznz] {
        background: rgba(239, 68, 68, 0.2);
        transform: translateY(-2px);
    }

/* Statistics Grid */
.stats-container[b-9rqjqtuznz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-9rqjqtuznz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

    .stat-card:hover[b-9rqjqtuznz] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    .stat-card .stat-icon[b-9rqjqtuznz] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
    }

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

    .stat-card.success .stat-icon[b-9rqjqtuznz] {
        background: linear-gradient(135deg, #3bc968 0%, #32d1b7 100%);
    }

    .stat-card.warning .stat-icon[b-9rqjqtuznz] {
        background: linear-gradient(135deg, #d88c14 0%, #c53b3b 100%);
    }

    .stat-card.info .stat-icon[b-9rqjqtuznz] {
        background: linear-gradient(135deg, #4aa3c2 0%, #2968b2 100%);
    }

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

    .stat-content h3[b-9rqjqtuznz] {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 8px;
        color: #1f2937;
    }

    .stat-content p[b-9rqjqtuznz] {
        margin: 0;
        font-size: 14px;
        color: #6b7280;
    }

/* Investment Summary */
.investment-summary[b-9rqjqtuznz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .investment-summary h3[b-9rqjqtuznz] {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 24px;
        color: #1f2937;
    }

        .investment-summary h3 i[b-9rqjqtuznz] {
            color: #667eea;
            font-size: 24px;
        }

.summary-details[b-9rqjqtuznz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.summary-item[b-9rqjqtuznz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .summary-item .label[b-9rqjqtuznz] {
        font-size: 14px;
        color: #6b7280;
    }

    .summary-item .value[b-9rqjqtuznz] {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

        .summary-item .value.text-success[b-9rqjqtuznz] {
            color: #059669;
        }

/* Distribution Section */
.distributions-section[b-9rqjqtuznz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-header[b-9rqjqtuznz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .section-header h3[b-9rqjqtuznz] {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        color: #1f2937;
    }

        .section-header h3 i[b-9rqjqtuznz] {
            color: #667eea;
            font-size: 24px;
        }

.form-select[b-9rqjqtuznz] {
    padding: 10px 16px;
    border-radius: 12px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    background: rgba(102, 126, 234, 0.05);
    color: #4c1d95;
    font-weight: 500;
    min-width: 160px;
    transition: all 0.3s;
}

    .form-select:focus[b-9rqjqtuznz] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

/* Distribution Cards */
.distributions-list[b-9rqjqtuznz] {
    display: grid;
    gap: 20px;
}

.distribution-card[b-9rqjqtuznz] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    overflow: hidden;
    transition: all 0.3s;
}

    .distribution-card:hover[b-9rqjqtuznz] {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

    .distribution-card.paid[b-9rqjqtuznz] {
        border-right: 4px solid #059669;
    }

    .distribution-card.pending[b-9rqjqtuznz] {
        border-right: 4px solid #d97706;
    }

.card-header[b-9rqjqtuznz] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(102, 126, 234, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.distribution-info h4[b-9rqjqtuznz] {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.period[b-9rqjqtuznz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

    .period i[b-9rqjqtuznz] {
        color: #667eea;
    }

.distribution-status .status-badge[b-9rqjqtuznz] {
    font-size: 12px;
}

    .distribution-status .status-badge.paid[b-9rqjqtuznz] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
        color: #059669;
    }

    .distribution-status .status-badge.pending[b-9rqjqtuznz] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
        color: #d97706;
    }

.card-body[b-9rqjqtuznz] {
    padding: 24px;
}

.amount-info[b-9rqjqtuznz] {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.main-amount[b-9rqjqtuznz] {
    text-align: center;
    margin-bottom: 12px;
}

    .main-amount .amount[b-9rqjqtuznz] {
        font-size: 28px;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: block;
        margin-bottom: 4px;
    }

    .main-amount .label[b-9rqjqtuznz] {
        font-size: 14px;
        color: #6b7280;
    }

.payment-date[b-9rqjqtuznz] {
    text-align: center;
    font-size: 14px;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.distribution-details[b-9rqjqtuznz] {
    display: grid;
    gap: 12px;
}

.detail-row[b-9rqjqtuznz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

    .detail-row .label[b-9rqjqtuznz] {
        color: #6b7280;
    }

    .detail-row .value[b-9rqjqtuznz] {
        font-weight: 600;
        color: #1f2937;
    }

.distribution-description[b-9rqjqtuznz] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .distribution-description i[b-9rqjqtuznz] {
        color: #667eea;
        margin-top: 2px;
    }

/* Loading State */
.loading-container[b-9rqjqtuznz] {
    text-align: center;
    padding: 48px 0;
}

    .loading-container .spinner-border[b-9rqjqtuznz] {
        color: #667eea;
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
    }

    .loading-container p[b-9rqjqtuznz] {
        color: #6b7280;
        margin: 0;
    }

/* Empty State */
.empty-state[b-9rqjqtuznz] {
    text-align: center;
    padding: 48px 0;
}

    .empty-state i[b-9rqjqtuznz] {
        font-size: 48px;
        color: #d1d5db;
        margin-bottom: 16px;
    }

    .empty-state h4[b-9rqjqtuznz] {
        font-size: 20px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 8px;
    }

    .empty-state p[b-9rqjqtuznz] {
        color: #6b7280;
        margin: 0;
    }

/* Load More Button */
.load-more-container[b-9rqjqtuznz] {
    text-align: center;
    margin-top: 32px;
}

.btn-load-more[b-9rqjqtuznz] {
    padding: 12px 24px;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    border: none;
    transition: all 0.3s;
}

    .btn-load-more:hover[b-9rqjqtuznz] {
        background: rgba(102, 126, 234, 0.2);
        transform: translateY(-2px);
    }

/* Dashboard Footer */
.dashboard-footer[b-9rqjqtuznz] {
    text-align: center;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

    .dashboard-footer p[b-9rqjqtuznz] {
        color: #6b7280;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
    }

        .dashboard-footer p i[b-9rqjqtuznz] {
            color: #667eea;
        }

/* Responsive Design */
@media (max-width: 768px) {
    .shareholder-public-dashboard[b-9rqjqtuznz] {
        padding: 16px;
    }

    .dashboard-header[b-9rqjqtuznz] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .header-info[b-9rqjqtuznz] {
        flex-direction: column;
    }

    .avatar-container[b-9rqjqtuznz] {
        flex-direction: column;
    }

    .stats-container[b-9rqjqtuznz] {
        grid-template-columns: 1fr;
    }

    .summary-details[b-9rqjqtuznz] {
        grid-template-columns: 1fr;
    }

    .section-header[b-9rqjqtuznz] {
        flex-direction: column;
        gap: 16px;
    }

        .section-header .form-select[b-9rqjqtuznz] {
            width: 100%;
        }

    .distribution-card .card-header[b-9rqjqtuznz] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .amount-info[b-9rqjqtuznz] {
        text-align: center;
    }

    .detail-row[b-9rqjqtuznz] {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .login-card[b-9rqjqtuznz],
[data-theme="dark"] .dashboard-header[b-9rqjqtuznz],
[data-theme="dark"] .investment-summary[b-9rqjqtuznz],
[data-theme="dark"] .distributions-section[b-9rqjqtuznz],
[data-theme="dark"] .distribution-card[b-9rqjqtuznz] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-card[b-9rqjqtuznz] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .header-text h2[b-9rqjqtuznz],
[data-theme="dark"] .summary-item .value[b-9rqjqtuznz],
[data-theme="dark"] .distribution-info h4[b-9rqjqtuznz] {
    color: #e2e8f0;
}

[data-theme="dark"] .merchant-name[b-9rqjqtuznz],
[data-theme="dark"] .summary-item .label[b-9rqjqtuznz],
[data-theme="dark"] .period[b-9rqjqtuznz],
[data-theme="dark"] .detail-row .label[b-9rqjqtuznz] {
    color: #94a3b8;
}

[data-theme="dark"] .form-control[b-9rqjqtuznz],
[data-theme="dark"] .form-select[b-9rqjqtuznz] {
    background: rgba(71, 85, 105, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state i[b-9rqjqtuznz] {
    color: #475569;
}

[data-theme="dark"] .empty-state h4[b-9rqjqtuznz] {
    color: #e2e8f0;
}

[data-theme="dark"] .empty-state p[b-9rqjqtuznz] {
    color: #94a3b8;
}
/* _content/Sahelly/Helpers/LanguageSwitcher.razor.rz.scp.css */
.language-switcher[b-5tqmqaz2wg] {
    display: flex;
    gap: 0.5rem;
}

.language-btn[b-5tqmqaz2wg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

    .language-btn:hover[b-5tqmqaz2wg] {
        background: #f5f5f5;
        border-color: #999;
    }

    .language-btn.active[b-5tqmqaz2wg] {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

.flag[b-5tqmqaz2wg] {
    font-size: 1.25rem;
}

/* RTL Support */
[dir="rtl"] .language-switcher[b-5tqmqaz2wg] {
    direction: rtl;
}