/* Autofill Background Fix - Prevents white background on browser autofill */

/* Webkit browsers (Chrome, Safari, Edge) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Firefox */
input:-moz-autofill {
    background-color: transparent !important;
    background-image: none !important;
    color: inherit !important;
}

/* General autofill fix for all browsers */
input[type="text"]:autofill,
input[type="email"]:autofill,
input[type="password"]:autofill,
input[type="tel"]:autofill,
input[type="url"]:autofill,
input[type="search"]:autofill,
input[type="number"]:autofill {
    background-color: transparent !important;
    background-image: none !important;
    color: inherit !important;
}

/* Specific fixes for auth form inputs */
.auth-form-input:-webkit-autofill,
.auth-form-input:-webkit-autofill:hover,
.auth-form-input:-webkit-autofill:focus,
.auth-form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Modal form controls autofill fix */
.modal-body .form-control:-webkit-autofill,
.modal-body .form-control:-webkit-autofill:hover,
.modal-body .form-control:-webkit-autofill:focus,
.modal-body .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.15) inset !important;
    -webkit-text-fill-color: white !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Dashboard form inputs autofill fix */
.formInputs input:-webkit-autofill,
.formInputs input:-webkit-autofill:hover,
.formInputs input:-webkit-autofill:focus,
.formInputs input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fafafa inset !important;
    -webkit-text-fill-color: inherit !important;
    background-color: #fafafa !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Login form inputs autofill fix */
.loginInput:-webkit-autofill,
.loginInput:-webkit-autofill:hover,
.loginInput:-webkit-autofill:focus,
.loginInput:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #4a4a4a !important;
    background-color: #fff !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Profile form inputs autofill fix */
.profile-form input:-webkit-autofill,
.profile-form input:-webkit-autofill:hover,
.profile-form input:-webkit-autofill:focus,
.profile-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1) inset !important;
    -webkit-text-fill-color: white !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Additional fallback for any remaining input types */
input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* Ensure autofill doesn't override custom styling */
input:autofill {
    background-color: transparent !important;
    background-image: none !important;
    color: inherit !important;
}

/* ===== GLOBAL READONLY AND DISABLED FIELD STYLING ===== */
/* Override Bootstrap's default gray background for readonly/disabled fields */

/* Main form controls - consistent with app theme */
.form-control:disabled,
.form-control[readonly],
input.form-control:disabled,
input.form-control[readonly],
textarea.form-control:disabled,
textarea.form-control[readonly],
select.form-control:disabled,
select.form-control[readonly] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    opacity: 1 !important;
    cursor: default;
}

.form-control[readonly]:focus,
input.form-control[readonly]:focus,
textarea.form-control[readonly]:focus,
select.form-control[readonly]:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Dashboard/Admin forms - light theme */
.formInputs input:disabled,
.formInputs input[readonly],
.formInputs textarea:disabled,
.formInputs textarea[readonly],
.formInputs select:disabled,
.formInputs select[readonly] {
    background-color: #fafafa !important;
    color: inherit !important;
    opacity: 1 !important;
    border: 1px solid #ddd !important;
}

/* Login form fields */
.loginInput:disabled,
.loginInput[readonly],
.login .loginInputs input:disabled,
.login .loginInputs input[readonly] {
    background-color: #fff !important;
    color: #4a4a4a !important;
    opacity: 1 !important;
    border: 1px solid #ddd !important;
}

/* Modal form controls */
.modal-body .form-control:disabled,
.modal-body .form-control[readonly] {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    opacity: 1 !important;
}

/* Profile form controls */
.profile-form input:disabled,
.profile-form input[readonly],
.profile-form textarea:disabled,
.profile-form textarea[readonly],
.profile-form select:disabled,
.profile-form select[readonly] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    opacity: 1 !important;
}

/* Auth form controls */
.auth-form-input:disabled,
.auth-form-input[readonly] {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
}

/* Generic input overrides - catch all */
input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly],
select:disabled,
select[readonly] {
    opacity: 1 !important;
}

/* Bootstrap overrides */
.form-control:disabled,
.form-control[readonly] {
    background-color: inherit !important;
    opacity: 1 !important;
}

/* Remove Bootstrap's default gray background */
.form-control:disabled,
.form-control[readonly] {
    background-color: #e9ecef !important;
}

/* Override the override with our custom styling */
.form-control:disabled,
.form-control[readonly] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    opacity: 1 !important;
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px rgba(70, 90, 126, 0.4) inset !important;
        -webkit-text-fill-color: white !important;
        background-color: rgba(70, 90, 126, 0.4) !important;
    }
}