/**
 * DARK MODE - ULTIMATE FIX
 *
 * This is the NUCLEAR OPTION for dark mode.
 * Uses maximum specificity to override EVERYTHING.
 *
 * LOAD THIS ABSOLUTELY LAST!
 */

/* ============================================
   MAXIMUM SPECIFICITY SELECTORS
   ============================================ */

/* System Dark Mode */
@media (prefers-color-scheme: dark) {
    /* Page background */
    html body div.form-page-wrapper,
    html body .form-page-wrapper {
        background-color: #111827 !important;
        background-image: none !important;
    }

    /* Form container - THE WHITE BOX */
    html body div.form-container,
    html body .form-container,
    html body div.form-body-wrapper,
    html body .form-body-wrapper,
    html body div.form-body,
    html body .form-body,
    html body div.dynamic-form-container,
    html body .dynamic-form-container,
    html body div.dynamic-form-body,
    html body .dynamic-form-body {
        background-color: #1f2937 !important;
        background-image: none !important;
        background: #1f2937 !important;
        color: #f9fafb !important;
        border-color: #374151 !important;
    }

    /* Title text */
    html body h1.form-title,
    html body .form-title,
    html body h1.dynamic-form-title,
    html body .dynamic-form-title,
    html body .form-header-section h1,
    html body .form-header-section .form-title {
        color: #f9fafb !important;
    }

    /* Description text */
    html body p.form-description,
    html body .form-description,
    html body .dynamic-form-description {
        color: #d1d5db !important;
    }

    /* All form sections */
    html body .form-section,
    html body .form-field-wrapper,
    html body .form-field {
        background-color: transparent !important;
        background: transparent !important;
        color: #f9fafb !important;
    }

    /* Labels */
    html body label,
    html body .form-label {
        color: #f9fafb !important;
    }

    /* Input fields */
    html body input[type="text"],
    html body input[type="email"],
    html body input[type="tel"],
    html body input[type="number"],
    html body input[type="url"],
    html body input[type="date"],
    html body input[type="time"],
    html body input[type="datetime-local"],
    html body textarea,
    html body select,
    html body .form-input,
    html body .form-textarea,
    html body .form-select {
        background-color: #374151 !important;
        background: #374151 !important;
        color: #f9fafb !important;
        border-color: #4b5563 !important;
    }

    html body input::placeholder,
    html body textarea::placeholder {
        color: #9ca3af !important;
    }

    /* Checkboxes and radios */
    html body input[type="checkbox"],
    html body input[type="radio"] {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
    }

    /* Help text */
    html body .form-help-text,
    html body .help-text,
    html body small {
        color: #9ca3af !important;
    }

    /* Section headers */
    html body .form-section-header,
    html body .form-section-title {
        color: #f9fafb !important;
        border-color: #374151 !important;
    }

    /* Warning/notice boxes */
    html body .form-notice,
    html body .notice,
    html body .alert {
        background-color: rgba(251, 191, 36, 0.1) !important;
        color: #fcd34d !important;
        border-color: #fbbf24 !important;
    }
}

/* Manual Dark Mode Toggle (.dark class) */
html.dark body div.form-page-wrapper,
html.dark body .form-page-wrapper {
    background-color: #111827 !important;
    background-image: none !important;
}

html.dark body div.form-container,
html.dark body .form-container,
html.dark body div.form-body-wrapper,
html.dark body .form-body-wrapper,
html.dark body div.form-body,
html.dark body .form-body,
html.dark body div.dynamic-form-container,
html.dark body .dynamic-form-container,
html.dark body div.dynamic-form-body,
html.dark body .dynamic-form-body {
    background-color: #1f2937 !important;
    background-image: none !important;
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

html.dark body h1.form-title,
html.dark body .form-title,
html.dark body h1.dynamic-form-title,
html.dark body .dynamic-form-title,
html.dark body .form-header-section h1,
html.dark body .form-header-section .form-title {
    color: #f9fafb !important;
}

html.dark body p.form-description,
html.dark body .form-description,
html.dark body .dynamic-form-description {
    color: #d1d5db !important;
}

html.dark body .form-section,
html.dark body .form-field-wrapper,
html.dark body .form-field {
    background-color: transparent !important;
    background: transparent !important;
    color: #f9fafb !important;
}

html.dark body label,
html.dark body .form-label {
    color: #f9fafb !important;
}

html.dark body input[type="text"],
html.dark body input[type="email"],
html.dark body input[type="tel"],
html.dark body input[type="number"],
html.dark body input[type="url"],
html.dark body input[type="date"],
html.dark body input[type="time"],
html.dark body input[type="datetime-local"],
html.dark body textarea,
html.dark body select,
html.dark body .form-input,
html.dark body .form-textarea,
html.dark body .form-select {
    background-color: #374151 !important;
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

html.dark body input::placeholder,
html.dark body textarea::placeholder {
    color: #9ca3af !important;
}

html.dark body input[type="checkbox"],
html.dark body input[type="radio"] {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

html.dark body .form-help-text,
html.dark body .help-text,
html.dark body small {
    color: #9ca3af !important;
}

html.dark body .form-section-header,
html.dark body .form-section-title {
    color: #f9fafb !important;
    border-color: #374151 !important;
}

html.dark body .form-notice,
html.dark body .notice,
html.dark body .alert {
    background-color: rgba(251, 191, 36, 0.1) !important;
    color: #fcd34d !important;
    border-color: #fbbf24 !important;
}

/* ============================================
   FORCE OVERRIDE ANY INLINE STYLES
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Override even inline styles with attribute selectors */
    [class*="form-container"][style],
    [class*="form-body"][style] {
        background-color: #1f2937 !important;
        color: #f9fafb !important;
    }

    [class*="form-title"][style] {
        color: #f9fafb !important;
    }
}

html.dark [class*="form-container"][style],
html.dark [class*="form-body"][style] {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

html.dark [class*="form-title"][style] {
    color: #f9fafb !important;
}

/* ============================================
   DEBUGGING HELPERS (Remove in production)
   ============================================ */

/* Uncomment to see which elements aren't dark
@media (prefers-color-scheme: dark) {
    .form-container:not([style*="background: #1f2937"]) {
        outline: 3px solid red !important;
    }
}
*/