/* /AdminLayout.razor.rz.scp.css */
/* =================================================================
   NEMABO ADMIN LAYOUT - Nordic Finance Design System
   Premium FinTech Dashboard with Dark Sidebar
   ================================================================= */

/* =================================================================
   APP BAR - Dark header with emerald accents
   ================================================================= */

[b-57qdmgq4l6] .admin-appbar.mud-appbar {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.appbar-logo[b-57qdmgq4l6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(52, 211, 153, 0.1);
    border-radius: 10px;
    margin-right: 4px;
}

.appbar-title[b-57qdmgq4l6] {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #F8FAFC !important;
}

.tenant-divider[b-57qdmgq4l6] {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 8px;
}

.tenant-name[b-57qdmgq4l6] {
    color: rgba(248, 250, 252, 0.7) !important;
    font-weight: 500 !important;
}

[b-57qdmgq4l6] .admin-appbar .mud-icon-button {
    color: #F8FAFC !important;
    border-radius: 10px;
    transition: all 0.2s ease;
}

[b-57qdmgq4l6] .admin-appbar .mud-icon-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.theme-toggle:hover[b-57qdmgq4l6] {
    background: rgba(52, 211, 153, 0.15) !important;
}

/* =================================================================
   DRAWER/SIDEBAR - Always dark for consistency
   ================================================================= */

[b-57qdmgq4l6] .admin-drawer.mud-drawer {
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
}

[b-57qdmgq4l6] .admin-drawer .mud-drawer-content {
    padding: 12px 8px;
    background: transparent !important;
}

/* Navigation Menu */
[b-57qdmgq4l6] .admin-nav-menu.mud-navmenu {
    background: transparent !important;
}

.nav-divider[b-57qdmgq4l6] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.2), transparent);
    margin: 16px 12px;
}

/* Navigation Items */
[b-57qdmgq4l6] .nav-item.mud-nav-link {
    position: relative;
    border-radius: 10px !important;
    margin: 2px 4px;
    padding: 12px 16px !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[b-57qdmgq4l6] .nav-item.mud-nav-link .mud-nav-link-icon {
    color: #64748B !important;
    transition: all 0.2s ease !important;
    margin-right: 12px !important;
}

[b-57qdmgq4l6] .nav-item.mud-nav-link:hover {
    background: rgba(52, 211, 153, 0.1) !important;
    color: #F8FAFC !important;
}

[b-57qdmgq4l6] .nav-item.mud-nav-link:hover .mud-nav-link-icon {
    color: #34D399 !important;
}

/* Active State */
[b-57qdmgq4l6] .nav-item.mud-nav-link.active {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
    color: #F8FAFC !important;
    font-weight: 600 !important;
}

[b-57qdmgq4l6] .nav-item.mud-nav-link.active .mud-nav-link-icon {
    color: #34D399 !important;
}

/* Active indicator line */
[b-57qdmgq4l6] .nav-item.mud-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

/* Nested items */
[b-57qdmgq4l6] .nav-item-nested.mud-nav-link {
    padding-left: 48px !important;
    font-size: 0.8125rem !important;
}

/* Nav Group */
[b-57qdmgq4l6] .nav-group .mud-nav-group-title {
    color: #94A3B8 !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    margin: 2px 4px;
    padding: 12px 16px !important;
}

[b-57qdmgq4l6] .nav-group .mud-nav-group-title:hover {
    background: rgba(52, 211, 153, 0.1) !important;
    color: #F8FAFC !important;
}

[b-57qdmgq4l6] .nav-group .mud-nav-group-title .mud-icon-root {
    color: #64748B !important;
}

[b-57qdmgq4l6] .nav-group .mud-nav-group-title:hover .mud-icon-root {
    color: #34D399 !important;
}

/* Section labels */
[b-57qdmgq4l6] .admin-drawer .mud-typography-overline {
    color: #64748B !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    padding: 16px 16px 8px !important;
    font-size: 0.6875rem !important;
}

/* SuperAdmin section */
[b-57qdmgq4l6] .admin-drawer .mud-navmenu[color="Error"] .mud-nav-link {
    color: #F87171 !important;
}

[b-57qdmgq4l6] .admin-drawer .mud-navmenu[color="Error"] .mud-nav-link .mud-nav-link-icon {
    color: #EF4444 !important;
}

[b-57qdmgq4l6] .admin-drawer .mud-navmenu[color="Error"] .mud-nav-link:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Platform section */
[b-57qdmgq4l6] .admin-drawer .mud-navmenu[color="Warning"] .mud-nav-link {
    color: #FBBF24 !important;
}

[b-57qdmgq4l6] .admin-drawer .mud-navmenu[color="Warning"] .mud-nav-link .mud-nav-link-icon {
    color: #F59E0B !important;
}

[b-57qdmgq4l6] .admin-drawer .mud-navmenu[color="Warning"] .mud-nav-link:hover {
    background: rgba(251, 191, 36, 0.1) !important;
}

/* =================================================================
   MAIN CONTENT AREA
   ================================================================= */

[b-57qdmgq4l6] .mud-main-content {
    background: #F9FAFB !important;
    min-height: 100vh;
    transition: background 0.3s ease;
}

[b-57qdmgq4l6] .mud-theme-dark .mud-main-content {
    background: #0F172A !important;
}

[b-57qdmgq4l6] .mud-main-content > .mud-container {
    padding: 24px 32px !important;
    max-width: 1600px;
}

/* =================================================================
   IMPERSONATION BANNER
   ================================================================= */

[b-57qdmgq4l6] .mud-alert.mud-alert-filled-warning {
    border-radius: 0 !important;
    font-weight: 500;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

/* =================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */

@media (max-width: 1280px) {
    [b-57qdmgq4l6] .mud-main-content > .mud-container {
        padding: 20px 24px !important;
    }
}

@media (max-width: 960px) {
    [b-57qdmgq4l6] .mud-main-content > .mud-container {
        padding: 16px !important;
    }

    .tenant-divider[b-57qdmgq4l6],
    .tenant-name[b-57qdmgq4l6] {
        display: none;
    }
}

@media (max-width: 600px) {
    .appbar-logo[b-57qdmgq4l6] {
        width: 32px;
        height: 32px;
    }

    .appbar-title[b-57qdmgq4l6] {
        font-size: 1rem !important;
    }

    [b-57qdmgq4l6] .mud-main-content > .mud-container {
        padding: 12px !important;
    }

    /* Hide menu toggle text indicator */
    .menu-toggle[b-57qdmgq4l6] {
        padding: 8px !important;
    }

    /* User menu compact */
    [b-57qdmgq4l6] .user-menu .mud-menu-activator {
        padding: 6px !important;
    }

    /* Theme toggle compact */
    .theme-toggle[b-57qdmgq4l6] {
        padding: 6px !important;
    }
}

/* Mobile drawer overlay behavior */
@media (max-width: 960px) {
    [b-57qdmgq4l6] .admin-drawer.mud-drawer {
        z-index: 1300 !important;
    }

    [b-57qdmgq4l6] .admin-drawer.mud-drawer--open {
        width: 280px !important;
    }

    [b-57qdmgq4l6] .admin-drawer.mud-drawer:not(.mud-drawer--open) {
        transform: translateX(-100%);
    }

    /* Overlay when drawer is open */
    [b-57qdmgq4l6] .mud-drawer-overlay {
        z-index: 1299 !important;
    }

    /* Nav items - ensure text is visible when drawer opens */
    [b-57qdmgq4l6] .nav-item.mud-nav-link {
        white-space: nowrap;
    }

    /* Settings group - full visibility */
    [b-57qdmgq4l6] .nav-group .mud-collapse-wrapper {
        overflow: visible;
    }
}
/* /Pages/Admin/Coupons.razor.rz.scp.css */
/* Coupons Page - Premium FinTech Design */

.coupons-page[b-u8ct3roum4] {
    padding: 1.5rem;
    min-height: 100vh;
}

/* Light Mode */
.light-mode[b-u8ct3roum4] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Dark Mode */
.dark-mode[b-u8ct3roum4] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Page Header */
.page-header[b-u8ct3roum4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.header-content[b-u8ct3roum4] {
    flex: 1;
}

.page-title[b-u8ct3roum4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.025em;
}

.page-subtitle[b-u8ct3roum4] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Buttons */
.btn-primary[b-u8ct3roum4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover:not(.disabled)[b-u8ct3roum4] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

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

.btn-secondary[b-u8ct3roum4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.btn-outline-warning[b-u8ct3roum4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline-warning:hover[b-u8ct3roum4] {
    background: rgba(245, 158, 11, 0.1);
}

/* Setup Alert */
.setup-alert[b-u8ct3roum4] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(234, 179, 8, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    margin-bottom: 2rem;
}

.alert-icon[b-u8ct3roum4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 10px;
    color: #ffffff;
    flex-shrink: 0;
}

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

.alert-content strong[b-u8ct3roum4] {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.alert-content p[b-u8ct3roum4] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.75rem 0;
}

.alert-actions[b-u8ct3roum4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.status-item[b-u8ct3roum4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-item.connected[b-u8ct3roum4] {
    color: #10B981;
}

.status-item.disconnected[b-u8ct3roum4] {
    color: #ef4444;
}

/* Loading */
.loading-container[b-u8ct3roum4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    color: var(--text-secondary);
}

/* Stats Grid */
.stats-grid[b-u8ct3roum4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .stats-grid[b-u8ct3roum4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid[b-u8ct3roum4] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Stat Card */
.stat-card-neo[b-u8ct3roum4] {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.125rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.dark-mode .stat-card-neo[b-u8ct3roum4] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .stat-card-neo[b-u8ct3roum4] {
    box-shadow: var(--shadow-sm);
}

.stat-card-neo.clickable[b-u8ct3roum4] {
    cursor: pointer;
    user-select: none;
}

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

.dark-mode .stat-card-neo.clickable:hover[b-u8ct3roum4] {
    border-color: rgba(148, 163, 184, 0.2);
}

.light-mode .stat-card-neo.clickable:hover[b-u8ct3roum4] {
    border-color: #10B981;
}

.stat-card-neo.active[b-u8ct3roum4] {
    border-color: transparent;
}

.dark-mode .stat-card-neo.active[b-u8ct3roum4] {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3), var(--shadow-lg);
}

.light-mode .stat-card-neo.active[b-u8ct3roum4] {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2), var(--shadow-md);
}

.stat-card-header[b-u8ct3roum4] {
    margin-bottom: 0.75rem;
}

.icon-box[b-u8ct3roum4] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.gradient-purple[b-u8ct3roum4] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.gradient-emerald[b-u8ct3roum4] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.gradient-amber[b-u8ct3roum4] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.gradient-blue[b-u8ct3roum4] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.stat-card-value[b-u8ct3roum4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.stat-card-label[b-u8ct3roum4] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Active Indicator */
.active-indicator[b-u8ct3roum4] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 0 0 20px 20px;
    animation: slideIn-b-u8ct3roum4 0.3s ease;
}

@keyframes slideIn-b-u8ct3roum4 {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.active-indicator.purple[b-u8ct3roum4] {
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 100%);
}

.active-indicator.emerald[b-u8ct3roum4] {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

.active-indicator.amber[b-u8ct3roum4] {
    background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
}

.active-indicator.blue[b-u8ct3roum4] {
    background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
}

/* Empty State */
.empty-state[b-u8ct3roum4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.dark-mode .empty-state[b-u8ct3roum4] {
    box-shadow: var(--shadow-md);
}

.empty-icon[b-u8ct3roum4] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.empty-icon.secondary[b-u8ct3roum4] {
    background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
}

.empty-icon[b-u8ct3roum4]  .mud-icon-root {
    font-size: 2.5rem;
}

.empty-state h3[b-u8ct3roum4] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-u8ct3roum4] {
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}

/* Table Container */
.table-container[b-u8ct3roum4] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.dark-mode .table-container[b-u8ct3roum4] {
    box-shadow: var(--shadow-md);
}

.light-mode .table-container[b-u8ct3roum4] {
    box-shadow: var(--shadow-sm);
}

/* Table Styling */
.table-container[b-u8ct3roum4]  .mud-table {
    background: transparent !important;
}

.table-container[b-u8ct3roum4]  .mud-table-container {
    background: transparent !important;
}

.table-container[b-u8ct3roum4]  .mud-table-head {
    background: transparent !important;
}

.dark-mode .table-container[b-u8ct3roum4]  .mud-table-head .mud-table-cell {
    background: rgba(15, 23, 42, 0.5) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1rem 1.25rem !important;
}

.light-mode .table-container[b-u8ct3roum4]  .mud-table-head .mud-table-cell {
    background: #f8fafc !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1rem 1.25rem !important;
}

.table-container[b-u8ct3roum4]  .mud-table-body .mud-table-row {
    background: transparent !important;
    transition: background 0.2s ease;
}

.dark-mode .table-container[b-u8ct3roum4]  .mud-table-body .mud-table-row:hover {
    background: rgba(148, 163, 184, 0.05) !important;
}

.light-mode .table-container[b-u8ct3roum4]  .mud-table-body .mud-table-row:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

.table-container[b-u8ct3roum4]  .mud-table-cell {
    border-bottom: 1px solid var(--border-light) !important;
    padding: 1rem 1.25rem !important;
    color: var(--text-primary);
    vertical-align: middle;
}

.dark-mode .table-container[b-u8ct3roum4]  .mud-table-cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Table Cell Content */
.coupon-code[b-u8ct3roum4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #A78BFA;
}

.dark-mode .coupon-code[b-u8ct3roum4] {
    color: #C4B5FD;
}

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

.discount-badge[b-u8ct3roum4] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.discount-badge.percentage[b-u8ct3roum4] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.discount-badge.fixed[b-u8ct3roum4] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.1) 100%);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.duration-text[b-u8ct3roum4] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.redemptions-text[b-u8ct3roum4] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.expiry-text[b-u8ct3roum4] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.expiry-text.expired[b-u8ct3roum4] {
    color: #ef4444;
    font-weight: 500;
}

/* Status Badges */
.status-badge[b-u8ct3roum4] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.aktiv[b-u8ct3roum4] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.deaktiveret[b-u8ct3roum4] {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-secondary);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.status-badge.udløbet[b-u8ct3roum4],
.status-badge.opbrugt[b-u8ct3roum4] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Action Buttons */
.action-buttons[b-u8ct3roum4] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-u8ct3roum4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.action-btn:disabled[b-u8ct3roum4] {
    opacity: 0.3;
    cursor: not-allowed;
}

.action-btn.edit[b-u8ct3roum4] {
    color: #3B82F6;
}

.action-btn.edit:hover:not(:disabled)[b-u8ct3roum4] {
    background: rgba(59, 130, 246, 0.1);
}

.action-btn.toggle[b-u8ct3roum4] {
    color: var(--text-secondary);
}

.action-btn.toggle:hover:not(:disabled)[b-u8ct3roum4] {
    background: rgba(100, 116, 139, 0.1);
}

.action-btn.delete[b-u8ct3roum4] {
    color: #ef4444;
}

.action-btn.delete:hover:not(:disabled)[b-u8ct3roum4] {
    background: rgba(239, 68, 68, 0.1);
}

/* Responsive - Tablet/Medium screens */
@media (max-width: 1024px) {
    .stat-card-neo[b-u8ct3roum4] {
        padding: 0.875rem;
    }

    .stat-card-value[b-u8ct3roum4] {
        font-size: 1.375rem;
    }

    .stat-card-label[b-u8ct3roum4] {
        font-size: 0.75rem;
    }

    .stats-grid[b-u8ct3roum4] {
        gap: 0.875rem;
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .coupons-page[b-u8ct3roum4] {
        padding: 0.75rem;
    }

    .page-header[b-u8ct3roum4] {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

    .btn-primary[b-u8ct3roum4] {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        border-radius: 8px;
    }

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

    .page-subtitle[b-u8ct3roum4] {
        font-size: 0.75rem;
    }

    .stats-grid[b-u8ct3roum4] {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .stat-card-neo[b-u8ct3roum4] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .stat-card-value[b-u8ct3roum4] {
        font-size: 1.125rem;
    }

    .stat-card-label[b-u8ct3roum4] {
        font-size: 0.6875rem;
    }

    .table-container[b-u8ct3roum4] {
        border-radius: 10px;
    }

    .table-container[b-u8ct3roum4]  .mud-table-cell {
        padding: 0.5rem 0.75rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .coupons-page[b-u8ct3roum4] {
        padding: 0.5rem;
    }

    .page-header[b-u8ct3roum4] {
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

    .page-title[b-u8ct3roum4] {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }

    .page-subtitle[b-u8ct3roum4] {
        font-size: 0.75rem;
    }

    .btn-primary[b-u8ct3roum4] {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        border-radius: 10px;
    }

    .btn-secondary[b-u8ct3roum4] {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        border-radius: 10px;
    }

    .stats-grid[b-u8ct3roum4] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .stat-card-neo[b-u8ct3roum4] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .stat-card-header[b-u8ct3roum4] {
        margin-bottom: 0.5rem;
    }

    /* Hide icon boxes on mobile */
    .stat-card-header .icon-box[b-u8ct3roum4] {
        display: none;
    }

    .stat-card-value[b-u8ct3roum4] {
        font-size: 1.5rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-label[b-u8ct3roum4] {
        font-size: 0.6875rem;
        font-weight: 500;
    }

    .loading-container[b-u8ct3roum4] {
        padding: 2rem;
    }

    .empty-state[b-u8ct3roum4] {
        padding: 2rem 1rem;
        border-radius: 14px;
    }

    .empty-icon[b-u8ct3roum4] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin-bottom: 1rem;
    }

    .empty-icon[b-u8ct3roum4]  .mud-icon-root {
        font-size: 1.75rem;
    }

    .empty-state h3[b-u8ct3roum4] {
        font-size: 1rem;
    }

    .empty-state p[b-u8ct3roum4] {
        font-size: 0.8125rem;
        margin-bottom: 1rem;
    }

    .table-container[b-u8ct3roum4] {
        border-radius: 12px;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Force horizontal scroll on table - disable responsive card mode */
    .table-container[b-u8ct3roum4]  .mud-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-container[b-u8ct3roum4]  .mud-table,
    .table-container[b-u8ct3roum4]  .mud-table-root {
        min-width: 650px !important;
    }

    /* Disable MudBlazor responsive card mode */
    .table-container[b-u8ct3roum4]  .mud-table-cell[data-label]::before {
        display: none !important;
    }

    .table-container[b-u8ct3roum4]  .mud-table-cell {
        display: table-cell !important;
    }

    .table-container[b-u8ct3roum4]  .mud-table-row {
        display: table-row !important;
    }

    .table-container[b-u8ct3roum4]  .mud-table-head {
        display: table-header-group !important;
    }

    .table-container[b-u8ct3roum4]  .mud-table-body {
        display: table-row-group !important;
    }

    .table-container[b-u8ct3roum4]  .mud-table-head .mud-table-cell {
        padding: 0.5rem !important;
        font-size: 0.625rem !important;
        display: table-cell !important;
    }

    .table-container[b-u8ct3roum4]  .mud-table-cell {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .coupon-code[b-u8ct3roum4] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .discount-badge[b-u8ct3roum4] {
        padding: 0.125rem 0.5rem;
        font-size: 0.6875rem;
    }

    .status-badge[b-u8ct3roum4] {
        padding: 0.125rem 0.5rem;
        font-size: 0.625rem;
    }

    .usage-info[b-u8ct3roum4] {
        font-size: 0.6875rem;
    }

    .action-btn[b-u8ct3roum4] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .action-btn[b-u8ct3roum4]  .mud-icon-root {
        font-size: 0.875rem;
    }

    /* Pagination compact */
    .table-container[b-u8ct3roum4]  .mud-table-pagination {
        padding: 0.5rem !important;
        font-size: 0.6875rem !important;
    }
}

/* Responsive - Extra Small */
@media (max-width: 480px) {
    .coupons-page[b-u8ct3roum4] {
        padding: 0.25rem;
    }

    .page-title[b-u8ct3roum4] {
        font-size: 1rem;
    }

    .page-subtitle[b-u8ct3roum4] {
        font-size: 0.6875rem;
    }

    .stats-grid[b-u8ct3roum4] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    .stat-card-neo[b-u8ct3roum4] {
        padding: 0.625rem;
        border-radius: 8px;
    }

    .stat-card-header[b-u8ct3roum4] {
        margin-bottom: 0.25rem;
    }

    /* Hide icon boxes on extra small screens */
    .stat-card-header .icon-box[b-u8ct3roum4] {
        display: none;
    }

    .stat-card-value[b-u8ct3roum4] {
        font-size: 1.25rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-label[b-u8ct3roum4] {
        font-size: 0.5625rem;
        font-weight: 500;
    }

    .btn-primary[b-u8ct3roum4] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .table-container[b-u8ct3roum4] {
        border-radius: 10px;
    }

    .table-container[b-u8ct3roum4]  .mud-table {
        min-width: 500px !important;
    }

    .table-container[b-u8ct3roum4]  .mud-table-head .mud-table-cell {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.5625rem !important;
    }

    .table-container[b-u8ct3roum4]  .mud-table-cell {
        padding: 0.375rem !important;
        font-size: 0.6875rem !important;
    }

    .coupon-code[b-u8ct3roum4] {
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
    }

    .discount-badge[b-u8ct3roum4] {
        padding: 0.0625rem 0.375rem;
        font-size: 0.625rem;
    }

    .status-badge[b-u8ct3roum4] {
        padding: 0.0625rem 0.375rem;
        font-size: 0.5625rem;
    }

    .action-btn[b-u8ct3roum4] {
        width: 24px;
        height: 24px;
    }

    .action-btn[b-u8ct3roum4]  .mud-icon-root {
        font-size: 0.75rem;
    }
}
/* /Pages/Admin/Dashboard.razor.rz.scp.css */
/* ==========================================================================
   NEMABO DASHBOARD - Premium Nordic Finance Design
   CRITICAL: Explicit dark/light mode styling - NO CSS variables for colors
   ========================================================================== */

/* ==========================================================================
   BASE CONTAINER
   ========================================================================== */

.dashboard-container[b-rkmguxpekx] {
    padding: 0;
}

/* ==========================================================================
   DARK MODE - All cards MUST be dark
   ========================================================================== */

/* Generic Card - DARK MODE */
.dark-mode .card-neo[b-rkmguxpekx],
.dark-mode .stat-card-neo[b-rkmguxpekx],
.dark-mode .hero-metric-card[b-rkmguxpekx],
.dark-mode .onboarding-wizard[b-rkmguxpekx],
.dark-mode .action-card-neo[b-rkmguxpekx],
.dark-mode .alert-neo[b-rkmguxpekx] {
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #F8FAFC;
}

.dark-mode .card-neo:hover[b-rkmguxpekx],
.dark-mode .stat-card-neo:hover[b-rkmguxpekx] {
    border-color: rgba(52, 211, 153, 0.25);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(52, 211, 153, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

/* Text colors - DARK MODE */
.dark-mode .card-neo-title[b-rkmguxpekx],
.dark-mode .stat-card-value[b-rkmguxpekx],
.dark-mode .hero-metric-value[b-rkmguxpekx],
.dark-mode .onboarding-title[b-rkmguxpekx],
.dark-mode .action-text h3[b-rkmguxpekx],
.dark-mode .quick-action-label[b-rkmguxpekx] {
    color: #F8FAFC;
}

.dark-mode .card-description[b-rkmguxpekx],
.dark-mode .stat-card-label[b-rkmguxpekx],
.dark-mode .hero-metric-subtitle[b-rkmguxpekx],
.dark-mode .onboarding-subtitle[b-rkmguxpekx],
.dark-mode .action-text p[b-rkmguxpekx],
.dark-mode .setup-status-label[b-rkmguxpekx],
.dark-mode .alert-subtitle[b-rkmguxpekx] {
    color: #94A3B8;
}

/* Quick Actions - DARK MODE */
.dark-mode .quick-action-card[b-rkmguxpekx] {
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-mode .quick-action-card:hover[b-rkmguxpekx] {
    border-color: rgba(52, 211, 153, 0.2);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
}

.dark-mode .quick-action-card .quick-action-icon[b-rkmguxpekx] {
    background: rgba(255, 255, 255, 0.08);
}

.dark-mode .quick-action-card.primary[b-rkmguxpekx] {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-color: transparent;
}

.dark-mode .quick-action-card.primary:hover[b-rkmguxpekx] {
    box-shadow: 0 12px 28px -8px rgba(16, 185, 129, 0.4), 0 0 30px rgba(52, 211, 153, 0.2);
}

/* Input fields - DARK MODE */
.dark-mode .link-input[b-rkmguxpekx] {
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #F8FAFC;
}

.dark-mode .link-input-wrapper[b-rkmguxpekx] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-mode .link-input-wrapper:focus-within[b-rkmguxpekx] {
    border-color: rgba(52, 211, 153, 0.3);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.1);
}

.dark-mode .copy-btn[b-rkmguxpekx] {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
}

/* Stepper - DARK MODE */
.dark-mode .stepper-circle[b-rkmguxpekx] {
    background: rgba(100, 116, 139, 0.2);
    border-color: rgba(100, 116, 139, 0.3);
    color: #64748B;
}

.dark-mode .stepper-label[b-rkmguxpekx] {
    color: #64748B;
}

.dark-mode .stepper-step.active .stepper-label[b-rkmguxpekx],
.dark-mode .stepper-step.completed .stepper-label[b-rkmguxpekx] {
    color: #F8FAFC;
}

.dark-mode .stepper-line[b-rkmguxpekx] {
    background: rgba(100, 116, 139, 0.2);
}

.dark-mode .progress-bar-track[b-rkmguxpekx] {
    background: rgba(100, 116, 139, 0.2);
}

.dark-mode .progress-text[b-rkmguxpekx] {
    color: #94A3B8;
}

/* Quick Action List items - DARK MODE */
.dark-mode .quick-action-item[b-rkmguxpekx] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: #F8FAFC;
}

.dark-mode .quick-action-item:hover[b-rkmguxpekx] {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.2);
}

.dark-mode .quick-action-item .chevron[b-rkmguxpekx] {
    color: #64748B;
}

/* ==========================================================================
   LIGHT MODE - Clean white cards
   ========================================================================== */

.light-mode .card-neo[b-rkmguxpekx],
.light-mode .stat-card-neo[b-rkmguxpekx],
.light-mode .hero-metric-card[b-rkmguxpekx],
.light-mode .onboarding-wizard[b-rkmguxpekx],
.light-mode .action-card-neo[b-rkmguxpekx],
.light-mode .alert-neo[b-rkmguxpekx] {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #0F172A;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
}

.light-mode .card-neo:hover[b-rkmguxpekx],
.light-mode .stat-card-neo:hover[b-rkmguxpekx] {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15),
                0 0 40px rgba(16, 185, 129, 0.12),
                0 8px 32px -8px rgba(16, 185, 129, 0.2);
    transform: translateY(-4px);
}

/* Text colors - LIGHT MODE */
.light-mode .card-neo-title[b-rkmguxpekx],
.light-mode .stat-card-value[b-rkmguxpekx],
.light-mode .hero-metric-value[b-rkmguxpekx],
.light-mode .onboarding-title[b-rkmguxpekx],
.light-mode .action-text h3[b-rkmguxpekx],
.light-mode .quick-action-label[b-rkmguxpekx] {
    color: #0F172A;
}

.light-mode .card-description[b-rkmguxpekx],
.light-mode .stat-card-label[b-rkmguxpekx],
.light-mode .hero-metric-subtitle[b-rkmguxpekx],
.light-mode .onboarding-subtitle[b-rkmguxpekx],
.light-mode .action-text p[b-rkmguxpekx],
.light-mode .setup-status-label[b-rkmguxpekx],
.light-mode .alert-subtitle[b-rkmguxpekx] {
    color: #64748B;
}

/* Quick Actions - LIGHT MODE */
.light-mode .quick-action-card[b-rkmguxpekx] {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.light-mode .quick-action-card:hover[b-rkmguxpekx] {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.1);
}

.light-mode .quick-action-card .quick-action-icon[b-rkmguxpekx] {
    background: rgba(0, 0, 0, 0.05);
}

.light-mode .quick-action-card.primary[b-rkmguxpekx] {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-color: transparent;
}

/* Input fields - LIGHT MODE */
.light-mode .link-input[b-rkmguxpekx] {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #0F172A;
}

.light-mode .link-input-wrapper[b-rkmguxpekx] {
    background: #F1F5F9;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.light-mode .link-input-wrapper:focus-within[b-rkmguxpekx] {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

.light-mode .copy-btn[b-rkmguxpekx] {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
}

/* Stepper - LIGHT MODE */
.light-mode .stepper-circle[b-rkmguxpekx] {
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.2);
    color: #64748B;
}

.light-mode .stepper-label[b-rkmguxpekx] {
    color: #64748B;
}

.light-mode .stepper-step.active .stepper-label[b-rkmguxpekx],
.light-mode .stepper-step.completed .stepper-label[b-rkmguxpekx] {
    color: #0F172A;
}

.light-mode .stepper-line[b-rkmguxpekx] {
    background: rgba(100, 116, 139, 0.15);
}

.light-mode .progress-bar-track[b-rkmguxpekx] {
    background: rgba(100, 116, 139, 0.15);
}

.light-mode .progress-text[b-rkmguxpekx] {
    color: #64748B;
}

/* Quick Action List items - LIGHT MODE */
.light-mode .quick-action-item[b-rkmguxpekx] {
    background: #F8FAFC;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #0F172A;
}

.light-mode .quick-action-item:hover[b-rkmguxpekx] {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
}

/* ==========================================================================
   SHARED STYLES (Both themes)
   ========================================================================== */

/* Icon Boxes - Gradient backgrounds */
.icon-box[b-rkmguxpekx] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box.small[b-rkmguxpekx] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.icon-box.medium[b-rkmguxpekx] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.icon-box.large[b-rkmguxpekx] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.icon-box .mud-icon-root[b-rkmguxpekx] {
    color: white !important;
    font-size: 18px;
}

.icon-box.small .mud-icon-root[b-rkmguxpekx] {
    font-size: 14px;
}

.icon-box.large .mud-icon-root[b-rkmguxpekx] {
    font-size: 22px;
}

/* Gradient variants */
.gradient-emerald[b-rkmguxpekx] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 6px 20px -4px rgba(16, 185, 129, 0.5);
}

.gradient-blue[b-rkmguxpekx] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 6px 20px -4px rgba(59, 130, 246, 0.5);
}

.gradient-amber[b-rkmguxpekx] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 6px 20px -4px rgba(245, 158, 11, 0.5);
}

.gradient-rose[b-rkmguxpekx] {
    background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
    box-shadow: 0 6px 20px -4px rgba(244, 63, 94, 0.5);
}

.gradient-purple[b-rkmguxpekx] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 6px 20px -4px rgba(139, 92, 246, 0.5);
}

.gradient-indigo[b-rkmguxpekx] {
    background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
    box-shadow: 0 6px 20px -4px rgba(99, 102, 241, 0.5);
}

/* ==========================================================================
   CARD NEO - Base structure
   ========================================================================== */

.card-neo[b-rkmguxpekx] {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-neo-header[b-rkmguxpekx] {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.card-neo-title[b-rkmguxpekx] {
    font-size: 0.9375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-neo-body[b-rkmguxpekx] {
    padding: 18px;
}

.card-neo-body.compact[b-rkmguxpekx] {
    padding: 12px 18px;
}

.card-neo-footer[b-rkmguxpekx] {
    padding: 12px 18px;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}

.card-description[b-rkmguxpekx] {
    font-size: 0.875rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.card-link[b-rkmguxpekx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #10B981;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.card-link:hover[b-rkmguxpekx] {
    color: #34D399;
}

.card-link .mud-icon-root[b-rkmguxpekx] {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.card-link:hover .mud-icon-root[b-rkmguxpekx] {
    transform: translateX(4px);
}

/* ==========================================================================
   STAT CARDS
   ========================================================================== */

.stats-grid[b-rkmguxpekx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 1200px) {
    .stats-grid[b-rkmguxpekx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.stat-card-neo[b-rkmguxpekx] {
    border-radius: 16px;
    padding: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card-neo[b-rkmguxpekx]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card-neo:hover[b-rkmguxpekx]::before {
    opacity: 1;
}

.stat-card-neo:hover[b-rkmguxpekx] {
    transform: translateY(-4px);
}

.stat-card-header[b-rkmguxpekx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-card-value[b-rkmguxpekx] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}

.stat-card-label[b-rkmguxpekx] {
    font-size: 0.8125rem;
    margin-bottom: 12px;
}

.stat-card-footer[b-rkmguxpekx] {
    padding-top: 12px;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}

/* Stat badges */
.stat-badge[b-rkmguxpekx] {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.stat-badge.live[b-rkmguxpekx] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-badge.live[b-rkmguxpekx]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    animation: pulse-dot-b-rkmguxpekx 2s ease-in-out infinite;
}

.stat-badge.warning[b-rkmguxpekx] {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

@keyframes pulse-dot-b-rkmguxpekx {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Stat trends */
.stat-trend[b-rkmguxpekx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.stat-trend .mud-icon-root[b-rkmguxpekx] {
    font-size: 16px;
}

.stat-trend.up[b-rkmguxpekx] {
    color: #4ADE80;
}

.stat-trend.warning[b-rkmguxpekx] {
    color: #FBBF24;
}

.stat-trend.neutral[b-rkmguxpekx] {
    color: #94A3B8;
}

/* ==========================================================================
   HERO METRIC CARD
   ========================================================================== */

.hero-metric-card[b-rkmguxpekx] {
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-metric-card[b-rkmguxpekx]::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(52, 211, 153, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.hero-metric-card:hover[b-rkmguxpekx] {
    box-shadow: 0 0 40px rgba(52, 211, 153, 0.15);
}

.hero-metric-content[b-rkmguxpekx] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.hero-metric-main[b-rkmguxpekx] {
    flex: 1;
}

.hero-metric-label[b-rkmguxpekx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.hero-metric-title[b-rkmguxpekx] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94A3B8;
}

.hero-metric-value[b-rkmguxpekx] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 6px;
}

.hero-metric-change[b-rkmguxpekx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
}

.hero-metric-change.positive[b-rkmguxpekx] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

.hero-metric-change.negative[b-rkmguxpekx] {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
}

.hero-metric-change .mud-icon-root[b-rkmguxpekx] {
    font-size: 18px;
}

.hero-metric-subtitle[b-rkmguxpekx] {
    font-size: 0.875rem;
    margin-top: 8px;
}

.hero-sparkline[b-rkmguxpekx] {
    flex-shrink: 0;
    width: 280px;
    height: 100px;
    opacity: 1;
    filter: drop-shadow(0 4px 20px rgba(52, 211, 153, 0.3));
}

.hero-sparkline svg[b-rkmguxpekx] {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .hero-metric-card[b-rkmguxpekx] {
        padding: 24px;
    }
    .hero-metric-value[b-rkmguxpekx] {
        font-size: 2.5rem;
    }
    .hero-sparkline[b-rkmguxpekx] {
        display: none;
    }
}

/* ==========================================================================
   ONBOARDING WIZARD
   ========================================================================== */

.onboarding-wizard[b-rkmguxpekx] {
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.onboarding-wizard[b-rkmguxpekx]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at top right, rgba(52, 211, 153, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.onboarding-header[b-rkmguxpekx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.onboarding-title[b-rkmguxpekx] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 2px 0;
}

.onboarding-subtitle[b-rkmguxpekx] {
    font-size: 0.875rem;
    margin: 0;
}

/* Stepper */
.onboarding-stepper[b-rkmguxpekx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.stepper-step[b-rkmguxpekx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.stepper-circle[b-rkmguxpekx] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid;
    transition: all 0.3s ease;
}

.stepper-step.active .stepper-circle[b-rkmguxpekx] {
    background: rgba(52, 211, 153, 0.15);
    color: #34D399;
    border-color: #34D399;
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
}

.stepper-step.completed .stepper-circle[b-rkmguxpekx] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.stepper-step.completed .stepper-circle .mud-icon-root[b-rkmguxpekx] {
    color: white !important;
    font-size: 24px;
}

.stepper-label[b-rkmguxpekx] {
    font-size: 0.8125rem;
    font-weight: 500;
}

.stepper-line[b-rkmguxpekx] {
    width: 80px;
    height: 3px;
    margin: 0 16px;
    margin-bottom: 28px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.stepper-line.completed[b-rkmguxpekx] {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

/* Progress */
.onboarding-progress[b-rkmguxpekx] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.progress-bar-track[b-rkmguxpekx] {
    flex: 1;
    height: 8px;
    border-radius: 100px;
    overflow: hidden;
}

.progress-bar-fill[b-rkmguxpekx] {
    height: 100%;
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
    border-radius: 100px;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

.progress-text[b-rkmguxpekx] {
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 100px;
    text-align: right;
}

/* Action Card */
.onboarding-action[b-rkmguxpekx] {
    position: relative;
    z-index: 1;
}

.action-card-neo[b-rkmguxpekx] {
    border-radius: 14px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.action-content[b-rkmguxpekx] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.action-text h3[b-rkmguxpekx] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.action-text p[b-rkmguxpekx] {
    font-size: 0.875rem;
    margin: 0;
}

.action-button[b-rkmguxpekx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.action-button:hover[b-rkmguxpekx] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    color: white;
}

.action-button .mud-icon-root[b-rkmguxpekx] {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.action-button:hover .mud-icon-root[b-rkmguxpekx] {
    transform: translateX(4px);
}

/* ==========================================================================
   QUICK ACTIONS
   ========================================================================== */

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

.quick-action-card[b-rkmguxpekx] {
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    min-height: 80px;
    border: none;
}

.quick-action-card:hover[b-rkmguxpekx] {
    transform: translateY(-2px) scale(1.02);
}

.quick-action-icon[b-rkmguxpekx] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.quick-action-card:hover .quick-action-icon[b-rkmguxpekx] {
    transform: scale(1.1);
}

.quick-action-icon .mud-icon-root[b-rkmguxpekx] {
    font-size: 16px;
}

.quick-action-card.primary .quick-action-icon[b-rkmguxpekx] {
    background: rgba(255, 255, 255, 0.2);
}

.quick-action-card.primary .quick-action-icon .mud-icon-root[b-rkmguxpekx],
.quick-action-card.primary .quick-action-label[b-rkmguxpekx] {
    color: white !important;
}

.quick-action-label[b-rkmguxpekx] {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Quick action list (for incomplete setup) */
.quick-actions-list[b-rkmguxpekx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-action-item[b-rkmguxpekx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.quick-action-item .mud-icon-root[b-rkmguxpekx] {
    font-size: 20px;
    color: #10B981;
}

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

.quick-action-item.disabled[b-rkmguxpekx] {
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================================
   SETUP STATUS
   ========================================================================== */

.setup-status-item[b-rkmguxpekx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.setup-status-item:last-child[b-rkmguxpekx] {
    border-bottom: none;
}

.setup-status-label[b-rkmguxpekx] {
    font-size: 0.875rem;
}

.status-indicator[b-rkmguxpekx] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-indicator.connected[b-rkmguxpekx] {
    background: rgba(34, 197, 94, 0.15);
}

.status-indicator.connected .mud-icon-root[b-rkmguxpekx] {
    color: #4ADE80 !important;
    font-size: 16px;
}

.status-indicator.disconnected[b-rkmguxpekx] {
    background: rgba(239, 68, 68, 0.15);
}

.status-indicator.disconnected .mud-icon-root[b-rkmguxpekx] {
    color: #F87171 !important;
    font-size: 16px;
}

.count-badge[b-rkmguxpekx] {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(100, 116, 139, 0.15);
    color: #94A3B8;
}

.count-badge.positive[b-rkmguxpekx] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
}

/* ==========================================================================
   LINK INPUT
   ========================================================================== */

.link-input-wrapper[b-rkmguxpekx] {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    transition: all 0.2s ease;
}

.link-input[b-rkmguxpekx] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.2s ease;
    min-width: 0;
}

.link-input:focus[b-rkmguxpekx] {
    border-color: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.copy-btn[b-rkmguxpekx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    flex-shrink: 0;
}

.copy-btn:hover[b-rkmguxpekx] {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5),
                0 0 30px rgba(52, 211, 153, 0.2);
    transform: translateY(-2px);
}

.copy-btn:active[b-rkmguxpekx] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.copy-btn .mud-icon-root[b-rkmguxpekx] {
    font-size: 18px;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert-neo[b-rkmguxpekx] {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-error-neo[b-rkmguxpekx] {
    border-left: 4px solid #F43F5E;
}

.alert-info-neo[b-rkmguxpekx] {
    border-left: 4px solid #FBBF24;
    position: relative;
    overflow: hidden;
}

.alert-info-neo[b-rkmguxpekx]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: radial-gradient(ellipse at right, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.dark-mode .alert-info-neo[b-rkmguxpekx] {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.08) 0%, rgba(30, 41, 59, 1) 100%);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-left: 4px solid #FBBF24;
}

.light-mode .alert-info-neo[b-rkmguxpekx] {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-left: 4px solid #FBBF24;
}

.alert-info-neo .icon-box[b-rkmguxpekx] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 6px 20px -4px rgba(245, 158, 11, 0.5);
}

.alert-title[b-rkmguxpekx] {
    font-weight: 600;
    color: #F87171;
}

.alert-subtitle[b-rkmguxpekx] {
    font-size: 0.875rem;
}

.alert-content[b-rkmguxpekx] {
    font-size: 0.9375rem;
    flex: 1;
}

.alert-content strong[b-rkmguxpekx] {
    color: #FBBF24;
    font-weight: 600;
}

/* ==========================================================================
   LAYOUT GRIDS
   ========================================================================== */

.dashboard-grid[b-rkmguxpekx] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}

.dashboard-grid-simple[b-rkmguxpekx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

@media (max-width: 1200px) {
    .dashboard-grid[b-rkmguxpekx] {
        grid-template-columns: 1fr;
    }
    .dashboard-grid-simple[b-rkmguxpekx] {
        grid-template-columns: 1fr;
    }
}

.dashboard-main[b-rkmguxpekx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-sidebar[b-rkmguxpekx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet/Medium screens - reduce padding */
@media (max-width: 1024px) {
    .stat-card-neo[b-rkmguxpekx] {
        padding: 14px;
    }

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

    .stat-card-label[b-rkmguxpekx] {
        font-size: 0.75rem;
    }

    .card-neo-body[b-rkmguxpekx] {
        padding: 14px;
    }

    .hero-metric-card[b-rkmguxpekx] {
        padding: 16px 20px;
    }

    .hero-metric-value[b-rkmguxpekx] {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .onboarding-wizard[b-rkmguxpekx] {
        padding: 18px;
    }

    .onboarding-header[b-rkmguxpekx] {
        flex-direction: column;
        text-align: center;
    }

    .stepper-line[b-rkmguxpekx] {
        width: 40px;
        margin: 0 8px;
    }

    .action-card-neo[b-rkmguxpekx] {
        flex-direction: column;
        text-align: center;
        padding: 14px;
    }

    .action-content[b-rkmguxpekx] {
        flex-direction: column;
    }

    .action-button[b-rkmguxpekx] {
        width: 100%;
        justify-content: center;
        padding: 8px 16px;
        font-size: 0.8125rem;
    }

    .quick-actions-grid[b-rkmguxpekx] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stat-card-neo[b-rkmguxpekx] {
        padding: 12px;
    }

    .stat-card-value[b-rkmguxpekx] {
        font-size: 1.375rem;
    }
}

@media (max-width: 600px) {
    .dashboard-container[b-rkmguxpekx] {
        padding: 0;
    }

    .card-neo[b-rkmguxpekx],
    .stat-card-neo[b-rkmguxpekx],
    .alert-neo[b-rkmguxpekx],
    .onboarding-wizard[b-rkmguxpekx] {
        border-radius: 12px;
    }

    .card-neo-header[b-rkmguxpekx] {
        padding: 12px;
    }

    .card-neo-body[b-rkmguxpekx] {
        padding: 12px;
    }

    .card-neo-body.compact[b-rkmguxpekx] {
        padding: 10px 12px;
    }

    .card-neo-footer[b-rkmguxpekx] {
        padding: 10px 12px;
    }

    .card-neo-title[b-rkmguxpekx] {
        font-size: 0.875rem;
        gap: 8px;
    }

    .card-description[b-rkmguxpekx] {
        font-size: 0.75rem;
        margin-bottom: 10px;
    }

    .card-link[b-rkmguxpekx] {
        font-size: 0.75rem;
    }

    .stats-grid[b-rkmguxpekx] {
        gap: 10px;
        margin-bottom: 16px;
    }

    .stat-card-neo[b-rkmguxpekx] {
        padding: 12px;
        border-radius: 12px;
    }

    .stat-card-header[b-rkmguxpekx] {
        margin-bottom: 10px;
    }

    .stat-card-value[b-rkmguxpekx] {
        font-size: 1.375rem;
        margin-bottom: 2px;
    }

    .stat-card-label[b-rkmguxpekx] {
        font-size: 0.6875rem;
        margin-bottom: 10px;
    }

    .stat-card-footer[b-rkmguxpekx] {
        padding-top: 10px;
    }

    .stat-badge[b-rkmguxpekx] {
        padding: 2px 6px;
        font-size: 0.625rem;
    }

    .stat-badge.live[b-rkmguxpekx]::before {
        width: 4px;
        height: 4px;
    }

    .stat-trend[b-rkmguxpekx] {
        font-size: 0.6875rem;
    }

    .stat-trend .mud-icon-root[b-rkmguxpekx] {
        font-size: 12px;
    }

    .icon-box[b-rkmguxpekx] {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .icon-box.small[b-rkmguxpekx] {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }

    .icon-box.medium[b-rkmguxpekx] {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .icon-box.large[b-rkmguxpekx] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .icon-box .mud-icon-root[b-rkmguxpekx] {
        font-size: 14px;
    }

    .icon-box.small .mud-icon-root[b-rkmguxpekx] {
        font-size: 11px;
    }

    .icon-box.large .mud-icon-root[b-rkmguxpekx] {
        font-size: 20px;
    }

    /* Hero metric card - compact */
    .hero-metric-card[b-rkmguxpekx] {
        padding: 16px;
        border-radius: 14px;
        margin-bottom: 16px;
    }

    .hero-metric-label[b-rkmguxpekx] {
        gap: 8px;
        margin-bottom: 8px;
    }

    .hero-metric-title[b-rkmguxpekx] {
        font-size: 0.6875rem;
    }

    .hero-metric-value[b-rkmguxpekx] {
        font-size: 2rem;
        margin-bottom: 4px;
    }

    .hero-metric-change[b-rkmguxpekx] {
        padding: 4px 10px;
        font-size: 0.75rem;
    }

    .hero-metric-change .mud-icon-root[b-rkmguxpekx] {
        font-size: 14px;
    }

    .hero-metric-subtitle[b-rkmguxpekx] {
        font-size: 0.75rem;
    }

    /* Onboarding wizard - compact */
    .onboarding-wizard[b-rkmguxpekx] {
        padding: 12px;
        border-radius: 14px;
        margin-bottom: 16px;
    }

    .onboarding-header[b-rkmguxpekx] {
        gap: 10px;
        margin-bottom: 16px;
    }

    .onboarding-title[b-rkmguxpekx] {
        font-size: 1rem;
        margin: 0 0 2px 0;
    }

    .onboarding-subtitle[b-rkmguxpekx] {
        font-size: 0.75rem;
    }

    .onboarding-stepper[b-rkmguxpekx] {
        margin-bottom: 16px;
    }

    .stepper-step[b-rkmguxpekx] {
        gap: 4px;
    }

    .stepper-circle[b-rkmguxpekx] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .stepper-step.completed .stepper-circle .mud-icon-root[b-rkmguxpekx] {
        font-size: 16px;
    }

    .stepper-line[b-rkmguxpekx] {
        width: 16px;
        height: 2px;
        margin: 0 3px;
        margin-bottom: 20px;
    }

    .stepper-label[b-rkmguxpekx] {
        font-size: 0.5625rem;
    }

    .onboarding-progress[b-rkmguxpekx] {
        margin-bottom: 16px;
        gap: 10px;
    }

    .progress-bar-track[b-rkmguxpekx] {
        height: 6px;
    }

    .progress-text[b-rkmguxpekx] {
        font-size: 0.75rem;
        min-width: 80px;
    }

    /* Action card - compact */
    .action-card-neo[b-rkmguxpekx] {
        padding: 14px;
        border-radius: 12px;
        gap: 12px;
    }

    .action-content[b-rkmguxpekx] {
        gap: 10px;
    }

    .action-text h3[b-rkmguxpekx] {
        font-size: 0.9375rem;
    }

    .action-text p[b-rkmguxpekx] {
        font-size: 0.75rem;
    }

    .action-button[b-rkmguxpekx] {
        padding: 10px 16px;
        font-size: 0.8125rem;
        border-radius: 10px;
    }

    .action-button .mud-icon-root[b-rkmguxpekx] {
        font-size: 16px;
    }

    /* Link input - compact */
    .link-input-wrapper[b-rkmguxpekx] {
        flex-direction: column;
        gap: 6px;
    }

    .link-input[b-rkmguxpekx] {
        width: 100%;
        font-size: 0.6875rem;
        padding: 8px 10px;
        border-radius: 8px;
    }

    .copy-btn[b-rkmguxpekx] {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .copy-btn .mud-icon-root[b-rkmguxpekx] {
        font-size: 14px;
    }

    /* Quick actions - compact */
    .quick-actions-grid[b-rkmguxpekx] {
        gap: 8px;
    }

    .quick-action-card[b-rkmguxpekx] {
        padding: 12px;
        min-height: 60px;
        border-radius: 10px;
        gap: 8px;
    }

    .quick-action-icon[b-rkmguxpekx] {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .quick-action-icon .mud-icon-root[b-rkmguxpekx] {
        font-size: 14px;
    }

    .quick-action-label[b-rkmguxpekx] {
        font-size: 0.6875rem;
    }

    .quick-actions-list[b-rkmguxpekx] {
        gap: 6px;
    }

    .quick-action-item[b-rkmguxpekx] {
        padding: 10px 12px;
        border-radius: 10px;
        gap: 8px;
    }

    .quick-action-item .mud-icon-root[b-rkmguxpekx] {
        font-size: 16px;
    }

    .quick-action-item span[b-rkmguxpekx] {
        font-size: 0.8125rem;
    }

    /* Setup status - compact */
    .setup-status-item[b-rkmguxpekx] {
        padding: 8px 0;
    }

    .setup-status-label[b-rkmguxpekx] {
        font-size: 0.75rem;
    }

    .status-indicator[b-rkmguxpekx] {
        width: 22px;
        height: 22px;
    }

    .status-indicator .mud-icon-root[b-rkmguxpekx] {
        font-size: 12px !important;
    }

    .count-badge[b-rkmguxpekx] {
        padding: 2px 8px;
        font-size: 0.6875rem;
    }

    /* Alerts - compact */
    .alert-neo[b-rkmguxpekx] {
        padding: 10px 12px;
        border-radius: 10px;
        margin-bottom: 16px;
        gap: 8px;
    }

    .alert-title[b-rkmguxpekx] {
        font-size: 0.875rem;
    }

    .alert-subtitle[b-rkmguxpekx] {
        font-size: 0.75rem;
    }

    .alert-content[b-rkmguxpekx] {
        font-size: 0.8125rem;
    }

    /* Dashboard grid */
    .dashboard-grid[b-rkmguxpekx] {
        gap: 16px;
    }

    .dashboard-grid-simple[b-rkmguxpekx] {
        gap: 12px;
        margin-top: 16px;
    }

    .dashboard-main[b-rkmguxpekx] {
        gap: 16px;
    }

    .dashboard-sidebar[b-rkmguxpekx] {
        gap: 12px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .stats-grid[b-rkmguxpekx] {
        gap: 6px;
    }

    .stat-card-neo[b-rkmguxpekx] {
        padding: 10px;
        border-radius: 10px;
    }

    .stat-card-value[b-rkmguxpekx] {
        font-size: 1.125rem;
    }

    .stat-card-label[b-rkmguxpekx] {
        font-size: 0.625rem;
    }

    .icon-box[b-rkmguxpekx] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .icon-box .mud-icon-root[b-rkmguxpekx] {
        font-size: 12px;
    }

    .hero-metric-card[b-rkmguxpekx] {
        padding: 12px;
    }

    .hero-metric-value[b-rkmguxpekx] {
        font-size: 1.625rem;
    }

    .onboarding-wizard[b-rkmguxpekx] {
        padding: 10px;
    }

    .onboarding-title[b-rkmguxpekx] {
        font-size: 0.9375rem;
    }

    .stepper-circle[b-rkmguxpekx] {
        width: 24px;
        height: 24px;
        font-size: 0.6875rem;
    }

    .stepper-label[b-rkmguxpekx] {
        font-size: 0.5rem;
        display: none;
    }

    .action-card-neo[b-rkmguxpekx] {
        padding: 10px;
    }

    .action-text h3[b-rkmguxpekx] {
        font-size: 0.8125rem;
    }

    .action-text p[b-rkmguxpekx] {
        font-size: 0.6875rem;
    }

    .quick-action-card[b-rkmguxpekx] {
        padding: 10px;
        min-height: 50px;
    }

    .quick-action-icon[b-rkmguxpekx] {
        width: 24px;
        height: 24px;
    }

    .quick-action-icon .mud-icon-root[b-rkmguxpekx] {
        font-size: 12px;
    }

    .quick-action-label[b-rkmguxpekx] {
        font-size: 0.625rem;
    }
}
/* /Pages/Admin/DineroFailedSyncs.razor.rz.scp.css */
/* Dinero Failed Syncs Page - Mobile-First Responsive Design */

/* Page header */
[b-2ie9c7rxnq] .mud-text-h5 {
    font-size: 1.25rem;
}

/* Card responsive */
[b-2ie9c7rxnq] .mud-card {
    border-radius: 16px !important;
}

[b-2ie9c7rxnq] .mud-card-content {
    padding: 1.25rem !important;
}

/* Header with button */
[b-2ie9c7rxnq] .d-flex.justify-space-between {
    flex-wrap: wrap;
    gap: 1rem;
}

/* Table responsive */
[b-2ie9c7rxnq] .mud-table {
    font-size: 0.875rem;
}

[b-2ie9c7rxnq] .mud-table-cell {
    padding: 0.75rem !important;
}

/* Chip sizing */
[b-2ie9c7rxnq] .mud-chip {
    font-size: 0.75rem !important;
}

/* Medium screens */
@media (max-width: 960px) {
    [b-2ie9c7rxnq] .mud-text-h5 {
        font-size: 1.125rem;
    }

    [b-2ie9c7rxnq] .mud-text-h6 {
        font-size: 1rem;
    }

    [b-2ie9c7rxnq] .mud-card-content {
        padding: 1rem !important;
    }

    /* Stack header vertically */
    [b-2ie9c7rxnq] .d-flex.justify-space-between {
        flex-direction: column;
        align-items: stretch !important;
    }

    [b-2ie9c7rxnq] .d-flex.justify-space-between .mud-button {
        width: 100%;
    }
}

/* Small screens */
@media (max-width: 600px) {
    [b-2ie9c7rxnq] .mud-text-h5 {
        font-size: 1rem;
    }

    [b-2ie9c7rxnq] .mud-card-content {
        padding: 0.875rem !important;
    }

    /* Convert table to card layout on mobile */
    [b-2ie9c7rxnq] .mud-table-container {
        overflow-x: auto;
    }

    [b-2ie9c7rxnq] .mud-table {
        min-width: 600px;
    }

    /* Alternative: Hide less important columns */
    [b-2ie9c7rxnq] .mud-table-cell[data-label="Attempts"] {
        display: none;
    }

    /* Alert info - smaller list */
    [b-2ie9c7rxnq] .mud-alert ul {
        padding-left: 1.25rem;
        font-size: 0.8125rem;
    }

    [b-2ie9c7rxnq] .mud-alert li {
        margin-bottom: 0.5rem;
    }

    /* Retry button */
    [b-2ie9c7rxnq] .mud-table-cell .mud-button {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}
/* /Pages/Admin/Integrations.razor.rz.scp.css */
/* Integrations Page - Premium FinTech Design */

.integrations-page[b-pwh72u7o6h] {
    padding: 2rem;
    min-height: 100vh;
}

/* Light Mode */
.light-mode[b-pwh72u7o6h] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Dark Mode */
.dark-mode[b-pwh72u7o6h] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Page Header */
.page-header[b-pwh72u7o6h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.header-content[b-pwh72u7o6h] {
    flex: 1;
}

.page-title[b-pwh72u7o6h] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.page-subtitle[b-pwh72u7o6h] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

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

@media (max-width: 1200px) {
    .integrations-grid[b-pwh72u7o6h] {
        grid-template-columns: 1fr;
    }
}

/* Integration Card */
.integration-card[b-pwh72u7o6h] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dark-mode .integration-card[b-pwh72u7o6h] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .integration-card[b-pwh72u7o6h] {
    box-shadow: var(--shadow-sm);
}

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

/* Card Header */
.card-header[b-pwh72u7o6h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* Integration Logos */
.integration-logo[b-pwh72u7o6h] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.stripe-logo[b-pwh72u7o6h] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.stripe-text[b-pwh72u7o6h] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #635BFF;
    letter-spacing: -0.02em;
}

.dark-mode .stripe-text[b-pwh72u7o6h] {
    color: #A29BFE;
}

.dinero-logo[b-pwh72u7o6h] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dinero-text[b-pwh72u7o6h] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00A67E;
    letter-spacing: -0.02em;
}

.dark-mode .dinero-text[b-pwh72u7o6h] {
    color: #34D399;
}

/* Integration Badges */
.integration-badge[b-pwh72u7o6h] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.integration-badge.payments[b-pwh72u7o6h] {
    background: linear-gradient(135deg, rgba(99, 91, 255, 0.15) 0%, rgba(162, 155, 254, 0.1) 100%);
    color: #635BFF;
    border: 1px solid rgba(99, 91, 255, 0.3);
}

.dark-mode .integration-badge.payments[b-pwh72u7o6h] {
    color: #A29BFE;
}

.integration-badge.accounting[b-pwh72u7o6h] {
    background: linear-gradient(135deg, rgba(0, 166, 126, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #00A67E;
    border: 1px solid rgba(0, 166, 126, 0.3);
}

.dark-mode .integration-badge.accounting[b-pwh72u7o6h] {
    color: #34D399;
}

/* Card Description */
.card-description[b-pwh72u7o6h] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

/* Card Content - Component Container */
.card-content[b-pwh72u7o6h] {
    border-top: 1px solid var(--border-light);
    padding-top: 1.5rem;
}

/* Ensure MudGrid displays side-by-side */
.card-content[b-pwh72u7o6h]  .mud-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: -12px !important;
}

.card-content[b-pwh72u7o6h]  .mud-grid > .mud-grid-item {
    padding: 12px !important;
}

/* All MudPaper elements inside card-content */
.card-content[b-pwh72u7o6h]  .mud-paper {
    background: var(--bg-secondary) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    box-shadow: none !important;
    border: 1px solid var(--border-light) !important;
}

.dark-mode .card-content[b-pwh72u7o6h]  .mud-paper {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

/* Spacing between stacked sidebar papers */
.card-content[b-pwh72u7o6h]  .mud-paper + .mud-paper {
    margin-top: 1rem !important;
}

/* Status items inside components */
.card-content[b-pwh72u7o6h]  .mud-stack {
    gap: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .integrations-page[b-pwh72u7o6h] {
        padding: 1rem;
    }

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

    .integration-card[b-pwh72u7o6h] {
        padding: 1.25rem;
        border-radius: 20px;
    }
}

/* Mobile - Fix MudSimpleTable display */
@media (max-width: 600px) {
    .integrations-page[b-pwh72u7o6h] {
        padding: 0.75rem;
    }

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

    .page-subtitle[b-pwh72u7o6h] {
        font-size: 0.85rem;
    }

    .integration-card[b-pwh72u7o6h] {
        padding: 1rem;
        border-radius: 16px;
    }

    .card-description[b-pwh72u7o6h] {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    /* MudSimpleTable - stack rows vertically on mobile */
    .card-content[b-pwh72u7o6h]  .mud-simple-table {
        padding: 0.5rem !important;
    }

    .card-content[b-pwh72u7o6h]  .mud-simple-table table {
        display: block !important;
        width: 100% !important;
    }

    .card-content[b-pwh72u7o6h]  .mud-simple-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .card-content[b-pwh72u7o6h]  .mud-simple-table tr {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid var(--border-light) !important;
    }

    .card-content[b-pwh72u7o6h]  .mud-simple-table tr:last-child {
        border-bottom: none !important;
    }

    .card-content[b-pwh72u7o6h]  .mud-simple-table td {
        display: block !important;
        width: 100% !important;
        padding: 0.25rem 0.5rem !important;
        border-bottom: none !important;
    }

    .card-content[b-pwh72u7o6h]  .mud-simple-table td:first-child {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .card-content[b-pwh72u7o6h]  .mud-simple-table td:last-child {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-primary);
        word-break: break-all;
    }

    /* Smaller alerts on mobile */
    .card-content[b-pwh72u7o6h]  .mud-alert {
        padding: 0.75rem !important;
        font-size: 0.85rem;
    }

    .card-content[b-pwh72u7o6h]  .mud-alert ul {
        padding-left: 1rem;
        margin: 0.5rem 0 0 0;
        font-size: 0.8rem;
    }

    .card-content[b-pwh72u7o6h]  .mud-alert .mud-typography-h6 {
        font-size: 0.9rem !important;
    }

    /* Stack buttons on mobile */
    .card-content[b-pwh72u7o6h]  .mud-stack[style*="flex-direction: row"],
    .card-content[b-pwh72u7o6h]  .mud-stack.flex-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Full width buttons on mobile */
    .card-content[b-pwh72u7o6h]  .mud-button {
        width: 100% !important;
    }

    /* Smaller expansion panel */
    .card-content[b-pwh72u7o6h]  .mud-expand-panel {
        margin-top: 0.75rem;
    }

    .card-content[b-pwh72u7o6h]  .mud-expand-panel-header {
        padding: 0.75rem !important;
        font-size: 0.85rem;
    }

    /* Paper elements - less padding on mobile */
    .card-content[b-pwh72u7o6h]  .mud-paper {
        padding: 1rem !important;
    }
}

/* Typography inside cards */
.card-content[b-pwh72u7o6h]  .mud-typography-h6 {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.card-content[b-pwh72u7o6h]  .mud-typography-body2 {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Dividers */
.card-content[b-pwh72u7o6h]  .mud-divider {
    margin: 1rem 0;
    border-color: var(--border-light);
}

/* Alerts styling */
.card-content[b-pwh72u7o6h]  .mud-alert {
    border-radius: 12px !important;
    margin-bottom: 1rem;
}

/* Buttons styling */
.card-content[b-pwh72u7o6h]  .mud-button-filled {
    border-radius: 10px !important;
}

.card-content[b-pwh72u7o6h]  .mud-button-outlined {
    border-radius: 10px !important;
}

/* Progress indicators */
.card-content[b-pwh72u7o6h]  .mud-progress-linear {
    border-radius: 4px !important;
}

/* Simple table styling */
.card-content[b-pwh72u7o6h]  .mud-simple-table {
    background: var(--bg-secondary) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid var(--border-light) !important;
    margin: 1rem 0;
}

.dark-mode .card-content[b-pwh72u7o6h]  .mud-simple-table {
    background: rgba(15, 23, 42, 0.3) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

.card-content[b-pwh72u7o6h]  .mud-simple-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.card-content[b-pwh72u7o6h]  .mud-simple-table tr:last-child td {
    border-bottom: none;
}

.dark-mode .card-content[b-pwh72u7o6h]  .mud-simple-table td {
    border-bottom-color: rgba(148, 163, 184, 0.1);
}

/* Expansion panels */
.card-content[b-pwh72u7o6h]  .mud-expand-panel {
    background: var(--bg-secondary) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-light) !important;
    margin-top: 1rem;
}

.dark-mode .card-content[b-pwh72u7o6h]  .mud-expand-panel {
    background: rgba(15, 23, 42, 0.3) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

/* Switch styling */
.card-content[b-pwh72u7o6h]  .mud-switch {
    margin-bottom: 0.5rem;
}

/* /Pages/Admin/Invoices.razor.rz.scp.css */
/* Invoices Page - Premium FinTech Design */

.invoices-page[b-v7yw55cdsi] {
    padding: 1.5rem;
    min-height: 100vh;
}

/* Light Mode */
.light-mode[b-v7yw55cdsi] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Dark Mode */
.dark-mode[b-v7yw55cdsi] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Page Header */
.page-header[b-v7yw55cdsi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.header-content[b-v7yw55cdsi] {
    flex: 1;
}

.page-title[b-v7yw55cdsi] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.025em;
}

.page-subtitle[b-v7yw55cdsi] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Loading */
.loading-container[b-v7yw55cdsi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    color: var(--text-secondary);
}

/* Stats Grid */
.stats-grid[b-v7yw55cdsi] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .stats-grid[b-v7yw55cdsi] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid[b-v7yw55cdsi] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Stat Card */
.stat-card-neo[b-v7yw55cdsi] {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.125rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.dark-mode .stat-card-neo[b-v7yw55cdsi] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .stat-card-neo[b-v7yw55cdsi] {
    box-shadow: var(--shadow-sm);
}

.stat-card-neo.clickable[b-v7yw55cdsi] {
    cursor: pointer;
    user-select: none;
}

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

.dark-mode .stat-card-neo.clickable:hover[b-v7yw55cdsi] {
    border-color: rgba(148, 163, 184, 0.2);
}

.light-mode .stat-card-neo.clickable:hover[b-v7yw55cdsi] {
    border-color: #10B981;
}

.stat-card-neo.active[b-v7yw55cdsi] {
    border-color: transparent;
}

.dark-mode .stat-card-neo.active[b-v7yw55cdsi] {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3), var(--shadow-lg);
}

.light-mode .stat-card-neo.active[b-v7yw55cdsi] {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2), var(--shadow-md);
}

.stat-card-header[b-v7yw55cdsi] {
    margin-bottom: 0.75rem;
}

.icon-box[b-v7yw55cdsi] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.gradient-purple[b-v7yw55cdsi] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.gradient-emerald[b-v7yw55cdsi] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.gradient-amber[b-v7yw55cdsi] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.gradient-blue[b-v7yw55cdsi] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.gradient-indigo[b-v7yw55cdsi] {
    background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Fee Overview Card */
.fee-overview-card[b-v7yw55cdsi] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.dark-mode .fee-overview-card[b-v7yw55cdsi] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .fee-overview-card[b-v7yw55cdsi] {
    box-shadow: var(--shadow-sm);
}

.fee-overview-header[b-v7yw55cdsi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.fee-overview-title[b-v7yw55cdsi] {
    display: flex;
    flex-direction: column;
}

.fee-title-text[b-v7yw55cdsi] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fee-subtitle-text[b-v7yw55cdsi] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.fee-overview-grid[b-v7yw55cdsi] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.fee-col[b-v7yw55cdsi] {
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem;
}

.fee-col:first-child[b-v7yw55cdsi] {
    padding-left: 0;
}

.fee-col:last-child[b-v7yw55cdsi] {
    padding-right: 0;
}

.fee-col.divider[b-v7yw55cdsi] {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.fee-col-label[b-v7yw55cdsi] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.fee-col-value[b-v7yw55cdsi] {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.fee-col-value.gross[b-v7yw55cdsi] {
    color: var(--text-primary);
}

.fee-col-value.fees[b-v7yw55cdsi] {
    color: #f59e0b;
}

.dark-mode .fee-col-value.fees[b-v7yw55cdsi] {
    color: #fbbf24;
}

.fee-col-value.net[b-v7yw55cdsi] {
    color: #10B981;
}

.dark-mode .fee-col-value.net[b-v7yw55cdsi] {
    color: #34D399;
}

.fee-breakdown[b-v7yw55cdsi] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.375rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.stat-card-value[b-v7yw55cdsi] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.stat-card-value.revenue[b-v7yw55cdsi] {
    font-size: 1.25rem;
    color: #10B981;
}

.dark-mode .stat-card-value.revenue[b-v7yw55cdsi] {
    color: #34D399;
}

.stat-card-label[b-v7yw55cdsi] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Active Indicator */
.active-indicator[b-v7yw55cdsi] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 0 0 20px 20px;
    animation: slideIn-b-v7yw55cdsi 0.3s ease;
}

@keyframes slideIn-b-v7yw55cdsi {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.active-indicator.purple[b-v7yw55cdsi] {
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 100%);
}

.active-indicator.emerald[b-v7yw55cdsi] {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

.active-indicator.amber[b-v7yw55cdsi] {
    background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
}

.active-indicator.blue[b-v7yw55cdsi] {
    background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
}

/* Search Container */
.search-container[b-v7yw55cdsi] {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.search-input-wrapper[b-v7yw55cdsi] {
    max-width: 400px;
    flex: 1;
    min-width: 280px;
}

.coupon-filter-wrapper[b-v7yw55cdsi] {
    max-width: 300px;
    min-width: 250px;
}

.search-input[b-v7yw55cdsi] {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.dark-mode .search-input[b-v7yw55cdsi] {
    background: rgba(30, 41, 59, 0.8);
}

.search-input:focus[b-v7yw55cdsi] {
    outline: none;
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Coupon Filter */
.coupon-filter-select[b-v7yw55cdsi]  .mud-input-root {
    border-radius: 12px;
}

.coupon-filter-select[b-v7yw55cdsi]  .mud-input-control {
    font-size: 0.95rem;
}

.coupon-filter-select[b-v7yw55cdsi]  .mud-input {
    min-height: 48px !important;
    padding: 0 !important;
}

.coupon-filter-select[b-v7yw55cdsi]  .mud-select {
    padding: 0.875rem 1rem;
    min-height: 48px;
}

.coupon-filter-select[b-v7yw55cdsi]  .mud-input-slot {
    padding: 0.875rem 1rem;
}

@media (max-width: 768px) {
    .search-container[b-v7yw55cdsi] {
        flex-direction: column;
    }

    .search-input-wrapper[b-v7yw55cdsi],
    .coupon-filter-wrapper[b-v7yw55cdsi] {
        max-width: 100%;
        width: 100%;
    }
}

.search-input[b-v7yw55cdsi]::placeholder {
    color: var(--text-muted);
}

/* Empty State */
.empty-state[b-v7yw55cdsi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.dark-mode .empty-state[b-v7yw55cdsi] {
    box-shadow: var(--shadow-md);
}

.empty-icon[b-v7yw55cdsi] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.empty-icon.secondary[b-v7yw55cdsi] {
    background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
}

.empty-icon[b-v7yw55cdsi]  .mud-icon-root {
    font-size: 2.5rem;
}

.empty-state h3[b-v7yw55cdsi] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-v7yw55cdsi] {
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}

.btn-secondary[b-v7yw55cdsi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

/* Table Container */
.table-container[b-v7yw55cdsi] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.dark-mode .table-container[b-v7yw55cdsi] {
    box-shadow: var(--shadow-md);
}

.light-mode .table-container[b-v7yw55cdsi] {
    box-shadow: var(--shadow-sm);
}

/* Table Styling */
.table-container[b-v7yw55cdsi]  .mud-table {
    background: transparent !important;
}

.table-container[b-v7yw55cdsi]  .mud-table-container {
    background: transparent !important;
}

.table-container[b-v7yw55cdsi]  .mud-table-head {
    background: transparent !important;
}

.dark-mode .table-container[b-v7yw55cdsi]  .mud-table-head .mud-table-cell {
    background: rgba(15, 23, 42, 0.5) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1rem 1rem !important;
}

.light-mode .table-container[b-v7yw55cdsi]  .mud-table-head .mud-table-cell {
    background: #f8fafc !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1rem 1rem !important;
}

.table-container[b-v7yw55cdsi]  .mud-table-body .mud-table-row {
    background: transparent !important;
    transition: background 0.2s ease;
}

.dark-mode .table-container[b-v7yw55cdsi]  .mud-table-body .mud-table-row:hover {
    background: rgba(148, 163, 184, 0.05) !important;
}

.light-mode .table-container[b-v7yw55cdsi]  .mud-table-body .mud-table-row:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

.table-container[b-v7yw55cdsi]  .mud-table-cell {
    border-bottom: 1px solid var(--border-light) !important;
    padding: 1rem 1rem !important;
    color: var(--text-primary);
    vertical-align: middle;
}

.dark-mode .table-container[b-v7yw55cdsi]  .mud-table-cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Table Cell Content */
.invoice-number[b-v7yw55cdsi] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #8B5CF6;
}

.dark-mode .invoice-number[b-v7yw55cdsi] {
    color: #A78BFA;
}

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

.amount[b-v7yw55cdsi] {
    font-weight: 600;
    color: var(--text-primary);
}

.fees[b-v7yw55cdsi] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.fee-tooltip[b-v7yw55cdsi] {
    font-size: 0.75rem;
    line-height: 1.5;
}

.net-amount[b-v7yw55cdsi] {
    font-weight: 600;
    color: #10B981;
}

.dark-mode .net-amount[b-v7yw55cdsi] {
    color: #34D399;
}

.date-text[b-v7yw55cdsi] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Status Badges */
.status-badge[b-v7yw55cdsi] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.paid[b-v7yw55cdsi] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.refunded[b-v7yw55cdsi] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge.failed[b-v7yw55cdsi] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(248, 113, 113, 0.1) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge.pending[b-v7yw55cdsi] {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-secondary);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Sync Status */
.sync-status[b-v7yw55cdsi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.sync-status.synced[b-v7yw55cdsi] {
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
}

.sync-status.failed[b-v7yw55cdsi] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.sync-status.pending[b-v7yw55cdsi] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.sync-status.not-configured[b-v7yw55cdsi] {
    color: var(--text-muted);
    background: rgba(100, 116, 139, 0.1);
}

/* Refund Button */
.btn-refund[b-v7yw55cdsi] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refund:hover[b-v7yw55cdsi] {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

.refunded-date[b-v7yw55cdsi] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Pagination Info */
.pagination-info[b-v7yw55cdsi] {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Responsive - Tablet/Medium screens */
@media (max-width: 1024px) {
    .stat-card-neo[b-v7yw55cdsi] {
        padding: 0.875rem;
    }

    .stat-card-value[b-v7yw55cdsi] {
        font-size: 1.375rem;
    }

    .stat-card-label[b-v7yw55cdsi] {
        font-size: 0.75rem;
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .fee-overview-card[b-v7yw55cdsi] {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .fee-col-value[b-v7yw55cdsi] {
        font-size: 1.125rem;
    }

    .fee-col[b-v7yw55cdsi] {
        padding: 0 0.75rem;
    }

    .invoices-page[b-v7yw55cdsi] {
        padding: 0.75rem;
    }

    .page-header[b-v7yw55cdsi] {
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

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

    .page-subtitle[b-v7yw55cdsi] {
        font-size: 0.75rem;
    }

    .stats-grid[b-v7yw55cdsi] {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .stat-card-neo[b-v7yw55cdsi] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .stat-card-value[b-v7yw55cdsi] {
        font-size: 1.125rem;
    }

    .stat-card-value.revenue[b-v7yw55cdsi] {
        font-size: 1rem;
    }

    .stat-card-label[b-v7yw55cdsi] {
        font-size: 0.6875rem;
    }

    .icon-box[b-v7yw55cdsi] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .search-input-wrapper[b-v7yw55cdsi] {
        max-width: 100%;
    }

    .search-input[b-v7yw55cdsi] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .search-container[b-v7yw55cdsi] {
        margin-bottom: 0.75rem;
    }

    .table-container[b-v7yw55cdsi] {
        border-radius: 10px;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-cell {
        padding: 0.5rem 0.5rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .fee-overview-card[b-v7yw55cdsi] {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        border-radius: 10px;
    }

    .fee-overview-header[b-v7yw55cdsi] {
        margin-bottom: 0.75rem;
    }

    .fee-overview-header .icon-box[b-v7yw55cdsi] {
        display: none;
    }

    .fee-overview-grid[b-v7yw55cdsi] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .fee-col[b-v7yw55cdsi] {
        padding: 0 !important;
    }

    .fee-col.divider[b-v7yw55cdsi] {
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 0.75rem 0 !important;
    }

    .fee-col-value[b-v7yw55cdsi] {
        font-size: 1.25rem;
    }

    .fee-breakdown[b-v7yw55cdsi] {
        flex-direction: column;
        gap: 0.125rem;
    }

    .invoices-page[b-v7yw55cdsi] {
        padding: 0.5rem;
    }

    .page-header[b-v7yw55cdsi] {
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

    .page-title[b-v7yw55cdsi] {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }

    .page-subtitle[b-v7yw55cdsi] {
        font-size: 0.75rem;
    }

    .loading-container[b-v7yw55cdsi] {
        padding: 2rem;
    }

    .stats-grid[b-v7yw55cdsi] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .stat-card-neo[b-v7yw55cdsi] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .stat-card-header[b-v7yw55cdsi] {
        margin-bottom: 0.5rem;
    }

    /* Hide icon boxes on mobile */
    .stat-card-header .icon-box[b-v7yw55cdsi] {
        display: none;
    }

    .stat-card-value[b-v7yw55cdsi] {
        font-size: 1.5rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-value.revenue[b-v7yw55cdsi] {
        font-size: 1.25rem;
    }

    .stat-card-label[b-v7yw55cdsi] {
        font-size: 0.6875rem;
        font-weight: 500;
    }

    .search-container[b-v7yw55cdsi] {
        margin-bottom: 0.75rem;
    }

    .search-input[b-v7yw55cdsi] {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
        border-radius: 10px;
    }

    .empty-state[b-v7yw55cdsi] {
        padding: 2rem 1rem;
        border-radius: 14px;
    }

    .empty-icon[b-v7yw55cdsi] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin-bottom: 1rem;
    }

    .empty-icon[b-v7yw55cdsi]  .mud-icon-root {
        font-size: 1.75rem;
    }

    .empty-state h3[b-v7yw55cdsi] {
        font-size: 1rem;
    }

    .empty-state p[b-v7yw55cdsi] {
        font-size: 0.8125rem;
        margin-bottom: 1rem;
    }

    .btn-secondary[b-v7yw55cdsi] {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        border-radius: 10px;
    }

    .table-container[b-v7yw55cdsi] {
        border-radius: 12px;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Force horizontal scroll on table - disable responsive card mode */
    .table-container[b-v7yw55cdsi]  .mud-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-container[b-v7yw55cdsi]  .mud-table,
    .table-container[b-v7yw55cdsi]  .mud-table-root {
        min-width: 650px !important;
    }

    /* Disable MudBlazor responsive card mode */
    .table-container[b-v7yw55cdsi]  .mud-table-cell[data-label]::before {
        display: none !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-cell {
        display: table-cell !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-row {
        display: table-row !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-head {
        display: table-header-group !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-body {
        display: table-row-group !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-head .mud-table-cell {
        padding: 0.5rem !important;
        font-size: 0.625rem !important;
        display: table-cell !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-cell {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .invoice-number[b-v7yw55cdsi] {
        font-size: 0.75rem;
    }

    .customer-name[b-v7yw55cdsi] {
        font-size: 0.75rem;
    }

    .amount[b-v7yw55cdsi] {
        font-size: 0.75rem;
    }

    .fees[b-v7yw55cdsi] {
        font-size: 0.6875rem;
    }

    .net-amount[b-v7yw55cdsi] {
        font-size: 0.75rem;
    }

    .date-text[b-v7yw55cdsi] {
        font-size: 0.6875rem;
    }

    .status-badge[b-v7yw55cdsi] {
        padding: 0.125rem 0.5rem;
        font-size: 0.625rem;
    }

    .sync-status[b-v7yw55cdsi] {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }

    .sync-status[b-v7yw55cdsi]  .mud-icon-root {
        font-size: 0.875rem;
    }

    .btn-refund[b-v7yw55cdsi] {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
        gap: 0.25rem;
    }

    .refunded-date[b-v7yw55cdsi] {
        font-size: 0.625rem;
    }

    .pagination-info[b-v7yw55cdsi] {
        padding: 0.75rem;
        font-size: 0.75rem;
    }

    /* Pagination compact */
    .table-container[b-v7yw55cdsi]  .mud-table-pagination {
        padding: 0.5rem !important;
        font-size: 0.6875rem !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-pagination .mud-icon-button {
        padding: 4px !important;
    }
}

/* Responsive - Extra Small */
@media (max-width: 480px) {
    .invoices-page[b-v7yw55cdsi] {
        padding: 0.25rem;
    }

    .page-title[b-v7yw55cdsi] {
        font-size: 1rem;
    }

    .page-subtitle[b-v7yw55cdsi] {
        font-size: 0.6875rem;
    }

    .stats-grid[b-v7yw55cdsi] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    .stat-card-neo[b-v7yw55cdsi] {
        padding: 0.625rem;
        border-radius: 8px;
    }

    .stat-card-header[b-v7yw55cdsi] {
        margin-bottom: 0.25rem;
    }

    /* Hide icon boxes on extra small screens */
    .stat-card-header .icon-box[b-v7yw55cdsi] {
        display: none;
    }

    .stat-card-value[b-v7yw55cdsi] {
        font-size: 1.25rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-value.revenue[b-v7yw55cdsi] {
        font-size: 1.125rem;
    }

    .stat-card-label[b-v7yw55cdsi] {
        font-size: 0.5625rem;
        font-weight: 500;
    }

    .search-input[b-v7yw55cdsi] {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .table-container[b-v7yw55cdsi] {
        border-radius: 10px;
    }

    .table-container[b-v7yw55cdsi]  .mud-table {
        min-width: 550px !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-head .mud-table-cell {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.5625rem !important;
    }

    .table-container[b-v7yw55cdsi]  .mud-table-cell {
        padding: 0.375rem !important;
        font-size: 0.6875rem !important;
    }

    .invoice-number[b-v7yw55cdsi] {
        font-size: 0.6875rem;
    }

    .customer-name[b-v7yw55cdsi],
    .amount[b-v7yw55cdsi],
    .net-amount[b-v7yw55cdsi] {
        font-size: 0.6875rem;
    }

    .fees[b-v7yw55cdsi] {
        font-size: 0.625rem;
    }

    .date-text[b-v7yw55cdsi] {
        font-size: 0.625rem;
    }

    .status-badge[b-v7yw55cdsi] {
        padding: 0.0625rem 0.375rem;
        font-size: 0.5625rem;
    }

    .sync-status[b-v7yw55cdsi] {
        width: 20px;
        height: 20px;
    }

    .btn-refund[b-v7yw55cdsi] {
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
    }

    .empty-state[b-v7yw55cdsi] {
        padding: 1.5rem 0.75rem;
    }

    .empty-icon[b-v7yw55cdsi] {
        width: 48px;
        height: 48px;
    }

    .empty-state h3[b-v7yw55cdsi] {
        font-size: 0.9375rem;
    }

    .empty-state p[b-v7yw55cdsi] {
        font-size: 0.75rem;
    }
}
/* /Pages/Admin/Payouts.razor.rz.scp.css */
/* Payouts Page - Mobile-First Responsive Design */

/* Page header */
[b-okbw61fidr] .mud-text-h4 {
    font-size: 1.5rem;
}

/* Grid responsive */
[b-okbw61fidr] .mud-grid {
    margin: 0 !important;
}

[b-okbw61fidr] .mud-grid > .mud-item {
    padding: 0.75rem !important;
}

/* Paper sections */
[b-okbw61fidr] .mud-paper.pa-6 {
    padding: 1.5rem !important;
}

/* Bank account details */
[b-okbw61fidr] .mud-stack[row][justify="SpaceBetween"] {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Radio group */
[b-okbw61fidr] .mud-radio-group {
    gap: 0.75rem;
}

[b-okbw61fidr] .mud-radio {
    padding: 0.5rem 0;
}

/* Table responsive */
[b-okbw61fidr] .mud-table {
    font-size: 0.875rem;
}

[b-okbw61fidr] .mud-table-cell {
    padding: 0.75rem !important;
}

/* Medium screens */
@media (max-width: 960px) {
    [b-okbw61fidr] .mud-text-h4 {
        font-size: 1.25rem;
    }

    [b-okbw61fidr] .mud-text-h5 {
        font-size: 1.125rem;
    }

    [b-okbw61fidr] .mud-text-h6 {
        font-size: 1rem;
    }

    [b-okbw61fidr] .mud-paper.pa-6 {
        padding: 1.25rem !important;
    }

    /* Full width columns */
    [b-okbw61fidr] .mud-grid > .mud-item-md-6 {
        max-width: 100%;
        flex-basis: 100%;
    }
}

/* Small screens */
@media (max-width: 600px) {
    [b-okbw61fidr] .mud-text-h4 {
        font-size: 1.125rem;
    }

    [b-okbw61fidr] .mud-text-h5 {
        font-size: 1rem;
    }

    [b-okbw61fidr] .mud-text-h6 {
        font-size: 0.95rem;
    }

    [b-okbw61fidr] .mud-paper.pa-6 {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    [b-okbw61fidr] .mud-grid > .mud-item {
        padding: 0.5rem !important;
    }

    /* Bank account - stack labels/values */
    [b-okbw61fidr] .mud-stack[row][justify="SpaceBetween"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.25rem;
    }

    /* Add full width button */
    [b-okbw61fidr] .mud-button[variant="Outlined"][fullwidth] {
        margin-top: 1rem;
    }

    /* Empty state icon */
    [b-okbw61fidr] .mud-icon[style*="font-size: 4rem"] {
        font-size: 3rem !important;
    }

    /* Radio options - more compact */
    [b-okbw61fidr] .mud-radio-group {
        gap: 0.5rem;
    }

    /* Table horizontal scroll */
    [b-okbw61fidr] .mud-table-container {
        overflow-x: auto;
    }

    [b-okbw61fidr] .mud-table {
        min-width: 500px;
    }

    /* Payout ID truncation */
    [b-okbw61fidr] .mud-table-cell[data-label*="Payout"] .mud-text-body2 {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Summary stats - vertical layout */
    [b-okbw61fidr] .mud-paper.pa-6.mt-4 .mud-stack[row] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* /Pages/Admin/Products.razor.rz.scp.css */
/* Products Page - Premium FinTech Styling */

/* ==================== Container ==================== */
.products-container[b-mutyhgzdbq] {
    min-height: 100vh;
    padding: 0;
}

.products-container.dark-mode[b-mutyhgzdbq] {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    color: #F8FAFC;
}

.products-container.light-mode[b-mutyhgzdbq] {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 50%, #F8FAFC 100%);
    color: #0F172A;
}

/* ==================== Page Header ==================== */
.page-header[b-mutyhgzdbq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

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

.page-title[b-mutyhgzdbq] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.025em;
}

.dark-mode .page-title[b-mutyhgzdbq] {
    color: #F8FAFC;
}

.light-mode .page-title[b-mutyhgzdbq] {
    color: #0F172A;
}

.page-subtitle[b-mutyhgzdbq] {
    font-size: 0.875rem;
    margin: 0;
    opacity: 0.7;
}

.dark-mode .page-subtitle[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .page-subtitle[b-mutyhgzdbq] {
    color: #64748B;
}

/* ==================== Icon Boxes ==================== */
.icon-box[b-mutyhgzdbq] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box.large[b-mutyhgzdbq] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.icon-box.small[b-mutyhgzdbq] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.icon-box[b-mutyhgzdbq]  .mud-icon-root {
    color: white !important;
    font-size: 1.25rem;
}

.icon-box.large[b-mutyhgzdbq]  .mud-icon-root {
    font-size: 1.375rem;
}

.icon-box.small[b-mutyhgzdbq]  .mud-icon-root {
    font-size: 1rem;
}

.gradient-emerald[b-mutyhgzdbq] {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.gradient-blue[b-mutyhgzdbq] {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.gradient-purple[b-mutyhgzdbq] {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}

.gradient-amber[b-mutyhgzdbq] {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

.gradient-rose[b-mutyhgzdbq] {
    background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.3);
}

/* ==================== Buttons ==================== */
.btn-primary[b-mutyhgzdbq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover:not(:disabled)[b-mutyhgzdbq] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

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

.btn-primary[b-mutyhgzdbq]  .mud-icon-root {
    color: white !important;
    font-size: 1.25rem;
}

.btn-secondary[b-mutyhgzdbq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.dark-mode .btn-secondary[b-mutyhgzdbq] {
    color: #FCD34D;
}

.light-mode .btn-secondary[b-mutyhgzdbq] {
    color: #D97706;
}

.btn-secondary:hover[b-mutyhgzdbq] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.6);
}

.btn-icon[b-mutyhgzdbq] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dark-mode .btn-icon[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .btn-icon[b-mutyhgzdbq] {
    color: #64748B;
}

.btn-icon:hover:not(:disabled)[b-mutyhgzdbq] {
    transform: scale(1.05);
}

.dark-mode .btn-icon:hover:not(:disabled)[b-mutyhgzdbq] {
    background: rgba(148, 163, 184, 0.1);
    color: #F8FAFC;
}

.light-mode .btn-icon:hover:not(:disabled)[b-mutyhgzdbq] {
    background: rgba(100, 116, 139, 0.1);
    color: #0F172A;
}

.btn-icon.danger:hover:not(:disabled)[b-mutyhgzdbq] {
    background: rgba(244, 63, 94, 0.1);
    color: #F43F5E;
}

.btn-icon:disabled[b-mutyhgzdbq] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon[b-mutyhgzdbq]  .mud-icon-root {
    font-size: 1.25rem;
}

.btn-copy[b-mutyhgzdbq] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #10B981;
}

.btn-copy:hover[b-mutyhgzdbq] {
    background: rgba(16, 185, 129, 0.2);
}

.btn-copy[b-mutyhgzdbq]  .mud-icon-root {
    font-size: 1rem;
}

/* ==================== Cards ==================== */
.card-neo[b-mutyhgzdbq] {
    border-radius: 14px;
    padding: 1.125rem;
    transition: all 0.3s ease;
}

.dark-mode .card-neo[b-mutyhgzdbq] {
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(148, 163, 184, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.light-mode .card-neo[b-mutyhgzdbq] {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

/* ==================== Stats Grid ==================== */
.stats-grid[b-mutyhgzdbq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .stats-grid[b-mutyhgzdbq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid[b-mutyhgzdbq] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

.stat-card-neo[b-mutyhgzdbq] {
    border-radius: 14px;
    padding: 1.125rem;
    position: relative;
    overflow: hidden;
}

.dark-mode .stat-card-neo[b-mutyhgzdbq] {
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(148, 163, 184, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.light-mode .stat-card-neo[b-mutyhgzdbq] {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Clickable Stat Cards */
.stat-card-neo.clickable[b-mutyhgzdbq] {
    cursor: pointer;
    user-select: none;
}

.stat-card-neo.clickable:hover[b-mutyhgzdbq] {
    transform: translateY(-4px);
}

.stat-card-neo.clickable.active[b-mutyhgzdbq] {
    transform: translateY(-2px);
}

.dark-mode .stat-card-neo.clickable:hover[b-mutyhgzdbq],
.dark-mode .stat-card-neo.clickable.active[b-mutyhgzdbq] {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(16, 185, 129, 0.1);
}

.light-mode .stat-card-neo.clickable:hover[b-mutyhgzdbq],
.light-mode .stat-card-neo.clickable.active[b-mutyhgzdbq] {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12),
                0 0 30px rgba(16, 185, 129, 0.08);
}

/* Active Indicator */
.active-indicator[b-mutyhgzdbq] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 0 0 20px 20px;
    animation: slideIn-b-mutyhgzdbq 0.3s ease;
}

.active-indicator.emerald[b-mutyhgzdbq] {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

.active-indicator.blue[b-mutyhgzdbq] {
    background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
}

.active-indicator.purple[b-mutyhgzdbq] {
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 100%);
}

.active-indicator.rose[b-mutyhgzdbq] {
    background: linear-gradient(90deg, #F43F5E 0%, #FB7185 100%);
}

@keyframes slideIn-b-mutyhgzdbq {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.stat-card-header[b-mutyhgzdbq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.stat-card-value[b-mutyhgzdbq] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.375rem;
}

.dark-mode .stat-card-value[b-mutyhgzdbq] {
    color: #F8FAFC;
}

.light-mode .stat-card-value[b-mutyhgzdbq] {
    color: #0F172A;
}

.stat-card-label[b-mutyhgzdbq] {
    font-size: 0.875rem;
    font-weight: 500;
}

.dark-mode .stat-card-label[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .stat-card-label[b-mutyhgzdbq] {
    color: #64748B;
}

.stat-badge[b-mutyhgzdbq] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-badge.live[b-mutyhgzdbq] {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

/* ==================== Setup Warning ==================== */
.setup-warning[b-mutyhgzdbq] {
    margin-bottom: 2rem;
}

.warning-header[b-mutyhgzdbq] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.warning-header h3[b-mutyhgzdbq] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.dark-mode .warning-header h3[b-mutyhgzdbq] {
    color: #FCD34D;
}

.light-mode .warning-header h3[b-mutyhgzdbq] {
    color: #B45309;
}

.warning-header p[b-mutyhgzdbq] {
    font-size: 0.875rem;
    margin: 0;
}

.dark-mode .warning-header p[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .warning-header p[b-mutyhgzdbq] {
    color: #64748B;
}

.setup-checklist[b-mutyhgzdbq] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.setup-item[b-mutyhgzdbq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.setup-item.connected[b-mutyhgzdbq] {
    color: #10B981;
}

.setup-item.connected[b-mutyhgzdbq]  .mud-icon-root {
    color: #10B981;
}

.setup-item.disconnected[b-mutyhgzdbq] {
    color: #F43F5E;
}

.setup-item.disconnected[b-mutyhgzdbq]  .mud-icon-root {
    color: #F43F5E;
}

/* ==================== Loading & Empty States ==================== */
.loading-state[b-mutyhgzdbq],
.empty-state[b-mutyhgzdbq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-state p[b-mutyhgzdbq],
.empty-state p[b-mutyhgzdbq] {
    margin-top: 1rem;
}

.dark-mode .loading-state p[b-mutyhgzdbq],
.dark-mode .empty-state p[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .loading-state p[b-mutyhgzdbq],
.light-mode .empty-state p[b-mutyhgzdbq] {
    color: #64748B;
}

.empty-icon[b-mutyhgzdbq] {
    margin-bottom: 1.5rem;
}

.empty-state h3[b-mutyhgzdbq] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.dark-mode .empty-state h3[b-mutyhgzdbq] {
    color: #F8FAFC;
}

.light-mode .empty-state h3[b-mutyhgzdbq] {
    color: #0F172A;
}

.empty-state .btn-primary[b-mutyhgzdbq] {
    margin-top: 1.5rem;
}

/* ==================== Products Grid ==================== */
.products-grid[b-mutyhgzdbq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 1200px) {
    .products-grid[b-mutyhgzdbq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Tablet/Medium screens */
@media (max-width: 1024px) {
    .stat-card-neo[b-mutyhgzdbq] {
        padding: 0.875rem;
    }

    .stat-card-value[b-mutyhgzdbq] {
        font-size: 1.375rem;
    }

    .stat-card-label[b-mutyhgzdbq] {
        font-size: 0.75rem;
    }

    .stats-grid[b-mutyhgzdbq] {
        gap: 0.875rem;
    }
}

@media (max-width: 768px) {
    .products-grid[b-mutyhgzdbq] {
        grid-template-columns: 1fr;
    }

    .page-header[b-mutyhgzdbq] {
        margin-bottom: 1rem;
    }

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

    .stats-grid[b-mutyhgzdbq] {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .stat-card-neo[b-mutyhgzdbq] {
        padding: 0.75rem;
    }

    .stat-card-value[b-mutyhgzdbq] {
        font-size: 1.125rem;
    }

    .stat-card-label[b-mutyhgzdbq] {
        font-size: 0.6875rem;
    }
}

/* ==================== Product Card ==================== */
.product-card[b-mutyhgzdbq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-card:hover[b-mutyhgzdbq] {
    transform: translateY(-4px);
}

.dark-mode .product-card:hover[b-mutyhgzdbq] {
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
    border-color: rgba(16, 185, 129, 0.3);
}

.light-mode .product-card:hover[b-mutyhgzdbq] {
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}

.product-card.inactive[b-mutyhgzdbq] {
    opacity: 0.6;
}

.product-header[b-mutyhgzdbq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.product-info[b-mutyhgzdbq] {
    flex: 1;
    min-width: 0;
}

.product-name[b-mutyhgzdbq] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    word-break: break-word;
}

.dark-mode .product-name[b-mutyhgzdbq] {
    color: #F8FAFC;
}

.light-mode .product-name[b-mutyhgzdbq] {
    color: #0F172A;
}

.product-description[b-mutyhgzdbq] {
    font-size: 0.8125rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark-mode .product-description[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .product-description[b-mutyhgzdbq] {
    color: #64748B;
}

.status-badge[b-mutyhgzdbq] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.active[b-mutyhgzdbq] {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.status-badge.inactive[b-mutyhgzdbq] {
    background: rgba(148, 163, 184, 0.15);
}

.dark-mode .status-badge.inactive[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .status-badge.inactive[b-mutyhgzdbq] {
    color: #64748B;
}

/* ==================== Product Price ==================== */
.product-price[b-mutyhgzdbq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.dark-mode .product-price[b-mutyhgzdbq] {
    border-color: rgba(148, 163, 184, 0.1);
}

.light-mode .product-price[b-mutyhgzdbq] {
    border-color: rgba(226, 232, 240, 0.8);
}

.price-amount[b-mutyhgzdbq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10B981;
}

.price-period[b-mutyhgzdbq] {
    font-size: 0.875rem;
}

.dark-mode .price-period[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .price-period[b-mutyhgzdbq] {
    color: #64748B;
}

/* ==================== Product Tags ==================== */
.product-tags[b-mutyhgzdbq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-tag[b-mutyhgzdbq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.product-tag[b-mutyhgzdbq]  .mud-icon-root {
    font-size: 0.875rem;
}

.product-tag.primary[b-mutyhgzdbq] {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.product-tag.primary[b-mutyhgzdbq]  .mud-icon-root {
    color: #10B981;
}

.product-tag.info[b-mutyhgzdbq] {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.product-tag.info[b-mutyhgzdbq]  .mud-icon-root {
    color: #3B82F6;
}

.product-tag.featured[b-mutyhgzdbq] {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.product-tag.featured[b-mutyhgzdbq]  .mud-icon-root {
    color: #8B5CF6;
}

.product-tag.warning[b-mutyhgzdbq] {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.product-tag.warning[b-mutyhgzdbq]  .mud-icon-root {
    color: #F59E0B;
}

.product-tag.default[b-mutyhgzdbq] {
    background: rgba(148, 163, 184, 0.1);
}

.dark-mode .product-tag.default[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .product-tag.default[b-mutyhgzdbq] {
    color: #64748B;
}

.dark-mode .product-tag.default[b-mutyhgzdbq]  .mud-icon-root {
    color: #94A3B8;
}

.light-mode .product-tag.default[b-mutyhgzdbq]  .mud-icon-root {
    color: #64748B;
}

.product-tag.subscribers[b-mutyhgzdbq] {
    background: rgba(244, 63, 94, 0.1);
    color: #F43F5E;
}

.product-tag.subscribers[b-mutyhgzdbq]  .mud-icon-root {
    color: #F43F5E;
}

.product-tag.hidden[b-mutyhgzdbq] {
    background: #94A3B8;
    color: white;
}

.product-tag.hidden[b-mutyhgzdbq]  .mud-icon-root {
    color: white;
}

/* ==================== Product Actions ==================== */
.product-actions[b-mutyhgzdbq] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

/* ==================== Product Links ==================== */
.product-links[b-mutyhgzdbq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid;
}

.dark-mode .product-links[b-mutyhgzdbq] {
    border-color: rgba(148, 163, 184, 0.1);
}

.light-mode .product-links[b-mutyhgzdbq] {
    border-color: rgba(226, 232, 240, 0.8);
}

.link-field label[b-mutyhgzdbq] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.dark-mode .link-field label[b-mutyhgzdbq] {
    color: #94A3B8;
}

.light-mode .link-field label[b-mutyhgzdbq] {
    color: #64748B;
}

.link-input[b-mutyhgzdbq] {
    display: flex;
    gap: 0.5rem;
}

.link-input input[b-mutyhgzdbq] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid;
    font-size: 0.8125rem;
    font-family: 'Monaco', 'Menlo', monospace;
    min-width: 0;
}

.dark-mode .link-input input[b-mutyhgzdbq] {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(148, 163, 184, 0.2);
    color: #F8FAFC;
}

.light-mode .link-input input[b-mutyhgzdbq] {
    background: rgba(248, 250, 252, 0.8);
    border-color: rgba(226, 232, 240, 0.8);
    color: #0F172A;
}

/* ==================== Dialog Styling ==================== */
.dialog-header[b-mutyhgzdbq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dialog-header span[b-mutyhgzdbq] {
    font-size: 1.125rem;
    font-weight: 600;
}

[b-mutyhgzdbq] .mud-dialog {
    border-radius: 20px !important;
}

[b-mutyhgzdbq] .mud-dialog-content {
    padding: 1.5rem !important;
}

[b-mutyhgzdbq] .mud-dialog-actions {
    padding: 1rem 1.5rem !important;
}

/* ==================== Responsive - Tablet ==================== */
@media (max-width: 768px) {
    .page-header[b-mutyhgzdbq] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        gap: 0.75rem;
    }

    .header-content[b-mutyhgzdbq] {
        gap: 0.75rem;
    }

    .page-title[b-mutyhgzdbq] {
        font-size: 1.375rem;
    }

    .page-subtitle[b-mutyhgzdbq] {
        font-size: 0.8125rem;
    }

    .icon-box[b-mutyhgzdbq] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .icon-box[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 1.25rem;
    }

    .stats-grid[b-mutyhgzdbq] {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-card-neo[b-mutyhgzdbq] {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .stat-card-value[b-mutyhgzdbq] {
        font-size: 1.875rem;
    }

    .btn-primary[b-mutyhgzdbq] {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .card-neo[b-mutyhgzdbq] {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .product-card[b-mutyhgzdbq] {
        gap: 0.75rem;
    }

    .setup-checklist[b-mutyhgzdbq] {
        gap: 1rem;
    }
}

/* ==================== Responsive - Mobile ==================== */
@media (max-width: 600px) {
    .products-container[b-mutyhgzdbq] {
        padding: 0;
    }

    .page-header[b-mutyhgzdbq] {
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

    .header-content[b-mutyhgzdbq] {
        gap: 0.5rem;
    }

    .page-title[b-mutyhgzdbq] {
        font-size: 1.125rem;
    }

    .page-subtitle[b-mutyhgzdbq] {
        font-size: 0.75rem;
    }

    .icon-box[b-mutyhgzdbq] {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .icon-box.large[b-mutyhgzdbq] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .icon-box.small[b-mutyhgzdbq] {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .icon-box[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 1rem;
    }

    .icon-box.large[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 1.25rem;
    }

    .icon-box.small[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 0.875rem;
    }

    .stats-grid[b-mutyhgzdbq] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .stat-card-neo[b-mutyhgzdbq] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .stat-card-header[b-mutyhgzdbq] {
        margin-bottom: 0.5rem;
    }

    /* Hide icon boxes on mobile */
    .stat-card-header .icon-box[b-mutyhgzdbq] {
        display: none;
    }

    .stat-card-value[b-mutyhgzdbq] {
        font-size: 1.5rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-label[b-mutyhgzdbq] {
        font-size: 0.6875rem;
        font-weight: 500;
    }

    .stat-badge[b-mutyhgzdbq] {
        padding: 0.125rem 0.5rem;
        font-size: 0.5625rem;
    }

    .btn-primary[b-mutyhgzdbq] {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        border-radius: 10px;
    }

    .btn-primary[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 1rem;
    }

    .btn-secondary[b-mutyhgzdbq] {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .btn-icon[b-mutyhgzdbq] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .btn-icon[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 1rem;
    }

    .btn-copy[b-mutyhgzdbq] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .btn-copy[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 0.875rem;
    }

    .card-neo[b-mutyhgzdbq] {
        padding: 1rem;
        border-radius: 12px;
    }

    .products-grid[b-mutyhgzdbq] {
        gap: 0.75rem;
    }

    .product-card[b-mutyhgzdbq] {
        gap: 0.625rem;
    }

    .product-header[b-mutyhgzdbq] {
        gap: 0.625rem;
    }

    .product-name[b-mutyhgzdbq] {
        font-size: 1rem;
    }

    .product-description[b-mutyhgzdbq] {
        font-size: 0.75rem;
    }

    .status-badge[b-mutyhgzdbq] {
        padding: 0.125rem 0.5rem;
        font-size: 0.625rem;
    }

    .product-price[b-mutyhgzdbq] {
        padding: 0.75rem 0;
    }

    .price-amount[b-mutyhgzdbq] {
        font-size: 1.25rem;
    }

    .price-period[b-mutyhgzdbq] {
        font-size: 0.75rem;
    }

    .product-tags[b-mutyhgzdbq] {
        gap: 0.375rem;
    }

    .product-tag[b-mutyhgzdbq] {
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
        font-size: 0.625rem;
        gap: 0.25rem;
    }

    .product-tag[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 0.75rem;
    }

    .product-actions[b-mutyhgzdbq] {
        gap: 0.375rem;
        padding-top: 0.375rem;
    }

    .product-links[b-mutyhgzdbq] {
        gap: 0.5rem;
        padding-top: 0.75rem;
    }

    .link-field label[b-mutyhgzdbq] {
        font-size: 0.6875rem;
        margin-bottom: 0.25rem;
    }

    .link-input input[b-mutyhgzdbq] {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
        border-radius: 6px;
    }

    .setup-warning[b-mutyhgzdbq] {
        margin-bottom: 1rem;
    }

    .warning-header[b-mutyhgzdbq] {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .warning-header h3[b-mutyhgzdbq] {
        font-size: 0.9375rem;
    }

    .warning-header p[b-mutyhgzdbq] {
        font-size: 0.75rem;
    }

    .setup-checklist[b-mutyhgzdbq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .setup-item[b-mutyhgzdbq] {
        font-size: 0.8125rem;
        gap: 0.375rem;
    }

    .loading-state[b-mutyhgzdbq],
    .empty-state[b-mutyhgzdbq] {
        padding: 2rem 1rem;
    }

    .empty-icon[b-mutyhgzdbq] {
        margin-bottom: 1rem;
    }

    .empty-state h3[b-mutyhgzdbq] {
        font-size: 1rem;
    }

    .empty-state p[b-mutyhgzdbq] {
        font-size: 0.8125rem;
    }

    .empty-state .btn-primary[b-mutyhgzdbq] {
        margin-top: 1rem;
    }

    .dialog-header[b-mutyhgzdbq] {
        gap: 0.5rem;
    }

    .dialog-header span[b-mutyhgzdbq] {
        font-size: 0.9375rem;
    }

    [b-mutyhgzdbq] .mud-dialog-content {
        padding: 1rem !important;
    }

    [b-mutyhgzdbq] .mud-dialog-actions {
        padding: 0.75rem 1rem !important;
    }
}

/* ==================== Responsive - Extra Small ==================== */
@media (max-width: 480px) {
    .page-title[b-mutyhgzdbq] {
        font-size: 1rem;
    }

    .page-subtitle[b-mutyhgzdbq] {
        font-size: 0.6875rem;
    }

    .stats-grid[b-mutyhgzdbq] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    .stat-card-neo[b-mutyhgzdbq] {
        padding: 0.625rem;
        border-radius: 8px;
    }

    .stat-card-header[b-mutyhgzdbq] {
        margin-bottom: 0.25rem;
    }

    /* Hide icon boxes on extra small screens */
    .stat-card-header .icon-box[b-mutyhgzdbq] {
        display: none;
    }

    .stat-card-value[b-mutyhgzdbq] {
        font-size: 1.25rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-label[b-mutyhgzdbq] {
        font-size: 0.5625rem;
        font-weight: 500;
    }

    .stat-badge[b-mutyhgzdbq] {
        padding: 0.0625rem 0.375rem;
        font-size: 0.5rem;
    }

    .btn-primary[b-mutyhgzdbq] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .card-neo[b-mutyhgzdbq] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .product-name[b-mutyhgzdbq] {
        font-size: 0.9375rem;
    }

    .product-description[b-mutyhgzdbq] {
        font-size: 0.6875rem;
    }

    .price-amount[b-mutyhgzdbq] {
        font-size: 1.125rem;
    }

    .price-period[b-mutyhgzdbq] {
        font-size: 0.6875rem;
    }

    .product-tag[b-mutyhgzdbq] {
        padding: 0.125rem 0.375rem;
        font-size: 0.5625rem;
    }

    .product-tag[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 0.625rem;
    }

    .btn-icon[b-mutyhgzdbq] {
        width: 28px;
        height: 28px;
    }

    .btn-icon[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 0.875rem;
    }

    .link-input input[b-mutyhgzdbq] {
        padding: 0.25rem 0.375rem;
        font-size: 0.625rem;
    }

    .btn-copy[b-mutyhgzdbq] {
        width: 24px;
        height: 24px;
    }

    .btn-copy[b-mutyhgzdbq]  .mud-icon-root {
        font-size: 0.75rem;
    }
}
/* /Pages/Admin/Profile.razor.rz.scp.css */
/* Profile Page - Premium FinTech Design */

.profile-page[b-5b8o172ij9] {
    padding: 2rem;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
}

/* Light Mode */
.light-mode[b-5b8o172ij9] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
}

/* Dark Mode */
.dark-mode[b-5b8o172ij9] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
    --input-bg: rgba(15, 23, 42, 0.5);
    --input-border: rgba(148, 163, 184, 0.2);
}

/* Page Header */
.page-header[b-5b8o172ij9] {
    margin-bottom: 2rem;
}

.header-title-row[b-5b8o172ij9] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.page-title[b-5b8o172ij9] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.025em;
}

.page-subtitle[b-5b8o172ij9] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Loading State */
.loading-container[b-5b8o172ij9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--text-secondary);
}

/* Icon Box */
.icon-box[b-5b8o172ij9] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.icon-box.large[b-5b8o172ij9] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.gradient-emerald[b-5b8o172ij9] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.gradient-purple[b-5b8o172ij9] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.gradient-blue[b-5b8o172ij9] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.gradient-amber[b-5b8o172ij9] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.gradient-rose[b-5b8o172ij9] {
    background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3);
}

/* Profile Grid Layout */
.profile-grid[b-5b8o172ij9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Settings Card */
.settings-card[b-5b8o172ij9] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.dark-mode .settings-card[b-5b8o172ij9] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .settings-card[b-5b8o172ij9] {
    box-shadow: var(--shadow-sm);
}

.settings-card:hover[b-5b8o172ij9] {
    box-shadow: var(--shadow-md);
}

/* Card Header with Icon */
.card-header-icon[b-5b8o172ij9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.card-header-text h3[b-5b8o172ij9] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.card-header-text p[b-5b8o172ij9] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Card Content */
.card-content[b-5b8o172ij9] {
    padding-top: 0.5rem;
}

/* Info Grid for Account Card */
.info-grid[b-5b8o172ij9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-item[b-5b8o172ij9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-label[b-5b8o172ij9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-label[b-5b8o172ij9]  .mud-icon-root {
    font-size: 1rem;
    opacity: 0.7;
}

.info-value[b-5b8o172ij9] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-light);
}

.dark-mode .info-value[b-5b8o172ij9] {
    background: rgba(15, 23, 42, 0.5);
}

.info-value.with-badge[b-5b8o172ij9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.info-row-split[b-5b8o172ij9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Status Badges */
.status-badge[b-5b8o172ij9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.locked[b-5b8o172ij9] {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.status-badge.locked[b-5b8o172ij9]  .mud-icon-root {
    font-size: 0.875rem;
}

.role-badge[b-5b8o172ij9] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Form Groups */
.form-group[b-5b8o172ij9] {
    margin-bottom: 1rem;
}

.form-group:last-child[b-5b8o172ij9] {
    margin-bottom: 0;
}

.helper-text[b-5b8o172ij9] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

/* Password Form */
.password-form[b-5b8o172ij9] {
    max-width: 600px;
}

.password-fields[b-5b8o172ij9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Error Message */
.error-message[b-5b8o172ij9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 10px;
    color: #F43F5E;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.error-message[b-5b8o172ij9]  .mud-icon-root {
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Card Actions */
.card-actions[b-5b8o172ij9] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-light);
}

/* Button Styling */
.btn-primary[b-5b8o172ij9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover:not(:disabled)[b-5b8o172ij9] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-primary:disabled[b-5b8o172ij9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary[b-5b8o172ij9]  .mud-icon-root {
    font-size: 1.125rem;
}

.btn-secondary[b-5b8o172ij9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover:not(:disabled)[b-5b8o172ij9] {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
}

.btn-secondary:disabled[b-5b8o172ij9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-5b8o172ij9]  .mud-icon-root {
    font-size: 1.125rem;
}

/* Form Elements Override */
.profile-page[b-5b8o172ij9]  .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--input-border);
    border-radius: 12px;
}

.profile-page[b-5b8o172ij9]  .mud-input-label {
    color: var(--text-secondary);
}

.profile-page[b-5b8o172ij9]  .mud-input {
    color: var(--text-primary);
}

.profile-page[b-5b8o172ij9]  .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--text-muted);
}

.profile-page[b-5b8o172ij9]  .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #8B5CF6;
}

.dark-mode[b-5b8o172ij9]  .mud-input-outlined .mud-input-slot {
    background: var(--input-bg);
}

/* Security Card Full Width */
.security-card[b-5b8o172ij9] {
    grid-column: 1 / -1;
}

/* Responsive */
@media (max-width: 900px) {
    .profile-grid[b-5b8o172ij9] {
        grid-template-columns: 1fr;
    }

    .info-row-split[b-5b8o172ij9] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-page[b-5b8o172ij9] {
        padding: 1rem;
    }

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

    .header-title-row[b-5b8o172ij9] {
        gap: 1rem;
    }

    .icon-box.large[b-5b8o172ij9] {
        width: 48px;
        height: 48px;
    }

    .settings-card[b-5b8o172ij9] {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .card-header-icon[b-5b8o172ij9] {
        flex-wrap: wrap;
    }

    .icon-box[b-5b8o172ij9] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

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

    .btn-primary[b-5b8o172ij9],
    .btn-secondary[b-5b8o172ij9] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .profile-page[b-5b8o172ij9] {
        padding: 0.75rem;
    }

    .page-title[b-5b8o172ij9] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-5b8o172ij9] {
        font-size: 0.875rem;
    }

    .settings-card[b-5b8o172ij9] {
        padding: 1rem;
        border-radius: 14px;
    }

    .card-header-text h3[b-5b8o172ij9] {
        font-size: 1rem;
    }

    .card-header-text p[b-5b8o172ij9] {
        font-size: 0.8125rem;
    }

    .info-label[b-5b8o172ij9] {
        font-size: 0.75rem;
    }

    .info-value[b-5b8o172ij9] {
        font-size: 0.9375rem;
        padding: 0.625rem 0.875rem;
    }

    .info-value.with-badge[b-5b8o172ij9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-primary[b-5b8o172ij9],
    .btn-secondary[b-5b8o172ij9] {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }

    .helper-text[b-5b8o172ij9] {
        font-size: 0.75rem;
    }

    .loading-container[b-5b8o172ij9] {
        padding: 2rem 1rem;
    }
}
/* /Pages/Admin/Settings/Branding.razor.rz.scp.css */
/* Settings Pages - Premium FinTech Design */

.settings-page[b-7w0cjhaw2h] {
    padding: 2rem;
    min-height: 100vh;
}

/* Light Mode */
.light-mode[b-7w0cjhaw2h] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Dark Mode */
.dark-mode[b-7w0cjhaw2h] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Page Header */
.page-header[b-7w0cjhaw2h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.header-content[b-7w0cjhaw2h] {
    flex: 1;
}

.page-title[b-7w0cjhaw2h] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.page-subtitle[b-7w0cjhaw2h] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Loading State */
.loading-container[b-7w0cjhaw2h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--text-secondary);
}

/* Settings Card */
.settings-card[b-7w0cjhaw2h] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.dark-mode .settings-card[b-7w0cjhaw2h] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .settings-card[b-7w0cjhaw2h] {
    box-shadow: var(--shadow-sm);
}

.settings-card:hover[b-7w0cjhaw2h] {
    box-shadow: var(--shadow-md);
}

/* Card Header with Icon */
.card-header-icon[b-7w0cjhaw2h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.icon-box[b-7w0cjhaw2h] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.gradient-emerald[b-7w0cjhaw2h] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.gradient-purple[b-7w0cjhaw2h] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.gradient-blue[b-7w0cjhaw2h] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.gradient-amber[b-7w0cjhaw2h] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.card-header-text h3[b-7w0cjhaw2h] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.card-header-text p[b-7w0cjhaw2h] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Card Content */
.card-content[b-7w0cjhaw2h] {
    padding-top: 1rem;
}

/* Info Box */
.info-box[b-7w0cjhaw2h] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.dark-mode .info-box[b-7w0cjhaw2h] {
    background: rgba(15, 23, 42, 0.5);
}

/* Color Preview */
.color-preview[b-7w0cjhaw2h] {
    width: 80px;
    height: 56px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    transition: all 0.2s ease;
}

/* Button Styling */
.btn-primary[b-7w0cjhaw2h] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover[b-7w0cjhaw2h] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-primary:disabled[b-7w0cjhaw2h] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Form Elements Override */
.settings-card[b-7w0cjhaw2h]  .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color);
    border-radius: 12px;
}

.settings-card[b-7w0cjhaw2h]  .mud-input-label {
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .settings-page[b-7w0cjhaw2h] {
        padding: 1rem;
    }

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

    .settings-card[b-7w0cjhaw2h] {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .card-header-icon[b-7w0cjhaw2h] {
        flex-wrap: wrap;
    }

    .icon-box[b-7w0cjhaw2h] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

@media (max-width: 600px) {
    .settings-page[b-7w0cjhaw2h] {
        padding: 0.75rem;
    }

    .page-title[b-7w0cjhaw2h] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-7w0cjhaw2h] {
        font-size: 0.875rem;
    }

    .settings-card[b-7w0cjhaw2h] {
        padding: 1rem;
        border-radius: 14px;
        margin-bottom: 1rem;
    }

    .card-header-text h3[b-7w0cjhaw2h] {
        font-size: 1rem;
    }

    .card-header-text p[b-7w0cjhaw2h] {
        font-size: 0.8125rem;
    }

    .color-preview[b-7w0cjhaw2h] {
        width: 60px;
        height: 44px;
    }

    .btn-primary[b-7w0cjhaw2h] {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1rem;
    }

    .info-box[b-7w0cjhaw2h] {
        padding: 0.875rem 1rem;
    }

    .loading-container[b-7w0cjhaw2h] {
        padding: 2rem 1rem;
    }
}
/* /Pages/Admin/Settings/EmailSettings.razor.rz.scp.css */
/* Settings Pages - Premium FinTech Design */

.settings-page[b-6djqgohwyl] {
    padding: 2rem;
    min-height: 100vh;
}

/* Light Mode */
.light-mode[b-6djqgohwyl] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Dark Mode */
.dark-mode[b-6djqgohwyl] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Page Header */
.page-header[b-6djqgohwyl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.header-content[b-6djqgohwyl] {
    flex: 1;
}

.page-title[b-6djqgohwyl] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.page-subtitle[b-6djqgohwyl] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Loading State */
.loading-container[b-6djqgohwyl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--text-secondary);
}

/* Settings Card */
.settings-card[b-6djqgohwyl] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.dark-mode .settings-card[b-6djqgohwyl] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .settings-card[b-6djqgohwyl] {
    box-shadow: var(--shadow-sm);
}

.settings-card:hover[b-6djqgohwyl] {
    box-shadow: var(--shadow-md);
}

/* Card Header with Icon */
.card-header-icon[b-6djqgohwyl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.icon-box[b-6djqgohwyl] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.gradient-emerald[b-6djqgohwyl] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.gradient-purple[b-6djqgohwyl] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.card-header-text h3[b-6djqgohwyl] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.card-header-text p[b-6djqgohwyl] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Card Content */
.card-content[b-6djqgohwyl] {
    padding-top: 1rem;
}

/* Settings Row */
.settings-row[b-6djqgohwyl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}

.settings-row:last-child[b-6djqgohwyl] {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-row:first-child[b-6djqgohwyl] {
    padding-top: 0;
}

.settings-label[b-6djqgohwyl] {
    flex: 1;
}

.settings-label h4[b-6djqgohwyl] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.settings-label p[b-6djqgohwyl] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Status Badge */
.status-badge[b-6djqgohwyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.status-badge.always-on[b-6djqgohwyl] {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Info Box */
.info-box[b-6djqgohwyl] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.dark-mode .info-box[b-6djqgohwyl] {
    background: rgba(15, 23, 42, 0.5);
}

.info-box p[b-6djqgohwyl] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.info-box strong[b-6djqgohwyl] {
    color: var(--text-primary);
}

/* Form Elements Override */
.settings-card[b-6djqgohwyl]  .mud-switch {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .settings-page[b-6djqgohwyl] {
        padding: 1rem;
    }

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

    .settings-card[b-6djqgohwyl] {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .settings-row[b-6djqgohwyl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .card-header-icon[b-6djqgohwyl] {
        flex-wrap: wrap;
    }

    .icon-box[b-6djqgohwyl] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

@media (max-width: 600px) {
    .settings-page[b-6djqgohwyl] {
        padding: 0.75rem;
    }

    .page-title[b-6djqgohwyl] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-6djqgohwyl] {
        font-size: 0.875rem;
    }

    .settings-card[b-6djqgohwyl] {
        padding: 1rem;
        border-radius: 14px;
        margin-bottom: 1rem;
    }

    .card-header-text h3[b-6djqgohwyl] {
        font-size: 1rem;
    }

    .card-header-text p[b-6djqgohwyl] {
        font-size: 0.8125rem;
    }

    .settings-label h4[b-6djqgohwyl] {
        font-size: 0.875rem;
    }

    .settings-label p[b-6djqgohwyl] {
        font-size: 0.75rem;
    }

    .status-badge[b-6djqgohwyl] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .info-box[b-6djqgohwyl] {
        padding: 0.875rem 1rem;
    }

    .info-box p[b-6djqgohwyl] {
        font-size: 0.8125rem;
    }

    .loading-container[b-6djqgohwyl] {
        padding: 2rem 1rem;
    }
}
/* /Pages/Admin/Settings/Fees.razor.rz.scp.css */
/* Settings Pages - Premium FinTech Design */

.settings-page[b-pjaankptt1] {
    padding: 2rem;
    min-height: 100vh;
}

/* Light Mode */
.light-mode[b-pjaankptt1] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Dark Mode */
.dark-mode[b-pjaankptt1] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Page Header */
.page-header[b-pjaankptt1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.header-content[b-pjaankptt1] {
    flex: 1;
}

.page-title[b-pjaankptt1] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.page-subtitle[b-pjaankptt1] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Loading State */
.loading-container[b-pjaankptt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--text-secondary);
}

/* Settings Card */
.settings-card[b-pjaankptt1] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.dark-mode .settings-card[b-pjaankptt1] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .settings-card[b-pjaankptt1] {
    box-shadow: var(--shadow-sm);
}

.settings-card:hover[b-pjaankptt1] {
    box-shadow: var(--shadow-md);
}

/* Card Header with Icon */
.card-header-icon[b-pjaankptt1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.icon-box[b-pjaankptt1] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.gradient-emerald[b-pjaankptt1] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.gradient-blue[b-pjaankptt1] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.card-header-text h3[b-pjaankptt1] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.card-header-text p[b-pjaankptt1] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Card Content */
.card-content[b-pjaankptt1] {
    padding-top: 1rem;
}

/* Fee Display */
.fee-card[b-pjaankptt1] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 1.25rem;
}

.dark-mode .fee-card[b-pjaankptt1] {
    background: rgba(15, 23, 42, 0.5);
}

.fee-row[b-pjaankptt1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.fee-row:not(:last-child)[b-pjaankptt1] {
    border-bottom: 1px solid var(--border-light);
}

.fee-label[b-pjaankptt1] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.fee-value[b-pjaankptt1] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fee-value.negative[b-pjaankptt1] {
    color: #EF4444;
}

.fee-chip[b-pjaankptt1] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.fee-chip.primary[b-pjaankptt1] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.fee-chip.secondary[b-pjaankptt1] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.fee-chip.info[b-pjaankptt1] {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Info Box */
.info-box[b-pjaankptt1] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.dark-mode .info-box[b-pjaankptt1] {
    background: rgba(15, 23, 42, 0.5);
}

.info-box p[b-pjaankptt1] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.info-box strong[b-pjaankptt1] {
    color: var(--text-primary);
}

/* Result Box */
.result-box[b-pjaankptt1] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.result-box .label[b-pjaankptt1] {
    font-size: 0.875rem;
    color: #10B981;
    margin-bottom: 0.25rem;
}

.result-box .value[b-pjaankptt1] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10B981;
}

/* Grid Layout */
.settings-grid[b-pjaankptt1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .settings-grid[b-pjaankptt1] {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .settings-page[b-pjaankptt1] {
        padding: 1rem;
    }

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

    .settings-card[b-pjaankptt1] {
        padding: 1.25rem;
        border-radius: 16px;
    }
}
/* /Pages/Admin/Settings/General.razor.rz.scp.css */
/* Settings Pages - Premium FinTech Design */

.settings-page[b-xmiuy7jhmy] {
    padding: 2rem;
    min-height: 100vh;
}

/* Light Mode */
.light-mode[b-xmiuy7jhmy] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Dark Mode */
.dark-mode[b-xmiuy7jhmy] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Page Header */
.page-header[b-xmiuy7jhmy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.header-content[b-xmiuy7jhmy] {
    flex: 1;
}

.page-title[b-xmiuy7jhmy] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.page-subtitle[b-xmiuy7jhmy] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Loading State */
.loading-container[b-xmiuy7jhmy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--text-secondary);
}

/* Settings Card */
.settings-card[b-xmiuy7jhmy] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.dark-mode .settings-card[b-xmiuy7jhmy] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light-mode .settings-card[b-xmiuy7jhmy] {
    box-shadow: var(--shadow-sm);
}

.settings-card:hover[b-xmiuy7jhmy] {
    box-shadow: var(--shadow-md);
}

/* Card Header with Icon */
.card-header-icon[b-xmiuy7jhmy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.icon-box[b-xmiuy7jhmy] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.gradient-emerald[b-xmiuy7jhmy] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.gradient-purple[b-xmiuy7jhmy] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.gradient-blue[b-xmiuy7jhmy] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.gradient-amber[b-xmiuy7jhmy] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.gradient-rose[b-xmiuy7jhmy] {
    background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3);
}

.card-header-text h3[b-xmiuy7jhmy] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.card-header-text p[b-xmiuy7jhmy] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Card Content */
.card-content[b-xmiuy7jhmy] {
    padding-top: 1rem;
}

/* Settings Row */
.settings-row[b-xmiuy7jhmy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}

.settings-row:last-child[b-xmiuy7jhmy] {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-row:first-child[b-xmiuy7jhmy] {
    padding-top: 0;
}

.settings-label[b-xmiuy7jhmy] {
    flex: 1;
}

.settings-label h4[b-xmiuy7jhmy] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.settings-label p[b-xmiuy7jhmy] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Status Badge */
.status-badge[b-xmiuy7jhmy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.status-badge.connected[b-xmiuy7jhmy] {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge.disconnected[b-xmiuy7jhmy] {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.status-badge.always-on[b-xmiuy7jhmy] {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Info Box */
.info-box[b-xmiuy7jhmy] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.dark-mode .info-box[b-xmiuy7jhmy] {
    background: rgba(15, 23, 42, 0.5);
}

.info-box p[b-xmiuy7jhmy] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.info-box strong[b-xmiuy7jhmy] {
    color: var(--text-primary);
}

/* Button Styling */
.btn-primary[b-xmiuy7jhmy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover[b-xmiuy7jhmy] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

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

.btn-secondary[b-xmiuy7jhmy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

/* Form Elements Override */
.settings-card[b-xmiuy7jhmy]  .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color);
    border-radius: 12px;
}

.settings-card[b-xmiuy7jhmy]  .mud-input-label {
    color: var(--text-secondary);
}

.settings-card[b-xmiuy7jhmy]  .mud-switch {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .settings-page[b-xmiuy7jhmy] {
        padding: 1rem;
    }

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

    .settings-card[b-xmiuy7jhmy] {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .settings-row[b-xmiuy7jhmy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .card-header-icon[b-xmiuy7jhmy] {
        flex-wrap: wrap;
    }

    .icon-box[b-xmiuy7jhmy] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

@media (max-width: 600px) {
    .settings-page[b-xmiuy7jhmy] {
        padding: 0.75rem;
    }

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

    .page-subtitle[b-xmiuy7jhmy] {
        font-size: 0.875rem;
    }

    .settings-card[b-xmiuy7jhmy] {
        padding: 1rem;
        border-radius: 14px;
        margin-bottom: 1rem;
    }

    .card-header-text h3[b-xmiuy7jhmy] {
        font-size: 1rem;
    }

    .card-header-text p[b-xmiuy7jhmy] {
        font-size: 0.8125rem;
    }

    .settings-label h4[b-xmiuy7jhmy] {
        font-size: 0.875rem;
    }

    .settings-label p[b-xmiuy7jhmy] {
        font-size: 0.75rem;
    }

    .status-badge[b-xmiuy7jhmy] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .btn-primary[b-xmiuy7jhmy],
    .btn-secondary[b-xmiuy7jhmy] {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1rem;
    }

    .info-box[b-xmiuy7jhmy] {
        padding: 0.875rem 1rem;
    }

    .info-box p[b-xmiuy7jhmy] {
        font-size: 0.8125rem;
    }

    .loading-container[b-xmiuy7jhmy] {
        padding: 2rem 1rem;
    }
}
/* /Pages/Admin/SignupSettings.razor.rz.scp.css */
/* Signup Settings Page - Mobile-First Responsive Design */

/* Page header */
[b-lpvv66qi7n] .mud-text-h4 {
    font-size: 1.5rem;
}

/* Grid responsive */
[b-lpvv66qi7n] .mud-grid {
    margin: 0 !important;
}

[b-lpvv66qi7n] .mud-grid > .mud-item {
    padding: 0.75rem !important;
}

/* Paper sections */
[b-lpvv66qi7n] .mud-paper.pa-4 {
    padding: 1.25rem !important;
}

/* Form elements */
[b-lpvv66qi7n] .mud-select,
[b-lpvv66qi7n] .mud-input-control {
    width: 100%;
}

/* Medium screens */
@media (max-width: 960px) {
    [b-lpvv66qi7n] .mud-text-h4 {
        font-size: 1.25rem;
    }

    [b-lpvv66qi7n] .mud-text-h5 {
        font-size: 1.125rem;
    }

    [b-lpvv66qi7n] .mud-paper.pa-4 {
        padding: 1rem !important;
    }

    /* Full width columns on medium screens */
    [b-lpvv66qi7n] .mud-grid > .mud-item-md-6 {
        max-width: 100%;
        flex-basis: 100%;
    }
}

/* Small screens */
@media (max-width: 600px) {
    [b-lpvv66qi7n] .mud-text-h4 {
        font-size: 1.125rem;
    }

    [b-lpvv66qi7n] .mud-text-h5 {
        font-size: 1rem;
    }

    [b-lpvv66qi7n] .mud-paper.pa-4 {
        padding: 0.875rem !important;
        border-radius: 12px !important;
    }

    [b-lpvv66qi7n] .mud-grid > .mud-item {
        padding: 0.5rem !important;
    }

    /* Stack header icon and text */
    [b-lpvv66qi7n] .mud-stack[row][alignitems="Center"][spacing="2"] {
        flex-wrap: wrap;
    }

    /* Icon sizing */
    [b-lpvv66qi7n] .mud-icon-size-large {
        font-size: 1.5rem !important;
    }

    /* Button full width */
    [b-lpvv66qi7n] .mud-button {
        width: 100%;
    }

    /* Select dropdown items */
    [b-lpvv66qi7n] .mud-select-item .mud-stack {
        padding: 0.5rem 0;
    }

    /* Alert text smaller */
    [b-lpvv66qi7n] .mud-alert {
        font-size: 0.875rem;
    }
}
/* /Pages/Admin/SystemAdmin/SuperAdminDashboard.razor.rz.scp.css */
/* ==========================================================================
   SUPERADMIN DASHBOARD - Premium Nordic Finance Design
   CRITICAL: Explicit dark/light mode styling - NO CSS variables for colors
   ========================================================================== */

/* ==========================================================================
   PERIOD SELECTOR
   ========================================================================== */

.period-selector-container[b-9gjg5xsyxh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.period-label[b-9gjg5xsyxh] {
    font-weight: 600;
}

.period-selector[b-9gjg5xsyxh] {
    border-radius: 10px;
    overflow: hidden;
}

/* ==========================================================================
   HERO CARD - Emerald Gradient (both themes)
   ========================================================================== */

.hero-card[b-9gjg5xsyxh] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    border-radius: 18px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    color: white;
    box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.hero-card[b-9gjg5xsyxh]::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hero-card:hover[b-9gjg5xsyxh] {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.5);
}

.hero-content[b-9gjg5xsyxh] {
    position: relative;
    z-index: 1;
}

.hero-label[b-9gjg5xsyxh] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.hero-value[b-9gjg5xsyxh] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.hero-change[b-9gjg5xsyxh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.trend-up[b-9gjg5xsyxh] {
    color: rgba(255, 255, 255, 0.95);
}

.trend-down[b-9gjg5xsyxh] {
    color: rgba(255, 255, 255, 0.7);
}

.change-label[b-9gjg5xsyxh] {
    opacity: 0.8;
    margin-left: 0.5rem;
}

/* ==========================================================================
   STATS GRID - 4 columns
   ========================================================================== */

.stats-grid[b-9gjg5xsyxh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1400px) {
    .stats-grid[b-9gjg5xsyxh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid[b-9gjg5xsyxh] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   STAT CARDS - DARK MODE
   ========================================================================== */

.dark-mode .stat-card[b-9gjg5xsyxh] {
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
    border-radius: 16px;
    padding: 1.5rem;
    border-left: 6px solid;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-mode .stat-card:hover[b-9gjg5xsyxh] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.dark-mode .stat-card-emerald[b-9gjg5xsyxh] {
    border-left-color: #10B981;
}

.dark-mode .stat-card-blue[b-9gjg5xsyxh] {
    border-left-color: #3B82F6;
}

.dark-mode .stat-card-purple[b-9gjg5xsyxh] {
    border-left-color: #8B5CF6;
}

.dark-mode .stat-card-rose[b-9gjg5xsyxh] {
    border-left-color: #F43F5E;
}

.dark-mode .stat-value[b-9gjg5xsyxh] {
    color: #F8FAFC;
}

.dark-mode .stat-label[b-9gjg5xsyxh] {
    color: #94A3B8;
}

.dark-mode .stat-sublabel[b-9gjg5xsyxh] {
    color: #64748B;
}

.dark-mode .stat-change[b-9gjg5xsyxh] {
    color: #94A3B8;
}

/* ==========================================================================
   STAT CARDS - LIGHT MODE
   ========================================================================== */

.light-mode .stat-card[b-9gjg5xsyxh] {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border-radius: 16px;
    padding: 1.5rem;
    border-left: 6px solid;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.light-mode .stat-card:hover[b-9gjg5xsyxh] {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

.light-mode .stat-card-emerald[b-9gjg5xsyxh] {
    border-left-color: #10B981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.05) 100%);
}

.light-mode .stat-card-blue[b-9gjg5xsyxh] {
    border-left-color: #3B82F6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.05) 100%);
}

.light-mode .stat-card-purple[b-9gjg5xsyxh] {
    border-left-color: #8B5CF6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(167, 139, 250, 0.05) 100%);
}

.light-mode .stat-card-rose[b-9gjg5xsyxh] {
    border-left-color: #F43F5E;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.05) 0%, rgba(251, 113, 133, 0.05) 100%);
}

.light-mode .stat-value[b-9gjg5xsyxh] {
    color: #0F172A;
}

.light-mode .stat-label[b-9gjg5xsyxh] {
    color: #64748B;
}

.light-mode .stat-sublabel[b-9gjg5xsyxh] {
    color: #64748B;
}

.light-mode .stat-change[b-9gjg5xsyxh] {
    color: #64748B;
}

/* ==========================================================================
   STAT CARDS - SHARED STYLES
   ========================================================================== */

.stat-icon-box[b-9gjg5xsyxh] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.icon-box-emerald[b-9gjg5xsyxh] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 6px 20px -4px rgba(16, 185, 129, 0.5);
}

.icon-box-blue[b-9gjg5xsyxh] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 6px 20px -4px rgba(59, 130, 246, 0.5);
}

.icon-box-purple[b-9gjg5xsyxh] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 6px 20px -4px rgba(139, 92, 246, 0.5);
}

.icon-box-rose[b-9gjg5xsyxh] {
    background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
    box-shadow: 0 6px 20px -4px rgba(244, 63, 94, 0.5);
}

.stat-value[b-9gjg5xsyxh] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0.25rem 0;
}

.stat-label[b-9gjg5xsyxh] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-sublabel[b-9gjg5xsyxh] {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.stat-change[b-9gjg5xsyxh] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* ==========================================================================
   DASHBOARD GRID - 2 columns
   ========================================================================== */

.dashboard-grid[b-9gjg5xsyxh] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .dashboard-grid[b-9gjg5xsyxh] {
        grid-template-columns: 1fr;
    }
}

.main-column[b-9gjg5xsyxh], .sidebar-column[b-9gjg5xsyxh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ==========================================================================
   DASHBOARD CARDS - DARK MODE
   ========================================================================== */

.dark-mode .dashboard-card[b-9gjg5xsyxh] {
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dark-mode .dashboard-card:hover[b-9gjg5xsyxh] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-color: rgba(52, 211, 153, 0.25);
}

.dark-mode .card-header[b-9gjg5xsyxh] {
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .revenue-metric .metric-label[b-9gjg5xsyxh] {
    color: #64748B;
}

.dark-mode .revenue-metric .metric-value[b-9gjg5xsyxh] {
    color: #F8FAFC;
}

.dark-mode .health-label[b-9gjg5xsyxh] {
    color: #94A3B8;
}

.dark-mode .health-value[b-9gjg5xsyxh] {
    color: #F8FAFC;
}

.dark-mode .integration-label[b-9gjg5xsyxh] {
    color: #94A3B8;
}

.dark-mode .integration-count[b-9gjg5xsyxh] {
    color: #64748B;
}

.dark-mode .last-refreshed[b-9gjg5xsyxh] {
    color: #64748B;
}

/* ==========================================================================
   DASHBOARD CARDS - LIGHT MODE
   ========================================================================== */

.light-mode .dashboard-card[b-9gjg5xsyxh] {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.light-mode .dashboard-card:hover[b-9gjg5xsyxh] {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}

.light-mode .card-header[b-9gjg5xsyxh] {
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid #E2E8F0;
}

/* Fallback for card-header if theme classes not applied yet */
.card-header[b-9gjg5xsyxh] {
    padding: 1.5rem 1.5rem 1.25rem 1.5rem !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.light-mode .revenue-metric .metric-label[b-9gjg5xsyxh] {
    color: #64748B;
}

.light-mode .revenue-metric .metric-value[b-9gjg5xsyxh] {
    color: #0F172A;
}

.light-mode .health-label[b-9gjg5xsyxh] {
    color: #475569;
}

.light-mode .health-value[b-9gjg5xsyxh] {
    color: #0F172A;
}

.light-mode .integration-label[b-9gjg5xsyxh] {
    color: #475569;
}

.light-mode .integration-count[b-9gjg5xsyxh] {
    color: #94A3B8;
}

.light-mode .last-refreshed[b-9gjg5xsyxh] {
    color: #94A3B8;
}

/* ==========================================================================
   SHARED CARD STYLES
   ========================================================================== */

.card-body[b-9gjg5xsyxh] {
    padding: 1.5rem;
}

.revenue-metric[b-9gjg5xsyxh] {
    margin-bottom: 1.5rem;
}

.metric-label[b-9gjg5xsyxh] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-value[b-9gjg5xsyxh] {
    font-size: 1.5rem;
    font-weight: 700;
}

.last-refreshed[b-9gjg5xsyxh] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
    font-size: 0.75rem;
    text-align: center;
}

.health-label[b-9gjg5xsyxh] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.health-value[b-9gjg5xsyxh] {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.health-success[b-9gjg5xsyxh] {
    color: #10B981;
}

.health-error[b-9gjg5xsyxh] {
    color: #F43F5E;
}

.integration-label[b-9gjg5xsyxh] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.integration-count[b-9gjg5xsyxh] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.growth-positive[b-9gjg5xsyxh] {
    color: #10B981;
    font-weight: 600;
}

.growth-negative[b-9gjg5xsyxh] {
    color: #F43F5E;
    font-weight: 600;
}
/* /Pages/Admin/Tasks.razor.rz.scp.css */
/* ==========================================================================
   NEMABO TASKS PAGE - Premium Nordic Finance Design
   CRITICAL: Explicit dark/light mode styling - NO CSS variables for colors
   ========================================================================== */

.tasks-container[b-dbj8ynn6dr] {
    min-height: 100vh;
}

/* ==========================================================================
   SHARED ICON BOX STYLES
   ========================================================================== */

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

.icon-box.small[b-dbj8ynn6dr] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.icon-box.large[b-dbj8ynn6dr] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.icon-box .mud-icon-root[b-dbj8ynn6dr] {
    color: white !important;
    font-size: 18px;
}

.icon-box.small .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 14px;
}

.icon-box.large .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 22px;
}

.gradient-emerald[b-dbj8ynn6dr] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 6px 20px -4px rgba(16, 185, 129, 0.5);
}

.gradient-blue[b-dbj8ynn6dr] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 6px 20px -4px rgba(59, 130, 246, 0.5);
}

.gradient-amber[b-dbj8ynn6dr] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 6px 20px -4px rgba(245, 158, 11, 0.5);
}

.gradient-rose[b-dbj8ynn6dr] {
    background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
    box-shadow: 0 6px 20px -4px rgba(244, 63, 94, 0.5);
}

/* ==========================================================================
   DARK MODE STYLES
   ========================================================================== */

.dark-mode .page-title[b-dbj8ynn6dr] {
    color: #F8FAFC;
}

.dark-mode .page-subtitle[b-dbj8ynn6dr] {
    color: #94A3B8;
}

.dark-mode .card-neo[b-dbj8ynn6dr],
.dark-mode .stat-card-neo[b-dbj8ynn6dr],
.dark-mode .filter-bar[b-dbj8ynn6dr],
.dark-mode .table-container[b-dbj8ynn6dr],
.dark-mode .empty-state[b-dbj8ynn6dr],
.dark-mode .loading-state[b-dbj8ynn6dr] {
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #F8FAFC;
}

.dark-mode .card-neo:hover[b-dbj8ynn6dr],
.dark-mode .stat-card-neo:hover[b-dbj8ynn6dr] {
    border-color: rgba(52, 211, 153, 0.25);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(52, 211, 153, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

.dark-mode .stat-card-neo.overdue[b-dbj8ynn6dr] {
    border-color: rgba(244, 63, 94, 0.3);
}

.dark-mode .stat-card-neo.overdue:hover[b-dbj8ynn6dr] {
    border-color: rgba(244, 63, 94, 0.5);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(244, 63, 94, 0.2);
}

.dark-mode .stat-card-neo.active[b-dbj8ynn6dr] {
    border-color: rgba(52, 211, 153, 0.4);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(52, 211, 153, 0.15);
}

.dark-mode .stat-card-value[b-dbj8ynn6dr] {
    color: #F8FAFC;
}

.dark-mode .stat-card-value.text-danger[b-dbj8ynn6dr] {
    color: #FB7185;
}

.dark-mode .stat-card-label[b-dbj8ynn6dr] {
    color: #94A3B8;
}

.dark-mode .stat-card-footer[b-dbj8ynn6dr] {
    border-color: rgba(255, 255, 255, 0.06);
}

.dark-mode .nav-btn[b-dbj8ynn6dr] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #F8FAFC;
}

.dark-mode .nav-btn:hover[b-dbj8ynn6dr] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(52, 211, 153, 0.3);
}

.dark-mode .search-wrapper[b-dbj8ynn6dr] {
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dark-mode .search-wrapper:focus-within[b-dbj8ynn6dr] {
    border-color: rgba(52, 211, 153, 0.4);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.15);
}

.dark-mode .search-input[b-dbj8ynn6dr] {
    background: transparent;
    color: #F8FAFC;
}

.dark-mode .search-input[b-dbj8ynn6dr]::placeholder {
    color: #64748B;
}

.dark-mode .search-icon[b-dbj8ynn6dr] {
    color: #64748B;
}

.dark-mode .empty-state h3[b-dbj8ynn6dr],
.dark-mode .loading-state p[b-dbj8ynn6dr] {
    color: #F8FAFC;
}

.dark-mode .empty-state p[b-dbj8ynn6dr] {
    color: #94A3B8;
}

/* Table Dark Mode */
.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table {
    background: transparent !important;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-head .mud-table-row {
    background: rgba(15, 23, 42, 0.5) !important;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-head th {
    color: #94A3B8 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row:hover {
    background: rgba(52, 211, 153, 0.05) !important;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row.row-overdue {
    background: rgba(244, 63, 94, 0.08) !important;
    border-left: 3px solid #F43F5E;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row.row-overdue:hover {
    background: rgba(244, 63, 94, 0.15) !important;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row.row-completed {
    background: rgba(16, 185, 129, 0.03) !important;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-cell {
    color: #E2E8F0 !important;
    border-bottom: none !important;
}

.dark-mode .table-container[b-dbj8ynn6dr]  .mud-table-pagination {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94A3B8 !important;
}

.dark-mode .customer-name[b-dbj8ynn6dr] {
    color: #F8FAFC;
}

.dark-mode .customer-name.completed[b-dbj8ynn6dr] {
    color: #64748B;
    text-decoration: line-through;
}

.dark-mode .customer-name.overdue[b-dbj8ynn6dr] {
    color: #FB7185;
}

.dark-mode .customer-phone[b-dbj8ynn6dr] {
    color: #64748B;
}

.dark-mode .customer-phone:hover[b-dbj8ynn6dr] {
    color: #10B981;
}

.dark-mode .service-chip[b-dbj8ynn6dr] {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark-mode .service-chip.overdue[b-dbj8ynn6dr] {
    background: rgba(244, 63, 94, 0.15);
    color: #FB7185;
    border-color: rgba(244, 63, 94, 0.3);
}

.dark-mode .deadline[b-dbj8ynn6dr] {
    color: #94A3B8;
}

.dark-mode .deadline.overdue[b-dbj8ynn6dr] {
    color: #FB7185;
    font-weight: 600;
}

.dark-mode .address-link[b-dbj8ynn6dr] {
    color: #60A5FA;
}

.dark-mode .address-link:hover[b-dbj8ynn6dr] {
    color: #93C5FD;
}

.dark-mode .no-address[b-dbj8ynn6dr],
.dark-mode .no-date[b-dbj8ynn6dr] {
    color: #475569;
}

.dark-mode .notes-indicator[b-dbj8ynn6dr] {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.dark-mode .btn-icon[b-dbj8ynn6dr] {
    background: transparent;
    color: #64748B;
    border: none;
}

.dark-mode .btn-icon:hover[b-dbj8ynn6dr] {
    background: rgba(52, 211, 153, 0.1);
    color: #34D399;
}

.dark-mode .completed-date[b-dbj8ynn6dr] {
    color: #4ADE80;
}

.dark-mode .overdue-indicator[b-dbj8ynn6dr] {
    background: rgba(244, 63, 94, 0.15);
    color: #FB7185;
}

/* ==========================================================================
   LIGHT MODE STYLES
   ========================================================================== */

.light-mode .page-title[b-dbj8ynn6dr] {
    color: #0F172A;
}

.light-mode .page-subtitle[b-dbj8ynn6dr] {
    color: #64748B;
}

.light-mode .card-neo[b-dbj8ynn6dr],
.light-mode .stat-card-neo[b-dbj8ynn6dr],
.light-mode .filter-bar[b-dbj8ynn6dr],
.light-mode .table-container[b-dbj8ynn6dr],
.light-mode .empty-state[b-dbj8ynn6dr],
.light-mode .loading-state[b-dbj8ynn6dr] {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #0F172A;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
}

.light-mode .card-neo:hover[b-dbj8ynn6dr],
.light-mode .stat-card-neo:hover[b-dbj8ynn6dr] {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15),
                0 0 40px rgba(16, 185, 129, 0.12);
    transform: translateY(-4px);
}

.light-mode .stat-card-neo.overdue[b-dbj8ynn6dr] {
    border-color: rgba(244, 63, 94, 0.3);
}

.light-mode .stat-card-neo.overdue:hover[b-dbj8ynn6dr] {
    border-color: rgba(244, 63, 94, 0.5);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15),
                0 0 40px rgba(244, 63, 94, 0.15);
}

.light-mode .stat-card-neo.active[b-dbj8ynn6dr] {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12),
                0 0 30px rgba(16, 185, 129, 0.1);
}

.light-mode .stat-card-value[b-dbj8ynn6dr] {
    color: #0F172A;
}

.light-mode .stat-card-value.text-danger[b-dbj8ynn6dr] {
    color: #E11D48;
}

.light-mode .stat-card-label[b-dbj8ynn6dr] {
    color: #64748B;
}

.light-mode .stat-card-footer[b-dbj8ynn6dr] {
    border-color: rgba(0, 0, 0, 0.06);
}

.light-mode .nav-btn[b-dbj8ynn6dr] {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #334155;
}

.light-mode .nav-btn:hover[b-dbj8ynn6dr] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.light-mode .search-wrapper[b-dbj8ynn6dr] {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.light-mode .search-wrapper:focus-within[b-dbj8ynn6dr] {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

.light-mode .search-input[b-dbj8ynn6dr] {
    background: transparent;
    color: #0F172A;
}

.light-mode .search-input[b-dbj8ynn6dr]::placeholder {
    color: #94A3B8;
}

.light-mode .search-icon[b-dbj8ynn6dr] {
    color: #94A3B8;
}

.light-mode .empty-state h3[b-dbj8ynn6dr],
.light-mode .loading-state p[b-dbj8ynn6dr] {
    color: #0F172A;
}

.light-mode .empty-state p[b-dbj8ynn6dr] {
    color: #64748B;
}

/* Table Light Mode */
.light-mode .table-container[b-dbj8ynn6dr]  .mud-table {
    background: transparent !important;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-head .mud-table-row {
    background: #F8FAFC !important;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-head th {
    color: #64748B !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row:hover {
    background: rgba(16, 185, 129, 0.05) !important;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row.row-overdue {
    background: rgba(244, 63, 94, 0.05) !important;
    border-left: 3px solid #E11D48;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row.row-overdue:hover {
    background: rgba(244, 63, 94, 0.1) !important;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-body .mud-table-row.row-completed {
    background: rgba(16, 185, 129, 0.03) !important;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-cell {
    color: #334155 !important;
    border-bottom: none !important;
}

.light-mode .table-container[b-dbj8ynn6dr]  .mud-table-pagination {
    background: transparent !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #64748B !important;
}

.light-mode .customer-name[b-dbj8ynn6dr] {
    color: #0F172A;
}

.light-mode .customer-name.completed[b-dbj8ynn6dr] {
    color: #94A3B8;
    text-decoration: line-through;
}

.light-mode .customer-name.overdue[b-dbj8ynn6dr] {
    color: #E11D48;
}

.light-mode .customer-phone[b-dbj8ynn6dr] {
    color: #64748B;
}

.light-mode .customer-phone:hover[b-dbj8ynn6dr] {
    color: #10B981;
}

.light-mode .service-chip[b-dbj8ynn6dr] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.light-mode .service-chip.overdue[b-dbj8ynn6dr] {
    background: rgba(244, 63, 94, 0.1);
    color: #E11D48;
    border-color: rgba(244, 63, 94, 0.2);
}

.light-mode .deadline[b-dbj8ynn6dr] {
    color: #64748B;
}

.light-mode .deadline.overdue[b-dbj8ynn6dr] {
    color: #E11D48;
    font-weight: 600;
}

.light-mode .address-link[b-dbj8ynn6dr] {
    color: #2563EB;
}

.light-mode .address-link:hover[b-dbj8ynn6dr] {
    color: #3B82F6;
}

.light-mode .no-address[b-dbj8ynn6dr],
.light-mode .no-date[b-dbj8ynn6dr] {
    color: #CBD5E1;
}

.light-mode .notes-indicator[b-dbj8ynn6dr] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
}

.light-mode .btn-icon[b-dbj8ynn6dr] {
    background: transparent;
    color: #94A3B8;
    border: none;
}

.light-mode .btn-icon:hover[b-dbj8ynn6dr] {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.light-mode .completed-date[b-dbj8ynn6dr] {
    color: #10B981;
}

.light-mode .overdue-indicator[b-dbj8ynn6dr] {
    background: rgba(244, 63, 94, 0.1);
    color: #E11D48;
}

/* ==========================================================================
   COMPONENT STYLES (Both Themes)
   ========================================================================== */

/* Page Header */
.page-header[b-dbj8ynn6dr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title[b-dbj8ynn6dr] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.page-subtitle[b-dbj8ynn6dr] {
    font-size: 0.875rem;
    margin: 2px 0 0 0;
}

.month-nav[b-dbj8ynn6dr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-btn[b-dbj8ynn6dr] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 20px;
}

[b-dbj8ynn6dr] .month-select {
    min-width: 180px;
}

/* Stats Grid */
.stats-grid[b-dbj8ynn6dr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

@media (max-width: 1200px) {
    .stats-grid[b-dbj8ynn6dr] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid[b-dbj8ynn6dr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.stat-card-neo[b-dbj8ynn6dr] {
    border-radius: 14px;
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card-neo[b-dbj8ynn6dr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card-neo:hover[b-dbj8ynn6dr]::before {
    opacity: 1;
}

.stat-card-neo.overdue[b-dbj8ynn6dr]::before {
    background: linear-gradient(90deg, #E11D48 0%, #FB7185 100%);
}

/* Clickable Card Styles */
.stat-card-neo.clickable[b-dbj8ynn6dr] {
    cursor: pointer;
    user-select: none;
}

.stat-card-neo.clickable:active[b-dbj8ynn6dr] {
    transform: scale(0.98);
}

.stat-card-neo.active[b-dbj8ynn6dr]::before {
    opacity: 1;
}

/* Active Indicator - Bottom bar */
.active-indicator[b-dbj8ynn6dr] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
    border-radius: 0 0 20px 20px;
    animation: slideIn-b-dbj8ynn6dr 0.3s ease;
}

.active-indicator.amber[b-dbj8ynn6dr] {
    background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
}

.active-indicator.rose[b-dbj8ynn6dr] {
    background: linear-gradient(90deg, #E11D48 0%, #FB7185 100%);
}

.active-indicator.emerald[b-dbj8ynn6dr] {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

@keyframes slideIn-b-dbj8ynn6dr {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.stat-card-header[b-dbj8ynn6dr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.stat-card-value[b-dbj8ynn6dr] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}

.stat-card-label[b-dbj8ynn6dr] {
    font-size: 0.8125rem;
    margin-bottom: 10px;
}

.stat-card-footer[b-dbj8ynn6dr] {
    padding-top: 10px;
    border-top: 1px solid;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Stat Badges */
.stat-badge[b-dbj8ynn6dr] {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.stat-badge.live[b-dbj8ynn6dr] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-badge.live[b-dbj8ynn6dr]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    animation: pulse-dot-b-dbj8ynn6dr 2s ease-in-out infinite;
}

.stat-badge.warning[b-dbj8ynn6dr] {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

.stat-badge.danger[b-dbj8ynn6dr] {
    background: rgba(244, 63, 94, 0.15);
    color: #FB7185;
}

.stat-badge.danger.pulse[b-dbj8ynn6dr]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FB7185;
    margin-right: 6px;
    animation: pulse-dot-b-dbj8ynn6dr 1s ease-in-out infinite;
}

.stat-badge.success[b-dbj8ynn6dr] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
}

@keyframes pulse-dot-b-dbj8ynn6dr {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.stat-trend[b-dbj8ynn6dr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.stat-trend .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 16px;
}

.stat-trend.neutral[b-dbj8ynn6dr] {
    color: #94A3B8;
}

.stat-trend.warning[b-dbj8ynn6dr] {
    color: #FBBF24;
}

.stat-trend.up[b-dbj8ynn6dr] {
    color: #4ADE80;
}

/* Progress Mini */
.progress-mini[b-dbj8ynn6dr] {
    flex: 1;
    height: 6px;
    border-radius: 100px;
    background: rgba(100, 116, 139, 0.2);
    overflow: hidden;
}

.progress-mini-bar[b-dbj8ynn6dr] {
    height: 100%;
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
    border-radius: 100px;
    transition: width 0.5s ease;
}

.progress-text-mini[b-dbj8ynn6dr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94A3B8;
    white-space: nowrap;
}

/* Filter Bar */
.filter-bar[b-dbj8ynn6dr] {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-left[b-dbj8ynn6dr] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.search-wrapper[b-dbj8ynn6dr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    min-width: 280px;
    transition: all 0.2s ease;
}

.search-icon[b-dbj8ynn6dr] {
    font-size: 20px;
    flex-shrink: 0;
}

.search-input[b-dbj8ynn6dr] {
    border: none;
    outline: none;
    font-size: 0.9375rem;
    width: 100%;
}

[b-dbj8ynn6dr] .status-filter {
    min-width: 150px;
}

/* Primary Button */
.btn-primary[b-dbj8ynn6dr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover:not(:disabled)[b-dbj8ynn6dr] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

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

.btn-primary .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 18px;
}

/* Empty State */
.empty-state[b-dbj8ynn6dr] {
    border-radius: 14px;
    padding: 48px 32px;
    text-align: center;
}

.empty-icon[b-dbj8ynn6dr] {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.empty-state h3[b-dbj8ynn6dr] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.empty-state p[b-dbj8ynn6dr] {
    font-size: 0.9375rem;
    margin: 0;
}

/* Loading State */
.loading-state[b-dbj8ynn6dr] {
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-state p[b-dbj8ynn6dr] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Table Container */
.table-container[b-dbj8ynn6dr] {
    border-radius: 14px;
    overflow: hidden;
}

.table-container[b-dbj8ynn6dr]  .mud-table-container {
    border-radius: 0;
}

/* Table Cell Styles */
.status-cell[b-dbj8ynn6dr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.overdue-indicator[b-dbj8ynn6dr] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-glow-b-dbj8ynn6dr 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-dbj8ynn6dr {
    0%, 100% { box-shadow: 0 0 8px rgba(244, 63, 94, 0.3); }
    50% { box-shadow: 0 0 16px rgba(244, 63, 94, 0.5); }
}

.customer-cell[b-dbj8ynn6dr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-name[b-dbj8ynn6dr] {
    font-weight: 500;
    transition: color 0.2s ease;
}

.customer-phone[b-dbj8ynn6dr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.customer-phone .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 14px;
}

.service-chip[b-dbj8ynn6dr] {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.deadline[b-dbj8ynn6dr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.deadline .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 16px;
}

.address-link[b-dbj8ynn6dr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.address-link .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 16px;
}

.notes-cell[b-dbj8ynn6dr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notes-indicator[b-dbj8ynn6dr] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notes-indicator .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 16px;
}

.btn-icon[b-dbj8ynn6dr] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 16px;
}

.completed-date[b-dbj8ynn6dr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.completed-date .mud-icon-root[b-dbj8ynn6dr] {
    font-size: 14px;
}

/* Dialog */
.dialog-header[b-dbj8ynn6dr] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

/* Responsive - Tablet/Medium screens */
@media (max-width: 1024px) {
    .stat-card-neo[b-dbj8ynn6dr] {
        padding: 12px;
    }

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

    .stat-card-label[b-dbj8ynn6dr] {
        font-size: 0.75rem;
    }

    .stats-grid[b-dbj8ynn6dr] {
        gap: 10px;
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .page-header[b-dbj8ynn6dr] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

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

    .page-subtitle[b-dbj8ynn6dr] {
        font-size: 0.75rem;
    }

    .month-nav[b-dbj8ynn6dr] {
        gap: 4px;
    }

    .nav-btn[b-dbj8ynn6dr] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .nav-btn .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 14px;
    }

    .filter-bar[b-dbj8ynn6dr] {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .filter-left[b-dbj8ynn6dr] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .search-wrapper[b-dbj8ynn6dr] {
        min-width: 100%;
        padding: 6px 10px;
    }

    .stats-grid[b-dbj8ynn6dr] {
        gap: 8px;
        margin-bottom: 12px;
    }

    .stat-card-neo[b-dbj8ynn6dr] {
        padding: 10px;
        border-radius: 10px;
    }

    .stat-card-value[b-dbj8ynn6dr] {
        font-size: 1.125rem;
    }

    .stat-card-label[b-dbj8ynn6dr] {
        font-size: 0.6875rem;
    }

    .icon-box[b-dbj8ynn6dr] {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .icon-box .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 14px;
    }

    .table-container[b-dbj8ynn6dr] {
        border-radius: 10px;
        overflow-x: auto;
    }

    .btn-primary[b-dbj8ynn6dr] {
        width: 100%;
        justify-content: center;
        padding: 8px 16px;
        font-size: 0.8125rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .tasks-container[b-dbj8ynn6dr] {
        padding: 0;
    }

    .page-header[b-dbj8ynn6dr] {
        margin-bottom: 12px;
        gap: 8px;
    }

    .page-title[b-dbj8ynn6dr] {
        font-size: 1.125rem;
    }

    .page-subtitle[b-dbj8ynn6dr] {
        font-size: 0.75rem;
    }

    .month-nav[b-dbj8ynn6dr] {
        gap: 4px;
    }

    .nav-btn[b-dbj8ynn6dr] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .nav-btn .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 14px;
    }

    .filter-bar[b-dbj8ynn6dr] {
        padding: 10px;
        margin-bottom: 12px;
        border-radius: 10px;
        gap: 10px;
    }

    .search-wrapper[b-dbj8ynn6dr] {
        padding: 6px 10px;
        border-radius: 8px;
    }

    .search-icon[b-dbj8ynn6dr] {
        font-size: 16px;
    }

    .search-input[b-dbj8ynn6dr] {
        font-size: 0.8125rem;
    }

    .stats-grid[b-dbj8ynn6dr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 12px;
    }

    .stat-card-neo[b-dbj8ynn6dr] {
        padding: 10px;
        border-radius: 10px;
    }

    .stat-card-header[b-dbj8ynn6dr] {
        margin-bottom: 4px;
        flex-direction: row;
        align-items: center;
    }

    /* Hide icon boxes on mobile - just show badge */
    .stat-card-header .icon-box[b-dbj8ynn6dr] {
        display: none;
    }

    .stat-card-value[b-dbj8ynn6dr] {
        font-size: 1.5rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-label[b-dbj8ynn6dr] {
        font-size: 0.6875rem;
        margin-bottom: 6px;
        font-weight: 500;
    }

    .stat-card-footer[b-dbj8ynn6dr] {
        padding-top: 6px;
        gap: 4px;
        flex-wrap: wrap;
    }

    /* Footer icons smaller */
    .stat-card-footer .icon-box[b-dbj8ynn6dr] {
        display: none;
    }

    .stat-badge[b-dbj8ynn6dr] {
        padding: 2px 6px;
        font-size: 0.5625rem;
    }

    .stat-badge.live[b-dbj8ynn6dr]::before,
    .stat-badge.danger.pulse[b-dbj8ynn6dr]::before {
        width: 4px;
        height: 4px;
        margin-right: 4px;
    }

    .stat-trend[b-dbj8ynn6dr] {
        font-size: 0.5625rem;
    }

    .stat-trend .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 10px;
    }

    .progress-mini[b-dbj8ynn6dr] {
        height: 3px;
    }

    .progress-text-mini[b-dbj8ynn6dr] {
        font-size: 0.5625rem;
    }

    .table-container[b-dbj8ynn6dr] {
        border-radius: 12px;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Force horizontal scroll on MudDataGrid */
    .table-container[b-dbj8ynn6dr]  .mud-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table,
    .table-container[b-dbj8ynn6dr]  .mud-data-grid {
        min-width: 700px !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-root {
        min-width: 700px !important;
    }

    /* Disable MudDataGrid responsive card mode */
    .table-container[b-dbj8ynn6dr]  .mud-table-cell[data-label]::before {
        display: none !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-cell {
        display: table-cell !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-row {
        display: table-row !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-head {
        display: table-header-group !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-body {
        display: table-row-group !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-head th {
        padding: 8px 6px !important;
        font-size: 0.625rem !important;
        display: table-cell !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-cell {
        padding: 8px 6px !important;
        font-size: 0.75rem !important;
    }

    /* Compact table elements */
    .status-cell[b-dbj8ynn6dr] {
        gap: 4px;
    }

    .overdue-indicator[b-dbj8ynn6dr] {
        width: 16px;
        height: 16px;
    }

    .overdue-indicator .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 9px !important;
    }

    .customer-cell[b-dbj8ynn6dr] {
        gap: 1px;
    }

    .customer-name[b-dbj8ynn6dr] {
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .customer-phone[b-dbj8ynn6dr] {
        font-size: 0.625rem;
        gap: 2px;
        opacity: 0.75;
    }

    .customer-phone .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 10px;
    }

    .service-chip[b-dbj8ynn6dr] {
        padding: 2px 6px;
        font-size: 0.625rem;
        border-radius: 4px;
        white-space: nowrap;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .deadline[b-dbj8ynn6dr] {
        font-size: 0.625rem;
        gap: 2px;
    }

    .deadline .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 10px;
    }

    .address-link[b-dbj8ynn6dr] {
        font-size: 0.625rem;
        gap: 2px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .address-link .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 10px;
    }

    .notes-indicator[b-dbj8ynn6dr] {
        width: 20px;
        height: 20px;
        border-radius: 4px;
    }

    .notes-indicator .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 10px;
    }

    .btn-icon[b-dbj8ynn6dr] {
        width: 22px;
        height: 22px;
        border-radius: 4px;
    }

    .btn-icon .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 10px;
    }

    .completed-date[b-dbj8ynn6dr] {
        font-size: 0.625rem;
        gap: 2px;
    }

    .completed-date .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 10px;
    }

    /* Hide less important icons in table on mobile */
    .deadline .mud-icon-root[b-dbj8ynn6dr],
    .address-link .mud-icon-root[b-dbj8ynn6dr] {
        display: none;
    }

    /* Pagination compact */
    .table-container[b-dbj8ynn6dr]  .mud-table-pagination {
        padding: 6px 8px !important;
        font-size: 0.6875rem !important;
    }

    /* Empty/Loading states */
    .empty-state[b-dbj8ynn6dr] {
        padding: 32px 16px;
        border-radius: 12px;
    }

    .empty-state h3[b-dbj8ynn6dr] {
        font-size: 1rem;
    }

    .empty-state p[b-dbj8ynn6dr] {
        font-size: 0.8125rem;
    }

    .loading-state[b-dbj8ynn6dr] {
        padding: 32px 16px;
        border-radius: 12px;
    }

    .loading-state p[b-dbj8ynn6dr] {
        font-size: 0.8125rem;
    }

    /* Primary button compact */
    .btn-primary[b-dbj8ynn6dr] {
        padding: 8px 16px;
        font-size: 0.8125rem;
        border-radius: 10px;
    }

    .btn-primary .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 14px;
    }

    /* Dialog compact */
    .dialog-header[b-dbj8ynn6dr] {
        gap: 8px;
        font-size: 0.9375rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .page-title[b-dbj8ynn6dr] {
        font-size: 1rem;
    }

    .page-subtitle[b-dbj8ynn6dr] {
        font-size: 0.6875rem;
    }

    .stats-grid[b-dbj8ynn6dr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .stat-card-neo[b-dbj8ynn6dr] {
        padding: 8px;
        border-radius: 8px;
    }

    .stat-card-header[b-dbj8ynn6dr] {
        margin-bottom: 2px;
    }

    /* Hide icon boxes on extra small screens */
    .stat-card-header .icon-box[b-dbj8ynn6dr] {
        display: none;
    }

    .stat-card-value[b-dbj8ynn6dr] {
        font-size: 1.25rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-label[b-dbj8ynn6dr] {
        font-size: 0.5625rem;
        margin-bottom: 4px;
        font-weight: 500;
    }

    .stat-card-footer[b-dbj8ynn6dr] {
        padding-top: 4px;
        flex-wrap: wrap;
        gap: 2px;
    }

    .stat-card-footer .icon-box[b-dbj8ynn6dr] {
        display: none;
    }

    .stat-badge[b-dbj8ynn6dr] {
        padding: 1px 4px;
        font-size: 0.5rem;
    }

    .stat-badge.live[b-dbj8ynn6dr]::before,
    .stat-badge.danger.pulse[b-dbj8ynn6dr]::before {
        width: 3px;
        height: 3px;
        margin-right: 3px;
    }

    .stat-trend[b-dbj8ynn6dr] {
        font-size: 0.5rem;
        gap: 2px;
    }

    .stat-trend .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 8px;
    }

    .progress-mini[b-dbj8ynn6dr] {
        height: 2px;
    }

    .progress-text-mini[b-dbj8ynn6dr] {
        font-size: 0.5rem;
    }

    .filter-bar[b-dbj8ynn6dr] {
        padding: 8px;
    }

    .search-wrapper[b-dbj8ynn6dr] {
        padding: 5px 8px;
    }

    .search-input[b-dbj8ynn6dr] {
        font-size: 0.75rem;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table,
    .table-container[b-dbj8ynn6dr]  .mud-data-grid,
    .table-container[b-dbj8ynn6dr]  .mud-table-root {
        min-width: 600px !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-head th {
        padding: 4px 3px !important;
        font-size: 0.5rem !important;
    }

    .table-container[b-dbj8ynn6dr]  .mud-table-cell {
        padding: 4px 3px !important;
        font-size: 0.625rem !important;
    }

    .customer-name[b-dbj8ynn6dr] {
        font-size: 0.625rem;
    }

    .customer-phone[b-dbj8ynn6dr] {
        font-size: 0.5625rem;
    }

    .customer-phone .mud-icon-root[b-dbj8ynn6dr] {
        display: none;
    }

    .service-chip[b-dbj8ynn6dr] {
        padding: 1px 4px;
        font-size: 0.5625rem;
        max-width: 65px;
    }

    .btn-icon[b-dbj8ynn6dr] {
        width: 20px;
        height: 20px;
    }

    .btn-icon .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 9px;
    }

    .btn-primary[b-dbj8ynn6dr] {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    /* Hide more icons on extra small */
    .notes-indicator[b-dbj8ynn6dr] {
        width: 18px;
        height: 18px;
    }

    .notes-indicator .mud-icon-root[b-dbj8ynn6dr] {
        font-size: 9px;
    }

    .completed-date .mud-icon-root[b-dbj8ynn6dr] {
        display: none;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* =================================================================
   NEMABO LANDING PAGE - Premium Stripe-Inspired Design
   Complete redesign with animations and modern aesthetics
   ================================================================= */

/* ===== HERO SECTION ===== */
.hero[b-c4kbxdjejz] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8rem 0 6rem;
    overflow: hidden;
    background: var(--nf-navy);
}

.hero-bg[b-c4kbxdjejz] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(16, 185, 129, 0.3), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0, 212, 170, 0.15), transparent),
        var(--nf-navy);
}

.hero-grid[b-c4kbxdjejz] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
}

.hero-container[b-c4kbxdjejz] {
    position: relative;
    z-index: 1;
}

.hero-content[b-c4kbxdjejz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-text[b-c4kbxdjejz] {
    max-width: 560px;
}

.hero-badge[b-c4kbxdjejz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 100px;
    margin-bottom: 2rem;
}

.hero-badge span[b-c4kbxdjejz] {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--nf-font-body);
    font-size: 0.875rem;
    font-weight: 500;
}

.hero-title[b-c4kbxdjejz] {
    font-family: var(--nf-font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 1.5rem;
}

.hero-subtitle[b-c4kbxdjejz] {
    font-family: var(--nf-font-body);
    font-size: 1.25rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 2rem;
}

.hero-ctas[b-c4kbxdjejz] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.hero-features[b-c4kbxdjejz] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.hero-feature[b-c4kbxdjejz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
}

/* Hero Visual / Dashboard */
.hero-visual[b-c4kbxdjejz] {
    position: relative;
}

.dashboard-card[b-c4kbxdjejz] {
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 50px 100px -20px rgba(0, 0, 0, 0.5),
        0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

.dashboard-header[b-c4kbxdjejz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-dots[b-c4kbxdjejz] {
    display: flex;
    gap: 6px;
}

.dashboard-dots span[b-c4kbxdjejz] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.dashboard-dots span:first-child[b-c4kbxdjejz] { background: #ff5f57; }
.dashboard-dots span:nth-child(2)[b-c4kbxdjejz] { background: #ffbd2e; }
.dashboard-dots span:last-child[b-c4kbxdjejz] { background: #28c840; }

.dashboard-title[b-c4kbxdjejz] {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--nf-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
}

.dashboard-content[b-c4kbxdjejz] {
    padding: 1.5rem;
}

.stat-row[b-c4kbxdjejz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card[b-c4kbxdjejz] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-c4kbxdjejz] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value[b-c4kbxdjejz] {
    font-family: var(--nf-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-green[b-c4kbxdjejz] { color: var(--nf-teal); }
.stat-violet[b-c4kbxdjejz] { color: var(--nf-violet-hover); }

.stat-change[b-c4kbxdjejz] {
    font-size: 0.75rem;
    font-weight: 500;
}

.stat-change.positive[b-c4kbxdjejz] { color: var(--nf-teal); }

.activity-card[b-c4kbxdjejz] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem;
}

.activity-header[b-c4kbxdjejz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.activity-badge[b-c4kbxdjejz] {
    background: rgba(0, 212, 170, 0.2);
    color: var(--nf-teal);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.activity-bar[b-c4kbxdjejz] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.activity-progress[b-c4kbxdjejz] {
    height: 100%;
    background: linear-gradient(90deg, var(--nf-violet), var(--nf-teal));
    border-radius: 3px;
    transition: width 1s ease;
}

/* Floating Cards */
.floating-card[b-c4kbxdjejz] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nf-text-primary);
}

.floating-card.card-1[b-c4kbxdjejz] {
    top: 10%;
    right: -20px;
}

.floating-card.card-2[b-c4kbxdjejz] {
    bottom: 15%;
    left: -30px;
}

/* ===== BUTTONS ===== */
.btn-primary[b-c4kbxdjejz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--nf-violet) 0%, var(--nf-violet-hover) 100%);
    color: #ffffff;
    font-family: var(--nf-font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

.btn-primary:hover[b-c4kbxdjejz] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5);
}

.btn-primary svg[b-c4kbxdjejz] { color: #ffffff; }

.btn-secondary[b-c4kbxdjejz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: transparent;
    color: #ffffff;
    font-family: var(--nf-font-body);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover[b-c4kbxdjejz] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

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

.btn-large[b-c4kbxdjejz] {
    padding: 1.125rem 2.5rem;
    font-size: 1.0625rem;
}

/* ===== SOCIAL PROOF ===== */
.social-proof[b-c4kbxdjejz] {
    padding: 1rem 0;
    background: var(--nf-violet);
}

.social-proof-content[b-c4kbxdjejz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.social-proof-text[b-c4kbxdjejz] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    font-weight: 500;
}

.social-proof-divider[b-c4kbxdjejz] {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
}

.social-proof-rating[b-c4kbxdjejz] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.social-proof-rating span[b-c4kbxdjejz] {
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* ===== PROBLEM / SOLUTION ===== */
.problem-solution[b-c4kbxdjejz] {
    padding: 8rem 0;
    background: #ffffff;
}

.problem-card[b-c4kbxdjejz],
.solution-card[b-c4kbxdjejz] {
    padding: 2.5rem;
    border-radius: 24px;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.problem-card[b-c4kbxdjejz] {
    background: linear-gradient(135deg, #FEF2F2 0%, #FFF5F5 100%);
    border: 1px solid #FECACA;
}

.solution-card[b-c4kbxdjejz] {
    background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF9 100%);
    border: 1px solid #A7F3D0;
}

.card-icon[b-c4kbxdjejz] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.card-icon.icon-red[b-c4kbxdjejz] {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
}

.card-icon.icon-red svg[b-c4kbxdjejz] { color: #EF4444; }

.card-icon.icon-green[b-c4kbxdjejz] {
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
}

.card-icon.icon-green svg[b-c4kbxdjejz] { color: #10B981; }

.problem-card h3[b-c4kbxdjejz],
.solution-card h3[b-c4kbxdjejz] {
    font-family: var(--nf-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--nf-text-primary);
}

.problem-list[b-c4kbxdjejz],
.solution-list[b-c4kbxdjejz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.problem-list li[b-c4kbxdjejz],
.solution-list li[b-c4kbxdjejz] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

.problem-list li[b-c4kbxdjejz] { color: #7F1D1D; }
.problem-list svg[b-c4kbxdjejz] { color: #EF4444; flex-shrink: 0; margin-top: 2px; }

.solution-list li[b-c4kbxdjejz] { color: #064E3B; }
.solution-list svg[b-c4kbxdjejz] { color: #10B981; flex-shrink: 0; margin-top: 2px; }

/* ===== SECTION HEADER ===== */
.section-header[b-c4kbxdjejz] {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 4rem;
}

.section-eyebrow[b-c4kbxdjejz] {
    display: inline-block;
    color: var(--nf-violet);
    font-family: var(--nf-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.section-title[b-c4kbxdjejz] {
    font-family: var(--nf-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--nf-text-primary);
    margin: 0 0 1rem;
}

.section-subtitle[b-c4kbxdjejz] {
    font-family: var(--nf-font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--nf-text-secondary);
    margin: 0;
}

/* ===== FEATURES ===== */
.features[b-c4kbxdjejz] {
    padding: 8rem 0;
    background: var(--nf-bg);
}

.features-grid[b-c4kbxdjejz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.feature-card[b-c4kbxdjejz] {
    background: #ffffff;
    border: 1px solid var(--nf-border);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-icon[b-c4kbxdjejz] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--nf-violet), var(--nf-violet-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25);
}

.feature-icon svg[b-c4kbxdjejz],
.feature-icon .mud-icon-root[b-c4kbxdjejz] {
    color: #ffffff !important;
    width: 26px;
    height: 26px;
}

.feature-icon.icon-teal[b-c4kbxdjejz] {
    background: linear-gradient(135deg, var(--nf-navy), #1A3A5C);
    box-shadow: 0 8px 20px rgba(10, 37, 64, 0.25);
}

.feature-icon.icon-navy[b-c4kbxdjejz] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
}

.feature-card h3[b-c4kbxdjejz] {
    font-family: var(--nf-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--nf-text-primary);
    margin: 0 0 0.75rem;
}

.feature-card p[b-c4kbxdjejz] {
    font-family: var(--nf-font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nf-text-secondary);
    margin: 0;
}

/* ===== HOW IT WORKS ===== */
.how-it-works[b-c4kbxdjejz] {
    padding: 8rem 0;
    background: #ffffff;
}

.steps-container[b-c4kbxdjejz] {
    position: relative;
}

.steps-line[b-c4kbxdjejz] {
    display: none;
}

.steps-grid[b-c4kbxdjejz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.step-card[b-c4kbxdjejz] {
    background: #ffffff;
    border: 1px solid var(--nf-border);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-number[b-c4kbxdjejz] {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--nf-violet), var(--nf-violet-hover));
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--nf-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.step-icon[b-c4kbxdjejz] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--nf-violet), var(--nf-violet-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto 1.5rem;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
}

.step-icon svg[b-c4kbxdjejz],
.step-icon .mud-icon-root[b-c4kbxdjejz] {
    color: #ffffff !important;
}

.step-icon.icon-navy[b-c4kbxdjejz] {
    background: linear-gradient(135deg, var(--nf-navy), #1A3A5C);
    box-shadow: 0 12px 30px rgba(10, 37, 64, 0.3);
}

.step-icon.icon-teal[b-c4kbxdjejz] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.3);
}

.step-card h3[b-c4kbxdjejz] {
    font-family: var(--nf-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--nf-text-primary);
    margin: 0 0 0.75rem;
}

.step-card p[b-c4kbxdjejz] {
    font-family: var(--nf-font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nf-text-secondary);
    margin: 0;
}

/* ===== PRICING ===== */
.pricing[b-c4kbxdjejz] {
    padding: 8rem 0;
    background: var(--nf-bg);
}

.pricing-grid[b-c4kbxdjejz] {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-card[b-c4kbxdjejz] {
    background: #ffffff;
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-main[b-c4kbxdjejz] {
    border: 2px solid var(--nf-violet);
    position: relative;
    overflow: hidden;
}

.pricing-main[b-c4kbxdjejz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--nf-violet), var(--nf-teal));
}

.pricing-enterprise[b-c4kbxdjejz] {
    border: 1px solid var(--nf-border);
}

.enterprise-badge[b-c4kbxdjejz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-radius: 100px;
    margin-bottom: 1.5rem;
}

.enterprise-badge span[b-c4kbxdjejz] {
    color: #92400E;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.enterprise-badge svg[b-c4kbxdjejz] { color: #F59E0B; }

.pricing-header[b-c4kbxdjejz] {
    margin-bottom: 1.5rem;
}

.pricing-plan[b-c4kbxdjejz] {
    color: var(--nf-violet);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-price[b-c4kbxdjejz] {
    margin: 0.5rem 0;
}

.pricing-amount[b-c4kbxdjejz] {
    font-family: var(--nf-font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: var(--nf-text-primary);
    letter-spacing: -0.02em;
}

.pricing-period[b-c4kbxdjejz] {
    display: block;
    color: var(--nf-text-secondary);
    font-size: 0.9375rem;
    margin-top: 0.25rem;
}

.pricing-desc[b-c4kbxdjejz] {
    color: var(--nf-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

.pricing-features[b-c4kbxdjejz] {
    margin-bottom: 1.5rem;
}

.pricing-features-title[b-c4kbxdjejz] {
    display: block;
    font-weight: 600;
    color: var(--nf-text-primary);
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.pricing-features ul[b-c4kbxdjejz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing-features li[b-c4kbxdjejz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--nf-text-secondary);
    font-size: 0.9375rem;
}

.pricing-features svg[b-c4kbxdjejz] { color: var(--nf-violet); flex-shrink: 0; }

.enterprise-features svg[b-c4kbxdjejz] { color: var(--nf-teal-dark); }

.pricing-highlight[b-c4kbxdjejz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #ECFDF5, #F0FDF9);
    border: 1px solid #A7F3D0;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.pricing-highlight svg[b-c4kbxdjejz] { color: var(--nf-teal-dark); }

.pricing-highlight span[b-c4kbxdjejz] {
    color: #065F46;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* ===== TESTIMONIAL ===== */
.testimonial[b-c4kbxdjejz] {
    padding: 8rem 0;
    background: #ffffff;
}

.testimonial-card[b-c4kbxdjejz] {
    background: var(--nf-bg);
    border: 1px solid var(--nf-border);
    border-radius: 32px;
    padding: 4rem;
    text-align: center;
    position: relative;
}

.testimonial-quote-mark[b-c4kbxdjejz] {
    margin-bottom: 2rem;
}

.testimonial-quote-mark svg[b-c4kbxdjejz] {
    color: var(--nf-violet);
    opacity: 0.3;
    width: 48px;
    height: 48px;
}

.testimonial-card blockquote[b-c4kbxdjejz] {
    font-family: var(--nf-font-body);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.8;
    color: var(--nf-text-secondary);
    margin: 0 0 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-author[b-c4kbxdjejz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.author-avatar[b-c4kbxdjejz] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--nf-violet), var(--nf-violet-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-avatar svg[b-c4kbxdjejz] { color: #ffffff; }

.author-info[b-c4kbxdjejz] {
    text-align: left;
}

.author-name[b-c4kbxdjejz] {
    display: block;
    font-family: var(--nf-font-heading);
    font-weight: 600;
    color: var(--nf-text-primary);
    font-size: 1rem;
}

.author-company[b-c4kbxdjejz] {
    display: block;
    color: var(--nf-text-muted);
    font-size: 0.875rem;
}

/* ===== CTA ===== */
.cta[b-c4kbxdjejz] {
    position: relative;
    padding: 8rem 0;
    background: var(--nf-navy);
    overflow: hidden;
}

.cta-bg[b-c4kbxdjejz] {
    position: absolute;
    inset: 0;
}

.cta .orb-1[b-c4kbxdjejz] {
    top: -200px;
    right: 10%;
}

.cta .orb-2[b-c4kbxdjejz] {
    bottom: -200px;
    left: 10%;
}

.cta-content[b-c4kbxdjejz] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.cta-content h2[b-c4kbxdjejz] {
    font-family: var(--nf-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem;
}

.cta-content p[b-c4kbxdjejz] {
    font-family: var(--nf-font-body);
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 2rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hero-content[b-c4kbxdjejz] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text[b-c4kbxdjejz] {
        max-width: 100%;
    }

    .hero-ctas[b-c4kbxdjejz] {
        justify-content: center;
    }

    .hero-features[b-c4kbxdjejz] {
        justify-content: center;
    }

    .hero-visual[b-c4kbxdjejz] {
        max-width: 500px;
        margin: 0 auto;
    }

    .floating-card.card-1[b-c4kbxdjejz] { right: 0; top: 5%; }
    .floating-card.card-2[b-c4kbxdjejz] { left: 0; }

    .features-grid[b-c4kbxdjejz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid[b-c4kbxdjejz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid > *:last-child[b-c4kbxdjejz] {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }

    .pricing-grid[b-c4kbxdjejz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero[b-c4kbxdjejz] {
        min-height: auto;
        padding: 6rem 0 4rem;
    }

    .hero-title[b-c4kbxdjejz] {
        font-size: 2.25rem;
    }

    .hero-subtitle[b-c4kbxdjejz] {
        font-size: 1.0625rem;
    }

    .floating-card[b-c4kbxdjejz] {
        display: none;
    }

    .problem-solution[b-c4kbxdjejz],
    .features[b-c4kbxdjejz],
    .how-it-works[b-c4kbxdjejz],
    .pricing[b-c4kbxdjejz],
    .testimonial[b-c4kbxdjejz],
    .cta[b-c4kbxdjejz] {
        padding: 5rem 0;
    }

    .features-grid[b-c4kbxdjejz],
    .steps-grid[b-c4kbxdjejz] {
        grid-template-columns: 1fr;
    }

    .steps-grid > *:last-child[b-c4kbxdjejz] {
        grid-column: auto;
        max-width: none;
    }

    .section-header[b-c4kbxdjejz] {
        margin-bottom: 3rem;
    }

    .testimonial-card[b-c4kbxdjejz] {
        padding: 2.5rem;
    }

    .testimonial-card blockquote[b-c4kbxdjejz] {
        font-size: 1.125rem;
    }

    .pricing-card[b-c4kbxdjejz] {
        padding: 2rem;
    }

    .pricing-amount[b-c4kbxdjejz] {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hero[b-c4kbxdjejz] {
        padding: 5rem 0 3rem;
    }

    .hero-ctas[b-c4kbxdjejz] {
        flex-direction: column;
    }

    .btn-primary[b-c4kbxdjejz],
    .btn-secondary[b-c4kbxdjejz] {
        width: 100%;
        justify-content: center;
    }

    .hero-features[b-c4kbxdjejz] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .social-proof-content[b-c4kbxdjejz] {
        flex-direction: column;
        gap: 1rem;
    }

    .social-proof-divider[b-c4kbxdjejz] {
        display: none;
    }

    .problem-card[b-c4kbxdjejz],
    .solution-card[b-c4kbxdjejz] {
        padding: 1.75rem;
    }

    .feature-card[b-c4kbxdjejz] {
        padding: 1.5rem;
    }

    .step-card[b-c4kbxdjejz] {
        padding: 2rem 1.5rem;
    }
}
/* /Pages/Login.razor.rz.scp.css */
.login-container[b-rhqthh3ecx] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding: 24px;
}

.login-card[b-rhqthh3ecx] {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .login-container[b-rhqthh3ecx] {
        padding: 16px;
        align-items: flex-start;
        padding-top: 32px;
    }

    .login-card.mud-paper[b-rhqthh3ecx] {
        padding: 20px;
    }
}
/* /Pages/Merchant/Customers.razor.rz.scp.css */
/* ==========================================================================
   NEMABO CUSTOMERS PAGE - Premium Nordic Finance Design
   ========================================================================== */

.customers-container[b-2pw7dj9tmo] {
    min-height: 100vh;
}

/* ==========================================================================
   SHARED ICON BOX STYLES
   ========================================================================== */

.icon-box[b-2pw7dj9tmo] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box.small[b-2pw7dj9tmo] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.icon-box.large[b-2pw7dj9tmo] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.icon-box .mud-icon-root[b-2pw7dj9tmo] {
    color: white !important;
    font-size: 18px;
}

.icon-box.small .mud-icon-root[b-2pw7dj9tmo] {
    font-size: 14px;
}

.icon-box.large .mud-icon-root[b-2pw7dj9tmo] {
    font-size: 22px;
}

.gradient-emerald[b-2pw7dj9tmo] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 6px 20px -4px rgba(16, 185, 129, 0.5);
}

.gradient-blue[b-2pw7dj9tmo] {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    box-shadow: 0 6px 20px -4px rgba(59, 130, 246, 0.5);
}

.gradient-amber[b-2pw7dj9tmo] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow: 0 6px 20px -4px rgba(245, 158, 11, 0.5);
}

.gradient-rose[b-2pw7dj9tmo] {
    background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
    box-shadow: 0 6px 20px -4px rgba(244, 63, 94, 0.5);
}

.gradient-purple[b-2pw7dj9tmo] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    box-shadow: 0 6px 20px -4px rgba(139, 92, 246, 0.5);
}

/* ==========================================================================
   DARK MODE STYLES
   ========================================================================== */

.dark-mode .page-title[b-2pw7dj9tmo] {
    color: #F8FAFC;
}

.dark-mode .page-subtitle[b-2pw7dj9tmo] {
    color: #94A3B8;
}

.dark-mode .card-neo[b-2pw7dj9tmo],
.dark-mode .stat-card-neo[b-2pw7dj9tmo],
.dark-mode .filter-bar[b-2pw7dj9tmo],
.dark-mode .table-container[b-2pw7dj9tmo],
.dark-mode .empty-state[b-2pw7dj9tmo],
.dark-mode .loading-state[b-2pw7dj9tmo] {
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #F8FAFC;
}

.dark-mode .card-neo:hover[b-2pw7dj9tmo],
.dark-mode .stat-card-neo:hover[b-2pw7dj9tmo] {
    border-color: rgba(52, 211, 153, 0.25);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(52, 211, 153, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

.dark-mode .stat-card-neo.warning:hover[b-2pw7dj9tmo] {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(245, 158, 11, 0.15);
}

.dark-mode .stat-card-value[b-2pw7dj9tmo] {
    color: #F8FAFC;
}

.dark-mode .stat-card-label[b-2pw7dj9tmo] {
    color: #94A3B8;
}

.dark-mode .search-wrapper[b-2pw7dj9tmo] {
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dark-mode .search-wrapper:focus-within[b-2pw7dj9tmo] {
    border-color: rgba(52, 211, 153, 0.4);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.15);
}

.dark-mode .search-input[b-2pw7dj9tmo] {
    background: transparent;
    color: #F8FAFC;
}

.dark-mode .search-input[b-2pw7dj9tmo]::placeholder {
    color: #64748B;
}

.dark-mode .search-icon[b-2pw7dj9tmo] {
    color: #64748B;
}

.dark-mode .result-count[b-2pw7dj9tmo] {
    color: #94A3B8;
}

.dark-mode .empty-state h3[b-2pw7dj9tmo],
.dark-mode .loading-state p[b-2pw7dj9tmo] {
    color: #F8FAFC;
}

.dark-mode .empty-state p[b-2pw7dj9tmo] {
    color: #94A3B8;
}

/* Table Dark Mode */
.dark-mode .table-container[b-2pw7dj9tmo]  .mud-table {
    background: transparent !important;
}

.dark-mode .table-container[b-2pw7dj9tmo]  .mud-table-head .mud-table-row {
    background: rgba(15, 23, 42, 0.5) !important;
}

.dark-mode .table-container[b-2pw7dj9tmo]  .mud-table-head th {
    color: #94A3B8 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dark-mode .table-container[b-2pw7dj9tmo]  .mud-table-body .mud-table-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.dark-mode .table-container[b-2pw7dj9tmo]  .mud-table-body .mud-table-row:hover {
    background: rgba(52, 211, 153, 0.05) !important;
}

.dark-mode .table-container[b-2pw7dj9tmo]  .mud-table-cell {
    color: #E2E8F0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.dark-mode .table-container[b-2pw7dj9tmo]  .mud-table-pagination {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94A3B8 !important;
}

.dark-mode .customer-name[b-2pw7dj9tmo] {
    color: #F8FAFC;
}

.dark-mode .email-link[b-2pw7dj9tmo] {
    color: #60A5FA;
}

.dark-mode .email-link:hover[b-2pw7dj9tmo] {
    color: #93C5FD;
}

.dark-mode .phone-link[b-2pw7dj9tmo] {
    color: #60A5FA;
}

.dark-mode .phone-link:hover[b-2pw7dj9tmo] {
    color: #93C5FD;
}

.dark-mode .no-data[b-2pw7dj9tmo] {
    color: #475569;
}

.dark-mode .product-chip[b-2pw7dj9tmo] {
    background: rgba(139, 92, 246, 0.15);
    color: #A78BFA;
    border-color: rgba(139, 92, 246, 0.3);
}

.dark-mode .status-chip.active[b-2pw7dj9tmo] {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
}

.dark-mode .status-chip.canceled[b-2pw7dj9tmo] {
    background: rgba(100, 116, 139, 0.15);
    color: #94A3B8;
}

.dark-mode .status-chip.past-due[b-2pw7dj9tmo] {
    background: rgba(244, 63, 94, 0.15);
    color: #FB7185;
}

.dark-mode .status-chip.canceling[b-2pw7dj9tmo] {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

.dark-mode .status-chip.outdated[b-2pw7dj9tmo] {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

.dark-mode .price-info[b-2pw7dj9tmo] {
    color: #94A3B8;
}

.dark-mode .period-date[b-2pw7dj9tmo] {
    color: #94A3B8;
}

.dark-mode .created-date[b-2pw7dj9tmo] {
    color: #94A3B8;
}

.dark-mode .btn-icon[b-2pw7dj9tmo] {
    background: transparent;
    color: #64748B;
}

.dark-mode .btn-icon:hover[b-2pw7dj9tmo] {
    background: rgba(52, 211, 153, 0.1);
    color: #34D399;
}

.dark-mode .btn-icon.primary:hover[b-2pw7dj9tmo] {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.dark-mode .btn-icon.danger:hover[b-2pw7dj9tmo] {
    background: rgba(244, 63, 94, 0.15);
    color: #FB7185;
}

.dark-mode .btn-icon.warning:hover[b-2pw7dj9tmo] {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

.dark-mode .btn-icon.success:hover[b-2pw7dj9tmo] {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
}

.dark-mode .filter-checkbox-label[b-2pw7dj9tmo] {
    color: #F8FAFC;
}

/* ==========================================================================
   LIGHT MODE STYLES
   ========================================================================== */

.light-mode .page-title[b-2pw7dj9tmo] {
    color: #0F172A;
}

.light-mode .page-subtitle[b-2pw7dj9tmo] {
    color: #64748B;
}

.light-mode .card-neo[b-2pw7dj9tmo],
.light-mode .stat-card-neo[b-2pw7dj9tmo],
.light-mode .filter-bar[b-2pw7dj9tmo],
.light-mode .table-container[b-2pw7dj9tmo],
.light-mode .empty-state[b-2pw7dj9tmo],
.light-mode .loading-state[b-2pw7dj9tmo] {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #0F172A;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
}

.light-mode .card-neo:hover[b-2pw7dj9tmo],
.light-mode .stat-card-neo:hover[b-2pw7dj9tmo] {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15),
                0 0 40px rgba(16, 185, 129, 0.12);
    transform: translateY(-4px);
}

.light-mode .stat-card-neo.warning:hover[b-2pw7dj9tmo] {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15),
                0 0 40px rgba(245, 158, 11, 0.12);
}

.light-mode .stat-card-value[b-2pw7dj9tmo] {
    color: #0F172A;
}

.light-mode .stat-card-label[b-2pw7dj9tmo] {
    color: #64748B;
}

.light-mode .search-wrapper[b-2pw7dj9tmo] {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.light-mode .search-wrapper:focus-within[b-2pw7dj9tmo] {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

.light-mode .search-input[b-2pw7dj9tmo] {
    background: transparent;
    color: #0F172A;
}

.light-mode .search-input[b-2pw7dj9tmo]::placeholder {
    color: #94A3B8;
}

.light-mode .search-icon[b-2pw7dj9tmo] {
    color: #94A3B8;
}

.light-mode .result-count[b-2pw7dj9tmo] {
    color: #64748B;
}

.light-mode .empty-state h3[b-2pw7dj9tmo],
.light-mode .loading-state p[b-2pw7dj9tmo] {
    color: #0F172A;
}

.light-mode .empty-state p[b-2pw7dj9tmo] {
    color: #64748B;
}

/* Table Light Mode */
.light-mode .table-container[b-2pw7dj9tmo]  .mud-table {
    background: transparent !important;
}

.light-mode .table-container[b-2pw7dj9tmo]  .mud-table-head .mud-table-row {
    background: #F8FAFC !important;
}

.light-mode .table-container[b-2pw7dj9tmo]  .mud-table-head th {
    color: #64748B !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.light-mode .table-container[b-2pw7dj9tmo]  .mud-table-body .mud-table-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.light-mode .table-container[b-2pw7dj9tmo]  .mud-table-body .mud-table-row:hover {
    background: rgba(16, 185, 129, 0.05) !important;
}

.light-mode .table-container[b-2pw7dj9tmo]  .mud-table-cell {
    color: #334155 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.light-mode .table-container[b-2pw7dj9tmo]  .mud-table-pagination {
    background: transparent !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #64748B !important;
}

.light-mode .customer-name[b-2pw7dj9tmo] {
    color: #0F172A;
}

.light-mode .email-link[b-2pw7dj9tmo] {
    color: #2563EB;
}

.light-mode .email-link:hover[b-2pw7dj9tmo] {
    color: #3B82F6;
}

.light-mode .phone-link[b-2pw7dj9tmo] {
    color: #2563EB;
}

.light-mode .phone-link:hover[b-2pw7dj9tmo] {
    color: #3B82F6;
}

.light-mode .no-data[b-2pw7dj9tmo] {
    color: #CBD5E1;
}

.light-mode .product-chip[b-2pw7dj9tmo] {
    background: rgba(139, 92, 246, 0.1);
    color: #7C3AED;
    border-color: rgba(139, 92, 246, 0.2);
}

.light-mode .status-chip.active[b-2pw7dj9tmo] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.light-mode .status-chip.canceled[b-2pw7dj9tmo] {
    background: rgba(100, 116, 139, 0.1);
    color: #64748B;
}

.light-mode .status-chip.past-due[b-2pw7dj9tmo] {
    background: rgba(244, 63, 94, 0.1);
    color: #E11D48;
}

.light-mode .status-chip.canceling[b-2pw7dj9tmo] {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.light-mode .status-chip.outdated[b-2pw7dj9tmo] {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.light-mode .price-info[b-2pw7dj9tmo] {
    color: #64748B;
}

.light-mode .period-date[b-2pw7dj9tmo] {
    color: #64748B;
}

.light-mode .created-date[b-2pw7dj9tmo] {
    color: #64748B;
}

.light-mode .btn-icon[b-2pw7dj9tmo] {
    background: transparent;
    color: #94A3B8;
}

.light-mode .btn-icon:hover[b-2pw7dj9tmo] {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.light-mode .btn-icon.primary:hover[b-2pw7dj9tmo] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
}

.light-mode .btn-icon.danger:hover[b-2pw7dj9tmo] {
    background: rgba(244, 63, 94, 0.1);
    color: #E11D48;
}

.light-mode .btn-icon.warning:hover[b-2pw7dj9tmo] {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.light-mode .btn-icon.success:hover[b-2pw7dj9tmo] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.light-mode .filter-checkbox-label[b-2pw7dj9tmo] {
    color: #0F172A;
}

/* ==========================================================================
   COMPONENT STYLES (Both Themes)
   ========================================================================== */

/* Page Header */
.page-header[b-2pw7dj9tmo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title[b-2pw7dj9tmo] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.page-subtitle[b-2pw7dj9tmo] {
    font-size: 0.875rem;
    margin: 2px 0 0 0;
}

/* Stats Grid */
.stats-grid[b-2pw7dj9tmo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

@media (max-width: 1200px) {
    .stats-grid[b-2pw7dj9tmo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid[b-2pw7dj9tmo] {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

.stat-card-neo[b-2pw7dj9tmo] {
    border-radius: 14px;
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card-neo[b-2pw7dj9tmo]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card-neo:hover[b-2pw7dj9tmo]::before {
    opacity: 1;
}

.stat-card-neo.warning[b-2pw7dj9tmo]::before {
    background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
}

/* Clickable Stat Cards */
.stat-card-neo.clickable[b-2pw7dj9tmo] {
    cursor: pointer;
    user-select: none;
}

.stat-card-neo.clickable.active[b-2pw7dj9tmo] {
    transform: translateY(-2px);
}

.dark-mode .stat-card-neo.clickable.active[b-2pw7dj9tmo] {
    border-color: rgba(52, 211, 153, 0.3);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(52, 211, 153, 0.12);
}

.light-mode .stat-card-neo.clickable.active[b-2pw7dj9tmo] {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.12),
                0 0 30px rgba(16, 185, 129, 0.1);
}

/* Active Indicator */
.active-indicator[b-2pw7dj9tmo] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 0 0 20px 20px;
    animation: slideIn-b-2pw7dj9tmo 0.3s ease;
}

.active-indicator.purple[b-2pw7dj9tmo] {
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 100%);
}

.active-indicator.emerald[b-2pw7dj9tmo] {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

.active-indicator.blue[b-2pw7dj9tmo] {
    background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
}

.active-indicator.rose[b-2pw7dj9tmo] {
    background: linear-gradient(90deg, #F43F5E 0%, #FB7185 100%);
}

.active-indicator.amber[b-2pw7dj9tmo] {
    background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
}

@keyframes slideIn-b-2pw7dj9tmo {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.stat-card-header[b-2pw7dj9tmo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.stat-card-value[b-2pw7dj9tmo] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}

.stat-card-label[b-2pw7dj9tmo] {
    font-size: 0.8125rem;
}

/* Stat Badges */
.stat-badge[b-2pw7dj9tmo] {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.stat-badge.live[b-2pw7dj9tmo] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-badge.live[b-2pw7dj9tmo]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    animation: pulse-dot-b-2pw7dj9tmo 2s ease-in-out infinite;
}

.stat-badge.warning[b-2pw7dj9tmo] {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

@keyframes pulse-dot-b-2pw7dj9tmo {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Filter Bar */
.filter-bar[b-2pw7dj9tmo] {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-left[b-2pw7dj9tmo] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-right[b-2pw7dj9tmo] {
    display: flex;
    align-items: center;
}

.search-wrapper[b-2pw7dj9tmo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    min-width: 280px;
    transition: all 0.2s ease;
}

.search-icon[b-2pw7dj9tmo] {
    font-size: 20px;
    flex-shrink: 0;
}

.search-input[b-2pw7dj9tmo] {
    border: none;
    outline: none;
    font-size: 0.9375rem;
    width: 100%;
}

[b-2pw7dj9tmo] .product-filter {
    min-width: 180px;
}

.filter-checkbox-label[b-2pw7dj9tmo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count-badge[b-2pw7dj9tmo] {
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.count-badge.warning[b-2pw7dj9tmo] {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

.result-count[b-2pw7dj9tmo] {
    font-size: 0.875rem;
}

/* Empty State */
.empty-state[b-2pw7dj9tmo] {
    border-radius: 14px;
    padding: 48px 32px;
    text-align: center;
}

.empty-icon[b-2pw7dj9tmo] {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.empty-state h3[b-2pw7dj9tmo] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.empty-state p[b-2pw7dj9tmo] {
    font-size: 0.9375rem;
    margin: 0;
}

/* Loading State */
.loading-state[b-2pw7dj9tmo] {
    border-radius: 14px;
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.loading-state p[b-2pw7dj9tmo] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Table Container */
.table-container[b-2pw7dj9tmo] {
    border-radius: 14px;
    overflow: hidden;
}

.table-container[b-2pw7dj9tmo]  .mud-table-container {
    border-radius: 0;
}

/* Table Cell Styles */
.customer-name-cell[b-2pw7dj9tmo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-name[b-2pw7dj9tmo] {
    font-weight: 500;
}

.customer-name-btn[b-2pw7dj9tmo] {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    transition: opacity 0.2s ease, color 0.2s ease;
    width: 100%;
}

.customer-name-btn:hover[b-2pw7dj9tmo] {
    opacity: 0.8;
    color: #6366f1;
}

.customer-name-btn .chevron-icon[b-2pw7dj9tmo] {
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: 4px;
}

.customer-name-btn:hover .chevron-icon[b-2pw7dj9tmo] {
    opacity: 1;
}

.email-link[b-2pw7dj9tmo],
.phone-link[b-2pw7dj9tmo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.phone-link .mud-icon-root[b-2pw7dj9tmo] {
    font-size: 14px;
}

.subscription-row[b-2pw7dj9tmo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.product-chip[b-2pw7dj9tmo] {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
}

.status-chip[b-2pw7dj9tmo] {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.price-info[b-2pw7dj9tmo] {
    font-size: 0.8125rem;
}

.period-date[b-2pw7dj9tmo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.period-date .mud-icon-root[b-2pw7dj9tmo] {
    font-size: 16px;
}

.created-date[b-2pw7dj9tmo] {
    font-size: 0.875rem;
}

.btn-icon[b-2pw7dj9tmo] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-icon .mud-icon-root[b-2pw7dj9tmo] {
    font-size: 16px;
}

/* Dialog */
.dialog-header[b-2pw7dj9tmo] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.dialog-header.danger[b-2pw7dj9tmo] {
    color: #E11D48;
}

/* Responsive - Tablet/Medium screens - Reduce padding further */
@media (max-width: 1024px) {
    .stat-card-neo[b-2pw7dj9tmo] {
        padding: 12px;
    }

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

    .stat-card-label[b-2pw7dj9tmo] {
        font-size: 0.75rem;
    }

    .stat-card-header[b-2pw7dj9tmo] {
        margin-bottom: 8px;
    }

    .filter-bar[b-2pw7dj9tmo] {
        padding: 10px 12px;
        margin-bottom: 14px;
        gap: 10px;
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .page-header[b-2pw7dj9tmo] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 10px;
    }

    .page-title[b-2pw7dj9tmo] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-2pw7dj9tmo] {
        font-size: 0.75rem;
    }

    .filter-bar[b-2pw7dj9tmo] {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        margin-bottom: 12px;
        border-radius: 10px;
        gap: 8px;
    }

    .filter-left[b-2pw7dj9tmo] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter-right[b-2pw7dj9tmo] {
        justify-content: flex-end;
    }

    .search-wrapper[b-2pw7dj9tmo] {
        min-width: 100%;
        padding: 6px 10px;
    }

    .stats-grid[b-2pw7dj9tmo] {
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card-neo[b-2pw7dj9tmo] {
        padding: 10px;
        border-radius: 10px;
    }

    .stat-card-value[b-2pw7dj9tmo] {
        font-size: 1.25rem;
    }

    .stat-card-label[b-2pw7dj9tmo] {
        font-size: 0.7rem;
    }

    .stat-card-header[b-2pw7dj9tmo] {
        margin-bottom: 6px;
    }

    .icon-box[b-2pw7dj9tmo] {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .icon-box .mud-icon-root[b-2pw7dj9tmo] {
        font-size: 14px;
    }

    .table-container[b-2pw7dj9tmo] {
        border-radius: 10px;
        overflow-x: auto;
    }

    .subscription-row[b-2pw7dj9tmo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .customers-container[b-2pw7dj9tmo] {
        padding: 0;
    }

    .page-header[b-2pw7dj9tmo] {
        margin-bottom: 12px;
        gap: 8px;
    }

    .page-title[b-2pw7dj9tmo] {
        font-size: 1.125rem;
    }

    .page-subtitle[b-2pw7dj9tmo] {
        font-size: 0.75rem;
    }

    .filter-bar[b-2pw7dj9tmo] {
        padding: 10px;
        margin-bottom: 12px;
        border-radius: 10px;
        gap: 10px;
    }

    .search-wrapper[b-2pw7dj9tmo] {
        padding: 6px 10px;
        border-radius: 8px;
    }

    .search-icon[b-2pw7dj9tmo] {
        font-size: 16px;
    }

    .search-input[b-2pw7dj9tmo] {
        font-size: 0.8125rem;
    }

    .result-count[b-2pw7dj9tmo] {
        font-size: 0.75rem;
    }

    .stats-grid[b-2pw7dj9tmo] {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 12px;
    }

    .stat-card-neo[b-2pw7dj9tmo] {
        padding: 10px;
        border-radius: 10px;
    }

    .stat-card-header[b-2pw7dj9tmo] {
        margin-bottom: 4px;
    }

    /* Hide icon boxes on mobile */
    .stat-card-header .icon-box[b-2pw7dj9tmo] {
        display: none;
    }

    .stat-card-value[b-2pw7dj9tmo] {
        font-size: 1.5rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-label[b-2pw7dj9tmo] {
        font-size: 0.6875rem;
        font-weight: 500;
    }

    .stat-badge[b-2pw7dj9tmo] {
        padding: 2px 6px;
        font-size: 0.5625rem;
    }

    .stat-badge.live[b-2pw7dj9tmo]::before {
        width: 4px;
        height: 4px;
    }

    .table-container[b-2pw7dj9tmo] {
        border-radius: 12px;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Force horizontal scroll on table - disable responsive card mode */
    .table-container[b-2pw7dj9tmo]  .mud-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table,
    .table-container[b-2pw7dj9tmo]  .mud-table-root {
        min-width: 650px !important;
    }

    /* Disable MudBlazor responsive card mode */
    .table-container[b-2pw7dj9tmo]  .mud-table-cell[data-label]::before {
        display: none !important;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table-cell {
        display: table-cell !important;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table-row {
        display: table-row !important;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table-head {
        display: table-header-group !important;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table-body {
        display: table-row-group !important;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table-head th {
        padding: 8px 6px !important;
        font-size: 0.625rem !important;
        display: table-cell !important;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table-cell {
        padding: 8px 6px !important;
        font-size: 0.75rem !important;
    }

    /* Compact customer name cell */
    .customer-name-cell[b-2pw7dj9tmo] {
        gap: 8px;
    }

    .customer-name-cell .icon-box[b-2pw7dj9tmo] {
        width: 24px;
        height: 24px;
    }

    .customer-name-cell .icon-box .mud-icon-root[b-2pw7dj9tmo] {
        font-size: 12px;
    }

    .customer-name[b-2pw7dj9tmo] {
        font-size: 0.75rem;
    }

    .email-link[b-2pw7dj9tmo],
    .phone-link[b-2pw7dj9tmo] {
        font-size: 0.6875rem;
    }

    .phone-link .mud-icon-root[b-2pw7dj9tmo] {
        font-size: 12px;
    }

    .product-chip[b-2pw7dj9tmo] {
        padding: 2px 6px;
        font-size: 0.625rem;
    }

    .status-chip[b-2pw7dj9tmo] {
        padding: 2px 5px;
        font-size: 0.5625rem;
    }

    .price-info[b-2pw7dj9tmo] {
        font-size: 0.6875rem;
    }

    .period-date[b-2pw7dj9tmo] {
        font-size: 0.6875rem;
        gap: 4px;
    }

    .period-date .mud-icon-root[b-2pw7dj9tmo] {
        font-size: 12px;
    }

    .created-date[b-2pw7dj9tmo] {
        font-size: 0.6875rem;
    }

    .btn-icon[b-2pw7dj9tmo] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .btn-icon .mud-icon-root[b-2pw7dj9tmo] {
        font-size: 12px;
    }

    /* Pagination compact */
    .table-container[b-2pw7dj9tmo]  .mud-table-pagination {
        padding: 6px 8px !important;
        font-size: 0.6875rem !important;
    }

    /* Empty/Loading states */
    .empty-state[b-2pw7dj9tmo] {
        padding: 32px 16px;
        border-radius: 12px;
    }

    .empty-state h3[b-2pw7dj9tmo] {
        font-size: 1rem;
    }

    .empty-state p[b-2pw7dj9tmo] {
        font-size: 0.8125rem;
    }

    .loading-state[b-2pw7dj9tmo] {
        padding: 32px 16px;
        border-radius: 12px;
    }

    .loading-state p[b-2pw7dj9tmo] {
        font-size: 0.8125rem;
    }

    /* Dialog compact */
    .dialog-header[b-2pw7dj9tmo] {
        gap: 8px;
        font-size: 0.9375rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .page-title[b-2pw7dj9tmo] {
        font-size: 1rem;
    }

    .page-subtitle[b-2pw7dj9tmo] {
        font-size: 0.6875rem;
    }

    .stats-grid[b-2pw7dj9tmo] {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .stat-card-neo[b-2pw7dj9tmo] {
        padding: 8px;
        border-radius: 8px;
    }

    .stat-card-header[b-2pw7dj9tmo] {
        margin-bottom: 2px;
    }

    /* Hide icon boxes on extra small screens */
    .stat-card-header .icon-box[b-2pw7dj9tmo] {
        display: none;
    }

    .stat-card-value[b-2pw7dj9tmo] {
        font-size: 1.25rem;
        margin-bottom: 0;
        font-weight: 700;
    }

    .stat-card-label[b-2pw7dj9tmo] {
        font-size: 0.5625rem;
        font-weight: 500;
    }

    .stat-badge[b-2pw7dj9tmo] {
        padding: 1px 4px;
        font-size: 0.5rem;
    }

    .filter-bar[b-2pw7dj9tmo] {
        padding: 8px;
    }

    .search-wrapper[b-2pw7dj9tmo] {
        padding: 5px 8px;
    }

    .search-input[b-2pw7dj9tmo] {
        font-size: 0.75rem;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table,
    .table-container[b-2pw7dj9tmo]  .mud-table-root {
        min-width: 600px !important;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table-head th {
        padding: 6px 4px !important;
        font-size: 0.5625rem !important;
    }

    .table-container[b-2pw7dj9tmo]  .mud-table-cell {
        padding: 6px 4px !important;
        font-size: 0.6875rem !important;
    }

    .customer-name[b-2pw7dj9tmo] {
        font-size: 0.6875rem;
    }

    .email-link[b-2pw7dj9tmo],
    .phone-link[b-2pw7dj9tmo] {
        font-size: 0.625rem;
    }

    .product-chip[b-2pw7dj9tmo] {
        padding: 1px 4px;
        font-size: 0.5625rem;
    }

    .status-chip[b-2pw7dj9tmo] {
        padding: 1px 4px;
        font-size: 0.5rem;
    }

    .btn-icon[b-2pw7dj9tmo] {
        width: 22px;
        height: 22px;
    }

    .btn-icon .mud-icon-root[b-2pw7dj9tmo] {
        font-size: 11px;
    }
}
/* /Pages/Public/About.razor.rz.scp.css */
/* =================================================================
   ABOUT PAGE - Fintech-inspired design
   NO !important declarations
   ================================================================= */

/* ===== HERO SECTION ===== */
section.about-hero-section[b-csdkto9ck2] {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.about-hero-section .about-hero-glow[b-csdkto9ck2] {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
}

.about-hero-section .about-hero-glow-left[b-csdkto9ck2] {
    top: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: rgba(99, 102, 241, 0.25);
}

.about-hero-section .about-hero-glow-right[b-csdkto9ck2] {
    bottom: -20%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(14, 165, 233, 0.2);
}

.about-hero-section .about-hero-content[b-csdkto9ck2] {
    position: relative;
    z-index: 1;
}

.about-hero-section .about-badge[b-csdkto9ck2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50px;
}

.about-hero-section .about-badge-text[b-csdkto9ck2] {
    color: #a5b4fc;
    font-size: 0.875rem;
    font-weight: 500;
}

.about-hero-section h1.about-hero-title[b-csdkto9ck2] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    max-width: 800px;
}

.about-hero-section .about-hero-subtitle[b-csdkto9ck2] {
    font-size: 1.125rem;
    color: #94a3b8;
    max-width: 600px;
}

/* ===== MISSION SECTION ===== */
section.about-mission-section[b-csdkto9ck2] {
    padding: 5rem 0;
    background: #ffffff;
}

.about-mission-section .about-mission-card.mud-paper[b-csdkto9ck2] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
}

.about-mission-section .about-mission-icon-wrapper[b-csdkto9ck2] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.about-mission-section .about-mission-icon-wrapper .mud-icon-root[b-csdkto9ck2] {
    color: #ffffff;
    width: 28px;
    height: 28px;
}

.about-mission-section .about-vision-card.mud-paper[b-csdkto9ck2] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
}

.about-mission-section .about-vision-icon-wrapper[b-csdkto9ck2] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.about-mission-section .about-vision-icon-wrapper .mud-icon-root[b-csdkto9ck2] {
    color: #ffffff;
    width: 28px;
    height: 28px;
}

.about-mission-section h3.about-card-title[b-csdkto9ck2] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.about-mission-section .about-card-text[b-csdkto9ck2] {
    font-size: 1rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* ===== TARGET SECTION ===== */
section.about-target-section[b-csdkto9ck2] {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.about-target-section .about-eyebrow[b-csdkto9ck2] {
    color: #6366f1;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.about-target-section h2.about-section-title[b-csdkto9ck2] {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.about-target-section .about-target-card.mud-paper[b-csdkto9ck2] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

.about-target-section .about-target-card.mud-paper:hover[b-csdkto9ck2] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.about-target-section .about-target-icon-wrapper[b-csdkto9ck2] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.about-target-section .about-target-icon-wrapper .mud-icon-root[b-csdkto9ck2] {
    color: #ffffff;
    width: 28px;
    height: 28px;
}

.about-target-section .about-target-icon-1[b-csdkto9ck2] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.about-target-section .about-target-icon-2[b-csdkto9ck2] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.about-target-section .about-target-icon-3[b-csdkto9ck2] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.about-target-section .about-target-icon-4[b-csdkto9ck2] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.about-target-section h4.about-target-title[b-csdkto9ck2] {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.about-target-section .about-target-desc[b-csdkto9ck2] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ===== VALUES SECTION ===== */
section.about-values-section[b-csdkto9ck2] {
    padding: 5rem 0;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

.about-values-section .about-eyebrow[b-csdkto9ck2] {
    color: #6366f1;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.about-values-section h2.about-section-title[b-csdkto9ck2] {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.about-values-section .about-value-icon[b-csdkto9ck2] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.about-values-section .about-value-icon .mud-icon-root[b-csdkto9ck2] {
    color: #ffffff;
}

.about-values-section h4.about-value-title[b-csdkto9ck2] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.about-values-section .about-value-desc[b-csdkto9ck2] {
    font-size: 0.9375rem;
    color: #475569;
    margin: 0;
    line-height: 1.6;
    max-width: 280px;
}

/* ===== CTA SECTION ===== */
section.about-cta-section[b-csdkto9ck2] {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
}

.about-cta-section .about-cta-glow[b-csdkto9ck2] {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.about-cta-section .about-cta-content[b-csdkto9ck2] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.about-cta-section h2.about-cta-title[b-csdkto9ck2] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.about-cta-section .about-cta-subtitle[b-csdkto9ck2] {
    font-size: 1.125rem;
    color: #94a3b8;
    margin: 0;
}

.about-cta-section button.about-cta-button-primary.mud-button-filled[b-csdkto9ck2] {
    background: #ffffff;
    color: #6366f1;
    font-weight: 600;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.about-cta-section button.about-cta-button-secondary.mud-button-outlined[b-csdkto9ck2] {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-weight: 500;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
}

.about-cta-section button.about-cta-button-secondary.mud-button-outlined:hover[b-csdkto9ck2] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
    section.about-hero-section[b-csdkto9ck2] {
        padding: 3rem 0;
    }

    .about-hero-section h1.about-hero-title[b-csdkto9ck2] {
        font-size: 2rem;
    }

    section.about-mission-section[b-csdkto9ck2],
    section.about-target-section[b-csdkto9ck2],
    section.about-values-section[b-csdkto9ck2] {
        padding: 3rem 0;
    }

    .about-target-section h2.about-section-title[b-csdkto9ck2],
    .about-values-section h2.about-section-title[b-csdkto9ck2] {
        font-size: 1.75rem;
    }
}

@media (max-width: 600px) {
    .about-hero-section h1.about-hero-title[b-csdkto9ck2] {
        font-size: 1.5rem;
    }

    .about-cta-section h2.about-cta-title[b-csdkto9ck2] {
        font-size: 1.5rem;
    }
}
/* /Pages/Public/Pay.razor.rz.scp.css */
.loading-container[b-0s3x1jzcus] {
    min-height: 400px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .loading-container[b-0s3x1jzcus] {
        min-height: 300px;
    }
}
/* /Pages/Public/Pricing.razor.rz.scp.css */
/* =================================================================
   PRICING PAGE - Fintech-inspired design
   NO !important declarations
   ================================================================= */

/* ===== HERO SECTION ===== */
section.pricing-hero-section[b-a35jccjum0] {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.pricing-hero-section .pricing-hero-glow[b-a35jccjum0] {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
}

.pricing-hero-section .pricing-hero-glow-left[b-a35jccjum0] {
    top: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: rgba(16, 185, 129, 0.25);
}

.pricing-hero-section .pricing-hero-glow-right[b-a35jccjum0] {
    bottom: -20%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(16, 185, 129, 0.2);
}

.pricing-hero-section .pricing-hero-content[b-a35jccjum0] {
    position: relative;
    z-index: 1;
}

.pricing-hero-section .pricing-badge[b-a35jccjum0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 50px;
}

.pricing-hero-section .pricing-badge-text[b-a35jccjum0] {
    color: #6EE7B7;
    font-size: 0.875rem;
    font-weight: 500;
}

.pricing-hero-section h1.pricing-hero-title[b-a35jccjum0] {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    max-width: 800px;
    margin: 0;
}

.pricing-hero-section .pricing-hero-subtitle[b-a35jccjum0] {
    font-size: 1.125rem;
    color: #94a3b8;
    max-width: 600px;
    margin: 0;
}

/* ===== MODEL SECTION ===== */
section.pricing-model-section[b-a35jccjum0] {
    padding: 5rem 0;
    background: #ffffff;
}

.pricing-model-section .pricing-eyebrow[b-a35jccjum0] {
    color: #10B981;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-model-section h2.pricing-section-title[b-a35jccjum0] {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.pricing-model-section .pricing-section-subtitle[b-a35jccjum0] {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

.pricing-model-section .pricing-main-card.mud-paper[b-a35jccjum0] {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #10B981;
    border-radius: 24px;
    padding: 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.pricing-model-section .pricing-main-card.mud-paper[b-a35jccjum0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10B981 0%, #059669 100%);
}

.pricing-model-section .pricing-stripe-card.mud-paper[b-a35jccjum0] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 2rem;
    height: 100%;
}

.pricing-model-section .pricing-card-header[b-a35jccjum0] {
    margin-bottom: 1rem;
}

.pricing-model-section .pricing-card-label[b-a35jccjum0] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #10B981;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.pricing-model-section .pricing-stripe-label[b-a35jccjum0] {
    color: #3b82f6;
}

.pricing-model-section .pricing-card-price[b-a35jccjum0] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.pricing-model-section .pricing-price-value[b-a35jccjum0] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
}

.pricing-model-section .pricing-stripe-value[b-a35jccjum0] {
    font-size: 1.75rem;
}

.pricing-model-section .pricing-price-suffix[b-a35jccjum0] {
    font-size: 0.9375rem;
    color: #64748b;
}

.pricing-model-section .pricing-feature[b-a35jccjum0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pricing-model-section .pricing-feature span[b-a35jccjum0] {
    font-size: 0.9375rem;
    color: #334155;
}

.pricing-model-section .pricing-feature-icon.mud-icon-root[b-a35jccjum0] {
    color: #10b981;
    width: 20px;
    height: 20px;
}

.pricing-model-section .pricing-stripe-icon.mud-icon-root[b-a35jccjum0] {
    color: #3b82f6;
}

.pricing-model-section .pricing-info-note[b-a35jccjum0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 10px;
    font-size: 0.8125rem;
    color: #10B981;
}

.pricing-model-section .pricing-stripe-note[b-a35jccjum0] {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
}

.pricing-model-section .pricing-info-note .mud-icon-root[b-a35jccjum0] {
    width: 18px;
    height: 18px;
}

/* ===== CALCULATOR SECTION ===== */
section.pricing-calculator-section[b-a35jccjum0] {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.pricing-calculator-section .pricing-eyebrow[b-a35jccjum0] {
    color: #10B981;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-calculator-section h2.pricing-section-title[b-a35jccjum0] {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.pricing-calculator-section .pricing-calculator-card.mud-paper[b-a35jccjum0] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.pricing-calculator-section h3.pricing-calc-title[b-a35jccjum0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 1.5rem;
}

.pricing-calculator-section .pricing-calc-row[b-a35jccjum0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pricing-calculator-section .pricing-calc-label[b-a35jccjum0] {
    font-size: 0.9375rem;
    color: #475569;
}

.pricing-calculator-section .pricing-calc-label-group[b-a35jccjum0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-calculator-section .pricing-calc-value[b-a35jccjum0] {
    font-size: 1rem;
    font-weight: 500;
}

.pricing-calculator-section .pricing-calc-total[b-a35jccjum0] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.pricing-calculator-section .pricing-calc-fee[b-a35jccjum0] {
    color: #64748b;
}

.pricing-calculator-section .pricing-calc-result[b-a35jccjum0] {
    padding-top: 0.5rem;
}

.pricing-calculator-section .pricing-calc-result .pricing-calc-label[b-a35jccjum0] {
    font-weight: 600;
    color: #0f172a;
}

.pricing-calculator-section .pricing-calc-net[b-a35jccjum0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
}

.pricing-calculator-section .pricing-calc-percentage[b-a35jccjum0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 12px;
    color: #047857;
    font-size: 0.9375rem;
    margin: 0 0.5rem;
    width: auto;
}

.pricing-calculator-section .pricing-calc-percentage .mud-icon-root[b-a35jccjum0] {
    color: #10b981;
}

.pricing-calculator-section .pricing-calc-visual[b-a35jccjum0] {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
}

.pricing-calculator-section h4.pricing-calc-visual-title[b-a35jccjum0] {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 1rem;
}

.pricing-calculator-section .pricing-calc-bar[b-a35jccjum0] {
    display: flex;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.pricing-calculator-section .pricing-calc-bar-merchant[b-a35jccjum0] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
}

.pricing-calculator-section .pricing-calc-bar-fees[b-a35jccjum0] {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.pricing-calculator-section .pricing-calc-bar-legend[b-a35jccjum0] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.pricing-calculator-section .pricing-legend-item[b-a35jccjum0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #475569;
}

.pricing-calculator-section .pricing-legend-dot[b-a35jccjum0] {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.pricing-calculator-section .pricing-legend-merchant[b-a35jccjum0] {
    background: #10b981;
}

.pricing-calculator-section .pricing-legend-fees[b-a35jccjum0] {
    background: #94a3b8;
}

.pricing-calculator-section .pricing-calc-comparison[b-a35jccjum0] {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

.pricing-calculator-section .pricing-calc-comparison h5[b-a35jccjum0] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.pricing-calculator-section .pricing-comparison-item[b-a35jccjum0] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: #64748b;
}

.pricing-calculator-section .pricing-comparison-value[b-a35jccjum0] {
    font-weight: 500;
}

.pricing-calculator-section .pricing-comparison-good[b-a35jccjum0] {
    color: #10b981;
}

.pricing-calculator-section .pricing-comparison-bad[b-a35jccjum0] {
    color: #ef4444;
}

/* ===== INCLUDED SECTION ===== */
section.pricing-included-section[b-a35jccjum0] {
    padding: 5rem 0;
    background: #ffffff;
}

.pricing-included-section .pricing-eyebrow[b-a35jccjum0] {
    color: #10B981;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-included-section h2.pricing-section-title[b-a35jccjum0] {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.pricing-included-section .pricing-included-card.mud-paper[b-a35jccjum0] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

.pricing-included-section .pricing-included-card.mud-paper:hover[b-a35jccjum0] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-color: #10B981;
}

.pricing-included-section .pricing-included-icon[b-a35jccjum0] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.pricing-included-section .pricing-included-icon .mud-icon-root[b-a35jccjum0] {
    color: #ffffff !important;
    width: 28px;
    height: 28px;
}

.pricing-included-section .pricing-included-icon-1[b-a35jccjum0] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.pricing-included-section .pricing-included-icon-2[b-a35jccjum0] {
    background: linear-gradient(135deg, #10B981 0%, #047857 100%);
}

.pricing-included-section .pricing-included-icon-3[b-a35jccjum0] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.pricing-included-section .pricing-included-icon-4[b-a35jccjum0] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.pricing-included-section h4.pricing-included-title[b-a35jccjum0] {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.pricing-included-section .pricing-included-desc[b-a35jccjum0] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ===== FAQ SECTION ===== */
section.pricing-faq-section[b-a35jccjum0] {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.pricing-faq-section .pricing-eyebrow[b-a35jccjum0] {
    color: #10B981;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-faq-section h2.pricing-section-title[b-a35jccjum0] {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.pricing-faq-section .pricing-faq-card.mud-paper[b-a35jccjum0] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.3s ease;
}

.pricing-faq-section .pricing-faq-card.mud-paper:hover[b-a35jccjum0] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: rgba(16, 185, 129, 0.3);
}

.pricing-faq-section h4.pricing-faq-question[b-a35jccjum0] {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.pricing-faq-section .pricing-faq-answer[b-a35jccjum0] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* ===== CTA SECTION ===== */
section.pricing-cta-section[b-a35jccjum0] {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
}

.pricing-cta-section .pricing-cta-glow[b-a35jccjum0] {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.pricing-cta-section .pricing-cta-content[b-a35jccjum0] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.pricing-cta-section h2.pricing-cta-title[b-a35jccjum0] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.pricing-cta-section .pricing-cta-subtitle[b-a35jccjum0] {
    font-size: 1.125rem;
    color: #94a3b8;
    margin: 0;
}

.pricing-cta-section button.pricing-cta-button-primary.mud-button-filled[b-a35jccjum0] {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #ffffff;
    font-weight: 600;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.pricing-cta-section button.pricing-cta-button-primary.mud-button-filled .mud-button-label[b-a35jccjum0] {
    color: #ffffff;
}

.pricing-cta-section button.pricing-cta-button-primary.mud-button-filled .mud-icon-root[b-a35jccjum0] {
    color: #ffffff;
}

.pricing-cta-section button.pricing-cta-button-secondary.mud-button-outlined[b-a35jccjum0] {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-weight: 500;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
}

.pricing-cta-section button.pricing-cta-button-secondary.mud-button-outlined .mud-button-label[b-a35jccjum0] {
    color: #ffffff;
}

.pricing-cta-section button.pricing-cta-button-secondary.mud-button-outlined:hover[b-a35jccjum0] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
    section.pricing-hero-section[b-a35jccjum0] {
        padding: 3rem 0;
    }

    .pricing-hero-section h1.pricing-hero-title[b-a35jccjum0] {
        font-size: 2rem;
    }

    section.pricing-model-section[b-a35jccjum0],
    section.pricing-calculator-section[b-a35jccjum0],
    section.pricing-included-section[b-a35jccjum0],
    section.pricing-faq-section[b-a35jccjum0] {
        padding: 3rem 0;
    }

    .pricing-model-section h2.pricing-section-title[b-a35jccjum0],
    .pricing-calculator-section h2.pricing-section-title[b-a35jccjum0],
    .pricing-included-section h2.pricing-section-title[b-a35jccjum0],
    .pricing-faq-section h2.pricing-section-title[b-a35jccjum0] {
        font-size: 1.75rem;
    }

    .pricing-calculator-section .pricing-calculator-card.mud-paper[b-a35jccjum0] {
        padding: 1.5rem;
    }

    .pricing-calculator-section .pricing-calc-visual[b-a35jccjum0] {
        margin-top: 2rem;
    }
}

@media (max-width: 600px) {
    .pricing-hero-section h1.pricing-hero-title[b-a35jccjum0] {
        font-size: 1.5rem;
    }

    .pricing-model-section .pricing-price-value[b-a35jccjum0] {
        font-size: 2rem;
    }

    .pricing-cta-section h2.pricing-cta-title[b-a35jccjum0] {
        font-size: 1.5rem;
    }

    .pricing-calculator-section .pricing-calc-bar-merchant span[b-a35jccjum0] {
        font-size: 0.75rem;
    }
}
/* /Pages/Public/Signup.razor.rz.scp.css */
.loading-container[b-dhktjcm58h] {
    min-height: 60vh;
}

.cursor-pointer[b-dhktjcm58h] {
    cursor: pointer;
}

.mud-border-primary.mud-paper[b-dhktjcm58h] {
    border-color: var(--merchant-primary, #1976D2);
}

.stripe-card-element[b-dhktjcm58h] {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    min-height: 44px;
}

.text-danger[b-dhktjcm58h] {
    color: #d32f2f;
    font-size: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .loading-container[b-dhktjcm58h] {
        min-height: 50vh;
    }
}
/* /Pages/Public/SignupInfo.razor.rz.scp.css */
.signup-info-card[b-qwkkka4n6s] {
    border-radius: 12px;
}

.full-width[b-qwkkka4n6s] {
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .signup-info-card.mud-paper[b-qwkkka4n6s] {
        padding: 24px;
    }
}
/* /Pages/Public/Success.razor.rz.scp.css */
.success-card.mud-paper[b-m0oxhqjpbx] {
    border-radius: 12px;
}

.success-icon.mud-icon-root[b-m0oxhqjpbx] {
    font-size: 80px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .success-card.mud-paper[b-m0oxhqjpbx] {
        padding: 24px;
    }

    .success-icon.mud-icon-root[b-m0oxhqjpbx] {
        font-size: 60px;
    }
}
/* /Pages/Register.razor.rz.scp.css */
.register-container[b-d55enbahig] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding: 24px;
    box-sizing: border-box;
}

.register-card[b-d55enbahig] {
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    box-sizing: border-box;
}

.register-header[b-d55enbahig] {
    text-align: center;
    margin-bottom: 16px;
}

.register-footer[b-d55enbahig] {
    text-align: center;
}

/* Mobile responsive - prevent horizontal overflow */
@media (max-width: 500px) {
    .register-container[b-d55enbahig] {
        padding: 8px !important;
        align-items: flex-start !important;
        padding-top: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .register-card[b-d55enbahig] {
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        border-radius: 8px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
}

/* Ensure all inputs fit within container */
[b-d55enbahig] .mud-input-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

[b-d55enbahig] .mud-input-outlined {
    width: 100% !important;
    box-sizing: border-box !important;
}

[b-d55enbahig] .mud-stack {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobile - force all MudBlazor padding classes to respect container */
@media (max-width: 500px) {
    [b-d55enbahig] .mud-paper {
        padding: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    [b-d55enbahig] .mud-input,
    [b-d55enbahig] .mud-input-root,
    [b-d55enbahig] .mud-input-slot,
    [b-d55enbahig] .mud-select,
    [b-d55enbahig] .mud-select-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    [b-d55enbahig] .mud-input-outlined-border {
        max-width: 100% !important;
    }

    [b-d55enbahig] .mud-button-root {
        max-width: 100% !important;
    }

    /* Slightly taller input fields on mobile */
    [b-d55enbahig] .mud-input-control {
        min-height: 56px !important;
    }

    [b-d55enbahig] .mud-input-slot {
        min-height: 56px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    [b-d55enbahig] .mud-select .mud-input-slot {
        min-height: 56px !important;
    }

    [b-d55enbahig] .mud-input-outlined .mud-input-slot {
        min-height: 56px !important;
    }
}