/**
 * iOS 18 Compatibility Fixes for Filament Forms
 *
 * iOS 18 introduced new default styles for form controls that conflict
 * with Filament's styling, causing white text on white background.
 */

/* Fix for iOS 18 text input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    /* Force BLACK text on WHITE background */
    -webkit-text-fill-color: rgb(17, 24, 39) !important;
    color: rgb(17, 24, 39) !important;

    /* Reset iOS appearance */
    -webkit-appearance: none !important;
    appearance: none !important;

    /* Ensure WHITE background */
    background-color: white !important;

    /* Fix border visibility - gray border */
    border-color: rgb(209, 213, 219) !important;
}

/* Dark mode support */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark textarea,
.dark select {
    background-color: rgb(31, 41, 55) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    border-color: rgb(75, 85, 99) !important;
}

/* Fix for focused inputs */
input:focus,
textarea:focus,
select:focus {
    -webkit-text-fill-color: rgb(17, 24, 39) !important;
    color: rgb(17, 24, 39) !important;
    outline-offset: 2px !important;
}

/* Fix for disabled inputs */
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6 !important;
    -webkit-text-fill-color: rgb(107, 114, 128) !important;
}

/* Fix for placeholder text in iOS 18 */
input::placeholder,
textarea::placeholder {
    -webkit-text-fill-color: rgb(156, 163, 175) !important;
    opacity: 1 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    -webkit-text-fill-color: rgb(107, 114, 128) !important;
}

/* Fix for iOS Safari autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: rgb(17, 24, 39) !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark textarea:-webkit-autofill,
.dark textarea:-webkit-autofill:hover,
.dark textarea:-webkit-autofill:focus,
.dark select:-webkit-autofill,
.dark select:-webkit-autofill:hover,
.dark select:-webkit-autofill:focus {
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px rgb(31, 41, 55) inset !important;
}

/* Specific fixes for Filament form inputs */
.fi-input,
.fi-select,
.fi-textarea {
    -webkit-text-fill-color: rgb(17, 24, 39) !important;
    color: rgb(17, 24, 39) !important;
    background-color: white !important;
}

.dark .fi-input,
.dark .fi-select,
.dark .fi-textarea {
    color: white !important;
    -webkit-text-fill-color: white !important;
}