/*
 * Unfold Custom CSS — Forms
 * Input fields, selects, autofill, login form, action dropdowns
 */

/* Form field focus */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-500) !important;
    outline-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* Center the login form */
.login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
}

.login-form,
.login form {
    margin: 0 auto !important;
}

/* Fix input field hover */
.login input[type="text"]:hover,
.login input[type="password"]:hover,
.login input[type="email"]:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
select:hover {
    background-color: transparent !important;
}

/* Fix input field focus — ensure text remains visible */
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
    background-color: transparent !important;
    border-color: var(--primary-500) !important;
    outline-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* Ensure labels and text remain visible on hover */
.login label,
.login input::placeholder {
    opacity: 1 !important;
}

/* Fix autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: inherit !important;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px rgb(31, 41, 55) inset !important;
    -webkit-text-fill-color: rgb(229, 231, 235) !important;
}

/* Login button styling */
.login button[type="submit"],
.login input[type="submit"] {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
}

.login button[type="submit"]:hover,
.login input[type="submit"]:hover {
    background-color: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
}

/* Fix form field backgrounds in dark mode */
.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"],
.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: rgb(229, 231, 235) !important;
    color-scheme: dark !important;
}

.dark input[type="text"]:hover,
.dark input[type="password"]:hover,
.dark input[type="email"]:hover,
.dark input[type="number"]:hover,
.dark textarea:hover,
.dark select:hover {
    background-color: rgb(31, 41, 55) !important;
}

/* Action select dropdown — Unfold dark theme */
.actions select,
.dark .actions select {
    background-color: rgb(30, 41, 59) !important;
    color: rgb(226, 232, 240) !important;
    border: 1px solid rgb(51, 65, 85) !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 2rem 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 1rem !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    min-width: 12rem !important;
    color-scheme: dark !important;
}

.actions select:hover,
.dark .actions select:hover {
    border-color: var(--primary-500) !important;
}

.actions select:focus,
.dark .actions select:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
    outline: none !important;
}

.actions select option,
.dark .actions select option {
    background-color: rgb(30, 41, 59) !important;
    color: rgb(226, 232, 240) !important;
    padding: 0.5rem !important;
}

/* Action submit (Go/Run) button — always visible */
.actions button[type="submit"],
.actions input[type="submit"] {
    background-color: var(--primary-600) !important;
    color: white !important;
    padding: 0.375rem 1rem !important;
    border-radius: 0.375rem !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.actions button[type="submit"]:hover,
.actions input[type="submit"]:hover {
    background-color: var(--primary-700) !important;
}