/* Input Field Clean White Background Fix */

/* Force all input fields to have clean white background */
input[type="text"],
input[type="email"], 
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select,
.form-control,
.form-select {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Focus states */
input[type="text"]:focus,
input[type="email"]:focus, 
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
    color: #1f2937 !important;
    outline: none !important;
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Input group text styling */
.input-group-text {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

/* Password input specific styling */
.pass-input,
.pass-group input {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
}

.pass-input:focus,
.pass-group input:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
    color: #1f2937 !important;
}

/* Override browser autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Firefox autofill */
input:-moz-autofill {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-select:disabled {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    opacity: 0.6 !important;
}

/* Remove any default browser styling */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
}

/* Select dropdown arrow */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

/* Mobile specific fixes */
@media (max-width: 767.98px) {
    input[type="text"],
    input[type="email"], 
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    .form-control {
        font-size: 16px !important; /* Prevent zoom on iOS */
        min-height: 44px !important; /* Touch-friendly */
    }
}

/* Dark mode override - force light theme */
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

[data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"] select:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    color: #1f2937 !important;
}