/*
 * BI Platform Dark Theme
 * Central override stylesheet — works with html.dark class set by theme-manager.js
 * Uses !important to override pre-built Tailwind CSS and inline <style> blocks
 */

/* ============================================
   CSS Custom Properties (Semantic Tokens)
   ============================================ */
:root {
    --bi-bg-primary: #f9fafb;
    --bi-bg-secondary: #ffffff;
    --bi-bg-tertiary: #f3f4f6;
    --bi-bg-hover: #e5e7eb;
    --bi-text-primary: #111827;
    --bi-text-secondary: #4b5563;
    --bi-text-tertiary: #6b7280;
    --bi-text-muted: #9ca3af;
    --bi-border-primary: #e5e7eb;
    --bi-border-secondary: #d1d5db;
    --bi-accent-blue: #2563eb;
    --bi-accent-green: #16a34a;
    --bi-accent-red: #dc2626;
    --bi-card-bg: #ffffff;
    --bi-input-bg: #ffffff;
    --bi-nav-bg: rgba(255,255,255,0.95);
    --bi-dropdown-bg: #ffffff;
    --bi-table-header-bg: #f9fafb;
    --bi-table-row-hover: #f3f4f6;
}

html.dark {
    --bi-bg-primary: #0f0f17;
    --bi-bg-secondary: #1a1a2e;
    --bi-bg-tertiary: #16162a;
    --bi-bg-hover: #252540;
    --bi-text-primary: #e0e0e0;
    --bi-text-secondary: #b0b0b0;
    --bi-text-tertiary: #a0a0a0;
    --bi-text-muted: #707080;
    --bi-border-primary: #2a2a3e;
    --bi-border-secondary: #353550;
    --bi-accent-blue: #818cf8;
    --bi-accent-green: #4ade80;
    --bi-accent-red: #f87171;
    --bi-card-bg: #1a1a2e;
    --bi-input-bg: #16162a;
    --bi-nav-bg: rgba(15,15,23,0.95);
    --bi-dropdown-bg: #1a1a2e;
    --bi-table-header-bg: #12122a;
    --bi-table-row-hover: #1e1e35;
    color-scheme: dark;
}

/* ============================================
   Smooth Transition (respects reduced motion)
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
    html.dark *,
    html.dark *::before,
    html.dark *::after {
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
}

/* ============================================
   Background Color Overrides
   ============================================ */
html.dark .bg-white { background-color: var(--bi-bg-secondary) !important; }
html.dark .bg-gray-50 { background-color: var(--bi-bg-primary) !important; }
html.dark .bg-gray-100 { background-color: var(--bi-bg-tertiary) !important; }
html.dark .bg-gray-200 { background-color: #1e1e35 !important; }
html.dark .bg-gray-300 { background-color: #252540 !important; }
html.dark .bg-gray-800 { background-color: #0a0a12 !important; }
html.dark .bg-gray-900 { background-color: #060610 !important; }

html.dark .bg-blue-50 { background-color: rgba(129,140,248,0.1) !important; }
html.dark .bg-blue-100 { background-color: rgba(129,140,248,0.15) !important; }
html.dark .bg-blue-500 { background-color: #6366f1 !important; }
html.dark .bg-blue-600 { background-color: #818cf8 !important; }
html.dark .bg-blue-700 { background-color: #6366f1 !important; }

html.dark .bg-green-50 { background-color: rgba(74,222,128,0.1) !important; }
html.dark .bg-green-100 { background-color: rgba(74,222,128,0.15) !important; }
html.dark .bg-green-500 { background-color: #22c55e !important; }
html.dark .bg-green-600 { background-color: #4ade80 !important; }

html.dark .bg-red-50 { background-color: rgba(248,113,113,0.1) !important; }
html.dark .bg-red-100 { background-color: rgba(248,113,113,0.15) !important; }
html.dark .bg-red-500 { background-color: #ef4444 !important; }
html.dark .bg-red-600 { background-color: #f87171 !important; }

html.dark .bg-yellow-50 { background-color: rgba(250,204,21,0.1) !important; }
html.dark .bg-yellow-100 { background-color: rgba(250,204,21,0.15) !important; }
html.dark .bg-yellow-500 { background-color: #eab308 !important; }

html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.1) !important; }
html.dark .bg-purple-100 { background-color: rgba(168,85,247,0.15) !important; }
html.dark .bg-purple-600 { background-color: #a855f7 !important; }

html.dark .bg-indigo-50 { background-color: rgba(129,140,248,0.1) !important; }
html.dark .bg-indigo-100 { background-color: rgba(129,140,248,0.15) !important; }
html.dark .bg-indigo-600 { background-color: #818cf8 !important; }

html.dark .bg-orange-50 { background-color: rgba(251,146,60,0.1) !important; }
html.dark .bg-orange-100 { background-color: rgba(251,146,60,0.15) !important; }

html.dark .bg-pink-50 { background-color: rgba(236,72,153,0.1) !important; }
html.dark .bg-pink-100 { background-color: rgba(236,72,153,0.15) !important; }

html.dark .bg-teal-50 { background-color: rgba(45,212,191,0.1) !important; }

/* ============================================
   Text Color Overrides
   ============================================ */
html.dark .text-gray-900 { color: var(--bi-text-primary) !important; }
html.dark .text-gray-800 { color: #d0d0d0 !important; }
html.dark .text-gray-700 { color: var(--bi-text-secondary) !important; }
html.dark .text-gray-600 { color: #a8a8b8 !important; }
html.dark .text-gray-500 { color: var(--bi-text-tertiary) !important; }
html.dark .text-gray-400 { color: #888898 !important; }
html.dark .text-gray-300 { color: #909090 !important; }
html.dark .text-gray-200 { color: #b0b0b0 !important; }
html.dark .text-gray-100 { color: #d0d0d0 !important; }
html.dark .text-black { color: var(--bi-text-primary) !important; }
html.dark .text-white { color: #ffffff !important; }

html.dark .text-blue-600 { color: var(--bi-accent-blue) !important; }
html.dark .text-blue-700 { color: #818cf8 !important; }
html.dark .text-blue-800 { color: #a5b4fc !important; }
html.dark .text-blue-500 { color: #818cf8 !important; }

html.dark .text-green-600 { color: var(--bi-accent-green) !important; }
html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-green-500 { color: #4ade80 !important; }
html.dark .text-green-800 { color: #86efac !important; }

html.dark .text-red-600 { color: var(--bi-accent-red) !important; }
html.dark .text-red-700 { color: #f87171 !important; }
html.dark .text-red-500 { color: #f87171 !important; }
html.dark .text-red-800 { color: #fca5a5 !important; }

html.dark .text-yellow-600 { color: #facc15 !important; }
html.dark .text-yellow-700 { color: #fbbf24 !important; }
html.dark .text-yellow-500 { color: #facc15 !important; }
html.dark .text-yellow-800 { color: #fde047 !important; }

html.dark .text-purple-600 { color: #c084fc !important; }
html.dark .text-purple-700 { color: #a855f7 !important; }
html.dark .text-indigo-600 { color: #a5b4fc !important; }
html.dark .text-indigo-700 { color: #818cf8 !important; }
html.dark .text-orange-600 { color: #fb923c !important; }
html.dark .text-pink-600 { color: #f472b6 !important; }
html.dark .text-teal-600 { color: #2dd4bf !important; }

/* ============================================
   Border Color Overrides
   ============================================ */
html.dark .border-gray-100 { border-color: #1e1e35 !important; }
html.dark .border-gray-200 { border-color: var(--bi-border-primary) !important; }
html.dark .border-gray-300 { border-color: var(--bi-border-secondary) !important; }
html.dark .border-gray-400 { border-color: #404060 !important; }
html.dark .border-gray-500 { border-color: #505070 !important; }

html.dark .border-blue-200 { border-color: rgba(129,140,248,0.3) !important; }
html.dark .border-blue-300 { border-color: rgba(129,140,248,0.4) !important; }
html.dark .border-blue-500 { border-color: #6366f1 !important; }

html.dark .border-green-200 { border-color: rgba(74,222,128,0.3) !important; }
html.dark .border-green-300 { border-color: rgba(74,222,128,0.4) !important; }
html.dark .border-green-500 { border-color: #22c55e !important; }

html.dark .border-red-200 { border-color: rgba(248,113,113,0.3) !important; }
html.dark .border-red-300 { border-color: rgba(248,113,113,0.4) !important; }
html.dark .border-red-500 { border-color: #ef4444 !important; }

html.dark .border-yellow-200 { border-color: rgba(250,204,21,0.3) !important; }
html.dark .border-yellow-300 { border-color: rgba(250,204,21,0.4) !important; }

html.dark .border-purple-200 { border-color: rgba(168,85,247,0.3) !important; }
html.dark .border-indigo-200 { border-color: rgba(129,140,248,0.3) !important; }
html.dark .border-orange-200 { border-color: rgba(251,146,60,0.3) !important; }

html.dark .border-b { border-bottom-color: var(--bi-border-primary) !important; }
html.dark .border-t { border-top-color: var(--bi-border-primary) !important; }
html.dark .border-l { border-left-color: var(--bi-border-primary) !important; }
html.dark .border-r { border-right-color: var(--bi-border-primary) !important; }

/* Divide */
html.dark .divide-gray-100 > * + * { border-color: #1e1e35 !important; }
html.dark .divide-gray-200 > * + * { border-color: var(--bi-border-primary) !important; }
html.dark .divide-gray-300 > * + * { border-color: var(--bi-border-secondary) !important; }

/* ============================================
   Shadow Overrides
   ============================================ */
html.dark .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3) !important; }
html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; }
html.dark .shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.4) !important; }
html.dark .shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,0.5) !important; }

/* ============================================
   Ring Color Overrides
   ============================================ */
html.dark .ring-gray-200 { --tw-ring-color: var(--bi-border-primary) !important; }
html.dark .ring-gray-300 { --tw-ring-color: var(--bi-border-secondary) !important; }
html.dark .ring-blue-500 { --tw-ring-color: #6366f1 !important; }
html.dark .focus\:ring-blue-500:focus { --tw-ring-color: #6366f1 !important; }
html.dark .focus\:ring-indigo-500:focus { --tw-ring-color: #818cf8 !important; }

/* ============================================
   Hover State Overrides
   ============================================ */
html.dark .hover\:bg-gray-50:hover { background-color: var(--bi-bg-hover) !important; }
html.dark .hover\:bg-gray-100:hover { background-color: var(--bi-bg-hover) !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #2a2a45 !important; }
html.dark .hover\:bg-white:hover { background-color: var(--bi-bg-hover) !important; }

html.dark .hover\:bg-blue-50:hover { background-color: rgba(129,140,248,0.15) !important; }
html.dark .hover\:bg-blue-600:hover { background-color: #6366f1 !important; }
html.dark .hover\:bg-blue-700:hover { background-color: #818cf8 !important; }
html.dark .hover\:bg-red-50:hover { background-color: rgba(248,113,113,0.15) !important; }
html.dark .hover\:bg-red-600:hover { background-color: #dc2626 !important; }
html.dark .hover\:bg-green-50:hover { background-color: rgba(74,222,128,0.15) !important; }
html.dark .hover\:bg-green-600:hover { background-color: #16a34a !important; }

html.dark .hover\:text-gray-700:hover { color: var(--bi-text-primary) !important; }
html.dark .hover\:text-gray-900:hover { color: var(--bi-text-primary) !important; }
html.dark .hover\:text-gray-600:hover { color: var(--bi-text-secondary) !important; }
html.dark .hover\:text-blue-600:hover { color: var(--bi-accent-blue) !important; }
html.dark .hover\:text-blue-700:hover { color: #818cf8 !important; }
html.dark .hover\:text-blue-800:hover { color: #a5b4fc !important; }

html.dark .hover\:border-gray-300:hover { border-color: var(--bi-border-secondary) !important; }
html.dark .hover\:border-blue-500:hover { border-color: #6366f1 !important; }

html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important; }
html.dark .hover\:shadow-lg:hover { box-shadow: 0 10px 15px rgba(0,0,0,0.4) !important; }

/* ============================================
   Focus State Overrides
   ============================================ */
html.dark .focus\:bg-white:focus { background-color: var(--bi-bg-secondary) !important; }
html.dark .focus\:border-blue-500:focus { border-color: #6366f1 !important; }
html.dark .focus\:border-indigo-500:focus { border-color: #818cf8 !important; }
html.dark .focus\:outline-none:focus { outline: none !important; }

/* ============================================
   Gradient Overrides
   ============================================ */
html.dark .from-blue-600 { --tw-gradient-from: #4f46e5 !important; }
html.dark .to-blue-700 { --tw-gradient-to: #6366f1 !important; }
html.dark .from-green-500 { --tw-gradient-from: #22c55e !important; }
html.dark .to-green-600 { --tw-gradient-to: #16a34a !important; }
html.dark .from-purple-500 { --tw-gradient-from: #a855f7 !important; }
html.dark .to-purple-600 { --tw-gradient-to: #9333ea !important; }
html.dark .from-indigo-500 { --tw-gradient-from: #6366f1 !important; }
html.dark .to-indigo-600 { --tw-gradient-to: #4f46e5 !important; }

/* ============================================
   Placeholder Color Overrides
   ============================================ */
html.dark .placeholder-gray-400::placeholder { color: var(--bi-text-muted) !important; }
html.dark .placeholder-gray-500::placeholder { color: var(--bi-text-muted) !important; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--bi-text-muted) !important; }

/* ============================================
   Form Element Overrides
   ============================================ */
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="url"],
html.dark input[type="tel"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark textarea,
html.dark select {
    background-color: var(--bi-input-bg) !important;
    color: var(--bi-text-primary) !important;
    border-color: var(--bi-border-primary) !important;
}

html.dark input[type="text"]:focus,
html.dark input[type="number"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="password"]:focus,
html.dark input[type="search"]:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
}

html.dark select option {
    background-color: var(--bi-dropdown-bg);
    color: var(--bi-text-primary);
}

/* Checkbox/radio in dark mode */
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
    background-color: var(--bi-input-bg);
    border-color: var(--bi-border-secondary);
}

/* ============================================
   Table Overrides
   ============================================ */
html.dark table {
    border-color: var(--bi-border-primary);
}

html.dark thead th,
html.dark thead td {
    background-color: var(--bi-table-header-bg) !important;
    color: var(--bi-text-secondary) !important;
    border-color: var(--bi-border-primary) !important;
}

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

html.dark tbody tr:hover {
    background-color: var(--bi-table-row-hover) !important;
}

html.dark tbody tr:nth-child(even) {
    background-color: rgba(22,22,42,0.5);
}

/* ============================================
   Body Background
   ============================================ */
html.dark body {
    background-color: var(--bi-bg-primary) !important;
    color: var(--bi-text-primary) !important;
}

html.dark body.bg-gray-50,
html.dark body.bg-gray-100 {
    background-color: var(--bi-bg-primary) !important;
}

/* ============================================
   Scrollbar Dark Theme
   ============================================ */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html.dark ::-webkit-scrollbar-track {
    background: var(--bi-bg-primary);
}
html.dark ::-webkit-scrollbar-thumb {
    background: #353550;
    border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #454560;
}

/* Firefox scrollbar */
html.dark * {
    scrollbar-color: #353550 var(--bi-bg-primary);
    scrollbar-width: thin;
}

/* ============================================
   Flatpickr Calendar Dark Overrides
   ============================================ */
html.dark .flatpickr-calendar {
    background: var(--bi-dropdown-bg) !important;
    border-color: var(--bi-border-primary) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}
html.dark .flatpickr-months {
    background: var(--bi-bg-tertiary) !important;
}
html.dark .flatpickr-month,
html.dark .flatpickr-current-month {
    color: var(--bi-text-primary) !important;
}
html.dark .flatpickr-weekday {
    color: var(--bi-text-tertiary) !important;
    background: var(--bi-bg-tertiary) !important;
}
html.dark .flatpickr-day {
    color: var(--bi-text-primary) !important;
}
html.dark .flatpickr-day:hover {
    background: var(--bi-bg-hover) !important;
    border-color: var(--bi-bg-hover) !important;
}
html.dark .flatpickr-day.selected {
    background: var(--bi-accent-blue) !important;
    border-color: var(--bi-accent-blue) !important;
    color: #fff !important;
}
html.dark .flatpickr-day.today {
    border-color: var(--bi-accent-blue) !important;
}
html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay {
    color: var(--bi-text-muted) !important;
}
html.dark span.flatpickr-prev-month,
html.dark span.flatpickr-next-month {
    fill: var(--bi-text-secondary) !important;
    color: var(--bi-text-secondary) !important;
}
html.dark .flatpickr-monthDropdown-months {
    background: var(--bi-input-bg) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .numInputWrapper input {
    color: var(--bi-text-primary) !important;
}

/* ============================================
   Modal/Dialog Overrides
   ============================================ */
html.dark .modal-content,
html.dark [role="dialog"],
html.dark .fixed.inset-0 > div {
    background-color: var(--bi-card-bg) !important;
    border-color: var(--bi-border-primary) !important;
}

/* Modal backdrops */
html.dark .bg-black.bg-opacity-50,
html.dark .bg-gray-500.bg-opacity-75 {
    background-color: rgba(0,0,0,0.7) !important;
}

/* ============================================
   Ads Manager Specific Overrides
   ============================================ */
html.dark .ads-row,
html.dark .ad-row,
html.dark tr[data-ad-id] {
    background-color: var(--bi-bg-secondary) !important;
    border-color: var(--bi-border-primary) !important;
}

html.dark .ads-row:hover,
html.dark .ad-row:hover,
html.dark tr[data-ad-id]:hover {
    background-color: var(--bi-table-row-hover) !important;
}

/* ============================================
   Badge/Tag Overrides
   ============================================ */
html.dark .bg-green-100.text-green-800 {
    background-color: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
}
html.dark .bg-red-100.text-red-800 {
    background-color: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
}
html.dark .bg-yellow-100.text-yellow-800 {
    background-color: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}
html.dark .bg-blue-100.text-blue-800 {
    background-color: rgba(129,140,248,0.15) !important;
    color: #818cf8 !important;
}
html.dark .bg-gray-100.text-gray-800 {
    background-color: rgba(160,160,160,0.15) !important;
    color: #a0a0a0 !important;
}
html.dark .bg-purple-100.text-purple-800 {
    background-color: rgba(168,85,247,0.15) !important;
    color: #c084fc !important;
}
html.dark .bg-indigo-100.text-indigo-800 {
    background-color: rgba(129,140,248,0.15) !important;
    color: #a5b4fc !important;
}
html.dark .bg-orange-100.text-orange-800 {
    background-color: rgba(251,146,60,0.15) !important;
    color: #fb923c !important;
}

/* ============================================
   Card/Panel Overrides
   ============================================ */
html.dark .rounded-lg.shadow,
html.dark .rounded-lg.shadow-md,
html.dark .rounded-xl.shadow,
html.dark .rounded-xl.shadow-md {
    background-color: var(--bi-card-bg) !important;
    border-color: var(--bi-border-primary) !important;
}

/* ============================================
   Tooltip Overrides
   ============================================ */
html.dark [role="tooltip"] {
    background-color: #252540 !important;
    color: var(--bi-text-primary) !important;
    border-color: var(--bi-border-secondary) !important;
}

/* ============================================
   Link Overrides
   ============================================ */
html.dark a.text-blue-600 { color: var(--bi-accent-blue) !important; }
html.dark a.text-blue-500 { color: var(--bi-accent-blue) !important; }
html.dark a.text-indigo-600 { color: #a5b4fc !important; }
html.dark a:hover.text-blue-800 { color: #c7d2fe !important; }

/* ============================================
   Code/Pre Blocks
   ============================================ */
html.dark pre,
html.dark code {
    background-color: #0d0d1a !important;
    color: #c0c0d0 !important;
    border-color: var(--bi-border-primary) !important;
}

/* ============================================
   HR / Divider
   ============================================ */
html.dark hr {
    border-color: var(--bi-border-primary) !important;
}

/* ============================================
   Bootstrap Overrides (for shiboai.html etc)
   ============================================ */
html.dark .card {
    background-color: var(--bi-card-bg) !important;
    border-color: var(--bi-border-primary) !important;
}
html.dark .card-header {
    background-color: var(--bi-bg-tertiary) !important;
    border-color: var(--bi-border-primary) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .card-body {
    color: var(--bi-text-primary) !important;
}
html.dark .list-group-item {
    background-color: var(--bi-bg-secondary) !important;
    border-color: var(--bi-border-primary) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .nav-tabs .nav-link {
    color: var(--bi-text-secondary) !important;
}
html.dark .nav-tabs .nav-link.active {
    background-color: var(--bi-bg-secondary) !important;
    border-color: var(--bi-border-primary) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .tab-content {
    background-color: var(--bi-bg-secondary) !important;
}
html.dark .btn-outline-secondary {
    color: var(--bi-text-secondary) !important;
    border-color: var(--bi-border-secondary) !important;
}
html.dark .btn-outline-secondary:hover {
    background-color: var(--bi-bg-hover) !important;
    color: var(--bi-text-primary) !important;
}

/* ============================================
   Ads Manager Table Overrides
   ============================================ */

/* Campaign rows */
html.dark .campaign-row {
    border-top-color: #2a2a3e !important;
}
html.dark .campaign-row-even {
    background-color: #16162a !important;
    border-left-color: #5a6a8a !important;
}
html.dark .campaign-row-odd {
    background-color: #1a1a2e !important;
    border-left-color: #8a7a68 !important;
}
html.dark .campaign-row:hover {
    background-color: #1e1e35 !important;
}
html.dark .campaign-row td {
    color: var(--bi-text-primary) !important;
}

/* Ads table */
html.dark .ads-table th {
    background: var(--bi-table-header-bg) !important;
    color: var(--bi-text-secondary) !important;
    border-bottom-color: var(--bi-border-primary) !important;
}
html.dark .ads-table td {
    border-bottom-color: #1e1e35 !important;
    color: var(--bi-text-primary) !important;
}
html.dark .ads-table tbody tr:hover {
    background: var(--bi-table-row-hover) !important;
}
html.dark .ads-table tbody tr.selected {
    background: rgba(129,140,248,0.12) !important;
}

/* Sortable column headers */
html.dark .sortable:hover {
    background: var(--bi-bg-hover) !important;
}

/* Sticky header/filter rows in scroll container */
html.dark .table-scroll thead th {
    background: var(--bi-table-header-bg) !important;
    border-bottom-color: var(--bi-border-primary) !important;
}
html.dark .table-scroll thead tr:nth-child(2) th,
html.dark .table-scroll thead tr:nth-child(2) td {
    background: var(--bi-table-header-bg) !important;
}
html.dark .table-scroll tbody tr {
    background: var(--bi-bg-secondary) !important;
}

/* Summary/totals row */
html.dark .table-scroll thead .summary-row th,
html.dark .table-scroll thead .summary-row td {
    background: var(--bi-bg-tertiary) !important;
    border-bottom-color: var(--bi-border-primary) !important;
    color: var(--bi-text-primary) !important;
}

/* Separator rows */
html.dark .sep-label__chip {
    color: var(--bi-text-muted) !important;
    background: var(--bi-bg-secondary) !important;
    border-color: var(--bi-border-primary) !important;
}

/* Badges — ads manager */
html.dark .badge-warning {
    background: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}
html.dark .badge-check {
    background: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
}

/* Toggle switch */
html.dark .toggle-switch .slider {
    background-color: #404060 !important;
}
html.dark .toggle-switch input:checked + .slider {
    background-color: #22c55e !important;
}
html.dark .toggle-switch input:disabled + .slider {
    background-color: #2a2a3e !important;
}

/* Spinner */
html.dark .spinner {
    border-color: #2a2a3e !important;
    border-top-color: #818cf8 !important;
}

/* ============================================
   Article Performance Table Overrides
   ============================================ */

/* Modern table */
html.dark .modern-table {
    background: var(--bi-bg-secondary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
html.dark .modern-table tr {
    background: var(--bi-bg-secondary) !important;
    border-bottom-color: #1e1e35 !important;
}
html.dark .modern-table tr:hover {
    background: var(--bi-table-row-hover) !important;
}
html.dark .modern-table th {
    background: linear-gradient(135deg, #12122a 0%, #16162a 100%) !important;
    color: var(--bi-text-secondary) !important;
    border-bottom-color: var(--bi-border-primary) !important;
}
html.dark .modern-table td {
    color: var(--bi-text-primary) !important;
    border-bottom-color: #1e1e35 !important;
}

/* Sortable header */
html.dark .sortable-header:hover {
    color: var(--bi-accent-blue) !important;
}

/* Keyword pills */
html.dark .keyword-pill-green {
    background-color: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
}
html.dark .keyword-pill-yellow {
    background-color: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}
html.dark .keyword-pill-gray {
    background-color: rgba(160,160,176,0.12) !important;
    color: #a0a0b0 !important;
}

/* Advertiser badges */
html.dark .badge-tapstone {
    background-color: rgba(129,140,248,0.15) !important;
    color: #818cf8 !important;
}
html.dark .badge-inuvo {
    background-color: rgba(168,85,247,0.15) !important;
    color: #c084fc !important;
}
html.dark .badge-mobitech {
    background-color: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
}
html.dark .badge-facebook {
    background-color: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}

/* Skeleton loading */
html.dark .skeleton {
    background: linear-gradient(to right, #1a1a2e 4%, #252540 25%, #1a1a2e 36%) !important;
    background-size: 800px 104px !important;
}

/* Loading spinner */
html.dark .loading-spinner {
    border-color: #2a2a3e !important;
    border-top-color: #818cf8 !important;
}

/* Toast notifications */
html.dark .toast-success {
    background: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(74,222,128,0.3) !important;
}
html.dark .toast-error {
    background: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
    border-color: rgba(248,113,113,0.3) !important;
}

/* Expand button */
html.dark .expand-button {
    color: #818cf8 !important;
}

/* ============================================
   Campaign Analytics Overrides
   ============================================ */

/* Campaign summary/detail rows */
html.dark .campaign-summary-row {
    background-color: var(--bi-bg-secondary) !important;
    border-left-color: #6366f1 !important;
}
html.dark .campaign-summary-row:hover {
    border-left-color: #818cf8 !important;
}
html.dark .campaign-detail-row {
    background-color: var(--bi-bg-tertiary) !important;
    border-left-color: var(--bi-border-primary) !important;
}
html.dark .campaign-detail-row:hover {
    background-color: var(--bi-table-row-hover) !important;
    border-left-color: #606080 !important;
}
html.dark .campaign-detail-row td:first-child {
    color: var(--bi-text-primary) !important;
}

/* Totals row */
html.dark .modern-table .totals-row {
    background: linear-gradient(135deg, rgba(129,140,248,0.15) 0%, rgba(99,102,241,0.2) 100%) !important;
    color: #a5b4fc !important;
    border-bottom-color: rgba(129,140,248,0.3) !important;
}
html.dark .modern-table .totals-row:hover {
    background: linear-gradient(135deg, rgba(129,140,248,0.15) 0%, rgba(99,102,241,0.2) 100%) !important;
}

/* Date picker modal */
html.dark .date-picker-modal,
html.dark .secondary-date-picker-modal {
    background: var(--bi-dropdown-bg) !important;
    border-color: var(--bi-border-primary) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
html.dark .calendar-section {
    border-right-color: var(--bi-border-primary) !important;
}

/* Preset buttons */
html.dark .preset-button {
    background: var(--bi-bg-tertiary) !important;
    border-color: var(--bi-border-primary) !important;
    color: var(--bi-text-secondary) !important;
}
html.dark .preset-button:hover {
    background: var(--bi-bg-hover) !important;
    border-color: var(--bi-border-secondary) !important;
}
html.dark .preset-button.active {
    background: rgba(129,140,248,0.15) !important;
    border-color: #6366f1 !important;
    color: #a5b4fc !important;
}

/* Campaign analytics toggle switch */
html.dark .slider {
    background-color: #404060 !important;
}
html.dark input:checked + .slider {
    background-color: #3b82f6 !important;
}

/* Dropdown panel */
html.dark .dropdown-panel {
    background: var(--bi-dropdown-bg) !important;
    border-color: var(--bi-border-primary) !important;
}

/* ============================================
   BiAdmin Panel Overrides
   ============================================ */

/* Stat cards */
html.dark .stat-card {
    background: var(--bi-card-bg) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
html.dark .stat-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
}
html.dark .stat-value {
    color: var(--bi-text-primary) !important;
}
html.dark .stat-label {
    color: var(--bi-text-tertiary) !important;
}

/* Content panel */
html.dark .content-panel {
    background: var(--bi-card-bg) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Tab buttons */
html.dark .tab-button {
    color: var(--bi-text-tertiary) !important;
}
html.dark .tab-button.active {
    color: var(--bi-accent-blue) !important;
    border-bottom-color: var(--bi-accent-blue) !important;
}
html.dark .tab-button:hover {
    color: var(--bi-text-primary) !important;
}

/* BiAdmin badges */
html.dark .badge-success {
    background-color: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
}
html.dark .badge-danger {
    background-color: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
}
html.dark .badge-info {
    background-color: rgba(129,140,248,0.15) !important;
    color: #818cf8 !important;
}

/* Log entries */
html.dark .log-entry {
    border-color: var(--bi-border-primary) !important;
}
html.dark .log-error {
    background-color: rgba(248,113,113,0.12) !important;
    color: #f87171 !important;
}
html.dark .log-warn {
    background-color: rgba(250,204,21,0.12) !important;
    color: #facc15 !important;
}
html.dark .log-info {
    background-color: rgba(129,140,248,0.12) !important;
    color: #818cf8 !important;
}

/* BiAdmin buttons */
html.dark .btn-primary {
    background-color: #4f46e5 !important;
}
html.dark .btn-primary:hover {
    background-color: #6366f1 !important;
}
html.dark .btn-secondary {
    background-color: #505070 !important;
}
html.dark .btn-secondary:hover {
    background-color: #606080 !important;
}
html.dark .btn-secondary:disabled {
    background-color: #353550 !important;
}

/* ============================================
   Filter Dialog Overrides (Campaign Analytics)
   ============================================ */
html.dark .filter-dialog {
    background: var(--bi-dropdown-bg) !important;
    border-color: var(--bi-border-primary) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
html.dark .filter-dialog-header {
    background: var(--bi-bg-tertiary) !important;
    border-bottom-color: var(--bi-border-primary) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .filter-section-title {
    color: var(--bi-text-tertiary) !important;
}
html.dark .filter-values-list {
    border-color: var(--bi-border-primary) !important;
}
html.dark .filter-value-item {
    border-bottom-color: #1e1e35 !important;
    color: var(--bi-text-primary) !important;
}
html.dark .filter-value-item:hover {
    background-color: var(--bi-bg-hover) !important;
}
html.dark .filter-sort-controls {
    border-top-color: var(--bi-border-primary) !important;
    background: var(--bi-bg-tertiary) !important;
}
html.dark .filter-sort-btn {
    background: var(--bi-bg-secondary) !important;
    border-color: var(--bi-border-primary) !important;
    color: var(--bi-text-secondary) !important;
}
html.dark .filter-sort-btn:hover {
    background: var(--bi-bg-hover) !important;
}
html.dark .filter-sort-btn.active {
    background: #4f46e5 !important;
    color: #fff !important;
    border-color: #4f46e5 !important;
}
html.dark .filter-actions {
    border-top-color: var(--bi-border-primary) !important;
}
html.dark .filter-btn-clear {
    background: var(--bi-bg-secondary) !important;
    color: var(--bi-text-secondary) !important;
    border-color: var(--bi-border-primary) !important;
}
html.dark .filter-btn-clear:hover {
    background: var(--bi-bg-hover) !important;
}

/* ============================================
   Creative Insights / Sparkline Overrides
   ============================================ */
html.dark .sparkline-tooltip {
    background: #252540 !important;
    color: var(--bi-text-primary) !important;
}

/* ============================================
   RSOC Keywords / Data Table Overrides
   ============================================ */
html.dark .table-container {
    background: var(--bi-bg-secondary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
html.dark .data-table thead {
    background: var(--bi-table-header-bg) !important;
    border-bottom-color: var(--bi-border-primary) !important;
}
html.dark .data-table th {
    background: var(--bi-table-header-bg) !important;
    color: var(--bi-text-secondary) !important;
    border-bottom-color: var(--bi-border-primary) !important;
}
html.dark .data-table th:hover {
    background: var(--bi-bg-hover) !important;
}
html.dark .data-table td {
    border-bottom-color: #1e1e35 !important;
    color: var(--bi-text-primary) !important;
}
html.dark .data-table tbody tr {
    background: var(--bi-bg-secondary) !important;
}
html.dark .data-table tbody tr:hover {
    background: var(--bi-table-row-hover) !important;
}
html.dark .row-level-1 {
    background: var(--bi-bg-secondary) !important;
}
html.dark .row-level-1:hover {
    background: var(--bi-table-row-hover) !important;
}
html.dark .row-level-2 {
    background: var(--bi-bg-tertiary) !important;
}
html.dark .row-level-2:hover {
    background: var(--bi-table-row-hover) !important;
}
html.dark .row-level-3 {
    background: #12122a !important;
}
html.dark .row-level-3:hover {
    background: var(--bi-table-row-hover) !important;
}
html.dark .expand-btn {
    color: var(--bi-text-tertiary) !important;
}
html.dark .expand-btn:hover {
    color: var(--bi-text-primary) !important;
}
html.dark .search-input,
html.dark .date-input {
    background-color: var(--bi-input-bg) !important;
    border-color: var(--bi-border-primary) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .search-input:focus,
html.dark .date-input:focus {
    border-color: #6366f1 !important;
}
html.dark .metric-value {
    color: var(--bi-text-primary) !important;
}
html.dark .metric-label {
    color: var(--bi-text-tertiary) !important;
}
html.dark .no-data {
    color: var(--bi-text-tertiary) !important;
}
html.dark .sort-icon.active {
    color: var(--bi-accent-blue) !important;
}
html.dark .page-container {
    color: var(--bi-text-primary) !important;
}

/* ============================================
   Generic Inline White Background Override
   ============================================ */
/* Catch-all for elements with style="background: white" or "background-color: white"
   that React renders inline — these can't be overridden by CSS, but the wrapper
   elements CAN be targeted */
html.dark [style*="background: white"],
html.dark [style*="background-color: white"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background: rgb(255, 255, 255)"],
html.dark [style*="background-color: rgb(255, 255, 255)"] {
    background-color: var(--bi-bg-secondary) !important;
}

/* SVG stroke overrides for chart axes */
html.dark svg line[stroke="#e5e7eb"],
html.dark svg path[stroke="#e5e7eb"] {
    stroke: var(--bi-border-primary) !important;
}

/* ============================================
   AI Studio Chat / Message Overrides
   ============================================ */

/* System message cards — bg-gray-50 with gray border */
html.dark .bg-gray-50.border.border-gray-200 {
    background-color: var(--bi-bg-secondary) !important;
    border-color: var(--bi-border-primary) !important;
}

/* Step content — all colored section containers (with border or border-2) */
html.dark .bg-purple-50.border.border-purple-200,
html.dark .bg-purple-50.border-2.border-purple-200,
html.dark .bg-purple-50[class*="border-purple"] {
    background-color: rgba(168,85,247,0.1) !important;
    border-color: rgba(168,85,247,0.25) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .bg-blue-50.border.border-blue-200,
html.dark .bg-blue-50.border-2.border-blue-200,
html.dark .bg-blue-50[class*="border-blue"] {
    background-color: rgba(129,140,248,0.1) !important;
    border-color: rgba(129,140,248,0.25) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .bg-green-50.border.border-green-200,
html.dark .bg-green-50.border-2.border-green-200,
html.dark .bg-green-50[class*="border-green"] {
    background-color: rgba(74,222,128,0.1) !important;
    border-color: rgba(74,222,128,0.25) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .bg-orange-50.border.border-orange-200,
html.dark .bg-orange-50.border-2.border-orange-200,
html.dark .bg-orange-50[class*="border-orange"] {
    background-color: rgba(251,146,60,0.1) !important;
    border-color: rgba(251,146,60,0.25) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .bg-yellow-50.border.border-yellow-200,
html.dark .bg-yellow-50.border-2.border-yellow-200,
html.dark .bg-yellow-50[class*="border-yellow"] {
    background-color: rgba(250,204,21,0.1) !important;
    border-color: rgba(250,204,21,0.25) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .bg-red-50.border.border-red-200,
html.dark .bg-red-50.border-2.border-red-200,
html.dark .bg-red-50[class*="border-red"],
html.dark .bg-red-50.rounded {
    background-color: rgba(248,113,113,0.1) !important;
    border-color: rgba(248,113,113,0.25) !important;
    color: var(--bi-text-primary) !important;
}
html.dark .bg-pink-50.border.border-pink-200,
html.dark .bg-pink-50.border-2.border-pink-200,
html.dark .bg-pink-50[class*="border-pink"] {
    background-color: rgba(236,72,153,0.1) !important;
    border-color: rgba(236,72,153,0.25) !important;
    color: var(--bi-text-primary) !important;
}

/* Ad packet / editorial section inner backgrounds (no border) */
html.dark .bg-blue-50.rounded,
html.dark .bg-green-50.rounded,
html.dark .bg-orange-50.rounded,
html.dark .bg-red-50.rounded,
html.dark .bg-pink-50.rounded {
    color: var(--bi-text-primary) !important;
}

/* Force readable text inside all colored sections */
html.dark .editor-approval-container,
html.dark .ad-packet-approval-container {
    color: var(--bi-text-primary) !important;
}
html.dark .editor-approval-container .text-gray-800,
html.dark .editor-approval-container .text-gray-700,
html.dark .editor-approval-container .text-gray-600,
html.dark .editor-approval-container .text-gray-500,
html.dark .ad-packet-approval-container .text-gray-800,
html.dark .ad-packet-approval-container .text-gray-700,
html.dark .ad-packet-approval-container .text-gray-600,
html.dark .ad-packet-approval-container .text-gray-500 {
    color: var(--bi-text-primary) !important;
}
html.dark .editor-approval-container .font-bold,
html.dark .ad-packet-approval-container .font-bold {
    color: var(--bi-text-primary) !important;
}
html.dark .editor-approval-container strong,
html.dark .ad-packet-approval-container strong {
    color: var(--bi-text-primary) !important;
}

/* Card borders in dark mode (ad packet selection) */
html.dark .border-gray-300 { border-color: var(--bi-border-secondary) !important; }
html.dark .hover\:border-gray-400:hover { border-color: #505070 !important; }
html.dark .border-2.border-blue-500 {
    border-color: #6366f1 !important;
}

/* Disabled input areas in dark mode */
html.dark .disabled\:bg-gray-100:disabled {
    background-color: var(--bi-bg-tertiary) !important;
}

/* Step header text */
html.dark .text-purple-700 { color: #c084fc !important; }
html.dark .text-purple-800 { color: #d8b4fe !important; }
html.dark .text-purple-500 { color: #a855f7 !important; }

/* Prose content in dark mode — override Tailwind Typography CSS vars */
html.dark .prose {
    --tw-prose-body: #e0e0e0;
    --tw-prose-headings: #e0e0e0;
    --tw-prose-lead: #b0b0b0;
    --tw-prose-links: #818cf8;
    --tw-prose-bold: #f0f0f0;
    --tw-prose-counters: #a0a0a0;
    --tw-prose-bullets: #a0a0a0;
    --tw-prose-hr: #2a2a3e;
    --tw-prose-quotes: #b0b0b0;
    --tw-prose-quote-borders: #353550;
    --tw-prose-captions: #a0a0a0;
    --tw-prose-code: #c084fc;
    --tw-prose-pre-code: #d0d0d0;
    --tw-prose-pre-bg: #0d0d1a;
    --tw-prose-th-borders: #2a2a3e;
    --tw-prose-td-borders: #1e1e35;
    color: var(--bi-text-primary) !important;
}
html.dark .prose p,
html.dark .prose li,
html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4,
html.dark .prose strong,
html.dark .prose b {
    color: var(--bi-text-primary) !important;
}
html.dark .prose a {
    color: var(--bi-accent-blue) !important;
}
html.dark .prose code {
    background-color: rgba(129,140,248,0.12) !important;
    color: #c084fc !important;
}
html.dark .prose blockquote {
    border-left-color: var(--bi-border-secondary) !important;
    color: var(--bi-text-secondary) !important;
}
html.dark .prose thead th {
    color: var(--bi-text-secondary) !important;
    border-color: var(--bi-border-primary) !important;
}
html.dark .prose tbody td {
    border-color: #1e1e35 !important;
}

/* Rendered markdown inside chat messages */
html.dark .chat-message h1,
html.dark .chat-message h2,
html.dark .chat-message h3,
html.dark .chat-message h4,
html.dark .chat-message strong,
html.dark .chat-message b,
html.dark .chat-message p,
html.dark .chat-message li,
html.dark .chat-message td,
html.dark .chat-message th {
    color: var(--bi-text-primary) !important;
}

/* System message text must be readable */
html.dark .bg-gray-50.border.border-gray-200 *,
html.dark .bg-gray-50.border.border-gray-200 h1,
html.dark .bg-gray-50.border.border-gray-200 h2,
html.dark .bg-gray-50.border.border-gray-200 h3,
html.dark .bg-gray-50.border.border-gray-200 strong {
    color: var(--bi-text-primary) !important;
}

/* Choice/option buttons in step content */
html.dark .choice-label {
    color: var(--bi-text-primary) !important;
}
html.dark .question-text {
    color: var(--bi-text-primary) !important;
}

/* Step content border */
html.dark .border-l-2.border-purple-200 {
    border-left-color: rgba(168,85,247,0.3) !important;
}
html.dark .border-l-2.border-blue-200 {
    border-left-color: rgba(129,140,248,0.3) !important;
}

/* ============================================
   Article Review & Approval Overrides
   ============================================ */

/* Article approval container text readability */
html.dark .article-approval-container {
    color: var(--bi-text-primary) !important;
}
html.dark .article-approval-container .text-gray-800,
html.dark .article-approval-container .text-gray-700,
html.dark .article-approval-container .text-gray-600,
html.dark .article-approval-container .text-gray-500,
html.dark .article-approval-container .font-bold,
html.dark .article-approval-container .font-semibold,
html.dark .article-approval-container strong {
    color: var(--bi-text-primary) !important;
}

/* Article preview content area — bg-white */
html.dark .article-approval-container .bg-white {
    background-color: var(--bi-bg-secondary) !important;
    color: var(--bi-text-primary) !important;
}

/* Article preview header — bg-gray-50 */
html.dark .article-approval-container .bg-gray-50 {
    background-color: var(--bi-bg-tertiary) !important;
}

/* Score badge inline backgrounds — dark mode alternatives */
html.dark [style*="background-color: #d4edda"],
html.dark [style*="background-color: rgb(212, 237, 218)"] {
    background-color: rgba(40,167,69,0.15) !important;
    color: #4ade80 !important;
}
html.dark [style*="background-color: #fff3cd"],
html.dark [style*="background-color: rgb(255, 243, 205)"] {
    background-color: rgba(255,193,7,0.15) !important;
    color: #facc15 !important;
}
html.dark [style*="background-color: #ffe5cc"],
html.dark [style*="background-color: rgb(255, 229, 204)"] {
    background-color: rgba(253,126,20,0.15) !important;
    color: #fb923c !important;
}
html.dark [style*="background-color: #f8d7da"],
html.dark [style*="background-color: rgb(248, 215, 218)"] {
    background-color: rgba(220,53,69,0.15) !important;
    color: #f87171 !important;
}

/* Score badge text inside */
html.dark [style*="background-color: #d4edda"] .font-bold,
html.dark [style*="background-color: #fff3cd"] .font-bold,
html.dark [style*="background-color: #ffe5cc"] .font-bold,
html.dark [style*="background-color: #f8d7da"] .font-bold {
    color: inherit !important;
}
html.dark [style*="background-color: #d4edda"] .text-gray-700,
html.dark [style*="background-color: #fff3cd"] .text-gray-700,
html.dark [style*="background-color: #ffe5cc"] .text-gray-700,
html.dark [style*="background-color: #f8d7da"] .text-gray-700 {
    color: var(--bi-text-secondary) !important;
}

/* Compliance category note (blockquote-like) */
html.dark .article-approval-container blockquote,
html.dark .article-approval-container .border-l-4 {
    border-left-color: var(--bi-border-secondary) !important;
    color: var(--bi-text-secondary) !important;
}

/* ============================================
   Rules / Rules Explorer Page Overrides
   ============================================ */
html.dark .group-separator-row {
    background-color: var(--bi-bg-tertiary) !important;
    border-color: var(--bi-border-primary) !important;
}
html.dark .group-separator-row td {
    color: var(--bi-text-secondary) !important;
    border-color: var(--bi-border-primary) !important;
}

/* Status badges — rules pages */
html.dark .status-success {
    background-color: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
}
html.dark .status-delete {
    background-color: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
}
html.dark .status-info {
    background-color: rgba(129,140,248,0.15) !important;
    color: #818cf8 !important;
}
html.dark .status-warning {
    background-color: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}
html.dark .status-pause,
html.dark .status-paused {
    background-color: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}
html.dark .status-active {
    background-color: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
}

/* ============================================
   Optimizer V2 / Enhanced Page Overrides
   ============================================ */
html.dark .sticky-header {
    background: var(--bi-bg-secondary) !important;
}
html.dark .sticky-filters {
    background: var(--bi-bg-tertiary) !important;
}
html.dark .decision-node {
    background: var(--bi-card-bg) !important;
    color: var(--bi-text-primary) !important;
}

/* Action badges — optimizer */
html.dark .badge-kill {
    background: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
}
html.dark .badge-pause {
    background: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}
html.dark .badge-scale-up {
    background: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
}
html.dark .badge-duplicate {
    background: rgba(129,140,248,0.15) !important;
    color: #818cf8 !important;
}
html.dark .badge-monitor {
    background: rgba(160,160,176,0.12) !important;
    color: #a0a0b0 !important;
}

/* Priority badges — optimizer & rules-dashboard */
html.dark .priority-critical {
    background: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
}
html.dark .priority-high {
    background: rgba(251,146,60,0.15) !important;
    color: #fb923c !important;
}
html.dark .priority-medium {
    background: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}
html.dark .priority-low {
    background: rgba(129,140,248,0.15) !important;
    color: #818cf8 !important;
}

/* ============================================
   Campaign Genius Status Badges
   ============================================ */
html.dark .status-protected {
    background: rgba(250,204,21,0.15) !important;
    color: #facc15 !important;
}
html.dark .status-gem {
    background: rgba(129,140,248,0.15) !important;
    color: #818cf8 !important;
}
html.dark .status-winner {
    background: rgba(74,222,128,0.15) !important;
    color: #4ade80 !important;
}

/* ============================================
   Compliance Page Overrides
   ============================================ */
html.dark .container {
    background-color: var(--bi-bg-secondary) !important;
    color: var(--bi-text-primary) !important;
}

/* ============================================
   Scraper Page Overrides
   ============================================ */
html.dark .tab-navigation {
    background: var(--bi-bg-secondary) !important;
    border-bottom-color: var(--bi-border-primary) !important;
}

/* ============================================
   Google Sign-In Button (login page)
   ============================================ */
html.dark .g_id_signin {
    filter: invert(0.85) hue-rotate(180deg);
}