/**
 * Dark Mode Fixes - Comprehensive dark mode styling fixes
 * Ensures all form elements respect dark mode preferences
 * 
 * @author Gli Amici di Colombo
 * @version 1.0.0
 */

/* =================================
   DARK MODE FORM ELEMENT FIXES
================================= */

@media (prefers-color-scheme: dark) {
    /* Form backgrounds */
    .form-card,
    .form-section,
    .form-wrapper,
    .registration-form,
    .event-card,
    .sidebar-card {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Input elements */
    input,
    select, 
    textarea,
    .form-input,
    .form-select,
    .form-textarea {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Input focus states */
    input:focus,
    select:focus,
    textarea:focus,
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border-focus) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
    }
    
    /* Placeholders */
    input::placeholder,
    textarea::placeholder,
    select::placeholder {
        color: var(--form-placeholder) !important;
    }
    
    /* Labels */
    label,
    .form-label,
    .checkbox-label,
    .radio-label {
        color: var(--form-text) !important;
    }
    
    /* Help text */
    .form-help,
    .help-text,
    small {
        color: var(--text-secondary) !important;
    }
    
    /* Race cards */
    .race-card-enhanced,
    .race-card,
    .radio-card {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Race card headers */
    .race-card-header,
    .card-header {
        background: var(--bg-secondary) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Race icon backgrounds - should use form bg when checked */
    .race-radio-input:checked ~ .race-card-header .race-icon-large {
        background: var(--form-bg) !important;
    }
    
    /* Radio and checkbox elements */
    input[type="radio"]:checked::before,
    input[type="checkbox"]:checked::before {
        background-color: var(--form-bg) !important;
    }
    
    /* Checkmark in indeterminate state */
    input[type="checkbox"]:indeterminate::before {
        background-color: var(--form-bg) !important;
    }
    
    /* Card bodies */
    .race-card-body,
    .card-body,
    .form-group,
    .form-field {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
    }
    
    /* Price displays */
    .race-price,
    .price-display,
    .payment-summary {
        background: var(--bg-secondary) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Progress elements */
    .progress-bar,
    .step-connector {
        background: var(--bg-secondary) !important;
    }
    
    .progress-step,
    .step-circle {
        background: var(--bg-secondary) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Payment elements */
    .payment-container,
    .payment-form,
    .payment-methods,
    .stripe-card {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Button elements */
    .btn-secondary,
    .btn-outline {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    .btn-secondary:hover,
    .btn-outline:hover {
        background: var(--bg-secondary) !important;
    }
    
    /* Modal and overlay elements */
    .modal,
    .modal-content,
    .overlay,
    .dropdown-menu {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Tables */
    .table,
    .table th,
    .table td {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Event information */
    .event-info,
    .event-details,
    .event-meta {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
    }
    
    /* Footer and sidebar elements */
    .form-footer,
    .sidebar-content,
    .event-sidebar {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
    }
    
    /* Override any hardcoded white backgrounds */
    [style*="background: white"],
    [style*="background-color: white"],
    [style*="background: #fff"],
    [style*="background-color: #fff"],
    [style*="background: #ffffff"],
    [style*="background-color: #ffffff"] {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
    }
    
    /* Ensure proper text contrast */
    * {
        color: inherit;
    }
    
    /* Specific overrides for problematic elements */
    .race-selection-container,
    .race-cards-grid,
    .checkbox-container,
    .radio-container {
        background: var(--bg-secondary) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* File input styling */
    input[type="file"] {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }
    
    /* Select styling */
    select option {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
    }
    
    /* Loading states */
    .loading-overlay,
    .loading-content,
    .spinner {
        background: var(--form-bg) !important;
        color: var(--form-text) !important;
    }
    
    /* Alert states */
    .alert,
    .form-error,
    .error-message {
        background: var(--color-error-bg) !important;
        color: var(--color-error-dark) !important;
        border-color: var(--color-error-border) !important;
    }
    
    .alert-success {
        background: var(--color-success-bg) !important;
        color: var(--color-success-dark) !important;
        border-color: var(--color-success-border) !important;
    }
    
    .alert-warning {
        background: var(--color-warning-bg) !important;
        color: var(--color-warning-dark) !important;
        border-color: var(--color-warning-border) !important;
    }
    
    .alert-info {
        background: var(--color-info-bg) !important;
        color: var(--color-info-dark) !important;
        border-color: var(--color-info-border) !important;
    }
}

/* =================================
   HIGH CONTRAST SUPPORT
================================= */

@media (prefers-contrast: high) {
    input,
    select,
    textarea,
    .form-input,
    .form-select,
    .form-textarea {
        border-width: 2px !important;
    }
    
    .race-card-enhanced,
    .form-card {
        border-width: 3px !important;
    }
}

/* =================================
   REDUCED MOTION SUPPORT  
================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =================================
   FORCE PROPER INHERITANCE
================================= */

/* Ensure all elements inherit proper colors */
.form-section *,
.form-card *,
.registration-form * {
    color: inherit;
}

/* Override Bootstrap and other framework defaults */
.form-control,
.form-select,
.form-check-input,
.btn,
.card {
    background-color: var(--form-bg) !important;
    color: var(--form-text) !important;
    border-color: var(--form-border) !important;
}

@media (prefers-color-scheme: dark) {
    .form-control:focus,
    .form-select:focus {
        background-color: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border-focus) !important;
        box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25) !important;
    }
}