/**
 * Form Structure Fix - Robust Dark Mode Implementation
 *
 * PROBLEM IDENTIFIED:
 * - Base template uses: .form-title, .form-container, .form-body
 * - Theme CSS targets: .dynamic-form-title, .dynamic-form-container, .dynamic-form-body
 * - CSS mismatch = styles not applied!
 *
 * SOLUTION:
 * Create aliases so both naming conventions work, then apply proper dark mode styles
 *
 * LOAD ORDER: After form-common.css, before theme CSS
 */

/* ============================================
   CLASS NAME ALIASES (Fixes mismatch)
   ============================================ */

/* Make .form-* classes also match .dynamic-form-* styles */
.form-container {
    /* Alias for .dynamic-form-container */
}

.form-title {
    /* Alias for .dynamic-form-title */
}

.form-description {
    /* Alias for .dynamic-form-description */
}

.form-body-wrapper,
.form-body {
    /* Alias for .dynamic-form-body */
}

/* ============================================
   ROBUST DARK MODE - LIGHT MODE DEFAULTS
   ============================================ */

.form-page-wrapper {
    background: var(--form-bg-page, #f9fafb);
    color: var(--form-text-primary, #1f2937);
}

.form-container {
    background: var(--form-bg-primary, #ffffff);
    color: var(--form-text-primary, #1f2937);
    border-color: var(--form-border-color, #e5e7eb);
}

.form-title {
    color: var(--form-text-primary, #1f2937);
}

.form-description {
    color: var(--form-text-secondary, #6b7280);
}

.form-body-wrapper,
.form-body {
    background: var(--form-bg-primary, #ffffff);
    color: var(--form-text-primary, #1f2937);
}

.form-label,
.form-field-wrapper label {
    color: var(--form-text-primary, #1f2937);
}

.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"],
textarea,
select {
    background: var(--form-bg-primary, #ffffff);
    color: var(--form-text-primary, #1f2937);
    border-color: var(--form-border-color, #e5e7eb);
}

/* ============================================
   DARK MODE - AUTOMATIC (System Preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Page wrapper */
    .form-page-wrapper {
        background: #111827 !important;
        color: #f9fafb !important;
    }

    /* Main containers */
    .form-container,
    .form-body-wrapper,
    .form-body {
        background: #1f2937 !important;
        color: #f9fafb !important;
        border-color: #374151 !important;
    }

    /* Text elements */
    .form-title,
    .form-section-title,
    .form-label,
    .form-field-wrapper label {
        color: #f9fafb !important;
    }

    .form-description,
    .form-section-description,
    .form-help-text {
        color: #d1d5db !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: #374151 !important;
        color: #f9fafb !important;
        border-color: #4b5563 !important;
    }

    .form-input::placeholder,
    .form-textarea::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: #9ca3af !important;
    }

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

/* ============================================
   DARK MODE - MANUAL TOGGLE (.dark class)
   ============================================ */

.dark .form-page-wrapper {
    background: #111827 !important;
    color: #f9fafb !important;
}

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

.dark .form-title,
.dark .form-section-title,
.dark .form-label,
.dark .form-field-wrapper label {
    color: #f9fafb !important;
}

.dark .form-description,
.dark .form-section-description,
.dark .form-help-text {
    color: #d1d5db !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: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

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

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

/* ============================================
   ALSO TARGET THEME-SPECIFIC CLASSES
   (For themes using .dynamic-form-* naming)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .dynamic-form-container,
    .dynamic-form-body {
        background: #1f2937 !important;
        color: #f9fafb !important;
        border-color: #374151 !important;
    }

    .dynamic-form-title {
        color: #f9fafb !important;
    }

    .dynamic-form-description {
        color: #d1d5db !important;
    }
}

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

.dark .dynamic-form-title {
    color: #f9fafb !important;
}

.dark .dynamic-form-description {
    color: #d1d5db !important;
}

/* ============================================
   SPECIFICITY BOOST (Nuclear option)
   Forces dark mode even if theme has hardcoded colors
   ============================================ */

@media (prefers-color-scheme: dark) {
    body .form-page-wrapper,
    html body .form-page-wrapper {
        background: #111827 !important;
    }

    /* Target ALL possible container variations */
    body .form-container,
    html body .form-container,
    body .form-body-wrapper,
    html body .form-body-wrapper,
    body .form-body,
    html body .form-body,
    body .dynamic-form-container,
    html body .dynamic-form-container,
    body .dynamic-form-body,
    html body .dynamic-form-body {
        background: #1f2937 !important;
        color: #f9fafb !important;
        border-color: #374151 !important;
    }

    /* Target ALL possible title variations */
    body .form-title,
    html body .form-title,
    body .dynamic-form-title,
    html body .dynamic-form-title,
    body .form-header-section h1,
    html body .form-header-section h1 {
        color: #f9fafb !important;
    }

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

html.dark .form-page-wrapper,
html.dark body .form-page-wrapper {
    background: #111827 !important;
}

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

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

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

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

.form-container,
.form-body-wrapper,
.form-body,
.form-title,
.form-label,
.form-input,
.form-textarea,
.form-select {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease;
}