/**
 * AllCarsCuraçao Form Field Styling
 * Comprehensive form field styling ensuring visible borders in all states
 * 
 * This file ensures that all form fields maintain visible borders across
 * all states: default, focus, active, hover, and disabled.
 * 
 * Enterprise Standards Compliance:
 * - Consistent border visibility
 * - Accessibility-compliant focus states
 * - Cross-browser compatibility
 * - Mobile-responsive design
 */

/* ===== BASE FORM FIELD STYLES ===== */

/* All form input elements - Base styling with consistent borders */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
    /* Border - Always visible */
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;

    /* Font sizing */
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;

    /* Background and text */
    background-color: #ffffff !important;
    color: #111827 !important;
    
    /* Transitions for smooth state changes */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    
    /* Ensure proper box sizing */
    box-sizing: border-box !important;
}

/* ===== PADDING FOR INPUTS WITHOUT ICONS ===== */
/* Apply default padding only to inputs that don't have Tailwind padding classes */
input[type="text"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="email"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="password"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="url"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="tel"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="search"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="number"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="date"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="time"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="datetime-local"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="month"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
input[type="week"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
select:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
textarea:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]) {
    padding: 0.75rem !important;
}

/* ===== HOVER STATE ===== */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
select:hover,
textarea:hover {
    border-color: #9ca3af !important;
}

/* ===== FOCUS STATE ===== */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
    /* Enhanced border on focus - Sky Blue theme */
    border-color: #0ea5e9 !important;
    
    /* Focus ring for accessibility */
    outline: 2px solid #0ea5e9 !important;
    outline-offset: 2px !important;
    
    /* Subtle glow effect */
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

/* ===== ACTIVE STATE ===== */
input[type="text"]:active,
input[type="email"]:active,
input[type="password"]:active,
input[type="tel"]:active,
input[type="url"]:active,
input[type="search"]:active,
input[type="number"]:active,
input[type="date"]:active,
input[type="time"]:active,
input[type="datetime-local"]:active,
input[type="month"]:active,
input[type="week"]:active,
select:active,
textarea:active {
    /* Maintain border on active state */
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

/* ===== DISABLED STATE ===== */
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
select:disabled,
textarea:disabled {
    /* Maintain border but with muted colors */
    border-color: #e5e7eb !important;
    background-color: #f9fafb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}

/* ===== INVALID/ERROR STATE ===== */
input[type="text"]:invalid,
input[type="email"]:invalid,
input[type="password"]:invalid,
input[type="tel"]:invalid,
input[type="url"]:invalid,
input[type="search"]:invalid,
input[type="number"]:invalid,
input[type="date"]:invalid,
input[type="time"]:invalid,
input[type="datetime-local"]:invalid,
input[type="month"]:invalid,
input[type="week"]:invalid,
select:invalid,
textarea:invalid,
.form-field-error input,
.form-field-error select,
.form-field-error textarea {
    border-color: #4b5563 !important; /* Changed from red (#ef4444) to dark gray */
}

.form-field-error input:focus,
.form-field-error select:focus,
.form-field-error textarea:focus {
    border-color: #4b5563 !important; /* Changed from red (#ef4444) to dark gray */
    outline-color: #4b5563 !important; /* Changed from red (#ef4444) to dark gray */
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.1) !important; /* Changed from red rgba to dark gray rgba */
}

/* ===== TAILWIND BORDER CLASSES OVERRIDE ===== */
/* Support for dynamically added border classes */
.border-gray-600 {
    border-color: #4b5563 !important; /* Dark gray border for validation errors */
}

.border-gray-600:focus {
    border-color: #4b5563 !important;
    outline-color: #4b5563 !important;
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.1) !important;
}

/* ===== CHECKBOX AND RADIO BUTTONS ===== */
input[type="checkbox"],
input[type="radio"] {
    /* Maintain border for checkboxes and radio buttons */
    border: 1px solid #d1d5db !important;
    width: 1rem !important;
    height: 1rem !important;
    margin-right: 0.5rem !important;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    border-color: #0ea5e9 !important;
    outline: 2px solid #0ea5e9 !important;
    outline-offset: 2px !important;
}

/* ===== FILE INPUT ===== */
input[type="file"] {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 0.5rem !important;
    background-color: #ffffff !important;
}

input[type="file"]:focus {
    border-color: #0ea5e9 !important;
    outline: 2px solid #0ea5e9 !important;
    outline-offset: 2px !important;
}

/* ===== FORM GROUPS AND CONTAINERS ===== */
.form-group,
.form-field,
.input-group {
    margin-bottom: 1rem;
}

.form-group label,
.form-field label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    /* Larger touch targets on mobile - only for inputs without icon classes */
    input[type="text"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="email"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="password"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="tel"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="url"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="search"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="number"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="date"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="time"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="datetime-local"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="month"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    input[type="week"]:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    select:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]),
    textarea:not([class*="pl-"]):not([class*="px-"]):not([class*="p-"]) {
        /* Larger touch targets on mobile */
        padding: 1rem !important;
        font-size: 1rem !important; /* Prevent zoom on iOS */
        min-height: 2.75rem !important;
    }
    
    /* Ensure focus states are visible on mobile */
    input:focus,
    select:focus,
    textarea:focus {
        outline-width: 3px !important;
        outline-offset: 3px !important;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select,
    textarea {
        border-width: 2px !important;
        border-color: #000000 !important;
    }
    
    input:focus,
    select:focus,
    textarea:focus {
        border-color: #0000ff !important;
        outline-color: #0000ff !important;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select,
    textarea {
        transition: none !important;
    }
}