/* ============================================================================
   UrenFlow — harmonisatielaag
   ============================================================================
   Deze stylesheet wordt als láátste in de <head> geladen, ná de inline <style>
   van de pagina zelf (zie injecteer_stijlharmonie in app.py). Dat is bewust:
   de 27 pagina's schreven elk hun eigen `.card`, `.kaart`, `.tegel` en
   `.subtitle` met eigen randen, rondingen en schaduwen. Daardoor zag hetzelfde
   onderdeel er per scherm anders uit — en dat is wat de app onrustig maakte,
   niet het fundament in urenflow.css.

   Hier staat één antwoord op die vraag: welke vorm heeft een vlak, een kop,
   een tabel. De vormtaal is die van de uitzendplanning: wit paneel, rand van
   één pixel in grijs-200, hoeken van 12px, geen schaduw. Kleur komt alleen
   waar hij iets betekent — actieblauw voor wat je kunt doen, groen/amber/rood
   voor een uitslag. Al het overige is neutraal grijs.

   Uitsluitend vorm, kleur en typografie. Niets hier verplaatst iets, verbergt
   iets of verandert gedrag — anders zou een pagina stukgaan aan een stijl.
   ========================================================================= */

/* ===== Eén vorm voor elk paneel ===========================================
   Alle namen die de pagina's door de jaren heen voor 'een wit vlak' hebben
   gebruikt, komen hier bij elkaar. Twaalf pixel ronding, dezelfde rand, geen
   schaduw — precies de kaart van het planningsdashboard.
   ========================================================================= */

.card,
.kaart,
.week-kaart,
.summary-card,
.tegel,
.stat-card {
  background: var(--uf-wit);
  border: 1px solid var(--uf-rand);
  border-radius: 12px;
  box-shadow: none;
}

/* Paneelkop: titel, dunne scheiding, dan de inhoud. Op elk scherm hetzelfde
   ritme, ook waar de pagina de onderlijn zelf had weggelaten. */
.card > h2,
.kaart > h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--uf-tekst-zacht);
  letter-spacing: -0.015em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--uf-rand-zacht);
}

/* ===== Paginatitel ========================================================
   Er stonden vijftien verschillende h1-regels in de app: 20 tot 24px, gewicht
   650 tot 800, in vier kleuren (marineblauw, bijna-zwart, staalblauw en zelfs
   oranje). Daardoor begon elk scherm anders. Eén titel voor alles: bijna-zwart
   en vet, zoals boven elk scherm van de planning. Het icoon ervoor blijft in
   actieblauw — dat is het accent.
   ========================================================================= */

main > h1,
.container > h1,
.page-header h1,
.page-head h1,
.uf-paginakop h1,
.card > h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--uf-tekst);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Het icoon voor de titel is het accent en staat daarom in actieblauw. Het mag
   nooit meekrimpen als de titel over twee regels loopt. */
main > h1 > svg,
.container > h1 > svg,
.page-header h1 > svg,
.page-head h1 > svg,
.uf-paginakop h1 > svg,
.card > h1 > svg,
main > h1 > .uf-ico,
.container > h1 > .uf-ico,
.uf-paginakop h1 > .uf-ico {
  color: var(--uf-actie);
  flex-shrink: 0;
  vertical-align: baseline;
  margin-right: 0;
}

/* De ondertitel onder een paginatitel stond in zes verschillende grijstinten. */
.subtitle,
.page-sub,
.sub {
  color: var(--uf-tekst-zwak);
  font-size: 14px;
}

/* Titel en ondertitel vormen samen één kopblok dat losstaat van de eerste
   kaart eronder. Zonder dat blok zou de `gap` van een flex-kolom tussen de
   twee regels komen te staan. */
.uf-paginakop {
  margin-bottom: 22px;
}
.uf-paginakop > * + * {
  margin-top: 4px;
}
.uf-paginakop .page-sub,
.uf-paginakop .subtitle,
main > h1 + .page-sub,
.page-header .subtitle,
.page-head .subtitle {
  margin-bottom: 0;
  max-width: 74ch;
}
main > h1 + .page-sub {
  margin-bottom: 22px;
}

/* ===== Kengetallen ========================================================
   `.tegel` (klanten) en `.summary-card` (dashboard) zijn hetzelfde onderdeel
   met twee namen: een groot getal met een label eronder. Ze markeerden hun
   status met een gekleurde linkerrand.

   In de planning kleurt zo'n kaartje in zijn geheel: een licht vlak met een
   rand in dezelfde kleurfamilie en het getal in de donkere variant. Dat leest
   in één oogopslag als 'dit is groen' in plaats van 'hier staat een streepje
   naast'. De linkerrand vervalt dus.
   ========================================================================= */

.summary-card,
.tegel {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: var(--uf-rand);
  background: var(--uf-vlak);
  padding: 16px;
}
.tegel.auto {
  background: var(--uf-goed-zacht);
  border-color: var(--uf-goed-rand);
}
.tegel.hand {
  background: var(--uf-attent-zacht);
  border-color: var(--uf-attent-rand);
}
.tegel.leeg {
  background: var(--uf-vlak);
  border-color: var(--uf-rand);
}
/* Het dashboard kent dezelfde drie soorten onder andere namen. */
.summary-card.groen {
  background: var(--uf-goed-zacht);
  border-color: var(--uf-goed-rand);
}
.summary-card.oranje {
  background: var(--uf-attent-zacht);
  border-color: var(--uf-attent-rand);
}
.summary-card.rood {
  background: var(--uf-fout-zacht);
  border-color: var(--uf-fout-rand);
}

/* Het getal zelf: één maat, één gewicht, cijfers van gelijke breedte zodat
   een rij tegels niet danst als de aantallen bijwerken. */
.tegel .cijfer,
.summary-card .summary-num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--uf-tekst-zacht);
}
.tegel.auto .cijfer { color: var(--uf-goed-tekst); }
.tegel.hand .cijfer { color: var(--uf-attent-tekst); }

/* Het label boven het getal was klein, vet en in kapitalen met spatiëring —
   een kopje dat harder riep dan het cijfer eronder. In de planning is het een
   gewone kleine grijze regel. */
.tegel .label,
.summary-card .summary-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--uf-tekst-zwak);
  text-transform: none;
  letter-spacing: 0;
}

/* ===== Tabellen ===========================================================
   Ook de tabellen die geen .tabel-klasse dragen krijgen dezelfde koprij en
   regelafstand als de rest. Geen kapitalen meer: een kolomnaam in gewone
   kleine letters leest sneller en trekt minder aandacht weg van de gegevens.
   ========================================================================= */

.card table th,
.kaart table th {
  text-align: left;
  padding: 10px 16px;
  background: var(--uf-vlak);
  border-bottom: 1px solid var(--uf-rand);
  color: var(--uf-tekst-zwak);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.card table td,
.kaart table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--uf-rand-zacht);
  vertical-align: middle;
}

/* ===== Meldingsvlakken ====================================================
   De uitslagvakken na een conversie stonden op een rand van 1,5px in felle
   kleuren. Eén pixel in de zachte statuskleuren zegt hetzelfde, rustiger.
   ========================================================================= */

.result-box {
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
}
.result-box.success { background: var(--uf-goed-zacht);   border-color: var(--uf-goed-rand);   color: var(--uf-goed-tekst); }
.result-box.error   { background: var(--uf-fout-zacht);   border-color: var(--uf-fout-rand);   color: var(--uf-fout-tekst); }
.result-box.warning { background: var(--uf-attent-zacht); border-color: var(--uf-attent-rand); color: var(--uf-attent-tekst); }

/* Het lichtblauwe instellingenblok op de klantenpagina in dezelfde neutrale
   tinten als de rest van de app. */
.config-blok {
  background: var(--uf-vlak);
  border: 1px solid var(--uf-rand);
  border-radius: 10px;
}

/* ===== Knoppen ============================================================
   Het knopsysteem in urenflow.css is compleet en blijft staan; hier alleen de
   pagina's die hun knoppen zelf nog een schaduw, een zwaarder gewicht of een
   andere ronding gaven. Een knop die zweeft hoort bij een ontwerp met diepte,
   en dat is precies wat we hier loslaten: een volle kleur draagt de aandacht
   al.
   ========================================================================= */

.btn, .btn-primary, .btn-merk, .btn-primair,
.btn-secondary, .btn-outline, .btn-danger, .btn-gevaar,
.btn-success, .btn-groen, .btn-export, .btn-gebruik,
.btn-login, .btn-convert, .btn-save-nk, .btn-hf, .btn-verwerken,
.btn-ophalen, .btn-aanvul-export, .btn-pick, .download-btn, .btn-blauw,
.btn-del, .btn-verwijder, .btn-upload, .btn-toggle, .btn-huidig,
.btn-terug, .btn-wis, .btn-opnieuw,
.btn-light, .icon-btn {
  border-radius: 8px;
  box-shadow: none;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Nog een handvol pagina's tekent zijn hoofdknop rechtstreeks in marineblauw.
   Marineblauw is het merk, niet de actie — die knoppen worden actieblauw. */
.btn-primary, .btn-merk, .btn-primair,
.btn-login, .btn-convert, .btn-save-nk, .btn-hf, .btn-verwerken,
.btn-ophalen, .btn-aanvul-export, .btn-pick, .download-btn, .btn-blauw {
  background: var(--uf-actie);
  border-color: var(--uf-actie);
  color: #fff;
}
.btn-primary:hover, .btn-merk:hover, .btn-primair:hover,
.btn-login:hover, .btn-convert:hover, .btn-save-nk:hover, .btn-hf:hover,
.btn-verwerken:hover, .btn-ophalen:hover, .btn-aanvul-export:hover,
.btn-pick:hover, .download-btn:hover, .btn-blauw:hover {
  background: var(--uf-actie-hover);
  border-color: var(--uf-actie-hover);
  color: #fff;
}

/* De lichte knop uit de Jinja-basis: wit met een rand, zoals elke nevenactie. */
.btn-light {
  background: var(--uf-wit);
  border: 1px solid var(--uf-rand-sterk);
  color: var(--uf-tekst-zacht);
}
.btn-light:hover { background: var(--uf-vlak); color: var(--uf-tekst); }

/* Een knop met alleen een icoontje: vierkant, grijs, en pas kleur bij
   aanwijzen. */
.icon-btn {
  border: 1px solid var(--uf-rand);
  background: var(--uf-wit);
  color: var(--uf-tekst-zwak);
}
.icon-btn:hover {
  background: var(--uf-vlak);
  border-color: var(--uf-rand-sterk);
  color: var(--uf-tekst);
}

/* ===== Invoervelden =======================================================
   De pagina's tekenden hun velden met randen van anderhalve pixel in twee
   grijstinten, met rondingen van 7, 8 of 10px. Anderhalve pixel is net genoeg
   om zwaar te ogen zonder scherper te zijn; één pixel in dezelfde rand als een
   paneel zet het veld op zijn plaats zonder het te laten schreeuwen.
   Selectievakjes en keuzerondjes blijven buiten schot — die tekent de browser.
   ========================================================================= */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="tel"],
input[type="url"],
select,
textarea,
.veld {
  border: 1px solid var(--uf-rand-sterk);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--uf-tekst);
  background: var(--uf-wit);
}

/* Eén ring bij aanwijzen met het toetsenbord, overal dezelfde. */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.veld:focus {
  outline: none;
  border-color: var(--uf-actie);
  box-shadow: var(--uf-ring);
}

/* Aan/uit-vinkjes en keuzerondjes in de actiekleur. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--uf-actie); }

/* ===== Tabellen met een eigen naam ========================================
   Zeven tabellen droegen elk hun eigen koprij: lichtgrijs, blauwgrijs, en op
   de pandenpagina zelfs vol marineblauw met witte letters. Die laatste trok
   alle aandacht naar de kolomnamen in plaats van naar de gegevens eronder.
   Eén koprij voor alles: klein, grijs, gewone letters — een label boven een
   kolom, geen balk.
   ========================================================================= */

.klanten-table th,
.panden-table th,
.rf-table th,
.nk-table th,
.log-table th,
.dagtabel th,
.aanvul-tabel thead th {
  background: var(--uf-vlak);
  color: var(--uf-tekst-zwak);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--uf-rand);
}

.klanten-table td,
.panden-table td,
.rf-table td,
.log-table td,
.dagtabel td,
.aanvul-tabel td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--uf-rand-zacht);
  vertical-align: middle;
}

/* De naamkoppeltabel draagt invoervelden in smalle kolommen; daar is veertien
   pixel opzij te veel van het goede. */
.nk-table td { padding: 6px 8px; border-bottom: 1px solid var(--uf-rand-zacht); }

/* Een rij die oplicht als je erover gaat — hetzelfde signaal als in .tabel. */
.klanten-table tbody tr:hover,
.panden-table tbody tr:hover,
.rf-table tbody tr:hover,
.log-table tbody tr:hover { background: var(--uf-vlak); }

/* ===== Sleepvlakken =======================================================
   Drie namen voor hetzelfde vak (`.drop-zone`, `.upload-drop`, `.dropzone`),
   met stippellijnen van anderhalf tot tweeënhalve pixel in drie kleuren en
   rondingen van 10 tot 12px. Eén vak, en pas als je een bestand erboven houdt
   kleurt hij op — dan zegt de kleur iets.
   ========================================================================= */

.drop-zone,
.upload-drop,
.dropzone {
  border: 1.5px dashed var(--uf-rand-sterk);
  border-radius: 12px;
  background: var(--uf-vlak);
  padding: 28px 18px;
  color: var(--uf-tekst-zwak);
}

.drop-zone:hover,
.upload-drop:hover,
.dropzone:hover,
.drop-zone.dragover,
.drop-zone.drag-over,
.upload-drop.drag-over,
.dropzone.over {
  border-color: var(--uf-actie);
  background: var(--uf-actie-zacht);
  color: var(--uf-actie-tekst);
}

/* Het gekozen bestand onder een sleepvlak. */
.current-file,
.bestand-chip {
  background: var(--uf-vlak);
  border: 1px solid var(--uf-rand);
  color: var(--uf-tekst-zacht);
}

/* ===== Chips en badges ====================================================
   In de planning is een chip een pil: volledig rond, grijs vlak, kleine tekst.
   Dat is de vorm die hier terugkomt — ook voor de statuslabels, die eerder
   hoekige blokjes in kapitalen waren. De kleuren die een filter aanzetten of
   een status aangeven blijven onaangeroerd, want die dragen betekenis.
   ========================================================================= */

.filter-chip,
.filter-btn,
.filter-tab,
.filter-reset,
.chip,
.stat-pill,
.bestand-chip,
.week-badge,
.soortknop {
  border-radius: 999px;
  border-width: 1px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
}

.chip {
  background: var(--uf-vlak-diep);
  border-color: transparent;
  color: var(--uf-tekst-zacht);
}

/* `.stat-chip` heet wel een chip, maar is een kengetal-kaartje: een label met
   een groot getal eronder. Als pil zou dat een vreemde ovaal worden, dus het
   krijgt de vorm van de andere kengetallen. */
.stat-chip {
  background: var(--uf-vlak);
  border: 1px solid var(--uf-rand);
  border-radius: 12px;
  box-shadow: none;
  padding: 16px;
}
.stat-chip .value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--uf-tekst-zacht);
}
.stat-chip.rood { background: var(--uf-fout-zacht);   border-color: var(--uf-fout-rand); }
.stat-chip.geel { background: var(--uf-attent-zacht); border-color: var(--uf-attent-rand); }

.badge,
.badge-mail, .badge-upload, .badge-nieuw,
.badge-admin, .badge-manager, .badge-user,
.badge-2fa-ok, .badge-2fa-no,
.badge-recht, .badge-geen, .badge-gewerkt, .badge-doorbetaald, .badge-twijfel,
.section-badge, .versie-badge, .versie-nr-lbl,
.versie-huidig-lbl, .versie-type-lbl,
.week-lopend, .tel, .rf-score {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Een keuzerij van kandidaten: zelfde rand als een veld, zelfde ronding. */
.kandrij {
  border-width: 1px;
  border-radius: 8px;
}

/* ===== Tabbladen ==========================================================
   Een actief tabblad had zowel een gekleurde onderlijn als een lichtblauw
   vlak eronder — twee keer hetzelfde zeggen. De lijn is genoeg.
   ========================================================================= */

.tab-btn {
  background: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--uf-tekst-zwak);
}
.tab-btn.active {
  background: none;
  color: var(--uf-actie);
  font-weight: 600;
  border-bottom-color: var(--uf-actie);
}

/* ===== Meldingen ==========================================================
   De flash-balken stonden op anderhalve pixel in eigen groen- en roodtinten,
   los van de statuskleuren die de rest van de app gebruikt.
   ========================================================================= */

.flash,
.melding {
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
}
.flash.ok  { background: var(--uf-goed-zacht); border-color: var(--uf-goed-rand); color: var(--uf-goed-tekst); }
.flash.err { background: var(--uf-fout-zacht); border-color: var(--uf-fout-rand); color: var(--uf-fout-tekst); }

/* Een leeg scherm ('nog geen gegevens') stond in verschillende grijzen. */
.empty {
  color: var(--uf-tekst-zwak);
  background: var(--uf-vlak);
  border-radius: 12px;
}

/* ===== Dichtheid ==========================================================
   De planning geeft een scherm meer lucht dan wij deden: een paneel is 16px
   van binnen, panelen staan 20px uit elkaar, en de inhoud staat gecentreerd
   in een kolom. Dat leest rustiger dan gegevens die tot de rand doorlopen.

   Alleen verticale ruimte wordt hier geregeld. De horizontale marges blijven
   staan, want daar hangt de breedte van de werkbalk aan (drie pagina's zetten
   hun hele inhoud opzij met `margin-left: 230px`); die overschrijven zou de
   zijbalk over de inhoud heen leggen.
   ========================================================================= */

/* Niet elke pagina heeft de `* { margin: 0 }`-reset in zijn eigen stijlblok;
   zonder deze regel begint de inhoud daar 8px lager dan op de rest. */
body { line-height: 1.55; background: var(--uf-achtergrond); margin: 0; }

main,
.container {
  padding-top: 24px;
  padding-bottom: 48px;
}

/* Panelen op afstand van elkaar. Beide manieren waarop de pagina's dat regelen
   — een `gap` in de kolom, of een marge onder de kaart zelf. */
.container { row-gap: 20px; }
.card,
.kaart,
.week-kaart,
.summary-card {
  margin-bottom: 20px;
}

.card,
.kaart {
  padding: 20px;
}

/* De kop van een paneel op vaste afstand van zijn inhoud. */
.card > h2,
.kaart > h2 {
  margin-bottom: 16px;
  padding-bottom: 12px;
}

/* Titel en ondertitel boven aan een scherm. */
.uf-paginakop,
.page-header { margin-bottom: 20px; }
.subtitle,
.page-sub,
.sub { margin-bottom: 20px; }

/* Tabelrijen. */
.tabel td,
.card table td,
.kaart table td { padding-top: 12px; padding-bottom: 12px; }
.tabel th,
.card table th,
.kaart table th { padding-top: 10px; padding-bottom: 10px; }

/* ===== Vensters ===========================================================
   Een modaal venster mag wél zweven — daar draagt de schaduw betekenis: het
   ligt boven de pagina.
   ========================================================================= */

.modal-overlay { background: rgba(0, 0, 0, 0.35); }
.modal-box {
  border-radius: 12px;
  border: 1px solid var(--uf-rand);
  box-shadow: var(--uf-schaduw-l);
}

/* Eén venster had een volblauwe kopbalk met witte letters, de andere een witte
   kop met een lijn eronder. Het wordt de witte: het venster zelf is al de
   nadruk, de balk hoeft dat niet te herhalen. Let op de sluitknop — die stond
   op wit omdat de balk blauw was, en zou anders onzichtbaar worden. */
.modal-header {
  background: var(--uf-wit);
  color: var(--uf-tekst);
  border-bottom: 1px solid var(--uf-rand-zacht);
  padding: 16px 20px;
}
.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--uf-tekst);
}
.modal-header .modal-close,
.modal-close {
  color: var(--uf-tekst-dun);
  background: none;
}
.modal-header .modal-close:hover,
.modal-close:hover {
  color: var(--uf-fout-tekst);
}
.modal-footer {
  background: var(--uf-vlak);
  border-top: 1px solid var(--uf-rand-zacht);
}

/* ===== Kleine kopjes ======================================================
   Overal in de app stonden labels en kolomnamen in kapitalen van tien of elf
   pixel, vetgedrukt en met extra letterafstand: BESTAND, CONTRACTEN, KLANT.
   Zo'n regeltje roept harder dan de gegevens eronder, terwijl het maar een
   naambordje is. In de planning bestaat die vorm niet — daar is een label
   gewoon kleine grijze tekst.

   Alleen vorm: de tekst zelf blijft staan zoals de pagina hem schrijft.
   Initialen in een rondje (avatars) blijven wél kapitaal; dat is geen kopje.
   ========================================================================= */

label,
th,
.rf-stat__lbl,
.summary-lbl,
.summary-label,
.stat label,
.stat .lbl,
.ctx-badge .ctx-label,
.stat-chip .label,
.form-group label,
.form-field label,
.upload-item label,
.section-label,
.veld-label {
  text-transform: none;
  letter-spacing: 0;
}

/* De maat en het gewicht erbij: elf pixel vet wordt dertien pixel normaal. */
label,
.form-group label,
.form-field label,
.upload-item label,
.veld-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--uf-tekst-zacht);
}

.rf-stat__lbl,
.summary-lbl,
.summary-label,
.stat label,
.ctx-badge .ctx-label,
.stat-chip .label,
.section-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--uf-tekst-zwak);
}

/* Kolomnamen: dezelfde maat als een label, links uitgelijnd, op een licht
   vlak — en geen dubbele onderlijn meer. */
th {
  font-size: 12px;
  font-weight: 600;
  color: var(--uf-tekst-zwak);
  background: var(--uf-vlak);
  border-bottom: 1px solid var(--uf-rand);
}

/* Kaarttitels dragen geen merkkleur — die is voorbehouden aan het logo, het
   actieve menu-item en de avatar. Een titel is gewoon donkere tekst. */
.week-titel,
.week-label,
.card-title,
.kaart-titel,
.panel-title {
  color: var(--uf-tekst);
  font-size: 16px;
  font-weight: 600;
}

/* Een knop zonder eigen soort valt terug op het grijs van de browser. Geef
   hem dezelfde neutrale vorm als een secundaire knop. */
.btn-sm:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-light) {
  background: var(--uf-wit);
  color: var(--uf-tekst-zacht);
  border: 1px solid var(--uf-rand-sterk);
  border-radius: var(--uf-radius);
  font-weight: 500;
}
.btn-sm:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-light):hover {
  background: var(--uf-vlak-diep);
  color: var(--uf-tekst);
}
