/* Custom CSS styles */

/* Theme: primary accent color - change here to update all primary buttons globally */
:root {
    --color-primary: #ffc95f;
    --form-border: #d1d5db;
    --form-border-focus: #6366f1;
    --form-bg: #ffffff;
    --form-text: #111827;
    --form-placeholder: #9ca3af;
    --form-disabled-bg: #f3f4f6;
    --form-disabled-text: #6b7280;
}

/* Shared form control styling across the web app */
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.cur-year),
    select:not(.flatpickr-monthDropdown-months),
    textarea,
    .ts-wrapper .ts-control,
    .flatpickr-input[readonly]
) {
    border: 1px solid var(--form-border);
    border-radius: 0.75rem;
    background: var(--form-bg);
    color: var(--form-text);
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.cur-year),
    select:not(.flatpickr-monthDropdown-months),
    textarea,
    .ts-wrapper .ts-control,
    .flatpickr-input[readonly]
):focus {
    outline: none;
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    textarea
)::placeholder {
    color: var(--form-placeholder);
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.cur-year):disabled,
    select:not(.flatpickr-monthDropdown-months):disabled,
    textarea:disabled,
    .ts-wrapper.disabled .ts-control
) {
    background: var(--form-disabled-bg);
    color: var(--form-disabled-text);
    cursor: not-allowed;
}

:where(select:not(.flatpickr-monthDropdown-months)) {
    padding-right: 2.5rem;
}