/* ==========================================================================
   DropsaVET knoppen-bridge — v1.1 · 19-10-2026
   --------------------------------------------------------------------------
   Trekt de knoppen van een app naar de dv-knop-look (huisstijl-tokens, 8px
   radius, vet) zonder dat je 1.800 knopklassen in de templates hoeft te
   herschrijven. Dit is de snelle, omkeerbare manier om álle apps hetzelfde
   knopsysteem te geven.

   WAAROM EEN APART BESTAND, EN NIET IN huisstijl.css:
   in bijna elke app laadt huisstijl.css EERST en de eigen stijl van de app
   DAARNA. Alles wat in huisstijl.css staat wordt dus overschreven door de
   eigen knopregels van de app. Deze bridge moet daarom als LAATSTE laden:

     <link rel="stylesheet" href="/static/huisstijl/huisstijl.css?v=1">
     ... eigen <style>/CSS van de app ...
     <link rel="stylesheet" href="/static/huisstijl/knoppen-bridge.css?v=1">   <-- als laatste

   Vereist huisstijl.css (de --dv-* tokens). ALLEEN SKIN: achtergrond, rand,
   kleur, radius, vet — NOOIT breedte/display/padding, zodat volle-breedte-
   knoppen (btn-full), tellertjes (qty-btn) en widgets hun vorm houden.

   KLEURBETEKENIS blijft zoals de apps hem al gebruiken:
     blauw = primair   groen = akkoord/opslaan   rood = gevaar   grijs = secundair
   App-eigen widgetknoppen (foto-knop, qty-btn, keuze-btn, rma-btn, ...) worden
   NIET geraakt: die hebben per app een eigen betekenis.

   Protega gebruikt dit bestand niet (eigen huisstijl). Betalingen gebruikt al
   dv-knop rechtstreeks en heeft de bridge niet nodig.
   ========================================================================== */

/* Vorm voor alles wat een knop is (skin, geen layout) */
.btn, .knop,
.btn-primary, .btn-secondary, .btn-success, .btn-danger,
.btn-groen, .btn-rood, .btn-blauw, .btn-blue, .btn-grijs, .btn-wit, .btn-light,
.btn-primair, .btn-opslaan, .btn-wis, .btn-klein, .btn-mini, .btn-stil {
  border-radius: 8px;
}
.knop { font-weight: 600; }

/* Primair = blauw */
.btn-primary, .btn-blauw, .btn-blue, .btn-primair {
  background: var(--dv-blauw); border-color: var(--dv-blauw); color: #fff; font-weight: 600;
}
.btn-primary:hover, .btn-blauw:hover, .btn-blue:hover, .btn-primair:hover,
.btn-primary:focus, .btn-blauw:focus, .btn-blue:focus, .btn-primair:focus {
  background: var(--dv-blauw-donker); border-color: var(--dv-blauw-donker); color: #fff;
}

/* Akkoord/opslaan = groen */
.btn-success, .btn-groen {
  background: var(--dv-groen); border-color: var(--dv-groen); color: #fff; font-weight: 600;
}
.btn-success:hover, .btn-groen:hover, .btn-success:focus, .btn-groen:focus {
  background: #1f8a39; border-color: #1f8a39; color: #fff;
}

/* Gevaar = rood */
.btn-danger, .btn-rood {
  background: var(--dv-rood); border-color: var(--dv-rood); color: #fff; font-weight: 600;
}
.btn-danger:hover, .btn-rood:hover, .btn-danger:focus, .btn-rood:focus {
  background: #b80510; border-color: #b80510; color: #fff;
}

/* Secundair/annuleren = rustig, blauwe hover-affiniteit */
.btn-secondary, .btn-grijs, .btn-wit, .btn-light {
  background: #fff; border: 1px solid var(--dv-lijn); color: var(--dv-tekst); font-weight: 600;
}
.btn-secondary:hover, .btn-grijs:hover, .btn-wit:hover, .btn-light:hover {
  background: var(--dv-pagina); border-color: var(--dv-tekst-zwak); color: var(--dv-tekst);
}

/* Bootstrap outline-varianten (marge, inkoop, klanten-planning) */
.btn-outline-primary { color: var(--dv-blauw); border-color: var(--dv-blauw); }
.btn-outline-primary:hover { background: var(--dv-blauw); border-color: var(--dv-blauw); color: #fff; }
.btn-outline-danger { color: var(--dv-rood); border-color: var(--dv-rood); }
.btn-outline-danger:hover { background: var(--dv-rood); border-color: var(--dv-rood); color: #fff; }
.btn-outline-secondary { color: var(--dv-tekst-zwak); border-color: var(--dv-lijn); }
.btn-outline-secondary:hover { background: var(--dv-blauw-licht); border-color: var(--dv-blauw); color: var(--dv-blauw); }

/* Tertiair/stil = tekst zonder vlak (verbeter gebruikt btn-stil) */
.btn-stil { background: transparent; border-color: transparent; color: var(--dv-blauw); font-weight: 600; }
.btn-stil:hover { background: var(--dv-blauw-licht); }