/*
 * Duidelijker zichtbare veldranden.
 *
 * De formuliervelden gebruiken overal `border-brand-200` (#adcbd8): op een
 * witte achtergrond is dat te vaag, je ziet de kaders nauwelijks. De
 * Tailwind-build is voorgecompileerd, dus we kunnen die utility-klasse niet
 * opnieuw genereren -- daarom hier een globale override met `!important`
 * zodat hij wint van de utility-klasse. De focus-kleur (brand-500) en de
 * focus-ring (box-shadow) laten we intact.
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
textarea,
select {
    /* Sommige velden (x-text-input) zetten wel een border-KLEUR maar geen
     * border-breedte; dan is de rand 0px en zie je niets. Daarom forceren we
     * hier breedte + stijl, plus een duidelijk zichtbare kleur. */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #3f7184 !important; /* staalblauw, duidelijk zichtbaar op wit */
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):hover,
textarea:hover,
select:hover {
    border-color: #497a8c !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
textarea:focus,
select:focus {
    border-color: #2f6c85 !important; /* brand-500: focusaccent behouden */
}