/* public/css/dark-mode.css */
/* Minimal Dark Mode overrides that safely apply over default styles without breaking existing classes */

html.dark-mode, html.dark-mode body {
    background-color: #0a0a0a !important; /* bg-gray-900 */
    color: #e5e5e5 !important; /* text-gray-200 */
}

/* Backgrounds - Cards and Surfaces */
html.dark-mode .bg-white,
html.dark-mode .bg-blue-50\/70,
html.dark-mode .bg-white\/80,
html.dark-mode .bg-white\/90 {
    background-color: #242424 !important; /* Raised cards */
    border-color: #3a3a3a !important; 
}

/* Base Body Backgrounds - These should remain pitch black */
html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100,
html.dark-mode .bg-blue-50,
html.dark-mode .bg-purple-50,
html.dark-mode .bg-indigo-50 {
    background-color: #0a0a0a !important; 
    border-color: #262626 !important; 
}

/* Table Headers, List Headers, and Inner Containers */
/* We force these to a 'raised' surface color so they look like headers on cards */
html.dark-mode .border-b.bg-gray-50\/50,
html.dark-mode .border-t.bg-gray-50\/30,
html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100,
html.dark-mode thead.bg-gray-50,
html.dark-mode thead.bg-gray-100,
html.dark-mode .bg-gray-50.rounded-lg {
    background-color: #2d2d2d !important; 
    border-color: #404040 !important;
}

/* Specific fix for card headers with blue/indigo gradients to ensure separation in dark mode */
html.dark-mode .clientarea-card div.border-b.bg-gradient-to-r.from-blue-50 {
    background: linear-gradient(to right, #2d2d2d, #242424) !important;
    border-bottom: 2px solid #404040 !important; /* Stronger line for headers */
}

html.dark-mode div.px-6.py-5.bg-gray-50\/50 {
    background-color: #2d2d2d !important;
}

/* Text Colors */
html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-700,
html.dark-mode .text-gray-600 {
    color: #e5e5e5 !important; /* text-gray-200 */
}
html.dark-mode .text-gray-500,
html.dark-mode .text-gray-400 {
    color: #a3a3a3 !important; /* text-gray-400 */
}

/* Text Highlights & Badges Bypass */
html.dark-mode .text-blue-900 { color: #bfdbfe !important; }
html.dark-mode .text-blue-800 { color: #93c5fd !important; }
html.dark-mode .text-blue-700,
html.dark-mode .hover\:text-blue-700:hover { color: #93c5fd !important; }
html.dark-mode .text-blue-600 { color: #60a5fa !important; }
html.dark-mode .bg-blue-600 { background-color: #2563eb !important; color: #fff !important; }
html.dark-mode .bg-blue-500 { background-color: #3b82f6 !important; }
html.dark-mode .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; }
html.dark-mode .bg-green-100 { background-color: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; }
html.dark-mode .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; }
html.dark-mode .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; color: #c084fc !important; }
html.dark-mode .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.2) !important; color: #facc15 !important; }
html.dark-mode .bg-orange-100 { background-color: rgba(249, 115, 22, 0.2) !important; color: #fb923c !important; }

/* Secondary Buttons (Gray buttons) */
html.dark-mode .bg-gray-200 {
    background-color: #333333 !important;
    color: #e5e5e5 !important;
}
html.dark-mode .hover\:bg-gray-300:hover,
html.dark-mode .bg-gray-200:hover {
    background-color: #444444 !important;
}
html.dark-mode .bg-gray-100 {
    background-color: #262626 !important;
    color: #e5e5e5 !important;
}
html.dark-mode .hover\:bg-gray-200:hover,
html.dark-mode .bg-gray-100:hover {
    background-color: #333333 !important;
}

/* Gradients in hero and bodies */
html.dark-mode .bg-gradient-to-br,
html.dark-mode .bg-gradient-to-r {
    background: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 50%, #000000 100%) !important;
}
html.dark-mode .bg-gradient-to-b {
    background: linear-gradient(to bottom, #1c1c1c 0%, #0a0a0a 100%) !important;
}
html.dark-mode .gradient-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 50%, #4c1d95 100%) !important;
}

/* Borders */
html.dark-mode .border,
html.dark-mode .border-gray-300,
html.dark-mode .border-gray-200,
html.dark-mode .border-gray-100,
html.dark-mode .border-white\/20,
html.dark-mode .border-b,
html.dark-mode .border-t {
    border-color: #404040 !important; /* Brighter to ensure visibility as lines */
}
html.dark-mode .border-blue-200 {
    border-color: #1e40af !important;
}

/* Inputs / Forms */
html.dark-mode input, 
html.dark-mode select, 
html.dark-mode textarea {
    background-color: #333333 !important;
    color: #f3f4f6 !important;
    border-color: #444444 !important;
}
html.dark-mode input[type="text"]:focus,
html.dark-mode select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5) !important;
}
html.dark-mode input::placeholder {
    color: #a3a3a3 !important;
}

/* Custom UI Cards */
html.dark-mode .glass-card,
html.dark-mode .glass-effect {
    background: rgba(18, 18, 18, 0.9) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdowns / Menus */
html.dark-mode .hover\:bg-gray-100:hover,
html.dark-mode .hover\:bg-gray-50:hover,
html.dark-mode .hover\:bg-blue-50:hover {
    background-color: #333333 !important; /* bg-gray-700 */
}

html.dark-mode .dropdown-menu,
html.dark-mode [x-show="open"] {
    background-color: #1c1c1c !important;
    border-color: #333333 !important;
}

/* Box Shadows */
html.dark-mode .shadow-sm, 
html.dark-mode .shadow-md, 
html.dark-mode .shadow-lg, 
html.dark-mode .shadow-xl, 
html.dark-mode .shadow-2xl,
html.dark-mode .clientarea-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .clientarea-card {
    background-color: #242424 !important;
    border-color: #3a3a3a !important;
    transition: all 0.3s ease !important;
}

/* Hover-Lift specific effect for clickable cards */
html.dark-mode .hover-lift:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.6) !important;
    border-color: #4b5563 !important;
}

html.dark-mode .bg-green-50, html.dark-mode .bg-red-50, html.dark-mode .bg-yellow-50, html.dark-mode .bg-purple-50 {
    background-color: #1c1c1c !important;
}

html.dark-mode .text-green-700, html.dark-mode .text-green-600 { color: #34d399 !important; }
html.dark-mode .text-red-700, html.dark-mode .text-red-600 { color: #f87171 !important; }
html.dark-mode .text-yellow-700, html.dark-mode .text-yellow-600 { color: #fbbf24 !important; }
html.dark-mode .text-purple-700, html.dark-mode .text-purple-600 { color: #a78bfa !important; }
html.dark-mode .text-orange-700, html.dark-mode .text-orange-600 { color: #fb923c !important; }
html.dark-mode .text-indigo-700, html.dark-mode .text-indigo-600 { color: #818cf8 !important; }
html.dark-mode .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.2) !important; color: #818cf8 !important; }
html.dark-mode .bg-indigo-50 { background-color: #171717 !important; color: #818cf8 !important; }

/* =========================================
   Auth & Password Pages Overrides
   ========================================= */

/* Update the background image to dark if present */
html.dark-mode .auth-wrap {
    background-image: linear-gradient(rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.9)), url('/images/new_bg.jpeg') !important;
}

html.dark-mode .auth-card,
html.dark-mode .auth-container {
    background: #1c1c1c !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .auth-right {
    background: #1c1c1c !important;
}

html.dark-mode .auth-right h2,
html.dark-mode .auth-right .switch-link {
    color: #e5e5e5 !important;
}

html.dark-mode .auth-right .sub {
    color: #a3a3a3 !important;
}

/* Authentication Inputs */
html.dark-mode .iw input,
html.dark-mode .form-input,
html.dark-mode .form-select,
html.dark-mode .phone-code,
html.dark-mode .phone-input {
    background-color: #333333 !important;
    border-color: #444444 !important;
    color: #e5e5e5 !important;
}

html.dark-mode .iw input:focus,
html.dark-mode .form-input:focus,
html.dark-mode .form-select:focus,
html.dark-mode .phone-code:focus,
html.dark-mode .phone-input:focus {
    background-color: #1c1c1c !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

html.dark-mode .iw .pw-toggle {
    color: #a3a3a3 !important;
}

html.dark-mode .iw .pw-toggle:hover {
    color: #60a5fa !important;
}

html.dark-mode .fg label,
html.dark-mode .form-label {
    color: #d4d4d4 !important;
}

html.dark-mode .section-title {
    color: #f3f4f6 !important;
    border-bottom-color: #333333 !important;
}

html.dark-mode .step-circle {
    background-color: #333333 !important;
    border-color: #444444 !important;
    color: #cbd5e1 !important;
}

html.dark-mode .progress-step.active .step-circle {
    background: linear-gradient(135deg, #2563a8, #3b82c4) !important;
    border-color: #2563a8 !important;
    color: #fff !important;
}

/* External Login Buttons */
html.dark-mode .btn-google {
    background: #333333 !important;
    border-color: #444444 !important;
    color: #e5e5e5 !important;
}
html.dark-mode .btn-google:hover {
    background: #444444 !important;
}

html.dark-mode .divider .dl {
    background-color: #444444 !important;
}

/* Auth Alerts */
html.dark-mode .alert-err {
    background: #333333 !important;
    border-left-color: #ef4444 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .alert-err .ae-title {
    color: #e5e5e5 !important;
}

html.dark-mode .alert-err .ae-msg {
    color: #d4d4d4 !important;
}

/* Pending Banner */
html.dark-mode .pending-banner {
    background: #1e3a8a !important;
    border-color: #1e40af !important;
}

html.dark-mode .pb-title {
    color: #bfdbfe !important;
}

html.dark-mode .pb-body {
    color: #93c5fd !important;
}

html.dark-mode .pb-note {
    background: #422006 !important;
    border-color: #713f12 !important;
    color: #fde047 !important;
}
html.dark-mode .pb-note strong { color: #fef08a !important; }

/* =========================================
   Affiliate, Security & Custom Component Overrides
   ========================================= */

/* Override inline section backgrounds on landing pages */
html.dark-mode section[style*="background: #fff"],
html.dark-mode section[style*="background: #f8fafc"],
html.dark-mode section[style*="linear-gradient"] {
    background: #0a0a0a !important;
}

/* Override inline div backgrounds on landing pages */
html.dark-mode div[style*="background: #eff6ff"],
html.dark-mode div[style*="background: #f8fafc"],
html.dark-mode div[style*="background: #faf5ff"] {
    background: #242424 !important;
    border-color: #3a3a3a !important;
}

/* Custom UI Cards */
html.dark-mode .af-hero-bg,
html.dark-mode .af-calc-bg,
html.dark-mode .card,
html.dark-mode .stats-card,
html.dark-mode .security-card,
html.dark-mode .af-stat-card,
html.dark-mode .af-way-card,
html.dark-mode .af-why-card {
    background: #242424 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode .stats-box-dark {
    background-color: #333333 !important;
    border-color: #444444 !important;
}

html.dark-mode .af-hero-bg::before { display: none !important; }

/* Commission Tables */
html.dark-mode .commission-table tbody tr,
html.dark-mode .commission-table tbody tr:nth-child(odd),
html.dark-mode .commission-table tbody tr:nth-child(even) {
    background: #1c1c1c !important;
    border-bottom: 1px solid #333333 !important;
}
html.dark-mode .commission-table tbody tr:hover { background: #333333 !important; }
html.dark-mode .commission-table tbody tr.featured {
    background: rgba(59, 130, 246, 0.15) !important;
    border-left-color: #60a5fa !important;
}
html.dark-mode .commission-table .plan-name { color: #e5e5e5 !important; }
html.dark-mode .commission-table .price { color: #d4d4d4 !important; }

/* Affiliate FAQ */
html.dark-mode .af-faq-item { border-color: #333333 !important; }
html.dark-mode .af-faq-btn {
    background: #1c1c1c !important;
    color: #e5e5e5 !important;
}
html.dark-mode .af-faq-btn:hover { background: #333333 !important; }
html.dark-mode .af-faq-body {
    background: #1c1c1c !important;
    color: #a3a3a3 !important;
    border-color: #333333 !important;
}

html.dark-mode .table th {
    background-color: #333333 !important;
    border-color: #444444 !important;
    color: #d4d4d4 !important;
}

html.dark-mode .table td {
    border-color: #333333 !important;
}

html.dark-mode .table tbody tr:hover {
    background-color: #333333 !important;
}

html.dark-mode .btn-secondary {
    background-color: #333333 !important;
    border-color: #444444 !important;
    color: #e5e5e5 !important;
}

html.dark-mode .btn-secondary:hover {
    background-color: #444444 !important;
}

html.dark-mode .status-pending {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

html.dark-mode .status-available {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

html.dark-mode .status-paid {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

html.dark-mode .status-cancelled,
html.dark-mode .status-failed {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

html.dark-mode .status-badge-off {
    background: #333333 !important;
    border-color: #444444 !important;
    color: #a3a3a3 !important;
}

html.dark-mode .qr-wrapper {
    background: #1c1c1c !important;
    border-color: #333333 !important;
}

/* ReCAPTCHA CSS Filter Trick - Instantly switches the widget to dark mode correctly without reloading Google API */
html.dark-mode iframe[title*="reCAPTCHA"] {
    filter: invert(0.92) hue-rotate(180deg) !important;
}

html.dark-mode .captcha-row .ci,
html.dark-mode .captcha-container .captcha-inner {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* =========================================
   Global Logo Switcher for Dark Mode
   ========================================= */

html.dark-mode img[src*="domainsearch-logo.png"] {
    content: url('/images/LOGO--small-white.png') !important;
}

html.dark-mode img[src*="LOGO---Icon-Only.png"] {
    filter: brightness(0) invert(1) !important;
}

/* =========================================
   Affiliate Calculator Hardcoded Fixes
   ========================================= */

/* Inline background overrides for the earnings calculator */
html.dark-mode .af-calc-bg div[style*="background: #fff"] {
    background: #262626 !important;
    border-color: #444444 !important;
}
html.dark-mode .af-calc-bg div[style*="background: #fff"] .text-blue-600 {
    color: #60a5fa !important;
}

/* Calculator Price Buttons */
html.dark-mode .price-btn {
    background: #262626 !important;
    border-color: #444444 !important;
    color: #e5e5e5 !important;
}
html.dark-mode .price-btn.selected {
    background: linear-gradient(135deg, #1d4ed8, #4338ca) !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Calculator Input overrides */
html.dark-mode #domainsInput {
    background: #262626 !important;
    border-color: #444444 !important;
    color: #60a5fa !important;
}

/* =========================================
   AI Suggestions Page Overrides
   ========================================= */

/* Results Section Background */
html.dark-mode #ai-results .bg-gray-50 {
    background-color: #0a0a0a !important;
}

/* AI Suggestion Cards */
html.dark-mode .card-default {
    background: #1c1c1c !important;
    border-color: #333333 !important;
}

html.dark-mode .card-available {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, #1c1c1c 60%) !important;
    border-color: #059669 !important;
}

html.dark-mode .card-unavailable {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, #1c1c1c 60%) !important;
    border-color: #dc2626 !important;
}

html.dark-mode .card-checking {
    background: linear-gradient(90deg, #1c1c1c 25%, #2d2d2d 50%, #1c1c1c 75%) !important;
    background-size: 1600px 100% !important;
    border-color: #3b82f6 !important;
}

/* Domain Name & Text Visibility */
html.dark-mode .card-default span.text-gray-900,
html.dark-mode .card-available span.text-gray-900,
html.dark-mode .card-unavailable span.text-gray-900,
html.dark-mode .card-checking span.text-gray-900 {
    color: #ffffff !important;
}

html.dark-mode .card-default p.text-gray-500,
html.dark-mode .card-available p.text-gray-500,
html.dark-mode .card-unavailable p.text-gray-500,
html.dark-mode .card-checking p.text-gray-500 {
    color: #a3a3a3 !important;
}

/* UI Elements */
html.dark-mode .num-badge {
    background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

html.dark-mode .stats-pill {
    background: #1c1c1c !important;
    border: 1px solid #333333 !important;
}

html.dark-mode .stats-divider {
    background: #333333 !important;
}

html.dark-mode .batch-line {
    background: linear-gradient(to right, transparent, #312e81) !important;
}

html.dark-mode .batch-line-r {
    background: linear-gradient(to left, transparent, #312e81) !important;
}

/* Notice Bars inside cards */
html.dark-mode .card-unavailable .bg-red-50 {
    background-color: rgba(220, 38, 38, 0.15) !important;
    border-color: #450a0a !important;
    color: #fca5a5 !important;
}

html.dark-mode .card-available .bg-green-50 {
    background-color: rgba(5, 150, 105, 0.15) !important;
    border-color: #064e3b !important;
    color: #6ee7b7 !important;
}

/* Buttons on results */
html.dark-mode .btn-check-done,
html.dark-mode .btn-check-waiting {
    background: #262626 !important;
    color: #525252 !important;
    border-color: #333333 !important;
}

html.dark-mode .btn-clear {
    background: #1c1c1c !important;
    color: #a3a3a3 !important;
    border-color: #333333 !important;
}

html.dark-mode .btn-clear:hover {
    background: #450a0a !important;
    color: #fca5a5 !important;
    border-color: #991b1b !important;
}

/* =========================================
   Pagination & Table Controls Overrides
   ========================================= */

html.dark-mode .pagination-btn {
    background-color: #262626 !important;
    border-color: #3f3f46 !important;
    color: #d1d5db !important;
}

html.dark-mode .pagination-btn:hover:not(:disabled) {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}

html.dark-mode .pagination-btn:disabled,
html.dark-mode .pagination-btn.cursor-not-allowed {
    background-color: #18181b !important;
    color: #4b5563 !important;
    border-color: #27272a !important;
    cursor: not-allowed !important;
}

html.dark-mode .pagination-active {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .pagination-info {
    background: #18181b !important;
    border: 1px solid #27272a !important;
    color: #9ca3af !important;
}

html.dark-mode .pagination-info i {
    color: #60a5fa !important;
}