/**
 * Universal Dark Mode Override for All Form Themes
 *
 * This file provides comprehensive dark mode support for ALL form themes
 * by overriding any hardcoded light colors with adaptive CSS variables.
 *
 * LOAD THIS AFTER theme CSS to ensure dark mode compatibility!
 *
 * UI/UX Principles Applied:
 * - WCAG AAA contrast ratios (11.5:1 for text)
 * - Smooth transitions (200ms cubic-bezier)
 * - Subtle shadows in dark mode
 * - Consistent spacing
 * - Accessible focus states
 */

/* ============================================
   DARK MODE - SYSTEM PREFERENCE
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Form Containers */
    .dynamic-form-container,
    .form-body-wrapper {
        background: var(--form-bg-primary) !important;
        border-color: var(--form-border-color) !important;
        box-shadow: var(--form-shadow-xl) !important;
    }

    .dynamic-form-body,
    .form-body {
        background: var(--form-bg-primary) !important;
    }

    .form-page-wrapper {
        background: var(--form-bg-page) !important;
    }

    /* Text Elements */
    .dynamic-form-title,
    .form-title,
    .form-section-title,
    .form-label,
    .form-field-wrapper label {
        color: var(--form-text-primary) !important;
    }

    .dynamic-form-description,
    .form-description,
    .form-section-description,
    .form-help-text,
    .form-field-wrapper .help-text {
        color: var(--form-text-secondary) !important;
    }

    .form-text-muted,
    .form-field-wrapper .muted-text {
        color: var(--form-text-muted) !important;
    }

    /* Form Sections */
    .form-section {
        background: transparent !important;
    }

    .form-section-header {
        border-color: var(--form-border-color) !important;
    }

    /* Input Fields */
    .form-input,
    .form-textarea,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        background: var(--form-bg-secondary) !important;
        color: var(--form-text-primary) !important;
        border-color: var(--form-border-color) !important;
    }

    .form-input:hover,
    .form-textarea:hover,
    .form-select:hover,
    input:hover,
    textarea:hover,
    select:hover {
        border-color: var(--form-border-color-hover) !important;
    }

    .form-input::placeholder,
    .form-textarea::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: var(--form-text-muted) !important;
        opacity: 0.6;
    }

    /* Checkboxes and Radio Buttons - Better visibility in dark mode */
    input[type="checkbox"],
    input[type="radio"] {
        background: var(--form-bg-secondary) !important;
        border-color: var(--form-border-color) !important;
    }

    /* File Upload */
    .drag-drop-zone {
        background: var(--form-bg-secondary) !important;
        border-color: var(--form-border-color) !important;
    }

    .drag-drop-zone:hover,
    .drag-drop-zone.drag-over {
        background: var(--form-bg-tertiary) !important;
    }

    /* Buttons */
    .btn-submit,
    .form-submit-button,
    button[type="submit"] {
        /* Keep brand color but ensure visibility */
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    }

    /* Error States - More visible in dark mode */
    .field-error,
    .form-error,
    .error-message {
        background: rgba(239, 68, 68, 0.1) !important;
        border-color: var(--form-error-color) !important;
        color: #fca5a5 !important;
    }

    /* Success States */
    .field-success,
    .form-success,
    .success-message {
        background: rgba(16, 185, 129, 0.1) !important;
        border-color: var(--form-success-color) !important;
        color: #6ee7b7 !important;
    }

    /* Progress Bar */
    .progress-bar-container {
        background: var(--form-bg-secondary) !important;
    }

    /* Multi-step Forms */
    .step-indicator {
        background: var(--form-bg-secondary) !important;
        border-color: var(--form-border-color) !important;
    }

    .step-indicator.active {
        border-color: var(--form-primary-color) !important;
    }

    .step-indicator.completed {
        background: var(--form-primary-color) !important;
    }

    /* Modal Forms (Alpine.js) */
    .modal-content,
    .form-modal .modal-body {
        background: var(--form-bg-primary) !important;
        border-color: var(--form-border-color) !important;
    }

    /* Card Elements */
    .form-card,
    .field-card {
        background: var(--form-bg-secondary) !important;
        border-color: var(--form-border-color) !important;
    }

    /* Dividers */
    hr,
    .divider,
    .form-divider {
        border-color: var(--form-border-color) !important;
        opacity: 0.5;
    }

    /* Info Boxes */
    .info-box,
    .alert,
    .notice {
        background: var(--form-bg-secondary) !important;
        border-color: var(--form-border-color) !important;
        color: var(--form-text-primary) !important;
    }
}

/* ============================================
   DARK MODE - MANUAL TOGGLE (.dark class)
   ============================================ */
.dark .dynamic-form-container,
.dark .form-body-wrapper {
    background: var(--form-bg-primary) !important;
    border-color: var(--form-border-color) !important;
    box-shadow: var(--form-shadow-xl) !important;
}

.dark .dynamic-form-body,
.dark .form-body {
    background: var(--form-bg-primary) !important;
}

.dark .form-page-wrapper {
    background: var(--form-bg-page) !important;
}

.dark .dynamic-form-title,
.dark .form-title,
.dark .form-section-title,
.dark .form-label,
.dark .form-field-wrapper label {
    color: var(--form-text-primary) !important;
}

.dark .dynamic-form-description,
.dark .form-description,
.dark .form-section-description,
.dark .form-help-text,
.dark .form-field-wrapper .help-text {
    color: var(--form-text-secondary) !important;
}

.dark .form-text-muted,
.dark .form-field-wrapper .muted-text {
    color: var(--form-text-muted) !important;
}

.dark .form-section {
    background: transparent !important;
}

.dark .form-section-header {
    border-color: var(--form-border-color) !important;
}

.dark .form-input,
.dark .form-textarea,
.dark .form-select,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="tel"],
.dark input[type="number"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark textarea,
.dark select {
    background: var(--form-bg-secondary) !important;
    color: var(--form-text-primary) !important;
    border-color: var(--form-border-color) !important;
}

.dark .form-input:hover,
.dark .form-textarea:hover,
.dark .form-select:hover,
.dark input:hover,
.dark textarea:hover,
.dark select:hover {
    border-color: var(--form-border-color-hover) !important;
}

.dark .form-input::placeholder,
.dark .form-textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--form-text-muted) !important;
    opacity: 0.6;
}

.dark input[type="checkbox"],
.dark input[type="radio"] {
    background: var(--form-bg-secondary) !important;
    border-color: var(--form-border-color) !important;
}

.dark .drag-drop-zone {
    background: var(--form-bg-secondary) !important;
    border-color: var(--form-border-color) !important;
}

.dark .drag-drop-zone:hover,
.dark .drag-drop-zone.drag-over {
    background: var(--form-bg-tertiary) !important;
}

.dark .btn-submit,
.dark .form-submit-button,
.dark button[type="submit"] {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.dark .field-error,
.dark .form-error,
.dark .error-message {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--form-error-color) !important;
    color: #fca5a5 !important;
}

.dark .field-success,
.dark .form-success,
.dark .success-message {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: var(--form-success-color) !important;
    color: #6ee7b7 !important;
}

.dark .progress-bar-container {
    background: var(--form-bg-secondary) !important;
}

.dark .step-indicator {
    background: var(--form-bg-secondary) !important;
    border-color: var(--form-border-color) !important;
}

.dark .step-indicator.active {
    border-color: var(--form-primary-color) !important;
}

.dark .step-indicator.completed {
    background: var(--form-primary-color) !important;
}

.dark .modal-content,
.dark .form-modal .modal-body {
    background: var(--form-bg-primary) !important;
    border-color: var(--form-border-color) !important;
}

.dark .form-card,
.dark .field-card {
    background: var(--form-bg-secondary) !important;
    border-color: var(--form-border-color) !important;
}

.dark hr,
.dark .divider,
.dark .form-divider {
    border-color: var(--form-border-color) !important;
    opacity: 0.5;
}

.dark .info-box,
.dark .alert,
.dark .notice {
    background: var(--form-bg-secondary) !important;
    border-color: var(--form-border-color) !important;
    color: var(--form-text-primary) !important;
}

/* ============================================
   TRANSITION SMOOTHING
   ============================================ */
.dynamic-form-container,
.form-body-wrapper,
.form-input,
.form-textarea,
.form-select,
.form-label,
.form-title,
input,
textarea,
select {
    transition: background-color var(--form-transition-base),
                color var(--form-transition-base),
                border-color var(--form-transition-base) !important;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast focus states work in both modes */
@media (prefers-color-scheme: dark) {
    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus,
    input:focus,
    textarea:focus,
    select:focus {
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4) !important;
        outline: 2px solid transparent !important;
        outline-offset: 2px !important;
    }
}

.dark .form-input:focus,
.dark .form-textarea:focus,
.dark .form-select:focus,
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

/* ============================================
   PRINT STYLES (Force light mode for printing)
   ============================================ */
@media print {
    .dynamic-form-container,
    .form-body-wrapper,
    .form-input,
    .form-textarea,
    .form-select {
        background: white !important;
        color: black !important;
        border-color: #e5e7eb !important;
    }

    .form-title,
    .form-label {
        color: black !important;
    }
}