/*
 * 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 */
}

/*
 * Mobiel (2026-11-02): tabellen staan in kaarten met `overflow-hidden`;
 * op een smal scherm werden kolommen daardoor afgeknipt. Nu scrolt de
 * tabel binnen de kaart horizontaal. (!important wint van de utility.)
 */
@media (max-width: 1024px) {
    div:has(> table),
    section:has(> table) { overflow-x: auto !important; }
}
@media (max-width: 640px) {
    main form.flex { flex-wrap: wrap; }
    main .w-64, main .w-72, main .w-80, main .w-96 { max-width: 100%; }
}
@media (max-width: 640px) {
    /* Tabelcellen hebben op desktop ruime px-6; op een telefoon kost dat een kolom. */
    main :is(td, th):is(.px-6, .px-5, .px-4) { padding-left: .6rem !important; padding-right: .6rem !important; }
    main :is(td, th):is(.pl-6, .pl-5) { padding-left: .75rem !important; }
    main :is(td, th):is(.py-4) { padding-top: .6rem !important; padding-bottom: .6rem !important; }
}
/* Hulpklassen (Tailwind-build is voorgecompileerd): kolom alleen op desktop / blok alleen op mobiel. */
.kp-mobile-only { display: none; }
@media (max-width: 640px) {
    .kp-desktop-col { display: none !important; }
    .kp-mobile-only { display: block; }
}

/* Taalkeuze NL/EN (x-lang-switch), gelijk aan knippin.eu */
.lang-switch { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; background: #f8fafc; vertical-align: middle; }
.lang-btn { color: #475569 !important; font-size: 11.5px; font-weight: 700; padding: 5px 9px; letter-spacing: .04em; text-decoration: none !important; line-height: 1.2; }
.lang-btn:hover { color: #0f172a !important; background: #e2e8f0; }
.lang-btn.active { background: #ec3013; color: #fff !important; }
.top-bar .lang-switch { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); margin-left: 4px; }
.top-bar .lang-btn { color: #cbd5e1 !important; padding: 3px 7px; font-size: 11px; }
.top-bar .lang-btn:hover { color: #fff !important; background: rgba(255,255,255,.14); }
.top-bar .lang-btn.active { color: #fff !important; }