/* ==========================================================================
   DARK THEME - SEO Quantum Pro (2026 Futuristic Edition)
   ==========================================================================
   Canonical dark mode stylesheet. Replaces all "fix" CSS files.
   All rules use [data-theme="dark"] selector and standard CSS variables.

   Design: Purple-tinted deep dark palette with glassmorphism,
   amplified glow effects, and dark gradient overlays.
   ========================================================================== */

/* ==========================================================================
   0. DARK MODE CSS VARIABLE OVERRIDES (Purple-Tinted Palette)
   ========================================================================== */

[data-theme="dark"] {
    --bg-primary: #0B0B12;
    --bg-secondary: #16141F;
    --bg-tertiary: #221F2E;
    --card-bg: #16141F;
    --card-hover: #221F2E;
    --input-bg: #16141F;
    --border-color: rgba(139, 92, 246, 0.12);
    --input-border: rgba(139, 92, 246, 0.18);
    --shadow-color: rgba(139, 92, 246, 0.08);
    --header-bg: rgba(11, 11, 18, 0.88);
}

/* ==========================================================================
   1. BACKGROUNDS - Utility class overrides
   ========================================================================== */

[data-theme="dark"] .bg-white:not(.bg-opacity-10):not(.bg-opacity-20):not(.bg-opacity-30):not(.bg-opacity-40):not(.bg-opacity-50):not(.theme-bg-white) {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .bg-gray-50:not(.theme-bg-gray-50) {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-gray-100:not(.theme-bg-gray-100) {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .bg-gray-200 {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
}

/* Nested white backgrounds get secondary with purple tint */
[data-theme="dark"] .bg-white .bg-white,
[data-theme="dark"] [class*="bg-white"] [class*="bg-white"] {
    background-color: var(--bg-secondary) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
}

/* Inner cards with gray */
[data-theme="dark"] .bg-gray-50.rounded-xl,
[data-theme="dark"] .bg-gray-50.rounded-lg,
[data-theme="dark"] .bg-gray-100.rounded-xl,
[data-theme="dark"] .bg-gray-100.rounded-lg {
    background-color: var(--bg-secondary) !important;
}

/* Rounded white cards */
[data-theme="dark"] .rounded-xl.bg-white,
[data-theme="dark"] .rounded-lg.bg-white,
[data-theme="dark"] div.bg-white.rounded-xl,
[data-theme="dark"] div.bg-white.rounded-lg {
    background-color: var(--bg-secondary) !important;
}

/* Overflow hidden containers */
[data-theme="dark"] .overflow-hidden.rounded-xl,
[data-theme="dark"] .overflow-hidden.rounded-2xl,
[data-theme="dark"] .overflow-hidden.rounded-lg {
    background-color: var(--bg-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

/* Colored background boxes - dark variants */
[data-theme="dark"] .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .bg-green-100 {
    background-color: #064e3b !important;
}

[data-theme="dark"] .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .bg-yellow-100 {
    background-color: #713f12 !important;
}

[data-theme="dark"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="dark"] .bg-red-100 {
    background-color: #7f1d1d !important;
}

[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .bg-blue-100 {
    background-color: #1e3a8a !important;
}

[data-theme="dark"] .bg-purple-50 {
    background-color: rgba(147, 51, 234, 0.1) !important;
    border-color: rgba(147, 51, 234, 0.3) !important;
}

[data-theme="dark"] .bg-purple-100 {
    background-color: #581c87 !important;
}

[data-theme="dark"] .bg-orange-50 {
    background-color: #431407 !important;
}

[data-theme="dark"] .bg-orange-100 {
    background-color: #7c2d12 !important;
}

[data-theme="dark"] .bg-pink-50,
[data-theme="dark"] .bg-rose-50 {
    background-color: #4c0519 !important;
}

[data-theme="dark"] .bg-pink-100,
[data-theme="dark"] .bg-rose-100 {
    background-color: #831843 !important;
}

[data-theme="dark"] .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .bg-indigo-50 {
    background-color: rgba(129, 140, 248, 0.1) !important;
}

/* Anti-pattern: override inline white backgrounds */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] [style*="rgba(255, 255, 255"] {
    background: var(--bg-secondary) !important;
}

/* Gradient backgrounds to dark - with subtle purple tint */
[data-theme="dark"] .bg-gradient-to-b.from-emerald-50,
[data-theme="dark"] .bg-gradient-to-b.from-green-50,
[data-theme="dark"] .bg-gradient-to-b.from-blue-50,
[data-theme="dark"] .bg-gradient-to-b.from-purple-50,
[data-theme="dark"] .bg-gradient-to-b.from-amber-50,
[data-theme="dark"] .bg-gradient-to-b.from-yellow-50 {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, var(--bg-primary) 100%) !important;
}

[data-theme="dark"] .bg-gradient-to-b.from-purple-50.to-white,
[data-theme="dark"] [class*="from-purple-50"][class*="to-white"] {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, var(--bg-primary) 100%) !important;
}

[data-theme="dark"] .bg-gradient-to-b.from-emerald-50.to-white,
[data-theme="dark"] .bg-gradient-to-b.from-green-50.to-white,
[data-theme="dark"] .bg-gradient-to-b.from-blue-50.to-white {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, var(--bg-primary) 100%) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-emerald-100,
[data-theme="dark"] .bg-gradient-to-r.from-green-100,
[data-theme="dark"] .bg-gradient-to-r.from-blue-100,
[data-theme="dark"] [class*="from-emerald-100"][class*="to-green-100"] {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(139, 92, 246, 0.06) 100%) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-amber-50.to-orange-50,
[data-theme="dark"] .bg-gradient-to-r.from-amber-50,
[data-theme="dark"] .bg-gradient-to-r.from-yellow-50.to-orange-50 {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-gradient-to-br.from-green-50,
[data-theme="dark"] .bg-gradient-to-br.from-purple-50,
[data-theme="dark"] .bg-gradient-to-br.from-blue-50 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, var(--bg-secondary) 100%) !important;
}

/* ==========================================================================
   2. TEXT COLORS
   ========================================================================== */

[data-theme="dark"] .text-gray-900:not(.theme-text-gray-900) {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-800:not(.theme-text-gray-800) {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-700:not(.theme-text-gray-700) {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-600:not(.theme-text-gray-600) {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-500:not(.theme-text-gray-500) {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-300 {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

/* Headings */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p {
    color: var(--text-secondary) !important;
}

/* Colored text - keep visible */
[data-theme="dark"] .text-green-500,
[data-theme="dark"] .text-green-600 {
    color: #34d399 !important;
}

[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-900 {
    color: #86efac !important;
}

[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-600 {
    color: #f87171 !important;
}

[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-900 {
    color: #fca5a5 !important;
}

[data-theme="dark"] .text-blue-500,
[data-theme="dark"] .text-blue-600 {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900 {
    color: #93c5fd !important;
}

[data-theme="dark"] .text-purple-500,
[data-theme="dark"] .text-purple-600 {
    color: #a855f7 !important;
}

[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-purple-900 {
    color: #c084fc !important;
}

[data-theme="dark"] .text-yellow-500,
[data-theme="dark"] .text-yellow-600 {
    color: #fbbf24 !important;
}

[data-theme="dark"] .text-yellow-700,
[data-theme="dark"] .text-yellow-800,
[data-theme="dark"] .text-yellow-900 {
    color: #fde047 !important;
}

[data-theme="dark"] .text-amber-500,
[data-theme="dark"] .text-amber-600 {
    color: #f59e0b !important;
}

[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-800,
[data-theme="dark"] .text-orange-900 {
    color: #fdba74 !important;
}

[data-theme="dark"] .text-teal-500,
[data-theme="dark"] .text-teal-600 {
    color: #14b8a6 !important;
}

[data-theme="dark"] .text-cyan-500,
[data-theme="dark"] .text-cyan-600 {
    color: #22d3ee !important;
}

[data-theme="dark"] .text-indigo-500,
[data-theme="dark"] .text-indigo-600 {
    color: #818cf8 !important;
}

/* Span - preserve colored text */
[data-theme="dark"] span:not([class*="text-white"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-orange"]):not([class*="text-cyan"]):not([class*="text-teal"]):not([class*="text-indigo"]):not([class*="text-pink"]):not([class*="text-rose"]) {
    color: var(--text-secondary);
}

/* ==========================================================================
   3. BORDERS
   ========================================================================== */

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: rgba(139, 92, 246, 0.12) !important;
}

[data-theme="dark"] .border-gray-100 {
    border-color: rgba(139, 92, 246, 0.08) !important;
}

[data-theme="dark"] .border {
    border-color: rgba(139, 92, 246, 0.12) !important;
}

[data-theme="dark"] .border-purple-200,
[data-theme="dark"] .border-indigo-200 {
    border-color: rgba(139, 92, 246, 0.35) !important;
}

[data-theme="dark"] .border-teal-200,
[data-theme="dark"] .border-cyan-200 {
    border-color: rgba(14, 116, 144, 0.5) !important;
}

/* Colored borders - purple-tinted */
[data-theme="dark"] .border-green-200 {
    border-color: rgba(6, 95, 70, 0.6) !important;
}

[data-theme="dark"] .border-yellow-200 {
    border-color: rgba(146, 64, 14, 0.5) !important;
}

[data-theme="dark"] .border-red-200 {
    border-color: rgba(153, 27, 27, 0.5) !important;
}

[data-theme="dark"] .border-blue-200 {
    border-color: rgba(30, 64, 175, 0.5) !important;
}

[data-theme="dark"] .border-purple-200 {
    border-color: rgba(139, 92, 246, 0.35) !important;
}

[data-theme="dark"] .border-orange-200 {
    border-color: rgba(154, 52, 18, 0.5) !important;
}

[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-purple-100,
[data-theme="dark"] .border-emerald-100,
[data-theme="dark"] .border-emerald-200,
[data-theme="dark"] .border-green-100,
[data-theme="dark"] .border-blue-100 {
    border-color: var(--border-color) !important;
}

/* Dashed borders */
[data-theme="dark"] .border-dashed {
    border-color: rgba(139, 92, 246, 0.15) !important;
}

/* Dividers */
[data-theme="dark"] hr,
[data-theme="dark"] .divide-y > * {
    border-color: rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] .divide-gray-200>*+* {
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   4. FORMS - Inputs, Textareas, Selects
   ========================================================================== */

[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: rgba(22, 20, 31, 0.9) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: rgba(139, 92, 246, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 0 20px rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] ::placeholder {
    color: var(--text-tertiary) !important;
    opacity: 0.7 !important;
}

[data-theme="dark"] ::-webkit-input-placeholder {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] ::-moz-placeholder {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] select option {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Form controls (Bootstrap) */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-input {
    background-color: rgba(22, 20, 31, 0.9) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-tertiary) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    color: var(--text-primary) !important;
}

/* Labels */
[data-theme="dark"] label,
[data-theme="dark"] .form-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] label.text-xs,
[data-theme="dark"] label.text-sm {
    color: var(--text-secondary) !important;
}

/* Checkboxes */
[data-theme="dark"] input[type="checkbox"]:not(.sr-only) {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input[type="checkbox"]:not(.sr-only):checked {
    background-color: #9333ea !important;
    border-color: #9333ea !important;
}

[data-theme="dark"] input[type="checkbox"] + label,
[data-theme="dark"] input[type="checkbox"] ~ label {
    color: var(--text-primary) !important;
}

/* Radio buttons */
[data-theme="dark"] input[type="radio"] {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input[type="radio"]:checked {
    background-color: #9333ea !important;
    border-color: #9333ea !important;
}

[data-theme="dark"] input[type="radio"] + label,
[data-theme="dark"] input[type="radio"] ~ label,
[data-theme="dark"] input[type="radio"] ~ span {
    color: var(--text-primary) !important;
}

/* Radio cards */
[data-theme="dark"] input[type="radio"] + label.cursor-pointer,
[data-theme="dark"] input[type="radio"] ~ label.cursor-pointer {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input[type="radio"]:checked + label.cursor-pointer,
[data-theme="dark"] input[type="radio"]:checked ~ label.cursor-pointer {
    background-color: rgba(147, 51, 234, 0.15) !important;
    border-color: #9333ea !important;
}

/* Range sliders */
[data-theme="dark"] input[type="range"] {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
    background-color: #9333ea !important;
}

/* ==========================================================================
   5. CARDS & Containers
   ========================================================================== */

[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
    background-color: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: rgba(34, 31, 46, 0.9) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dynamic-card {
    background-color: rgba(22, 20, 31, 0.8) !important;
    border: 1px solid rgba(139, 92, 246, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .dynamic-card:hover {
    background-color: rgba(42, 38, 56, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .stats-card {
    background-color: rgba(22, 20, 31, 0.85) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .settings-card {
    background: rgba(22, 20, 31, 0.85) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .settings-card-title {
    background: rgba(34, 31, 46, 0.9) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* CLI Cards */
[data-theme="dark"] .cli-card {
    background: rgba(22, 20, 31, 0.8) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .cli-card:hover {
    background: rgba(42, 38, 56, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .cli-card.selected {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.15);
}

/* Security card */
[data-theme="dark"] .security-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.12) 100%) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Cards with shadows - glassmorphism effect */
[data-theme="dark"] .rounded-lg.shadow-md:not(.theme-bg-primary),
[data-theme="dark"] .rounded-lg.shadow-lg:not(.theme-bg-primary),
[data-theme="dark"] .rounded-lg.shadow:not(.theme-bg-primary) {
    background-color: rgba(22, 20, 31, 0.85) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(139, 92, 246, 0.15) !important;
}

[data-theme="dark"] .rounded-xl.border,
[data-theme="dark"] .rounded-2xl.border,
[data-theme="dark"] .rounded-lg.border {
    background-color: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

/* ==========================================================================
   6. TABLES
   ========================================================================== */

[data-theme="dark"] table {
    background-color: rgba(11, 11, 18, 0.9) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] thead,
[data-theme="dark"] table th {
    background-color: rgba(34, 31, 46, 0.9) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] tbody tr {
    background-color: rgba(11, 11, 18, 0.7) !important;
}

[data-theme="dark"] tbody tr:hover {
    background-color: rgba(42, 38, 56, 0.5) !important;
}

[data-theme="dark"] td,
[data-theme="dark"] th {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Striped tables */
[data-theme="dark"] .table-striped tbody tr:nth-child(odd) {
    background: var(--bg-primary) !important;
}

/* ==========================================================================
   7. MODALS & Dialogs
   ========================================================================== */

[data-theme="dark"] .modal-content,
[data-theme="dark"] [role="dialog"] {
    background-color: rgba(16, 14, 22, 0.95) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.08) !important;
}

[data-theme="dark"] .modal-header {
    background-color: rgba(34, 31, 46, 0.8) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

[data-theme="dark"] .modal-body {
    background-color: rgba(16, 14, 22, 0.9) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-footer {
    background-color: rgba(34, 31, 46, 0.8) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* ==========================================================================
   8. NAVIGATION & Tabs
   ========================================================================== */

[data-theme="dark"] .nav-tabs {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) var(--border-color) transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tab-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Nav pills */
[data-theme="dark"] .nav-pills .nav-link {
    background-color: transparent;
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-pills .nav-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--accent-purple);
    color: white;
}

/* Nav hover states */
[data-theme="dark"] nav .hover\:bg-gray-50:hover,
[data-theme="dark"] nav .hover\:bg-gray-100:hover,
[data-theme="dark"] nav .hover\:bg-white:hover {
    background-color: transparent !important;
}

/* ==========================================================================
   9. DROPDOWNS
   ========================================================================== */

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-content {
    background-color: rgba(16, 14, 22, 0.95) !important;
    border: 1px solid rgba(139, 92, 246, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 1px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(139, 92, 246, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   10. BUTTONS
   ========================================================================== */

[data-theme="dark"] button[type="submit"] {
    color: white;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] button[type="submit"]:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4), 0 0 30px rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] button.bg-gray-100,
[data-theme="dark"] button.bg-gray-200,
[data-theme="dark"] button.bg-gray-300,
[data-theme="dark"] a.bg-gray-100,
[data-theme="dark"] a.bg-gray-200 {
    background-color: rgba(34, 31, 46, 0.8) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] button.bg-gray-100:hover,
[data-theme="dark"] button.bg-gray-200:hover,
[data-theme="dark"] button.bg-gray-300:hover,
[data-theme="dark"] a.bg-gray-100:hover {
    background-color: rgba(42, 38, 56, 0.9) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

[data-theme="dark"] button.bg-white,
[data-theme="dark"] a.bg-white {
    background-color: rgba(22, 20, 31, 0.85) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] button.text-gray-700,
[data-theme="dark"] button.text-gray-600,
[data-theme="dark"] a.text-gray-700 {
    color: var(--text-primary) !important;
}

/* Ghost buttons on gradient backgrounds */
[data-theme="dark"] button.bg-white\/20,
[data-theme="dark"] button[class*="bg-white/"] {
    background-color: rgba(139, 92, 246, 0.15) !important;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] button.bg-white\/20:hover,
[data-theme="dark"] button[class*="bg-white/"]:hover {
    background-color: rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

/* Secondary buttons (Bootstrap-style) */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline {
    background: rgba(34, 31, 46, 0.8) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(42, 38, 56, 0.9) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.1);
}

/* ==========================================================================
   11. ALERTS & Notifications
   ========================================================================== */

[data-theme="dark"] .alert,
[data-theme="dark"] .info-box,
[data-theme="dark"] .warning-box {
    background-color: rgba(22, 20, 31, 0.85) !important;
    border: 1px solid rgba(139, 92, 246, 0.12);
    color: var(--text-primary) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .alert-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-theme="dark"] .alert-success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ==========================================================================
   12. BADGES & Pills
   ========================================================================== */

[data-theme="dark"] .badge,
[data-theme="dark"] .tag,
[data-theme="dark"] .pill {
    background-color: rgba(139, 92, 246, 0.12) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .badge-primary {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .badge-count {
    background-color: #dc2626 !important;
    color: white !important;
}

/* ==========================================================================
   13. TOGGLE SWITCHES
   ========================================================================== */

/* Toggle track base (OFF state) */
[data-theme="dark"] input[type="checkbox"].sr-only + div,
[data-theme="dark"] input[type="checkbox"].sr-only ~ div {
    background-color: #4b5563 !important;
}

/* Toggle track ON state */
[data-theme="dark"] input[type="checkbox"].sr-only:checked + div,
[data-theme="dark"] input[type="checkbox"].sr-only:checked ~ div {
    background-color: #10b981 !important;
}

/* Master toggle selector */
[data-theme="dark"] label.relative.inline-flex div.rounded-full,
[data-theme="dark"] label.cursor-pointer div.rounded-full,
[data-theme="dark"] .peer ~ div.rounded-full,
[data-theme="dark"] input[type="checkbox"] ~ div.rounded-full {
    background-color: #6b7280 !important;
}

[data-theme="dark"] .peer:checked ~ div.rounded-full {
    background-color: #10b981 !important;
}

/* Toggle track OFF - lighter for visibility */
[data-theme="dark"] div.bg-gray-300,
[data-theme="dark"] div.bg-gray-200,
[data-theme="dark"] div[class*="bg-gray-300"],
[data-theme="dark"] div[class*="bg-gray-200"] {
    background-color: #6b7280 !important;
}

/* Toggle track with white opacity */
[data-theme="dark"] div[class*="bg-white/"],
[data-theme="dark"] div.bg-white\/30,
[data-theme="dark"] div.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

/* Toggle thumb */
[data-theme="dark"] label.relative.inline-flex div.rounded-full::after,
[data-theme="dark"] label.cursor-pointer div.rounded-full::after,
[data-theme="dark"] .peer ~ div.rounded-full::after,
[data-theme="dark"] input[type="checkbox"] ~ div.rounded-full::after,
[data-theme="dark"] div[class*="after:bg-white"][class*="after:rounded-full"]::after {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Ultra-specific toggle selectors for Tailwind */
[data-theme="dark"] div.w-14.h-7.rounded-full,
[data-theme="dark"] div.w-11.h-6.rounded-full,
[data-theme="dark"] div.w-9.h-5.rounded-full {
    background-color: #6b7280 !important;
}

[data-theme="dark"] input:checked ~ div.w-14.h-7.rounded-full,
[data-theme="dark"] input:checked ~ div.w-11.h-6.rounded-full,
[data-theme="dark"] input:checked ~ div.w-9.h-5.rounded-full,
[data-theme="dark"] .peer:checked ~ div.w-14.h-7,
[data-theme="dark"] .peer:checked ~ div.w-11.h-6,
[data-theme="dark"] .peer:checked ~ div.w-9.h-5 {
    background-color: #10b981 !important;
}

/* Toggles on gradient headers */
[data-theme="dark"] .bg-gradient-to-r div.w-14.h-7,
[data-theme="dark"] .bg-gradient-to-r div.w-11.h-6 {
    background-color: rgba(255, 255, 255, 0.35) !important;
}

[data-theme="dark"] .bg-gradient-to-r input:checked ~ div.w-14.h-7,
[data-theme="dark"] .bg-gradient-to-r input:checked ~ div.w-11.h-6,
[data-theme="dark"] .bg-gradient-to-r .peer:checked ~ div.w-14.h-7,
[data-theme="dark"] .bg-gradient-to-r .peer:checked ~ div.w-11.h-6 {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

/* Nuclear option - attribute selectors */
[data-theme="dark"] div[class*="w-14"][class*="h-7"][class*="rounded-full"],
[data-theme="dark"] div[class*="w-11"][class*="h-6"][class*="rounded-full"],
[data-theme="dark"] div[class*="w-9"][class*="h-5"][class*="rounded-full"] {
    background-color: #6b7280 !important;
}

[data-theme="dark"] div[class*="peer-focus"][class*="rounded-full"] {
    background-color: #6b7280 !important;
}

[data-theme="dark"] div[class*="after:content"][class*="rounded-full"] {
    background-color: #6b7280 !important;
}

[data-theme="dark"] input[type="checkbox"]:checked + div[class*="rounded-full"],
[data-theme="dark"] input[type="checkbox"]:checked ~ div[class*="rounded-full"] {
    background-color: #10b981 !important;
}

/* Checked colors for specific toggle types */
[data-theme="dark"] .peer:checked ~ div.peer-checked\:bg-emerald-500 {
    background-color: #10b981 !important;
}

[data-theme="dark"] .peer:checked ~ div.peer-checked\:bg-green-500 {
    background-color: #22c55e !important;
}

[data-theme="dark"] .peer:checked ~ div.peer-checked\:bg-amber-500 {
    background-color: #f59e0b !important;
}

[data-theme="dark"] .peer:checked ~ div.peer-checked\:bg-yellow-500 {
    background-color: #eab308 !important;
}

[data-theme="dark"] .peer:checked ~ div.peer-checked\:bg-blue-500 {
    background-color: #3b82f6 !important;
}

[data-theme="dark"] .peer:checked ~ div.peer-checked\:bg-purple-500,
[data-theme="dark"] .peer:checked ~ div.peer-checked\:bg-purple-600 {
    background-color: #9333ea !important;
}

[data-theme="dark"] .peer:checked ~ div[class*="peer-checked:bg-white"] {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Toggle labels */
[data-theme="dark"] label.relative.inline-flex span {
    color: inherit !important;
}

[data-theme="dark"] .toggle-label {
    color: var(--text-primary) !important;
}

/* Escaped bg-white class */
[data-theme="dark"] .bg-white\\30,
[data-theme="dark"] [class*="bg-white\\"],
[data-theme="dark"] div[class*="bg-white/"] {
    background-color: #4b5563 !important;
}

/* ==========================================================================
   14. LISTS, ACCORDIONS & PAGINATION
   ========================================================================== */

/* Lists */
[data-theme="dark"] .list-group {
    background: transparent !important;
}

[data-theme="dark"] .list-group-item {
    background-color: rgba(22, 20, 31, 0.7) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: rgba(42, 38, 56, 0.6) !important;
}

[data-theme="dark"] .list-group-item.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.85) 100%) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
}

/* Accordions */
[data-theme="dark"] .accordion-item,
[data-theme="dark"] details {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .accordion-button,
[data-theme="dark"] details summary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed),
[data-theme="dark"] details[open] summary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .accordion-body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Pagination */
[data-theme="dark"] .pagination .page-link,
[data-theme="dark"] .pagination .page-item .page-link {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .pagination .page-link:hover,
[data-theme="dark"] .pagination .page-item:hover .page-link {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: white !important;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: transparent !important;
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary) !important;
}

/* ==========================================================================
   15. CODE & SCROLLBARS
   ========================================================================== */

[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] .code-block {
    background-color: rgba(11, 11, 18, 0.9) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.12);
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(11, 11, 18, 0.6) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.2) !important;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.35) !important;
    background-clip: content-box;
}

/* ==========================================================================
   16. ACCESSIBILITY - Icons, Tooltips, Progress, Spinners
   ========================================================================== */

/* Icons */
[data-theme="dark"] svg.text-gray-400,
[data-theme="dark"] svg.text-gray-500 {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] svg.text-purple-400,
[data-theme="dark"] svg.text-purple-500 {
    color: #c084fc !important;
}

[data-theme="dark"] svg.text-teal-400,
[data-theme="dark"] svg.text-teal-500 {
    color: #2dd4bf !important;
}

/* Tooltips */
[data-theme="dark"] [data-tooltip],
[data-theme="dark"] .tooltip-content {
    background-color: rgba(16, 14, 22, 0.95) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 1px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .tooltip .tooltip-inner,
[data-theme="dark"] .tooltip .tooltiptext {
    background-color: rgba(16, 14, 22, 0.95) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .tooltip .tooltiptext::after {
    border-color: rgba(16, 14, 22, 0.95) transparent transparent transparent;
}

/* Popovers */
[data-theme="dark"] .popover {
    background: rgba(16, 14, 22, 0.95) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 1px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .popover-header {
    background: rgba(34, 31, 46, 0.8) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] .popover-body {
    color: var(--text-primary) !important;
}

/* Progress bars */
[data-theme="dark"] .progress {
    background: rgba(22, 20, 31, 0.8) !important;
    border: 1px solid rgba(139, 92, 246, 0.08);
}

[data-theme="dark"] .progress-bar {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%) !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .progress-bar-fill {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%) !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

/* Spinners */
[data-theme="dark"] .spinner-border,
[data-theme="dark"] .spinner-grow {
    color: var(--accent-purple) !important;
}

/* Loading states */
[data-theme="dark"] .loading-spinner,
[data-theme="dark"] .skeleton {
    background-color: rgba(34, 31, 46, 0.6) !important;
}

[data-theme="dark"] .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(139, 92, 246, 0.08),
        transparent
    ) !important;
}

/* ==========================================================================
   17. SHADOWS
   ========================================================================== */

[data-theme="dark"] .shadow-sm {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 1px rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] .shadow-md {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 1px rgba(139, 92, 246, 0.12) !important;
}

[data-theme="dark"] .shadow-lg {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 2px rgba(139, 92, 246, 0.15), 0 0 40px rgba(139, 92, 246, 0.05) !important;
}

[data-theme="dark"] .shadow-xl {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 3px rgba(139, 92, 246, 0.15), 0 0 60px rgba(139, 92, 246, 0.06) !important;
}

/* ==========================================================================
   18. AUTH, INTEGRATION & SPECIFIC COMPONENTS
   ========================================================================== */

/* Auth */
[data-theme="dark"] .auth-section {
    background: linear-gradient(180deg, rgba(11, 11, 18, 0.95) 0%, rgba(22, 20, 31, 0.9) 100%) !important;
}

[data-theme="dark"] .auth-method-tab {
    background: rgba(22, 20, 31, 0.8) !important;
    color: var(--text-secondary) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

[data-theme="dark"] .auth-method-tab.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%) !important;
    color: white !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}

/* Integration items */
[data-theme="dark"] .integration-item {
    background: rgba(22, 20, 31, 0.8) !important;
    color: var(--text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .integration-item.checked {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .integration-checkbox {
    border-color: rgba(139, 92, 246, 0.2) !important;
    background: transparent !important;
}

[data-theme="dark"] .integration-checkbox.checked {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

/* Toggle container */
[data-theme="dark"] .toggle-container {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .toggle-switch {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .toggle-switch.active {
    background: var(--accent-purple) !important;
}

/* Install output */
[data-theme="dark"] #installOutput {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* File upload areas */
[data-theme="dark"] .file-upload-area,
[data-theme="dark"] .dropzone {
    background-color: rgba(22, 20, 31, 0.6);
    border-color: rgba(139, 92, 246, 0.15);
    color: var(--text-secondary);
}

[data-theme="dark"] .file-upload-area:hover,
[data-theme="dark"] .dropzone:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background-color: rgba(42, 38, 56, 0.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.08);
}

/* Timeline elements */
[data-theme="dark"] .timeline-item {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .timeline-item::before {
    background-color: var(--border-color);
}

/* Content preview areas */
[data-theme="dark"] #content-preview,
[data-theme="dark"] .preview-container,
[data-theme="dark"] .content-preview {
    background-color: rgba(11, 11, 18, 0.9) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

/* AI Settings sidebar */
[data-theme="dark"] .ai-settings,
[data-theme="dark"] .sidebar-settings {
    background-color: rgba(22, 20, 31, 0.85) !important;
    border: 1px solid rgba(139, 92, 246, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Product/special sections */
[data-theme="dark"] .product-section,
[data-theme="dark"] .special-fields {
    background-color: rgba(22, 20, 31, 0.8) !important;
    border: 1px solid rgba(139, 92, 246, 0.06);
}

/* ==========================================================================
   19. UTILITY CLASSES
   ========================================================================== */

.dark-bg-force {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .dark-bg-force {
    background-color: var(--bg-primary) !important;
}

.dark-text-force {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dark-text-force {
    color: var(--text-primary) !important;
}

.theme-border {
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   20. LIGHT MODE TOGGLE STYLES (needed for both themes)
   ========================================================================== */

[data-theme="light"] .peer ~ div.bg-gray-300 {
    background-color: #d1d5db !important;
}

[data-theme="light"] div.bg-gray-300,
[data-theme="light"] div[class*="bg-gray-300"] {
    background-color: #d1d5db !important;
}

[data-theme="light"] div[class*="bg-white/30"],
[data-theme="light"] div[class*="bg-white/"] {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light"] label.relative.inline-flex div.rounded-full::after,
[data-theme="light"] .peer ~ div.rounded-full::after {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .bg-gradient-to-r div.w-14.h-7,
[data-theme="light"] .bg-gradient-to-r div.w-11.h-6 {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="light"] .bg-gradient-to-r input:checked ~ div.w-14.h-7,
[data-theme="light"] .bg-gradient-to-r input:checked ~ div.w-11.h-6 {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

/* Light mode input mode tabs */
[data-theme="light"] .input-mode-tab.bg-gray-100 {
    background-color: #f3f4f6;
    color: #4b5563;
}

[data-theme="light"] .border-dashed {
    border-color: #d1d5db;
}

[data-theme="light"] label,
[data-theme="light"] .text-gray-700 {
    color: #374151;
}

/* === Dark Mode Nav Overrides (extracted from base.html) === */

/* DARK MODE MENU FIX - ULTIMATE SOLUTION */
/* Remove ALL backgrounds from ALL menu items in dark mode */
[data-theme="dark"] nav * {
    --tw-bg-opacity: 0 !important;
}

/* Force transparent backgrounds on all dropdown links */
[data-theme="dark"] nav .absolute a,
[data-theme="dark"] nav .absolute a:hover,
[data-theme="dark"] nav .absolute a:focus,
[data-theme="dark"] nav .absolute a:active {
    background-color: transparent !important;
    background: none !important;
    background-image: none !important;
}

/* Override ALL Tailwind hover background utilities */
[data-theme="dark"] nav [class*="hover:bg-"]:hover {
    background-color: transparent !important;
    background: none !important;
}

/* Specifically target the problematic classes */
[data-theme="dark"] nav .hover\:bg-purple-50:hover,
[data-theme="dark"] nav .hover\:bg-blue-50:hover,
[data-theme="dark"] nav .hover\:bg-green-50:hover,
[data-theme="dark"] nav .hover\:bg-gray-50:hover,
[data-theme="dark"] nav .hover\:bg-gray-100:hover {
    background-color: transparent !important;
    background: none !important;
}

/* Remove backgrounds from all navigation links */
[data-theme="dark"] nav a {
    background-color: transparent !important;
}

[data-theme="dark"] nav a:hover {
    background-color: transparent !important;
}

/* Keep only the dropdown container with dark background */
[data-theme="dark"] nav .group>div.absolute {
    background-color: rgba(11, 11, 18, 0.95) !important;
    border: 1px solid rgba(139, 92, 246, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 1px rgba(139, 92, 246, 0.2);
}

/* Purple text color on hover for visual feedback */
[data-theme="dark"] nav .absolute a:hover,
[data-theme="dark"] nav .absolute a:hover *,
[data-theme="dark"] nav a:hover {
    color: var(--accent-purple) !important;
}

/* Light mode - subtle background on hover */
[data-theme="light"] nav .absolute a:hover,
:not([data-theme]) nav .absolute a:hover {
    background-color: rgba(147, 51, 234, 0.1);
}

/* Active page - purple text */
[data-theme="dark"] nav a.active,
[data-theme="dark"] nav a.active *,
[data-theme="dark"] nav a[aria-current="page"],
[data-theme="dark"] nav a[aria-current="page"] * {
    color: var(--accent-purple) !important;
    background-color: transparent !important;
}

/* Exception: content-nav-tab.active uses white text on gradient bg */
[data-theme="dark"] nav a.content-nav-tab.active,
[data-theme="dark"] nav a.content-nav-tab.active *,
[data-theme="dark"] a.content-nav-tab.active,
[data-theme="dark"] a.content-nav-tab.active * {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Left border animation for dropdown items */
[data-theme="dark"] nav .absolute a {
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease, padding 0.2s ease, color 0.2s ease;
    display: block;
}

[data-theme="dark"] nav .absolute a:hover {
    border-left-color: var(--accent-purple);
    padding-left: 1.25rem;
}

/* RTL support */
[data-theme="dark"][dir="rtl"] nav .absolute a {
    border-left: none;
    border-right: 3px solid transparent;
}

[data-theme="dark"][dir="rtl"] nav .absolute a:hover {
    border-right-color: var(--accent-purple);
    padding-right: 1.25rem;
    padding-left: 1rem;
}

/* NUCLEAR OPTION - Remove ALL possible backgrounds */
[data-theme="dark"] nav .block:hover,
[data-theme="dark"] nav .px-4:hover,
[data-theme="dark"] nav .py-3:hover,
[data-theme="dark"] nav .py-2:hover {
    background-color: transparent !important;
}

/* Fix mobile menu button - remove default browser button hover */
[data-theme="dark"] .mobile-menu-btn {
    background: none !important;
    border: none !important;
}

[data-theme="dark"] .mobile-menu-btn:hover,
[data-theme="dark"] .mobile-menu-btn:focus,
[data-theme="dark"] .mobile-menu-btn:active {
    background-color: transparent !important;
    background: none !important;
    outline: none !important;
}

/* Remove gray from dropdown items by overriding the parent's background */
[data-theme="dark"] nav .absolute a {
    background-color: transparent !important;
    background: none !important;
}

[data-theme="dark"] nav .absolute a:hover {
    background-color: transparent !important;
    background: none !important;
}

/* ==========================================================================
   SQ-CARD, CLIENT-CARD, FORM-SECTION-CARD & GLASSMORPHISM - Dark Mode
   Fixes hardcoded white/light rgba backgrounds in templates
   ========================================================================== */

/* Override glassmorphism variables for dark mode */
[data-theme="dark"] {
    --glass-bg: rgba(22, 20, 31, 0.85);
    --glass-border: rgba(139, 92, 246, 0.15);
    --glass-blur: 20px;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 2px rgba(139, 92, 246, 0.1);
    --card-bg: rgba(22, 20, 31, 0.85);
}

/* SQ-Card dark mode - override any inline !important from templates */
[data-theme="dark"] .sq-card {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(139, 92, 246, 0.1) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .sq-card:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.1) !important;
}

/* Client card dark mode */
[data-theme="dark"] .client-card {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .client-card:hover {
    background: rgba(42, 38, 56, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 16px 48px rgba(139, 92, 246, 0.12) !important;
}

/* Glass card dark mode (used in client_prompts, clusters, etc.) */
[data-theme="dark"] .glass-card {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(139, 92, 246, 0.1) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .glass-card:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.1) !important;
}

/* Form section card dark mode */
[data-theme="dark"] .form-section-card {
    background: rgba(22, 20, 31, 0.9) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Inline section dark mode */
[data-theme="dark"] .inline-section {
    color: var(--text-primary, #F8FAFC);
}

/* Tab content and tab pane dark mode */
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tab-pane {
    background-color: transparent !important;
}

/* Version card, cluster card, prompt card dark mode */
[data-theme="dark"] .version-card,
[data-theme="dark"] .cluster-card,
[data-theme="dark"] .prompt-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .config-card,
[data-theme="dark"] .audit-card,
[data-theme="dark"] .content-card {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .version-card:hover,
[data-theme="dark"] .cluster-card:hover,
[data-theme="dark"] .prompt-card:hover,
[data-theme="dark"] .detail-card:hover,
[data-theme="dark"] .config-card:hover,
[data-theme="dark"] .audit-card:hover,
[data-theme="dark"] .content-card:hover {
    background: rgba(42, 38, 56, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

/* Glass page header, glass panel, glass stat card dark mode */
[data-theme="dark"] .glass-page-header,
[data-theme="dark"] .glass-panel,
[data-theme="dark"] .glass-stat-card,
[data-theme="dark"] .glass-suggestion-box {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Edit meta section, edit seo tool card dark mode */
[data-theme="dark"] .edit-meta-section,
[data-theme="dark"] .edit-seo-tool-card {
    background: rgba(22, 20, 31, 0.8) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* Op card (controller history) dark mode */
[data-theme="dark"] .op-card {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* Content nav tabs dark mode */
[data-theme="dark"] .content-nav-tabs {
    background: rgba(22, 20, 31, 0.7) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* Content page header dark mode */
[data-theme="dark"] .content-page-header {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* Cluster header dark mode */
[data-theme="dark"] .cluster-header {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* Task manager panel dark mode */
[data-theme="dark"] .task-manager-panel {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* Secondary buttons glass override in dark mode */
[data-theme="dark"] .sqp-btn-secondary {
    background: rgba(22, 20, 31, 0.6) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
}

[data-theme="dark"] .sqp-btn-secondary:hover {
    background: rgba(42, 38, 56, 0.8) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

/* Theme bg primary dark mode */
[data-theme="dark"] .theme-bg-primary {
    background: rgba(22, 20, 31, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* Inputs in dark mode — solid opaque purple-tinted bg for clear contrast vs section card */
[data-theme="dark"] .sqp-input,
[data-theme="dark"] .sqp-select,
[data-theme="dark"] .sqp-textarea {
    background: var(--bg-input, #1C1A2C) !important;
    border-color: var(--border-default, rgba(168, 85, 247, 0.28)) !important;
    color: var(--text-primary, #F8FAFC) !important;
}

[data-theme="dark"] .sqp-input:hover,
[data-theme="dark"] .sqp-select:hover,
[data-theme="dark"] .sqp-textarea:hover {
    background: var(--bg-input-focus, #251F3B) !important;
    border-color: var(--border-dark, rgba(168, 85, 247, 0.45)) !important;
}

[data-theme="dark"] .sqp-input:focus,
[data-theme="dark"] .sqp-select:focus,
[data-theme="dark"] .sqp-textarea:focus {
    background: var(--bg-input-focus, #251F3B) !important;
    border-color: var(--dp-accent, #A855F7) !important;
    box-shadow: 0 0 0 3px var(--dp-accent-ring, rgba(168, 85, 247, 0.32)) !important;
}

/* Version select dark mode */
[data-theme="dark"] .version-select {
    background: var(--bg-input, #1C1A2C) !important;
    border-color: var(--border-default, rgba(168, 85, 247, 0.28)) !important;
    color: var(--text-primary, #F8FAFC) !important;
}

/* === Dark Nav Final Override - MUST be at end of file === */

/* This MUST be last to override everything */
[data-theme="dark"] nav .hover\:bg-purple-50:hover,
[data-theme="dark"] nav .hover\:bg-blue-50:hover,
[data-theme="dark"] nav .hover\:bg-green-50:hover,
[data-theme="dark"] nav .hover\:bg-gray-50:hover,
[data-theme="dark"] nav .hover\:bg-gray-100:hover,
[data-theme="dark"] nav [class*="hover:bg-"]:hover {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   END OF DARK THEME
   ========================================================================== */