/* ===== LOANSPACE.AI - DARK MODE ===== */
/* Add this AFTER all your other CSS files */
/* Toggle with: document.documentElement.setAttribute('data-theme', 'dark') */

/* ============================================
   DARK MODE COLOR PALETTE
   ============================================ */

[data-theme="dark"] {
    /* Primary Brand - Slightly brighter for dark backgrounds */
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-light: #1e293b;
    
    /* Secondary - Lighter navy */
    --color-secondary: #3b5a7f;
    --color-secondary-hover: #4a6a8f;
    
    /* Accent - Brighter orange */
    --color-accent: #fb923c;
    --color-accent-hover: #fdba74;
    
    /* Text Hierarchy - Inverted */
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
    --color-text-muted: #64748b;
    
    /* Backgrounds - Dark grays */
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    --color-bg-hover: #334155;
    
    /* Borders - Subtle in dark mode */
    --color-border-primary: #334155;
    --color-border-secondary: #475569;
    --color-border-hover: var(--color-primary);
    
    /* Shadows - Lighter/softer for dark mode */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    --shadow-primary: 0 1px 3px 0 rgb(59 130 246 / 0.5);
}

/* ============================================
   REFINANCE CALCULATOR DARK MODE
   ============================================ */

[data-theme="dark"] {
    /* Refinance calculator variables */
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --accent: #3b82f6;
    --accent-light: #60a5fa;
    --accent-soft: #1e3a5f;
    --orange: #fb923c;
    --success: #10b981;
    --success-light: #064e3b;
    --warning: #f59e0b;
    --warning-light: #78350f;
    --danger: #ef4444;
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border: #334155;
    --border-dark: #475569;
}

/* ============================================
   BODY & MAIN CONTAINERS
   ============================================ */

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

[data-theme="dark"] html {
    background: #000000 !important;
}

[data-theme="dark"] .main-container,
[data-theme="dark"] .page-container,
[data-theme="dark"] .app-container,
[data-theme="dark"] main,
[data-theme="dark"] .content,
[data-theme="dark"] .main-content {
    background: #000000 !important;
}

[data-theme="dark"] #chatbox,
[data-theme="dark"] .chat-container,
[data-theme="dark"] .main-chat,
[data-theme="dark"] .chat-area {
    background: #000000 !important;
    background-image: none !important;
}

/* Hero section if you have one */
[data-theme="dark"] .hero,
[data-theme="dark"] .hero-section {
    background: transparent !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

[data-theme="dark"] .sidebar {
    background: #000000 !important;
    border-right: 1px solid #1e293b !important;
}

[data-theme="dark"] .sidebar-logo {
    content: url("/static/loanspace.ai-logo-dark.png") !important;
    width: 100% !important;
    height: auto !important;
}

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

[data-theme="dark"] .sidebar-item:hover:not(.active),
[data-theme="dark"] .sidebar-item-link:hover {
    background: #1a1a1a !important;
    color: var(--color-text-primary) !important;
}

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

[data-theme="dark"] .sidebar-footer {
    border-top: 1px solid #1e293b !important;
}

[data-theme="dark"] .user-profile {
    background: #111111 !important;
}

[data-theme="dark"] .chat-history-container li {
    background: #111111 !important;
    border-color: #222222 !important;
}

/* ============================================
   RATE WIDGET
   ============================================ */

[data-theme="dark"] .rate-widget {
    background: #111111 !important;
    border: 1px solid #222222 !important;
}

[data-theme="dark"] .rate-widget-header,
[data-theme="dark"] .rate-label,
[data-theme="dark"] .rate-value {
    color: var(--color-text-primary) !important;
}

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

/* Mobile header rates */
[data-theme="dark"] .mobile-rate-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .mobile-rate-value {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .mobile-rate-divider {
    color: #475569 !important;
}

/* Mobile hamburger menu lines */
[data-theme="dark"] .mobile-menu-btn span {
    background: #f1f5f9 !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

[data-theme="dark"] .feature-card,
[data-theme="dark"] .starter-card,
[data-theme="dark"] .card,
[data-theme="dark"] .calculator-card,
[data-theme="dark"] .slider-section,
[data-theme="dark"] .analysis-section {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .starter-card:hover,
[data-theme="dark"] .card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 6px -1px rgb(59 130 246 / 0.3) !important;
}

/* ============================================
   MESSAGES
   ============================================ */

/* Message container itself */
[data-theme="dark"] .message,
[data-theme="dark"] .message.assistant,
[data-theme="dark"] .message.bot {
    background: transparent !important;
}

/* Assistant Messages - NO BUBBLE, just white text on black */
[data-theme="dark"] .message.assistant .message-content,
[data-theme="dark"] .message.bot .message-content,
[data-theme="dark"] .assistant-message .message-content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Assistant message text - bright white for all elements */
[data-theme="dark"] .message.assistant .message-content *,
[data-theme="dark"] .message.bot .message-content * {
    color: #ffffff !important;
}

/* Specific text elements in assistant messages */
[data-theme="dark"] .message.assistant .message-content p,
[data-theme="dark"] .message.assistant .message-content div,
[data-theme="dark"] .message.assistant .message-content span,
[data-theme="dark"] .message.assistant .message-content li {
    color: #ffffff !important;
}

/* Headers in assistant messages */
[data-theme="dark"] .message.assistant .message-content h1,
[data-theme="dark"] .message.assistant .message-content h2,
[data-theme="dark"] .message.assistant .message-content h3,
[data-theme="dark"] .message.assistant .message-content h4 {
    color: #ffffff !important;
}

/* User Messages - keep the blue bubble with WHITE TEXT */
[data-theme="dark"] .message.user .message-content {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

/* User message text - ensure ALL text is white */
[data-theme="dark"] .message.user .message-content *,
[data-theme="dark"] .message.user .message-content p,
[data-theme="dark"] .message.user .message-content div,
[data-theme="dark"] .message.user .message-content span {
    color: #ffffff !important;
}

/* Username/Sender Label - WHITE for both user and assistant */
[data-theme="dark"] .message-sender,
[data-theme="dark"] .message-label,
[data-theme="dark"] .message-author,
[data-theme="dark"] .sender-name,
[data-theme="dark"] .message-username,
[data-theme="dark"] .username,
[data-theme="dark"] .message .username,
[data-theme="dark"] .message.user .username,
[data-theme="dark"] .message.assistant .username {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Message timestamp */
[data-theme="dark"] .message-time,
[data-theme="dark"] .timestamp {
    color: #94a3b8 !important;
}

/* Code blocks in messages */
[data-theme="dark"] .message-content pre {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

[data-theme="dark"] .message-content code {
    background: var(--color-bg-tertiary) !important;
    color: #ffffff !important;
}

/* Inline code */
[data-theme="dark"] .message-content p code,
[data-theme="dark"] .message-content li code {
    background: var(--color-bg-tertiary) !important;
    color: #60a5fa !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Links in messages */
[data-theme="dark"] .message-content a {
    color: #60a5fa !important;
    text-decoration: underline !important;
}

[data-theme="dark"] .message-content a:hover {
    color: #93c5fd !important;
}

/* Strong/bold text */
[data-theme="dark"] .message-content strong,
[data-theme="dark"] .message-content b {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Emphasis/italic */
[data-theme="dark"] .message-content em,
[data-theme="dark"] .message-content i {
    color: #ffffff !important;
}

/* ============================================
   INPUTS & FORMS
   ============================================ */

[data-theme="dark"] #userInput,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] #userInput:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2) !important;
}

[data-theme="dark"] #userInput::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted) !important;
}

/* ============================================
   INPUT AREA
   ============================================ */

[data-theme="dark"] .input-area {
    background: var(--color-bg-secondary) !important;
    border-top: 1px solid var(--color-border-primary) !important;
    box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.3) !important;
}

/* Dark mode button overrides */
[data-theme="dark"] .upload-button,
[data-theme="dark"] #speechButton,
[data-theme="dark"] #darkModeToggle {
    background: rgba(37, 99, 235, 0.15) !important;
    border-color: rgba(99, 149, 240, 0.35) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .upload-button:hover,
[data-theme="dark"] #speechButton:hover,
[data-theme="dark"] #darkModeToggle:hover {
    background: rgba(37, 99, 235, 0.25) !important;
    border-color: rgba(99, 149, 240, 0.6) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

[data-theme="dark"] .upload-button.has-document {
    background: rgba(37, 99, 235, 0.25) !important;
    border-color: #3b82f6 !important;
}

/* Dark mode recording state */
[data-theme="dark"] #speechButton.recording {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

/* ============================================
   HEADER
   ============================================ */

[data-theme="dark"] header {
    background: var(--color-bg-secondary) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
}

/* ============================================
   ICONS
   ============================================ */

[data-theme="dark"] .feature-icon,
[data-theme="dark"] .starter-icon,
[data-theme="dark"] .icon-container,
[data-theme="dark"] .card-icon {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
}

[data-theme="dark"] .feature-icon i,
[data-theme="dark"] .starter-icon i {
    color: #60a5fa !important;
}

[data-theme="dark"] .card-icon.accent {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a5f 100%) !important;
    color: white !important;
}

/* ============================================
   THINKING/LOADING STATES
   ============================================ */

[data-theme="dark"] .thinking,
[data-theme="dark"] .loading {
    background: #1e3a5f !important;
    border: 1px solid #2d4a6f !important;
    color: var(--color-primary) !important;
}

/* ============================================
   ERROR/SUCCESS MESSAGES
   ============================================ */

[data-theme="dark"] .error,
[data-theme="dark"] .error-message,
[data-theme="dark"] .message.error .message-content {
    background: #7f1d1d !important;
    border: 1px solid #991b1b !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .success {
    background: #064e3b !important;
    border: 1px solid #065f46 !important;
    color: #6ee7b7 !important;
}

/* ============================================
   WARNING BANNERS
   ============================================ */

/* Warning banners - support both class name formats (warning-high and high) */
[data-theme="dark"] .question-warning.low,
[data-theme="dark"] .question-warning.warning-low {
    background-color: #1e3a5f;
    border-left: 4px solid #3b82f6;
    color: #93c5fd;
}

[data-theme="dark"] .question-warning.medium,
[data-theme="dark"] .question-warning.warning-medium {
    background-color: #78350f;
    border-left: 4px solid #f59e0b;
    color: #fcd34d;
}

[data-theme="dark"] .question-warning.high,
[data-theme="dark"] .question-warning.warning-high {
    background-color: #7f1d1d;
    border-left: 4px solid #ef4444;
    color: #fca5a5;
}

[data-theme="dark"] .question-warning a {
    color: inherit;
}

/* ============================================
   LIMIT REACHED MODAL - DARK MODE
   ============================================ */

[data-theme="dark"] .limit-modal {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .limit-modal-content {
    background: #1e293b;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .limit-modal h2 {
    color: #f1f5f9;
}

[data-theme="dark"] .limit-modal p {
    color: #94a3b8;
}

[data-theme="dark"] .limit-modal-btn.secondary {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .limit-modal-btn.secondary:hover {
    background: #475569;
}

/* ============================================
   SCROLLBAR
   ============================================ */

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary) !important;
}

/* ============================================
   RESULT BOXES & STATS
   ============================================ */

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

[data-theme="dark"] .result-box.accent {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
}

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

/* ============================================
   VERDICT BOXES
   ============================================ */

[data-theme="dark"] .verdict-box.positive {
    background: #064e3b !important;
    border-color: #065f46 !important;
}

[data-theme="dark"] .verdict-box.positive .verdict-title {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .verdict-box.positive .verdict-text {
    color: #86efac !important;
}

[data-theme="dark"] .verdict-box.negative {
    background: #78350f !important;
    border-color: #92400e !important;
}

[data-theme="dark"] .verdict-box.negative .verdict-title {
    color: #fcd34d !important;
}

[data-theme="dark"] .verdict-box.negative .verdict-text {
    color: #fde68a !important;
}

/* ============================================
   TIPS & INFO BOXES
   ============================================ */

[data-theme="dark"] .tips-box,
[data-theme="dark"] .info-card {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

/* ============================================
   CLOSING COSTS PAGE
   ============================================ */

[data-theme="dark"] .closing-costs-page,
[data-theme="dark"] .refinance-page {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .calculator-container {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
}

[data-theme="dark"] .summary-card {
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border-primary);
}

[data-theme="dark"] .summary-card.highlight {
    background: #78350f;
    border-color: #92400e;
}

[data-theme="dark"] .breakdown-category {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
}

/* ============================================
   NOTES SECTION
   ============================================ */

[data-theme="dark"] .notes-section {
    background: #1e3a5f !important;
    border: 1px solid #2d4a6f !important;
}

[data-theme="dark"] .notes-section h4 {
    color: #93c5fd !important;
}

[data-theme="dark"] .notes-section li {
    color: #bfdbfe !important;
}

/* ============================================
   SLIDER (RANGE INPUT)
   ============================================ */

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

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

/* ============================================
   CONTACT FORM IN CTA
   ============================================ */

[data-theme="dark"] .contact-form input {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

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

/* ============================================
   SUCCESS MESSAGE
   ============================================ */

[data-theme="dark"] .success-message {
    background: #064e3b !important;
    border: 1px solid #065f46 !important;
}

[data-theme="dark"] .success-message h3 {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .success-message p {
    color: #86efac !important;
}

/* ============================================
   LINKS
   ============================================ */

[data-theme="dark"] a {
    color: var(--color-primary);
}

[data-theme="dark"] a:hover {
    color: var(--color-primary-hover);
}

/* ============================================
   HEADINGS
   ============================================ */

[data-theme="dark"] h1,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .main-title,
[data-theme="dark"] .page-header h1 {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .feature-title,
[data-theme="dark"] .starter-title {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .subtitle,
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .description,
[data-theme="dark"] .feature-description,
[data-theme="dark"] .starter-description {
    color: var(--color-text-secondary) !important;
}

/* ============================================
   POWERED BY
   ============================================ */

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

/* ============================================
   EMPTY STATE
   ============================================ */

[data-theme="dark"] #chatbox:empty::before {
    color: var(--color-text-muted);
}

/* ============================================
   WELCOME MESSAGE / INTRO SECTION
   ============================================ */

[data-theme="dark"] .welcome-message,
[data-theme="dark"] .intro-message,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .starter-section,
[data-theme="dark"] .welcome-section {
    background: transparent !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .welcome-message h1,
[data-theme="dark"] .welcome-message h2,
[data-theme="dark"] .intro-message h1,
[data-theme="dark"] .intro-message h2,
[data-theme="dark"] .welcome-title,
[data-theme="dark"] .intro-title {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .welcome-message p,
[data-theme="dark"] .intro-message p,
[data-theme="dark"] .welcome-subtitle,
[data-theme="dark"] .intro-subtitle {
    color: var(--color-text-secondary) !important;
}

/* Welcome container background */
[data-theme="dark"] .welcome-container,
[data-theme="dark"] .intro-container {
    background: transparent !important;
}

/* Starter prompt cards in welcome */
[data-theme="dark"] .starter-prompts {
    background: transparent !important;
}

[data-theme="dark"] .prompt-card,
[data-theme="dark"] .starter-prompt,
[data-theme="dark"] .example-prompt {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .prompt-card:hover,
[data-theme="dark"] .starter-prompt:hover,
[data-theme="dark"] .example-prompt:hover {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-primary) !important;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

body,
.sidebar,
.rate-widget,
.feature-card,
.card,
.message-content,
input,
textarea,
select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   TEXT SELECTION / HIGHLIGHT COLOR
   ============================================ */

/* Text selection in dark mode - Blue highlight with white text */
[data-theme="dark"] ::selection {
    background: #1e3a5f !important; /* Blue */
    color: #ffffff !important; /* White text */
}

[data-theme="dark"] ::-moz-selection {
    background: #1e3a5f !important; /* Blue */
    color: #ffffff !important; /* White text */
}
/* ============================================
   EXACT FIX FOR LOANSPACE.AI WELCOME SECTION
   Add this to the BOTTOM of dark-mode.css
   ============================================ */

/* Welcome Hero Section - BLACK BACKGROUND */
[data-theme="dark"] .welcome-hero {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Welcome Title - WHITE TEXT */
[data-theme="dark"] .welcome-title {
    color: #ffffff !important;
}

/* Welcome Subtitle - WHITE TEXT */
[data-theme="dark"] .welcome-subtitle {
    color: #ffffff !important;
}

/* Logo spans - these will automatically keep their colors from light mode
   because they have more specific selectors in your other CSS files.
   If they turn white, it means they don't have explicit colors set.
   In that case, uncomment and set the colors below: */

/* [data-theme="dark"] .logo-loan {
    color: #1e3a5f !important;
} */

/* [data-theme="dark"] .logo-space {
    color: #f97316 !important;
} */

/* Features Grid */
[data-theme="dark"] .features-grid {
    background: transparent !important;
}

/* Feature Cards - both div and anchor variants */
[data-theme="dark"] .feature-card-modern,
[data-theme="dark"] a.feature-card-modern,
[data-theme="dark"] a.question-card-link {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

[data-theme="dark"] .feature-card-modern:hover,
[data-theme="dark"] a.feature-card-modern:hover,
[data-theme="dark"] a.question-card-link:hover {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
}

/* Feature Icons */
[data-theme="dark"] .feature-icon-wrapper {
    background: transparent !important;
}

[data-theme="dark"] .feature-icon {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .feature-icon i {
    color: #60a5fa !important;
}

/* Feature Text - WHITE (including inside link cards) */
[data-theme="dark"] .feature-title,
[data-theme="dark"] a.question-card-link .feature-title {
    color: #ffffff !important;
}

[data-theme="dark"] .feature-description,
[data-theme="dark"] a.question-card-link .feature-description {
    color: #ffffff !important;
}

/* Welcome CTA - WHITE TEXT */
[data-theme="dark"] .welcome-cta {
    background: transparent !important;
}

[data-theme="dark"] .cta-text {
    color: #ffffff !important;
}
/* ============================================
   NUCLEAR OPTION - FORCE BLACK WELCOME BACKGROUND
   Copy this and ADD TO THE VERY BOTTOM of dark-mode.css
   ============================================ */

/* Target the welcome hero and ALL its parent containers */
[data-theme="dark"] .welcome-hero,
[data-theme="dark"] .welcome-hero > *,
[data-theme="dark"] div:has(.welcome-hero) {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* If there's a wrapper div around welcome section */
[data-theme="dark"] .welcome-wrapper,
[data-theme="dark"] .welcome-container,
[data-theme="dark"] .intro-wrapper,
[data-theme="dark"] .hero-wrapper,
[data-theme="dark"] .main-intro,
[data-theme="dark"] .chat-intro,
[data-theme="dark"] .empty-chat,
[data-theme="dark"] .initial-state {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Force features grid background too */
[data-theme="dark"] .features-grid,
[data-theme="dark"] div:has(.features-grid) {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Force welcome CTA background */
[data-theme="dark"] .welcome-cta,
[data-theme="dark"] div:has(.welcome-cta) {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Nuclear option - force ANY div that contains welcome elements */
[data-theme="dark"] div:has(.welcome-title),
[data-theme="dark"] div:has(.welcome-subtitle),
[data-theme="dark"] div:has(.features-grid) {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* If it's in the main chat area */
[data-theme="dark"] #chatbox > div,
[data-theme="dark"] .chat-messages > div,
[data-theme="dark"] .messages-container > div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Last resort - remove white from EVERYTHING in main content */
[data-theme="dark"] main div,
[data-theme="dark"] .main-content div,
[data-theme="dark"] .content div {
    background-color: transparent !important;
}

/* Then specifically set chatbox/main area to black */
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content,
[data-theme="dark"] #chatbox {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* ============================================
   EXTRA USER MESSAGE & USERNAME FIXES
   ============================================ */

/* Ensure user input text is white in ALL scenarios */
[data-theme="dark"] .user-message,
[data-theme="dark"] .user-input,
[data-theme="dark"] .message.user p,
[data-theme="dark"] .message.user div,
[data-theme="dark"] .message.user span,
[data-theme="dark"] .message.user strong,
[data-theme="dark"] .message.user em {
    color: #ffffff !important;
}

/* Username variants - catch all possible class names */
[data-theme="dark"] .user-name,
[data-theme="dark"] .sender,
[data-theme="dark"] .author,
[data-theme="dark"] .message-header,
[data-theme="dark"] .message-from,
[data-theme="dark"] .chat-username,
[data-theme="dark"] .chat-sender {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* If username is in a header/label element */
[data-theme="dark"] .message header,
[data-theme="dark"] .message .header,
[data-theme="dark"] .message label {
    color: #ffffff !important;
}
/* ============================================
   NUCLEAR OPTION - MAXIMUM SPECIFICITY FIX
   Copy this ENTIRE section and paste at the VERY BOTTOM of dark-mode.css
   This will override everything
   ============================================ */

/* USER MESSAGE TEXT - MAXIMUM SPECIFICITY */
[data-theme="dark"] body .message.user .message-content,
[data-theme="dark"] html body .message.user .message-content,
[data-theme="dark"] body .message.user .message-content * {
    color: #ffffff !important;
}

[data-theme="dark"] body .message.user .message-content p,
[data-theme="dark"] body .message.user .message-content div,
[data-theme="dark"] body .message.user .message-content span,
[data-theme="dark"] body .message.user .message-content strong,
[data-theme="dark"] body .message.user .message-content em,
[data-theme="dark"] body .message.user .message-content b,
[data-theme="dark"] body .message.user .message-content i {
    color: #ffffff !important;
}

/* ASSISTANT MESSAGE TEXT - MAXIMUM SPECIFICITY */
[data-theme="dark"] body .message.assistant .message-content,
[data-theme="dark"] html body .message.assistant .message-content,
[data-theme="dark"] body .message.assistant .message-content * {
    color: #ffffff !important;
}

[data-theme="dark"] body .message.assistant .message-content p,
[data-theme="dark"] body .message.assistant .message-content div,
[data-theme="dark"] body .message.assistant .message-content span,
[data-theme="dark"] body .message.assistant .message-content strong,
[data-theme="dark"] body .message.assistant .message-content em,
[data-theme="dark"] body .message.assistant .message-content li,
[data-theme="dark"] body .message.assistant .message-content h1,
[data-theme="dark"] body .message.assistant .message-content h2,
[data-theme="dark"] body .message.assistant .message-content h3,
[data-theme="dark"] body .message.assistant .message-content h4 {
    color: #ffffff !important;
}

/* USERNAME - MAXIMUM SPECIFICITY - ALL POSSIBLE SELECTORS */
[data-theme="dark"] body .message .username,
[data-theme="dark"] html body .message .username,
[data-theme="dark"] body .message-sender,
[data-theme="dark"] body .message-label,
[data-theme="dark"] body .message-author,
[data-theme="dark"] body .sender-name,
[data-theme="dark"] body .message-username,
[data-theme="dark"] body .username,
[data-theme="dark"] body .sender,
[data-theme="dark"] body .author,
[data-theme="dark"] body .user-name,
[data-theme="dark"] body .message.user .username,
[data-theme="dark"] body .message.assistant .username,
[data-theme="dark"] body .message header,
[data-theme="dark"] body .message .header,
[data-theme="dark"] body .message label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* TEXT SELECTION/HIGHLIGHT - MAXIMUM SPECIFICITY */
[data-theme="dark"] body ::selection,
[data-theme="dark"] html body ::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] body ::-moz-selection,
[data-theme="dark"] html body ::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

/* Message content wrapper - ensure no grey */
[data-theme="dark"] body .message-content,
[data-theme="dark"] body .message .message-content {
    color: #ffffff !important;
}

/* Any text element inside messages */
[data-theme="dark"] body .message *,
[data-theme="dark"] body .message-content * {
    color: #ffffff !important;
}

/* Override ANY grey colors (#6b7280, #64748b, etc.) */
[data-theme="dark"] body .message [style*="color: rgb(107, 114, 128)"],
[data-theme="dark"] body .message [style*="color: rgb(100, 116, 139)"],
[data-theme="dark"] body .message [style*="color: #6b7280"],
[data-theme="dark"] body .message [style*="color: #64748b"] {
    color: #ffffff !important;
}
/* ============================================
   EXACT FIX FOR YOUR SITE
   Add this to the VERY BOTTOM of dark-mode.css
   This overrides the #0f172a dark color
   ============================================ */

/* Override the .message.user and .message.human dark text */
[data-theme="dark"] body .message.user .message-content,
[data-theme="dark"] body .message.user .message-content *,
[data-theme="dark"] body .message.user .message-content p,
[data-theme="dark"] body .message.user .message-content div,
[data-theme="dark"] body .message.user .message-content span,
[data-theme="dark"] body .message.user .message-content strong,
[data-theme="dark"] body .message.user .message-content em,
[data-theme="dark"] body .message.user .message-content a,
[data-theme="dark"] body .message.human .message-content,
[data-theme="dark"] body .message.human .message-content *,
[data-theme="dark"] body .message.human .message-content p,
[data-theme="dark"] body .message.human .message-content div,
[data-theme="dark"] body .message.human .message-content span,
[data-theme="dark"] body .message.human .message-content strong,
[data-theme="dark"] body .message.human .message-content em,
[data-theme="dark"] body .message.human .message-content a {
    color: #ffffff !important;
}

/* Override assistant message text too */
[data-theme="dark"] body .message.assistant .message-content,
[data-theme="dark"] body .message.assistant .message-content *,
[data-theme="dark"] body .message.assistant .message-content p,
[data-theme="dark"] body .message.assistant .message-content div,
[data-theme="dark"] body .message.assistant .message-content span,
[data-theme="dark"] body .message.assistant .message-content strong,
[data-theme="dark"] body .message.assistant .message-content em,
[data-theme="dark"] body .message.assistant .message-content li,
[data-theme="dark"] body .message.assistant .message-content h1,
[data-theme="dark"] body .message.assistant .message-content h2,
[data-theme="dark"] body .message.assistant .message-content h3 {
    color: #ffffff !important;
}

/* Username - all possible variations */
[data-theme="dark"] body .username,
[data-theme="dark"] body .message-sender,
[data-theme="dark"] body .message-author,
[data-theme="dark"] body .sender-name,
[data-theme="dark"] body .message .username,
[data-theme="dark"] body .message-label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Text selection highlight - BLUE */
[data-theme="dark"] body ::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] body ::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}
/* ============================================
   FIX LOANSPACE.AI USERNAME & TEXT HIGHLIGHT
   Add this to the VERY BOTTOM of dark-mode.css
   ============================================ */

/* Keep user's username white, but allow LoanSpace.ai to keep logo colors */
[data-theme="dark"] body .message.user .username,
[data-theme="dark"] body .message.human .username,
[data-theme="dark"] body .message.user .message-sender,
[data-theme="dark"] body .message.human .message-sender {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* LoanSpace.ai username - DON'T force white, let it inherit logo colors */
[data-theme="dark"] body .message.assistant .username,
[data-theme="dark"] body .message.assistant .message-sender,
[data-theme="dark"] body .message.assistant .username .logo-loan,
[data-theme="dark"] body .message.assistant .username .logo-space,
[data-theme="dark"] body .message.assistant .message-sender .logo-loan,
[data-theme="dark"] body .message.assistant .message-sender .logo-space {
    color: inherit !important;
    /* This allows the logo colors to show through */
}

/* If LoanSpace.ai is showing as white, explicitly set the logo colors */
/* Uncomment these lines and adjust colors if needed */
/*
[data-theme="dark"] body .message.assistant .username .logo-loan {
    color: #1e3a5f !important;
}

[data-theme="dark"] body .message.assistant .username .logo-space {
    color: #f97316 !important;
}
*/

/* Text Selection/Highlight - MAXIMUM SPECIFICITY */
[data-theme="dark"] html body ::selection,
[data-theme="dark"] body.dark ::selection,
[data-theme="dark"] body *::selection {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] html body ::-moz-selection,
[data-theme="dark"] body.dark ::-moz-selection,
[data-theme="dark"] body *::-moz-selection {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    color: #ffffff !important;
}

/* Specific selection for message content */
[data-theme="dark"] .message-content::selection,
[data-theme="dark"] .message-content *::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] .message-content::-moz-selection,
[data-theme="dark"] .message-content *::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}
/* ============================================
   FIX SCROLL AREA - PREVENT OVERLAP WITH INPUT
   Add this to the BOTTOM of dark-mode.css
   ============================================ */

/* Ensure chatbox doesn't scroll behind input area */
[data-theme="dark"] #chatbox,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .messages-container {
    /* Add bottom padding equal to input area height */
    padding-bottom: 120px !important;
    /* Adjust max-height to account for input */
    max-height: calc(100vh - 280px) !important;
}

/* Input area - ensure it stays on top */
[data-theme="dark"] .input-area,
[data-theme="dark"] #input-area,
[data-theme="dark"] .chat-input-area {
    position: sticky !important;
    position: -webkit-sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    background: var(--color-bg-secondary) !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Prevent scroll behind input on mobile */
@media (max-width: 768px) {
    [data-theme="dark"] #chatbox,
    [data-theme="dark"] .chat-area {
        padding-bottom: 140px !important;
        max-height: calc(100vh - 240px) !important;
    }
}

/* Fix scrollbar position */
[data-theme="dark"] #chatbox::-webkit-scrollbar {
    width: 8px !important;
    z-index: 1 !important;
}

/* Ensure last message has space before input */
[data-theme="dark"] .message:last-child {
    margin-bottom: 20px !important;
}

/* Container adjustments */
[data-theme="dark"] .chat-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
}

[data-theme="dark"] .chat-messages,
[data-theme="dark"] .messages-wrapper {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* ============================================
   FINAL FIX - AI USERNAME LOGO COLORS & NAVY HIGHLIGHT
   Add this to the VERY BOTTOM of dark-mode.css
   This overrides everything above
   ============================================ */

/* USER USERNAME - FORCE WHITE */
[data-theme="dark"] body .message.user .username,
[data-theme="dark"] body .message.human .username,
[data-theme="dark"] body .message.user .message-sender,
[data-theme="dark"] body .message.human .message-sender {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* AI USERNAME - RESET TO ALLOW LOGO COLORS */
[data-theme="dark"] body .message.assistant .username,
[data-theme="dark"] body .message.assistant .message-sender,
[data-theme="dark"] body .message.bot .username,
[data-theme="dark"] body .message.bot .message-sender {
    color: unset !important;
    font-weight: 600 !important;
}

/* If username contains logo spans, ensure they show their colors */
[data-theme="dark"] body .message.assistant .username *,
[data-theme="dark"] body .message.assistant .message-sender * {
    color: inherit !important;
}

/* Explicit logo colors - UNCOMMENT AND ADJUST IF NEEDED */
/* If "LoanSpace.ai" is still showing white, uncomment these and set your colors: */
/*
[data-theme="dark"] body .message.assistant .username .logo-loan,
[data-theme="dark"] body .message.assistant .message-sender .logo-loan {
    color: #1e3a5f !important;
}

[data-theme="dark"] body .message.assistant .username .logo-space,
[data-theme="dark"] body .message.assistant .message-sender .logo-space {
    color: #f97316 !important;
}
*/

/* TEXT SELECTION - NAVY BLUE BACKGROUND WITH WHITE TEXT */
[data-theme="dark"] ::selection,
[data-theme="dark"] body ::selection,
[data-theme="dark"] html body ::selection,
[data-theme="dark"] * ::selection,
[data-theme="dark"] body * ::selection {
    background: #1e3a5f !important;
    background-color: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] ::-moz-selection,
[data-theme="dark"] body ::-moz-selection,
[data-theme="dark"] html body ::-moz-selection,
[data-theme="dark"] * ::-moz-selection,
[data-theme="dark"] body * ::-moz-selection {
    background: #1e3a5f !important;
    background-color: #1e3a5f !important;
    color: #ffffff !important;
}

/* Ensure selection works in all message content */
[data-theme="dark"] .message-content::selection,
[data-theme="dark"] .message::selection,
[data-theme="dark"] .message *::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] .message-content::-moz-selection,
[data-theme="dark"] .message::-moz-selection,
[data-theme="dark"] .message *::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

/* ============================================
   FIX: QUESTION CARD LINK BACKGROUNDS
   Ensures <a> tag cards match <div> cards
   ============================================ */
[data-theme="dark"] body a.question-card-link,
[data-theme="dark"] html body a.question-card-link,
[data-theme="dark"] body a.feature-card-modern.question-card {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

[data-theme="dark"] body a.question-card-link:hover,
[data-theme="dark"] html body a.question-card-link:hover {
    background: var(--color-bg-tertiary) !important;
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-primary) !important;
}

/* ============================================
   WELCOME BANNER V2 - DARK MODE
   ============================================ */

[data-theme="dark"] .welcome-banner-v2 {
    background: transparent !important;
}

[data-theme="dark"] .welcome-title-v2 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .welcome-subtitle-v2 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .welcome-card-v2 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .welcome-card-v2:hover {
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.2) !important;
}

/* Preserve gradient icons in dark mode — just keep them as-is */
/* Only override the default (non-colored) icon */
[data-theme="dark"] .welcome-card-v2:not([class*="wc-blue"]):not([class*="wc-teal"]):not([class*="wc-amber"]):not([class*="wc-green"]):not([class*="wc-purple"]):not([class*="wc-rose"]) .wc-icon {
    background: rgba(79, 70, 229, 0.25) !important;
    color: #a5b4fc !important;
}

/* Colored card hover borders in dark mode */
[data-theme="dark"] .wc-blue:hover  { border-color: #3b82f6 !important; }
[data-theme="dark"] .wc-teal:hover  { border-color: #14b8a6 !important; }
[data-theme="dark"] .wc-amber:hover { border-color: #f59e0b !important; }
[data-theme="dark"] .wc-green:hover { border-color: #22c55e !important; }
[data-theme="dark"] .wc-purple:hover{ border-color: #a855f7 !important; }
[data-theme="dark"] .wc-rose:hover  { border-color: #f43f5e !important; }

[data-theme="dark"] .wc-label {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .wc-desc {
    color: #94a3b8 !important;
}

[data-theme="dark"] .wc-arrow {
    color: #475569 !important;
}

[data-theme="dark"] .welcome-card-v2:hover .wc-arrow {
    color: #94a3b8 !important;
}

[data-theme="dark"] .welcome-hint-v2 {
    color: #94a3b8 !important;
}

/* ============================================================
   SIDEBAR DARK MODE TOGGLE BUTTON
   Uses .sidebar-dark-mode class (NOT .dark-mode-toggle) to
   avoid conflicts with the floating circle button styles
   ============================================================ */
.sidebar-dark-mode {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.sidebar-dark-mode:hover {
    background: var(--soft-blue, #e8f4fc) !important;
    color: var(--text-primary, #1e293b) !important;
    transform: translateX(4px) !important;
}
[data-theme="dark"] .sidebar-dark-mode {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .sidebar-dark-mode:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* ============================================================
   FUNNEL PAGE DARK MODE
   ============================================================ */

/* Funnel CSS variable overrides */
[data-theme="dark"] {
    --bg: #0f172a;
    --white: #1e293b;
    --text: #f1f5f9;
    --text-light: #94a3b8;
    --text-muted: #64748b;
    --border: #334155;
    --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.2);
    --primary-bg: #1e1b4b;
    --success-bg: #064e3b;
    --warning-bg: #451a03;
    --danger-bg: #450a0a;
}

/* Funnel header */
[data-theme="dark"] .funnel-header {
    background: #000000 !important;
    border-bottom-color: #1e293b !important;
}
[data-theme="dark"] .funnel-logo img {
    filter: brightness(0.9);
}
[data-theme="dark"] .skip-to-chat,
[data-theme="dark"] .header-auth-link {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .skip-to-chat:hover,
[data-theme="dark"] .header-auth-link:hover {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .btn-register {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

/* Funnel hero banner */
[data-theme="dark"] .funnel-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%) !important;
}
[data-theme="dark"] .funnel-hero-title {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .funnel-hero-subtitle {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .funnel-hero-badge {
    background: rgba(99, 102, 241, 0.3) !important;
    color: #c7d2fe !important;
}

/* Funnel body */
[data-theme="dark"] body:has(.funnel-header) {
    background: #0f172a !important;
}

/* Progress bar */
[data-theme="dark"] .progress-container {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] .progress-step .step-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .progress-step.active .step-label {
    color: #818cf8 !important;
}

/* Wizard container & cards */
[data-theme="dark"] .wizard-container {
    background: transparent !important;
}
[data-theme="dark"] .wizard-container h2 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .wizard-container p {
    color: #94a3b8 !important;
}
[data-theme="dark"] .goal-card,
[data-theme="dark"] .option-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .goal-card:hover,
[data-theme="dark"] .option-card:hover {
    border-color: #6366f1 !important;
    background: #253041 !important;
}
[data-theme="dark"] .goal-card.selected,
[data-theme="dark"] .option-card.selected {
    border-color: #6366f1 !important;
    background: #1e1b4b !important;
}
[data-theme="dark"] .goal-card .card-title,
[data-theme="dark"] .option-card .card-title {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .goal-card .card-desc,
[data-theme="dark"] .option-card .card-desc {
    color: #94a3b8 !important;
}

/* Card icons */
[data-theme="dark"] .card-icon {
    background: #334155 !important;
}

/* Wizard form inputs */
[data-theme="dark"] .wizard-container input[type="text"],
[data-theme="dark"] .wizard-container input[type="email"],
[data-theme="dark"] .wizard-container input[type="tel"],
[data-theme="dark"] .wizard-container input[type="number"],
[data-theme="dark"] .wizard-container select,
[data-theme="dark"] .wizard-container textarea {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .wizard-container input::placeholder {
    color: #64748b !important;
}

/* Navigation buttons */
[data-theme="dark"] .btn-back {
    background: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-back:hover {
    background: #475569 !important;
}

/* Trust bar */
[data-theme="dark"] .funnel-trust-bar {
    color: #94a3b8 !important;
}
[data-theme="dark"] .trust-badge {
    color: #94a3b8 !important;
}
[data-theme="dark"] .trust-social-proof {
    border-top-color: #334155 !important;
}
[data-theme="dark"] .trust-proof-text {
    color: #94a3b8 !important;
}
[data-theme="dark"] .trust-proof-text strong {
    color: #f1f5f9 !important;
}

/* Score screen */
[data-theme="dark"] .score-screen {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .score-screen h2 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .score-message {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .score-breakdown,
[data-theme="dark"] .score-recommendations {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Lender connect form */
[data-theme="dark"] .lender-connect-section {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .lender-connect-header h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .lender-connect-header p {
    color: #94a3b8 !important;
}
[data-theme="dark"] .lender-connect-form input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .lender-connect-form label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .lender-form-disclaimer {
    color: #94a3b8 !important;
}

/* Lead confirmed */
[data-theme="dark"] .lead-confirmed {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .lead-confirmed h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .lead-confirmed p {
    color: #cbd5e1 !important;
}

/* Mobile menu */
[data-theme="dark"] .mobile-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .mobile-menu-item {
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] .mobile-menu-item:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* Funnel dark mode toggle button */
.funnel-dark-toggle {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #64748b !important;
    font-size: 16px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}
.funnel-dark-toggle:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #4f46e5 !important;
    transform: scale(1.05) !important;
}
[data-theme="dark"] .funnel-dark-toggle {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fbbf24 !important;
}
[data-theme="dark"] .funnel-dark-toggle:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* ===================================================================
   CALCULATOR LENDER CONNECT FORM — Dark Mode
   (Shared form on closing costs, refinance, property cost pages)
   =================================================================== */
[data-theme="dark"] .calc-lender-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #334155 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .calc-lender-section::before {
    background: linear-gradient(90deg, #6366f1, #818cf8, #34d399) !important;
}
[data-theme="dark"] .calc-lender-icon {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}
[data-theme="dark"] .calc-lender-header h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .calc-lender-header p {
    color: #94a3b8 !important;
}
[data-theme="dark"] .calc-form-group label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .calc-form-group input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .calc-form-group input::placeholder {
    color: #64748b !important;
}
[data-theme="dark"] .calc-form-group input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
[data-theme="dark"] .calc-lender-disclaimer {
    color: #64748b !important;
}
[data-theme="dark"] .calc-lender-skip {
    color: #64748b !important;
}
[data-theme="dark"] .calc-lender-skip:hover {
    color: #818cf8 !important;
}
[data-theme="dark"] .calc-lender-confirmed {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* ===================================================================
   CLOSING COSTS PAGE — Dark Mode Enhancements
   =================================================================== */
[data-theme="dark"] .closing-costs-page .page-header h1,
[data-theme="dark"] .refinance-page .page-header h1 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .closing-costs-page .page-header .subtitle,
[data-theme="dark"] .refinance-page .page-header .subtitle {
    color: #94a3b8 !important;
}

/* Form inputs */
[data-theme="dark"] .closing-costs-page .form-group label,
[data-theme="dark"] .refinance-page .form-group label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .closing-costs-page .form-group input,
[data-theme="dark"] .closing-costs-page .form-group select,
[data-theme="dark"] .refinance-page .form-group input,
[data-theme="dark"] .refinance-page .form-group select {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .closing-costs-page .form-group input:focus,
[data-theme="dark"] .closing-costs-page .form-group select:focus,
[data-theme="dark"] .refinance-page .form-group input:focus,
[data-theme="dark"] .refinance-page .form-group select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* Input prefixes/suffixes */
[data-theme="dark"] .input-with-prefix,
[data-theme="dark"] .input-with-suffix {
    border-color: #334155 !important;
}
[data-theme="dark"] .prefix,
[data-theme="dark"] .suffix {
    color: #94a3b8 !important;
    background: #0f172a !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .help-text {
    color: #94a3b8 !important;
}
[data-theme="dark"] .help-text.calculated-amount {
    color: #60a5fa !important;
}

/* Secondary button */
[data-theme="dark"] .btn-secondary {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-secondary:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* Results area */
[data-theme="dark"] .results-header h2 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .results-header .location {
    color: #94a3b8 !important;
}
[data-theme="dark"] .summary-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .summary-card.highlight {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}
[data-theme="dark"] .card-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .card-value {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .breakdown-label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .breakdown-amount {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .breakdown-row.subtotal {
    border-color: #334155 !important;
}
[data-theme="dark"] .notes-section {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .info-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .info-section {
    border-color: #334155 !important;
}
[data-theme="dark"] .error-message {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* ===================================================================
   REFINANCE PAGE — Additional Dark Mode
   =================================================================== */
[data-theme="dark"] .stat-card {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .tips-box {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .verdict-box.positive {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}
[data-theme="dark"] .verdict-box.negative {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .contact-form input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .result-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
[data-theme="dark"] .card-icon {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* ===================================================================
   DASHBOARD PAGE — Dark Mode (comprehensive)
   =================================================================== */
[data-theme="dark"] .dashboard-page {
    background: #000000 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .dashboard-page .page-header h1 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .dashboard-page .subtitle {
    color: #94a3b8 !important;
}
[data-theme="dark"] .cta-banner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .tab-btn {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .tab-btn.active {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #4f46e5 !important;
}
[data-theme="dark"] .panel-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .readiness-form-panel input,
[data-theme="dark"] .readiness-form-panel select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .readiness-form-panel label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .breakdown-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .breakdown-card-bar {
    background: #334155 !important;
}
[data-theme="dark"] .recommendations-card li {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .history-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .journey-progress-bar-container {
    background: #334155 !important;
}
[data-theme="dark"] .step-upcoming .step-icon {
    background: #334155 !important;
    color: #64748b !important;
}
[data-theme="dark"] .step-current .step-icon {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}
[data-theme="dark"] .scenario-input-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .scenario-fields input,
[data-theme="dark"] .scenario-fields select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .scenario-result-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .chart-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .last-score-note {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}