/* ===== Stageplot global overrides ===========================================
 * Site.css is gebouwd voor de 4am dark-theme (witte tekst op donkere
 * achtergrond) en stylet `input[type="text"]` etc. globaal met
 * `color: var(--text)` waar --text = #F8FAFC (wit). Op de Stageplot
 * (light-theme) pages zorgt dat voor wit-op-wit invoervelden.
 *
 * Deze stylesheet laadt LATER dan site.css en gebruikt iets-specifiekere
 * selectors (element + class) om de form-input-kleuren op Stageplot
 * pagina's correct te zetten zonder andere 4am-pages te raken.
 * ========================================================================= */

/* Form-inputs op Stageplot login + app pages */
input.sp-auth-input,
input.sp-input,
input.sp-onb-input,
input.sp-search,
select.sp-input,
select.sp-filter-select,
select.sp-onb-input,
textarea.sp-input,
.sp-auth-card input,
.sp-form-section input[type="text"],
.sp-form-section input[type="email"],
.sp-form-section input[type="tel"],
.sp-form-section input[type="url"],
.sp-form-section input[type="password"],
.sp-form-section select,
.sp-onb-card input,
.sp-onb-card select {
    background: #FAFBFC;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: .9rem;
    transition: border-color .15s ease-out, box-shadow .15s ease-out, background .15s ease-out;
}

input.sp-auth-input:focus,
input.sp-input:focus,
input.sp-onb-input:focus,
input.sp-search:focus,
select.sp-input:focus,
select.sp-filter-select:focus,
select.sp-onb-input:focus,
textarea.sp-input:focus,
.sp-auth-card input:focus,
.sp-form-section input:focus,
.sp-form-section select:focus,
.sp-onb-card input:focus,
.sp-onb-card select:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    background: white;
}

input.sp-auth-input::placeholder,
input.sp-input::placeholder,
input.sp-onb-input::placeholder,
input.sp-search::placeholder,
.sp-auth-card input::placeholder,
.sp-form-section input::placeholder,
.sp-onb-card input::placeholder {
    color: #94A3B8;
    opacity: 1;
}

/* Validation-state — wordt door Blazor's ValidationMessage geset */
.sp-form-section input.invalid,
.sp-form-section select.invalid,
.sp-auth-card input.invalid {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* Tabel-inputs (in Templates inputs-rows) ook lichte achtergrond */
.sp-input-row input,
.sp-input-row select {
    background: #FAFBFC;
    color: #0F172A;
    border: 1px solid #E2E8F0;
}