/* ===========================================
   THEME CSS VARIABLES
   Light/Dark theme switching via html.dark class
   =========================================== */

:root {
    /* Light theme (default) */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-input: #f8fafc;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --border-color: #e2e8f0;
    --border-light: #f1f5f9;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.12);

    /* Accent colors */
    --accent-green: #10b981;
    --accent-green-light: #34d399;
    --accent-blue: #3b82f6;
    --accent-blue-light: #60a5fa;
    --accent-purple: #8b5cf6;
    --accent-purple-light: #a78bfa;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fbbf24;
    --accent-red: #ef4444;

    /* Progress bar & chart colors */
    --progress-track: #f1f5f9;
    --progress-blue: linear-gradient(90deg, #3b82f6, #2563eb);
    --progress-green: linear-gradient(90deg, #10b981, #059669);
    --progress-purple: linear-gradient(90deg, #8b5cf6, #7c3aed);
    --progress-amber: linear-gradient(90deg, #f59e0b, #d97706);
    --chart-bar-green: linear-gradient(to top, #10b981, #34d399);
    --chart-bar-blue: linear-gradient(to top, #3b82f6, #60a5fa);
    --chart-bar-purple: linear-gradient(to top, #8b5cf6, #a78bfa);
    --chart-bar-amber: linear-gradient(to top, #f59e0b, #fbbf24);

    /* Category colors */
    --color-business: #3b82f6;
    --color-unlimited: #10b981;
    --color-other: #8b5cf6;

    /* Unified status palette (Allocation baseline) */
    --status-green-bg: #ecfdf5;
    --status-green-fg: #047857;
    --status-blue-bg: #eff6ff;
    --status-blue-fg: #1d4ed8;
    --status-cyan-bg: #e0f2fe;
    --status-cyan-fg: #075985;
    --status-amber-bg: #fffbeb;
    --status-amber-fg: #b45309;
    --status-red-bg: #fef2f2;
    --status-red-fg: #b91c1c;
    --status-purple-bg: #ede9fe;
    --status-purple-fg: #6d28d9;
}

/* Dark theme */
html.dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: rgba(255, 255, 255, 0.02);
    --bg-sidebar: #1e293b;
    --bg-input: rgba(255, 255, 255, 0.08);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-color: rgba(255, 255, 255, 0.05);
    --border-light: rgba(255, 255, 255, 0.025);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.5);

    /* Accent colors - brighter for dark bg */
    --accent-green: #6ee7b7;
    --accent-green-light: #86efac;
    --accent-blue: #93c5fd;
    --accent-blue-light: #bfdbfe;
    --accent-purple: #c4b5fd;
    --accent-purple-light: #ddd6fe;
    --accent-amber: #fcd34d;
    --accent-amber-light: #fde68a;
    --accent-red: #fca5a5;

    /* Progress bar & chart colors - vivid for dark bg */
    --progress-track: rgba(255, 255, 255, 0.15);
    --progress-blue: linear-gradient(90deg, #60a5fa, #3b82f6);
    --progress-green: linear-gradient(90deg, #34d399, #10b981);
    --progress-purple: linear-gradient(90deg, #a78bfa, #8b5cf6);
    --progress-amber: linear-gradient(90deg, #fbbf24, #f59e0b);
    --chart-bar-green: linear-gradient(to top, #059669, #4ade80);
    --chart-bar-blue: linear-gradient(to top, #2563eb, #93c5fd);
    --chart-bar-purple: linear-gradient(to top, #7c3aed, #c4b5fd);
    --chart-bar-amber: linear-gradient(to top, #d97706, #fcd34d);

    /* Category colors - brighter for dark bg */
    --color-business: #93c5fd;
    --color-unlimited: #6ee7b7;
    --color-other: #c4b5fd;

    /* Unified status palette (Allocation baseline) */
    --status-green-bg: rgba(16, 185, 129, 0.2);
    --status-green-fg: #6ee7b7;
    --status-blue-bg: rgba(59, 130, 246, 0.2);
    --status-blue-fg: #93c5fd;
    --status-cyan-bg: rgba(14, 116, 144, 0.28);
    --status-cyan-fg: #67e8f9;
    --status-amber-bg: rgba(245, 158, 11, 0.2);
    --status-amber-fg: #fcd34d;
    --status-red-bg: rgba(239, 68, 68, 0.2);
    --status-red-fg: #fca5a5;
    --status-purple-bg: rgba(139, 92, 246, 0.2);
    --status-purple-fg: #c4b5fd;
}

/* ===========================================
   BASE STYLES
   =========================================== */

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.2s, color 0.2s;
}

/* Theme toggle button */
.theme-toggle-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.theme-toggle-btn:hover {
    background: var(--border-color);
}

/* Content card base - used by .content-card class in blade templates */
.content-card {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-light);
}

.sidebar-link {
    color: var(--text-secondary);
    transition: all 0.2s;
}

.sidebar-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sidebar-link.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
}

/* Section titles */
.section-title {
    color: var(--text-primary);
}

/* Links */
a {
    color: var(--accent-blue);
}

/* Code blocks */
code {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===========================================
   DARK THEME OVERRIDES
   Handle hardcoded styles in pages not yet refactored
   =========================================== */

/* White backgrounds */
html.dark [style*="background: white"],
html.dark [style*="background:white"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#fff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background:#ffffff"] {
    background: var(--bg-card) !important;
}

/* Light gray backgrounds */
html.dark [style*="background: #f8fafc"],
html.dark [style*="background:#f8fafc"],
html.dark [style*="background: #f1f5f9"],
html.dark [style*="background:#f1f5f9"],
html.dark [style*="background: #fafbfc"] {
    background: var(--bg-tertiary) !important;
}

/* Linear gradient backgrounds */
html.dark [style*="background: linear-gradient(135deg, #f1f5f9"],
html.dark [style*="background:linear-gradient(135deg, #f1f5f9"] {
    background: var(--bg-primary) !important;
}

/* Text colors */
html.dark [style*="color: #1e293b"],
html.dark [style*="color:#1e293b"],
html.dark [style*="color: #374151"],
html.dark [style*="color:#374151"] {
    color: var(--text-primary) !important;
}

html.dark [style*="color: #64748b"],
html.dark [style*="color:#64748b"],
html.dark [style*="color: #6b7280"] {
    color: var(--text-secondary) !important;
}

html.dark [style*="color: #94a3b8"],
html.dark [style*="color:#94a3b8"],
html.dark [style*="color: #9ca3af"] {
    color: var(--text-muted) !important;
}

/* Border colors */
html.dark [style*="border-color: #f1f5f9"],
html.dark [style*="border-color:#f1f5f9"],
html.dark [style*="border: 1px solid #f1f5f9"],
html.dark [style*="border:1px solid #f1f5f9"],
html.dark [style*="border-bottom: 1px solid #f1f5f9"] {
    border-color: var(--border-light) !important;
}

html.dark [style*="border: 1px solid #e2e8f0"],
html.dark [style*="border:1px solid #e2e8f0"],
html.dark [style*="border-color: #e2e8f0"] {
    border-color: var(--border-color) !important;
}

/* Tables */
html.dark table thead {
    background: var(--bg-tertiary) !important;
}

html.dark table th {
    color: var(--text-secondary) !important;
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

html.dark table td {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

html.dark table tr:hover td {
    background: var(--bg-tertiary) !important;
}

/* Inputs and selects */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark input[type="number"],
html.dark input[type="url"],
html.dark textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html.dark select {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Form inputs with style attribute */
html.dark .form-input,
html.dark .search-input,
html.dark .filter-select,
html.dark .period-select {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Modals */
html.dark .modal-content {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Modal/backdrop harmonization for dark mode (reduce bright white glare) */
html.dark .modal-backdrop {
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(8px) !important;
}

html.dark .modal-content:not(.qr-modal-content),
html.dark [class*="modal-content"]:not(.qr-modal-content):not(#qr-card-preview) {
    background: #0f172a !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0.72) !important;
    color: var(--text-primary) !important;
}

html.dark .modal-content:not(.qr-modal-content) [style*="background: white"]:not(#qr-card-preview *),
html.dark .modal-content:not(.qr-modal-content) [style*="background:white"]:not(#qr-card-preview *),
html.dark .modal-content:not(.qr-modal-content) [style*="background: #ffffff"]:not(#qr-card-preview *),
html.dark .modal-content:not(.qr-modal-content) [style*="background:#ffffff"]:not(#qr-card-preview *),
html.dark .modal-content:not(.qr-modal-content) [style*="background: #f8fafc"]:not(#qr-card-preview *),
html.dark .modal-content:not(.qr-modal-content) [style*="background:#f8fafc"]:not(#qr-card-preview *),
html.dark .modal-content:not(.qr-modal-content) [style*="background: #f1f5f9"]:not(#qr-card-preview *),
html.dark .modal-content:not(.qr-modal-content) [style*="background:#f1f5f9"]:not(#qr-card-preview *) {
    background: #111827 !important;
}

html.dark .modal-content:not(.qr-modal-content) [style*="box-shadow"] {
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.6) !important;
}

html.dark .modal-content:not(.qr-modal-content) button[style*="background: white"],
html.dark .modal-content:not(.qr-modal-content) button[style*="background:white"],
html.dark .modal-content:not(.qr-modal-content) button[style*="background: #ffffff"],
html.dark .modal-content:not(.qr-modal-content) button[style*="background:#ffffff"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Tone down bright glow effects in dark mode */
html.dark [style*="box-shadow"][style*="rgba(16, 185, 129"],
html.dark [style*="box-shadow"][style*="rgba(59, 130, 246"],
html.dark [style*="box-shadow"][style*="rgba(139, 92, 246"],
html.dark [style*="box-shadow"][style*="rgba(245, 158, 11"],
html.dark [style*="box-shadow"][style*="rgba(34, 197, 94"] {
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.52) !important;
}

/* Reduce bright pastel gradient cards in dark mode */
html.dark [style*="linear-gradient(135deg, #ecfdf5"],
html.dark [style*="linear-gradient(135deg,#ecfdf5"],
html.dark [style*="linear-gradient(135deg, #f0fdf4"],
html.dark [style*="linear-gradient(135deg,#f0fdf4"],
html.dark [style*="linear-gradient(135deg, #d1fae5"],
html.dark [style*="linear-gradient(135deg,#d1fae5"],
html.dark [style*="linear-gradient(135deg, #fef2f2"],
html.dark [style*="linear-gradient(135deg,#fef2f2"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92)) !important;
}

/* Buttons */
html.dark .btn-cancel {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

html.dark .action-btn:hover {
    background: var(--bg-tertiary) !important;
}

/* Unified tab buttons (Monitoring style baseline) */
.monitor-tabs-shell,
.sales-tabs-shell {
    display: flex !important;
    gap: 8px !important;
    background: white !important;
    padding: 8px !important;
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    width: fit-content !important;
}

.tab-btn,
.nav-tab,
.tab-button,
.monitor-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    transition: all 0.2s !important;
}

.tab-btn:hover,
.nav-tab:hover,
.tab-button:hover,
.monitor-tab:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
}

.tab-btn.active,
.nav-tab.active,
.tab-button.active,
.monitor-tab.active {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    color: #2563eb !important;
    box-shadow: inset 0 0 0 1px #bfdbfe !important;
}

/* Unified tab counts/badges */
.tab-count {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

.tab-btn[style*="#ef4444"] {
    color: #ef4444 !important;
}

html.dark .tab-btn,
html.dark .nav-tab,
html.dark .tab-button,
html.dark .monitor-tab {
    color: #9fb0c9 !important;
}

html.dark .tab-btn:hover,
html.dark .nav-tab:hover,
html.dark .tab-button:hover,
html.dark .monitor-tab:hover {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #e2e8f0 !important;
}

html.dark .tab-btn.active,
html.dark .nav-tab.active,
html.dark .tab-button.active,
html.dark .monitor-tab.active {
    background: linear-gradient(135deg, #1d3a66, #1e4d8f) !important;
    color: #bfdbfe !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.32) !important;
}

html.dark .tab-count {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

html.dark .monitor-tabs-shell,
html.dark .sales-tabs-shell {
    background: #121c2d !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

html.dark .tab-btn[style*="#ef4444"] {
    color: #fda4af !important;
}

/* Status badges */
html.dark .status-active {
    background: rgba(16, 185, 129, 0.2) !important;
    color: var(--accent-green) !important;
}

html.dark .status-expired {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--accent-red) !important;
}

html.dark .status-expiring {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--accent-amber) !important;
}

/* Stat cards */
html.dark .stat-card {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

/* Icon circles (light backgrounds) */
html.dark [style*="background: #ecfdf5"],
html.dark [style*="background:#ecfdf5"],
html.dark [style*="background: #eff6ff"],
html.dark [style*="background:#eff6ff"],
html.dark [style*="background: #ede9fe"],
html.dark [style*="background:#ede9fe"],
html.dark [style*="background: #fef2f2"],
html.dark [style*="background:#fef2f2"],
html.dark [style*="background: #fffbeb"],
html.dark [style*="background:#fffbeb"],
html.dark [style*="background: #eef2ff"],
html.dark [style*="background:#eef2ff"],
html.dark [style*="background: #ecfeff"],
html.dark [style*="background:#ecfeff"],
html.dark [style*="background: #f5f3ff"],
html.dark [style*="background:#f5f3ff"] {
    background: var(--bg-tertiary) !important;
}

/* Sidebar */
html.dark .admin-sidebar,
html.dark .seller-sidebar {
    background: var(--bg-sidebar) !important;
    border-color: var(--border-light) !important;
}

html.dark .sidebar-nav-item,
html.dark .admin-sidebar a,
html.dark .seller-sidebar a {
    color: var(--text-secondary) !important;
}

html.dark .sidebar-nav-item:hover,
html.dark .admin-sidebar a:hover,
html.dark .seller-sidebar a:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.dark .sidebar-nav-item.active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--accent-green) !important;
}

/* Navigation links */
html.dark .nav-tab {
    color: var(--text-secondary) !important;
}

html.dark .nav-tab:hover {
    background: var(--bg-tertiary) !important;
}

/* Channel cards/items */
html.dark .channel-card,
html.dark .channel-item {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

html.dark .channel-item:hover {
    background: var(--bg-tertiary) !important;
}

/* Keys badge */
html.dark .keys-badge,
html.dark [style*="background: #f1f5f9"][style*="padding"] {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Table rows with alternating colors */
html.dark .table-row-even,
html.dark .table-row-odd {
    background: transparent !important;
}

/* Section groups */
html.dark .section-group {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Footer cards */
html.dark .admin-footer-card,
html.dark .seller-user-info {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

/* Mobile menu button */
html.dark .mobile-menu-button {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Chart filter */
html.dark .chart-filter {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ===========================================
   ADDITIONAL DARK THEME FIXES
   =========================================== */

/* Table containers - specifically target tables in cards */
html.dark .content-card table,
html.dark table {
    background: transparent !important;
}

html.dark tbody {
    background: transparent !important;
}

html.dark tbody tr {
    background: transparent !important;
    border-color: var(--border-light) !important;
}

html.dark tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Tailwind text color classes */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 {
    color: var(--text-primary) !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: var(--text-secondary) !important;
}

html.dark .text-gray-400,
html.dark .text-gray-300 {
    color: var(--text-muted) !important;
}

/* Tailwind background classes */
html.dark .bg-white {
    background: var(--bg-card) !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
    background: var(--bg-tertiary) !important;
}

/* Tailwind border classes */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-slate-100,
html.dark .border-slate-200 {
    border-color: var(--border-light) !important;
}

/* Specific icon circle colors - make background semi-transparent */
html.dark .icon-circle {
    background: var(--bg-tertiary) !important;
}

html.dark .icon-circle.blue {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

html.dark .icon-circle.green {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

html.dark .icon-circle.red {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

html.dark .icon-circle.amber {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

html.dark .icon-circle.indigo,
html.dark .icon-circle.purple {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
}

html.dark .icon-circle.cyan {
    background: rgba(6, 182, 212, 0.15) !important;
    color: #22d3ee !important;
}

/* Dashboard cards - stat values */
html.dark .stat-card p,
html.dark .stat-card span {
    color: var(--text-primary) !important;
}

html.dark .stat-card .text-3xl,
html.dark .stat-card .text-2xl {
    color: var(--text-primary) !important;
}

/* Tab navigation - brighter text */
html.dark .nav-tab {
    color: #94a3b8 !important;
}

html.dark .nav-tab:hover {
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html.dark .nav-tab.active {
    color: white !important;
}

/* Table text - ensure visibility */
html.dark td,
html.dark td span,
html.dark td a,
html.dark td div {
    color: var(--text-primary) !important;
}

html.dark th,
html.dark th span {
    color: var(--text-secondary) !important;
}

/* URL/code text in tables */
html.dark td code,
html.dark [style*="font-family: monospace"],
html.dark [style*="font-family:monospace"] {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Keys count badges */
html.dark [style*="background: #f1f5f9"],
html.dark [style*="background:#f1f5f9"] {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Selected/active tabs fix */
html.dark .tab-btn.active .tab-count {
    background: var(--accent-blue) !important;
    color: white !important;
}

/* Filter/period select styling */
html.dark select option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Chart labels and axis text */
html.dark .chart-container text,
html.dark svg text {
    fill: var(--text-secondary) !important;
}

/* Duration selector boxes */
html.dark [style*="border-radius"][style*="padding"][style*="background: white"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Avatar circles - EXCLUDE QR modal decorative circles */
html.dark [style*="border-radius: 50%"][style*="background"]:not(#qr-card-preview *):not(.qr-modal-header *),
html.dark [style*="border-radius:50%"][style*="background"]:not(#qr-card-preview *):not(.qr-modal-header *) {
    background: var(--bg-tertiary) !important;
}

/* Card headers with borders */
html.dark [style*="border-bottom: 1px solid"] {
    border-color: var(--border-light) !important;
}

/* Ensure all p tags in dark cards are visible */
html.dark .stat-card p {
    color: var(--text-primary) !important;
}

html.dark .stat-card .text-xs {
    color: var(--text-secondary) !important;
}

/* ===========================================
   FINAL SPECIFIC FIXES
   =========================================== */

/* Table wrapper/container with inline white background - EXCLUDE QR modal elements */
html.dark div[style*="background: white"]:not(.qr-code-wrapper):not(.qr-logo-bg):not(#qr-card-preview *),
html.dark div[style*="background:white"]:not(.qr-code-wrapper):not(.qr-logo-bg):not(#qr-card-preview *),
html.dark div[style*="overflow: hidden"][style*="border-radius"]:not(.qr-code-wrapper):not(.qr-logo-bg),
html.dark div[style*="overflow:hidden"][style*="border-radius"]:not(.qr-code-wrapper):not(.qr-logo-bg) {
    background: var(--bg-card) !important;
}

/* Content card - ensure all nested tables have transparent bg */
html.dark .content-card,
html.dark .content-card>div,
html.dark .content-card table,
html.dark .content-card thead,
html.dark .content-card tbody {
    background: var(--bg-card) !important;
}

/* Payment/transaction badge backgrounds (light green/yellow/blue) */
html.dark [style*="background: #d1fae5"],
html.dark [style*="background:#d1fae5"],
html.dark [style*="background: #dcfce7"],
html.dark [style*="background:#dcfce7"],
html.dark [style*="background: #fef3c7"],
html.dark [style*="background:#fef3c7"],
html.dark [style*="background: #fef9c3"],
html.dark [style*="background:#fef9c3"],
html.dark [style*="background: #dbeafe"],
html.dark [style*="background:#dbeafe"],
html.dark [style*="background: #e0f2fe"],
html.dark [style*="background:#e0f2fe"] {
    background: var(--bg-tertiary) !important;
}

/* Discount negative amounts - make red more visible */
html.dark [style*="color: #dc2626"],
html.dark [style*="color:#dc2626"],
html.dark [style*="color: #ef4444"],
html.dark [style*="color:#ef4444"],
html.dark [style*="color: red"],
html.dark [style*="color:red"] {
    color: #f87171 !important;
}

/* Rank badges - gold/yellow backgrounds */
html.dark [style*="background: #fef3c7"],
html.dark [style*="background:#fef3c7"],
html.dark [style*="background: #fef9c3"],
html.dark [style*="background:#fef9c3"],
html.dark [style*="background: #fde047"],
html.dark [style*="background:#fde047"],
html.dark [style*="background: linear-gradient"][style*="gold"],
html.dark [style*="background: linear-gradient"][style*="#fef"] {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fcd34d !important;
}

/* Other rank badge colors (silver, bronze) */
html.dark [style*="background: #e5e7eb"],
html.dark [style*="background:#e5e7eb"],
html.dark [style*="background: #f3f4f6"],
html.dark [style*="background:#f3f4f6"] {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* URL/code displays in tables */
html.dark [style*="background: #1e293b"],
html.dark [style*="background:#1e293b"],
html.dark [style*="background: #334155"],
html.dark [style*="background:#334155"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Extended/Created badges in tables */
html.dark [style*="background: #dbeafe"][style*="color: #1e40af"] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

html.dark [style*="background: #dcfce7"][style*="color: #166534"] {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

/* Tab navigation wrapper backgrounds */
html.dark [style*="display: flex"][style*="gap"][style*="background: white"][style*="padding: 8px"] {
    background: var(--bg-card) !important;
}

/* Ensure table headers are styled correctly */
html.dark thead tr,
html.dark thead th {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

/* Force all direct table backgrounds */
html.dark table[style*="background"],
html.dark table[style] {
    background: transparent !important;
}

/* Fix specific checkbox/input backgrounds in tables */
html.dark input[type="checkbox"] {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}

/* ===========================================
   CATEGORY BADGES - PURPLE/PINK COLORS
   =========================================== */

/* Pink/Purple category backgrounds (Unlimited VD, etc.) */
html.dark [style*="background: #fce7f3"],
html.dark [style*="background:#fce7f3"],
html.dark [style*="background: #fbcfe8"],
html.dark [style*="background:#fbcfe8"],
html.dark [style*="background: #f9a8d4"],
html.dark [style*="background:#f9a8d4"],
html.dark [style*="background: #fdf2f8"],
html.dark [style*="background:#fdf2f8"] {
    background: rgba(236, 72, 153, 0.2) !important;
}

html.dark [style*="color: #be185d"],
html.dark [style*="color:#be185d"],
html.dark [style*="color: #ec4899"],
html.dark [style*="color:#ec4899"] {
    color: #f472b6 !important;
}

/* Green category backgrounds (Unlimited XC, etc.) */
html.dark [style*="background: #dcfce7"][style*="color: #166534"],
html.dark [style*="background:#dcfce7"][style*="color:#166534"] {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

/* Blue category backgrounds (Business XC, etc.) */
html.dark [style*="background: #dbeafe"][style*="color: #1e40af"],
html.dark [style*="background:#dbeafe"][style*="color:#1e40af"] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

/* Purple category backgrounds (Outline, etc.) */
html.dark [style*="background: #ede9fe"],
html.dark [style*="background:#ede9fe"],
html.dark [style*="background: #e9d5ff"],
html.dark [style*="background:#e9d5ff"] {
    background: rgba(139, 92, 246, 0.2) !important;
}

html.dark [style*="color: #6b21a8"],
html.dark [style*="color:#6b21a8"],
html.dark [style*="color: #7c3aed"],
html.dark [style*="color:#7c3aed"] {
    color: #a78bfa !important;
}

/* ===========================================
   TAB REDESIGN - RED INDICATOR BAR
   =========================================== */

/* Remove blue pill background from active tabs */
.tab-btn.active {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-bottom: 3px solid var(--status-red-fg) !important;
    border-radius: 0 !important;
}

html.dark .tab-btn.active {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-bottom: 3px solid var(--status-red-fg) !important;
}

/* Tab button base styles */
.tab-btn {
    position: relative;
    background: transparent !important;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    transition: all 0.2s;
}

.tab-btn:hover {
    background: transparent !important;
    border-bottom-color: rgba(252, 165, 165, 0.35);
}

html.dark .tab-btn:hover {
    background: transparent !important;
    border-bottom-color: rgba(252, 165, 165, 0.35);
}

/* Tab count - flat style without shadow/card */
.tab-count {
    box-shadow: none !important;
    border: none !important;
}

html.dark .tab-count {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    border: none !important;
}

/* ===========================================
   MORE CATEGORY BADGE FIXES
   =========================================== */

/* Unlimited VD - #fae8ff background */
html.dark [style*="background: #fae8ff"],
html.dark [style*="background:#fae8ff"],
html.dark [style*="background: #f5f3ff"],
html.dark [style*="background:#f5f3ff"] {
    background: rgba(192, 38, 211, 0.2) !important;
}

html.dark [style*="color: #c026d3"],
html.dark [style*="color:#c026d3"] {
    color: #e879f9 !important;
}

/* Business VD - #ecfdf5 background */
html.dark [style*="background: #ecfdf5"],
html.dark [style*="background:#ecfdf5"] {
    background: rgba(5, 150, 105, 0.2) !important;
}

html.dark [style*="color: #059669"],
html.dark [style*="color:#059669"] {
    color: #34d399 !important;
}

/* Unlimited XC - #f5f3ff purple */
html.dark [style*="background: #f5f3ff"][style*="color: #8b5cf6"],
html.dark [style*="color: #8b5cf6"] {
    color: #a78bfa !important;
}

/* Business XC - #eff6ff blue */
html.dark [style*="background: #eff6ff"],
html.dark [style*="background:#eff6ff"] {
    background: rgba(59, 130, 246, 0.2) !important;
}

/* General category badge class */
html.dark .category-badge {
    background: var(--bg-tertiary) !important;
}

/* ===========================================
   CHECKBOX STYLING
   =========================================== */

/* Checkbox base - dark mode */
html.dark input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--bg-input) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

/* Checkbox checked state */
html.dark input[type="checkbox"]:checked {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Checkbox checkmark */
html.dark input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Checkbox hover state */
html.dark input[type="checkbox"]:hover {
    border-color: #60a5fa !important;
}

/* Light mode checkbox styling for consistency */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: white;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked {
    background: #3b82f6;
    border-color: #3b82f6;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:hover {
    border-color: #3b82f6;
}

/* ===========================================
   SELLER DASHBOARD DARK THEME FIXES
   =========================================== */

/* Seller sidebar logout button */
html.dark .logout-btn {
    color: #f87171 !important;
}

html.dark .logout-btn:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

html.dark .logout-btn .icon {
    color: #f87171 !important;
}

/* Seller user info section - darker in dark mode */
html.dark .seller-user-info {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-light) !important;
}

/* Tasks History table header - reduce brightness */
html.dark .tasks-history thead,
html.dark .tasks-history th,
html.dark [class*="task"] thead,
html.dark [class*="task"] th {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* General table header fix for seller dashboard */
html.dark .content-card thead th {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

/* Reduce any overly bright table rows */
html.dark .content-card tbody tr {
    background: transparent !important;
}

html.dark .content-card tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Content card border - very subtle in dark mode */
html.dark .content-card {
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
}

/* ===========================================
   UNIFIED NAVIGATION BACKGROUNDS - Dark Mode
   All navigation elements use the same color: #1e293b
   =========================================== */

/* Top toolbar/navbar */
html.dark nav.bg-white,
html.dark nav[class*="bg-white"],
html.dark .bg-white.border-b {
    background: #172135 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dropdown button in nav */
html.dark nav button.bg-white {
    background: #172135 !important;
    color: #f1f5f9 !important;
}

html.dark nav .text-gray-500,
html.dark nav .text-gray-400 {
    color: #94a3b8 !important;
}

/* Admin sidebar - already #1e293b via .admin-sidebar */
/* Seller sidebar - already #1e293b via .seller-sidebar */

/* Dropdown content in dark mode */
html.dark .dropdown-content,
html.dark [x-show*="open"]>div {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown links */
html.dark .dropdown-link,
html.dark a.block.px-4 {
    color: #f1f5f9 !important;
}

html.dark .dropdown-link:hover,
html.dark a.block.px-4:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ===========================================
   ADMIN SIDEBAR - Ensure unified background
   =========================================== */

/* Override inline white background */
html.dark .admin-sidebar,
html.dark .admin-sidebar[style*="background: white"],
html.dark .admin-sidebar[style*="background:white"] {
    background: #172135 !important;
}

/* Admin sidebar header area */
html.dark .admin-sidebar>div[style*="border-bottom"],
html.dark .admin-sidebar-header {
    background: #172135 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* All divs inside admin sidebar */
html.dark .admin-sidebar>div {
    background: transparent !important;
}

/* ===========================================
   QR MODAL - Dark theme support
   =========================================== */

/* QR card preview container */
html.dark #qr-card-preview {
    background: #0f172a !important;
}

/* QR code section background */
html.dark #qr-card-preview>div:nth-child(2) {
    background: #0f172a !important;
}

/* Key name text in QR modal */
html.dark #qr-card-preview h2 {
    color: #f1f5f9 !important;
}

/* Server name text in QR modal */
html.dark #qr-card-preview p {
    color: #94a3b8 !important;
}

/* QR code wrapper - ALWAYS white background - high specificity */
html.dark .qr-code-wrapper,
html.dark #qr-card-preview .qr-code-wrapper {
    background: white !important;
    border-color: #334155 !important;
}

/* Contact info footer */
html.dark #qr-card-preview>div:last-child {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

/* Contact cards */
html.dark #qr-card-preview>div:last-child>div>div {
    background: #1e293b !important;
}

/* Contact text - make white */
html.dark #qr-card-preview>div:last-child p {
    color: #f1f5f9 !important;
}

/* Expiration badge in dark mode */
html.dark #qr-card-preview>div:nth-child(2)>div:last-of-type:not(.qr-code-wrapper) {
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

/* Expiration badge text and icon - amber */
html.dark #qr-card-preview>div:nth-child(2)>div:last-of-type:not(.qr-code-wrapper) span,
html.dark #qr-card-preview>div:nth-child(2)>div:last-of-type:not(.qr-code-wrapper) svg {
    color: #fbbf24 !important;
}

/* Action buttons area */
html.dark .modal-content>div:last-child {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

/* Copy link button in dark mode */
html.dark .modal-content>div:last-child>button:first-child {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ===========================================
   GLOBAL DARK STATUS PALETTE NORMALIZATION
   Keep all pages aligned with Monitoring/Allocation colors
   =========================================== */

html.dark .status-active,
html.dark .state-free {
    background: var(--status-green-bg) !important;
    color: var(--status-green-fg) !important;
}

html.dark .status-expiring,
html.dark .state-used {
    background: var(--status-amber-bg) !important;
    color: var(--status-amber-fg) !important;
}

html.dark .status-expired,
html.dark .state-hold {
    background: var(--status-red-bg) !important;
    color: var(--status-red-fg) !important;
}

html.dark .state-taken {
    background: var(--status-blue-bg) !important;
    color: var(--status-blue-fg) !important;
}

html.dark .state-lock {
    background: var(--status-cyan-bg) !important;
    color: var(--status-cyan-fg) !important;
}

/* Text accents */
html.dark [style*="color: #10b981"],
html.dark [style*="color:#10b981"],
html.dark [style*="color: #059669"],
html.dark [style*="color:#059669"],
html.dark [style*="color: #34d399"],
html.dark [style*="color:#34d399"],
html.dark [style*="color: #22c55e"],
html.dark [style*="color:#22c55e"] {
    color: var(--status-green-fg) !important;
}

html.dark [style*="color: #3b82f6"],
html.dark [style*="color:#3b82f6"],
html.dark [style*="color: #2563eb"],
html.dark [style*="color:#2563eb"],
html.dark [style*="color: #1d4ed8"],
html.dark [style*="color:#1d4ed8"],
html.dark [style*="color: #60a5fa"],
html.dark [style*="color:#60a5fa"] {
    color: var(--status-blue-fg) !important;
}

html.dark [style*="color: #ef4444"],
html.dark [style*="color:#ef4444"],
html.dark [style*="color: #dc2626"],
html.dark [style*="color:#dc2626"],
html.dark [style*="color: #b91c1c"],
html.dark [style*="color:#b91c1c"],
html.dark [style*="color: #f87171"],
html.dark [style*="color:#f87171"] {
    color: var(--status-red-fg) !important;
}

html.dark [style*="color: #f59e0b"],
html.dark [style*="color:#f59e0b"],
html.dark [style*="color: #d97706"],
html.dark [style*="color:#d97706"],
html.dark [style*="color: #b45309"],
html.dark [style*="color:#b45309"],
html.dark [style*="color: #fbbf24"],
html.dark [style*="color:#fbbf24"] {
    color: var(--status-amber-fg) !important;
}

html.dark [style*="color: #8b5cf6"],
html.dark [style*="color:#8b5cf6"],
html.dark [style*="color: #7c3aed"],
html.dark [style*="color:#7c3aed"],
html.dark [style*="color: #a78bfa"],
html.dark [style*="color:#a78bfa"] {
    color: var(--status-purple-fg) !important;
}

/* Solid badge/button-like backgrounds */
html.dark [style*="background: #10b981"],
html.dark [style*="background:#10b981"],
html.dark [style*="background: #059669"],
html.dark [style*="background:#059669"],
html.dark [style*="background: #34d399"],
html.dark [style*="background:#34d399"] {
    background: var(--status-green-bg) !important;
    border-color: rgba(110, 231, 183, 0.4) !important;
}

html.dark [style*="background: #3b82f6"],
html.dark [style*="background:#3b82f6"],
html.dark [style*="background: #2563eb"],
html.dark [style*="background:#2563eb"],
html.dark [style*="background: #1d4ed8"],
html.dark [style*="background:#1d4ed8"] {
    background: var(--status-blue-bg) !important;
    border-color: rgba(147, 197, 253, 0.42) !important;
}

html.dark [style*="background: #ef4444"],
html.dark [style*="background:#ef4444"],
html.dark [style*="background: #dc2626"],
html.dark [style*="background:#dc2626"],
html.dark [style*="background: #b91c1c"],
html.dark [style*="background:#b91c1c"] {
    background: var(--status-red-bg) !important;
    border-color: rgba(252, 165, 165, 0.45) !important;
}

html.dark [style*="background: #f59e0b"],
html.dark [style*="background:#f59e0b"],
html.dark [style*="background: #d97706"],
html.dark [style*="background:#d97706"],
html.dark [style*="background: #b45309"],
html.dark [style*="background:#b45309"] {
    background: var(--status-amber-bg) !important;
    border-color: rgba(252, 211, 77, 0.42) !important;
}

html.dark [style*="background: #8b5cf6"],
html.dark [style*="background:#8b5cf6"],
html.dark [style*="background: #7c3aed"],
html.dark [style*="background:#7c3aed"] {
    background: var(--status-purple-bg) !important;
    border-color: rgba(196, 181, 253, 0.42) !important;
}

/* Tone down bright gradients */
html.dark [style*="linear-gradient"][style*="#10b981"],
html.dark [style*="linear-gradient"][style*="#059669"],
html.dark [style*="linear-gradient"][style*="#34d399"] {
    background: var(--status-green-bg) !important;
}

html.dark [style*="linear-gradient"][style*="#3b82f6"],
html.dark [style*="linear-gradient"][style*="#2563eb"],
html.dark [style*="linear-gradient"][style*="#1d4ed8"] {
    background: var(--status-blue-bg) !important;
}

html.dark [style*="linear-gradient"][style*="#ef4444"],
html.dark [style*="linear-gradient"][style*="#dc2626"],
html.dark [style*="linear-gradient"][style*="#b91c1c"] {
    background: var(--status-red-bg) !important;
}

html.dark [style*="linear-gradient"][style*="#f59e0b"],
html.dark [style*="linear-gradient"][style*="#d97706"],
html.dark [style*="linear-gradient"][style*="#fbbf24"] {
    background: var(--status-amber-bg) !important;
}

html.dark [style*="linear-gradient"][style*="#8b5cf6"],
html.dark [style*="linear-gradient"][style*="#7c3aed"],
html.dark [style*="linear-gradient"][style*="#a78bfa"] {
    background: var(--status-purple-bg) !important;
}

/* Reduce glow/noise from bright accents */
html.dark [style*="box-shadow"][style*="rgba(239, 68, 68"],
html.dark [style*="box-shadow"][style*="rgba(220, 38, 38"],
html.dark [style*="box-shadow"][style*="rgba(245, 158, 11"],
html.dark [style*="box-shadow"][style*="rgba(59, 130, 246"],
html.dark [style*="box-shadow"][style*="rgba(16, 185, 129"],
html.dark [style*="box-shadow"][style*="rgba(139, 92, 246"] {
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.52) !important;
}

/* Common class-based accents used across admin/sales/public pages */
html.dark .btn-primary,
html.dark .btn-save,
html.dark .btn-create,
html.dark .check-btn,
html.dark .copy-action {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.34), rgba(37, 99, 235, 0.44)) !important;
    color: #eaf2ff !important;
    border: 1px solid rgba(147, 197, 253, 0.56) !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.46) !important;
}

html.dark .btn-add,
html.dark .btn-add-sales {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(5, 150, 105, 0.42)) !important;
    color: #dcfce7 !important;
    border: 1px solid rgba(110, 231, 183, 0.5) !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.46) !important;
}

html.dark .btn-secondary,
html.dark .btn-cancel {
    background: #1c2a42 !important;
    color: #dbe7fa !important;
    border-color: #375176 !important;
    box-shadow: none !important;
}

html.dark .status-reminded {
    background: var(--status-purple-bg) !important;
    color: var(--status-purple-fg) !important;
}

/* Keep tabs in the same muted blue family as Allocation */
html.dark .tab-btn.active,
html.dark .nav-tab.active,
html.dark .tab-button.active,
html.dark .monitor-tab.active {
    background: var(--status-blue-bg) !important;
    color: var(--status-blue-fg) !important;
    border-bottom: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.35) !important;
}

html.dark .tab-btn:hover,
html.dark .nav-tab:hover,
html.dark .tab-button:hover,
html.dark .monitor-tab:hover {
    border-bottom-color: transparent !important;
}

/* Avoid intense bright greens/reds on CTA/login buttons */
html.dark .login-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.42)) !important;
    color: #eaf2ff !important;
    border: 1px solid rgba(147, 197, 253, 0.5) !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45) !important;
}

/* Action button reset + bright accents (Admin/Seller) */
.action-btn {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.action-btn:hover {
    background: #f1f5f9 !important;
}

html.dark .action-btn {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
}

html.dark .action-btn:hover {
    background: rgba(71, 85, 105, 0.35) !important;
}

html.dark .action-btn[style*="#10b981"],
html.dark .action-btn[style*="#059669"],
html.dark .action-btn[style*="#34d399"] {
    color: #34d399 !important;
}

html.dark .action-btn[style*="#3b82f6"],
html.dark .action-btn[style*="#2563eb"],
html.dark .action-btn[style*="#1d4ed8"] {
    color: #60a5fa !important;
}

html.dark .action-btn[style*="#8b5cf6"],
html.dark .action-btn[style*="#7c3aed"],
html.dark .action-btn[style*="#a78bfa"] {
    color: #a78bfa !important;
}

html.dark .action-btn[style*="#f59e0b"],
html.dark .action-btn[style*="#d97706"],
html.dark .action-btn[style*="#b45309"] {
    color: #fbbf24 !important;
}

html.dark .action-btn[style*="#ef4444"],
html.dark .action-btn[style*="#dc2626"],
html.dark .action-btn[style*="#b91c1c"] {
    color: #f87171 !important;
}

html.dark .action-btn[style*="#94a3b8"],
html.dark .action-btn[style*="#64748b"] {
    color: #cbd5e1 !important;
}