/*
 * Shared, opt-in form styles.
 * Load after framework styles: <link rel="stylesheet" href="/css/forms.css">
 * Apply to a form or wrapper: <form class="site-form" ...>
 * Existing inline styles still take precedence. Remove inline border/color
 * declarations when a control should use this theme. Layout, icon padding,
 * select arrows, and submit buttons remain owned by the page/framework.
 */
.site-form {
    --form-border: #64748b;
    --form-text: #1f2937;
    --form-placeholder: #4b5563;
    --form-focus: #06721c;
    --form-error: #b42318;
}

.site-form :is(input:not([type]), input[type="text"], input[type="email"],
    input[type="tel"], input[type="password"], input[type="search"],
    input[type="url"], input[type="number"], input[type="date"],
    input[type="datetime-local"], input[type="time"], input[type="month"],
    input[type="week"], input[type="file"], textarea, select) {
    box-sizing: border-box;
    border: 1px solid var(--form-border);
    border-radius: 5px;
    background-color: #fff;
    color: var(--form-text);
    font-size: 16px;
    font-weight: 400;
}

.site-form :is(input, textarea)::placeholder {
    color: var(--form-placeholder);
    opacity: 1;
}

.site-form :is(input, textarea, select):focus {
    border-color: var(--form-focus);
    outline: 2px solid var(--form-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.site-form :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--form-focus);
    border-color: var(--form-border);
    cursor: pointer;
}

/* Bootstrap replaces the native check/radio appearance. Keep its icons. */
.site-form .form-check-input:checked {
    background-color: var(--form-focus);
    border-color: var(--form-focus);
}

.site-form :is(input, textarea, select):is([aria-invalid="true"], .is-invalid, .has-error) {
    border-color: var(--form-error);
    outline-color: var(--form-error);
}

/* Do not mark untouched required fields red just because they are empty. */
.site-form :is(input, textarea, select):user-invalid {
    border-color: var(--form-error);
    outline-color: var(--form-error);
}

.site-form :is(input, textarea)[readonly] {
    background-color: #f1f5f9;
}

.site-form :is(input, textarea, select):disabled {
    background-color: #e5e7eb;
    border-color: #94a3b8;
    color: #4b5563;
    cursor: not-allowed;
    opacity: 1;
}