/* SimplyOrder. Kleuren en vormentaal volgen nesto.be: het diepblauw en het
   groen komen rechtstreeks uit hun stylesheet (--primary-color/--secondary-color),
   het rood is hun schaarse alarmkleur (enkel gebruikt op "Emergency?") en het
   frosted-glass effect op hun bovenbalk (bg-blur-white) komt hier terug op de
   linkse menubalk en op vastgezette tabelkoppen. */

:root {
  --diepblauw: #1e1473;
  --diepblauw-donker: #151a47;
  --nesto-blauw: #232c77;
  --accent: #00b2ff;
  --accent-donker: #0093d4;
  --achtergrond: #f4f4f8;
  --vlak: #ffffff;
  --vlak-zacht: #fbfbfd;
  --tekst: #23282f;
  --tekst-zacht: #4a5464;
  --grijs: #728197;
  --rand: #e2e3ec;
  --rand-zacht: #eeeef4;
  --groen: #5fb670;
  --groen-donker: #479156;
  --groen-zacht: #e9f6ec;
  --rood: #d2412f;
  --rood-fel: #fd5454;
  --rood-zacht: #fdecea;
  --oranje: #b7791f;
  --oranje-zacht: #fdf3e2;
  --schaduw: 0 1px 2px rgba(30, 20, 115, .04), 0 8px 24px rgba(30, 20, 115, .06);
  --schaduw-hoog: 0 2px 6px rgba(30, 20, 115, .08), 0 18px 40px rgba(30, 20, 115, .12);
  --radius: 14px;
  --radius-klein: 9px;
  --zijbalk: 262px;
  --gemak: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--diepblauw); margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }

a:focus-visible, button:focus-visible, .knop:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--groen);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- Geraamte */

/* Zachte, vaste kleurwas achter de hele app. Bijna overal onzichtbaar, maar
   schijnt door de vervaagde menubalk heen, net als de gekleurde accenten die
   bij Nesto door hun eigen frosted-glass balk priemen. */
.waas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 0% 0%, rgba(95, 182, 112, .30), transparent 60%),
    radial-gradient(620px 520px at 10% 100%, rgba(0, 178, 255, .22), transparent 65%),
    radial-gradient(500px 500px at 100% 30%, rgba(35, 44, 119, .10), transparent 70%);
}

.app {
  display: grid;
  grid-template-columns: var(--zijbalk) 1fr;
  min-height: 100vh;
}

.zijbalk {
  position: relative;
  color: #fff;
}
@media (min-width: 901px) {
  .zijbalk { position: sticky; top: 0; height: 100vh; }
}

/* Het glaspaneel is een losse laag onder de inhoud: zo blurt en tint hij wat
   er via .waas achter zit, in plaats van een vlak blok navy te zijn. */
.zijbalk-glas {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(480px 300px at 10% -5%, rgba(95, 182, 112, .18), transparent 62%),
    radial-gradient(420px 260px at 100% 110%, rgba(0, 178, 255, .12), transparent 65%),
    linear-gradient(168deg, rgba(30, 20, 115, .94), rgba(21, 26, 71, .96) 55%, rgba(14, 16, 52, .97));
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .07);
  will-change: transform;
}
@supports not (backdrop-filter: blur(1px)) {
  .zijbalk-glas { background: var(--diepblauw); }
}

.zijbalk-inhoud {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 16px;
}

.merk { display: flex; align-items: center; gap: 12px; padding: 0 6px 22px; }
.merk-icoon { display: block; flex: 0 0 auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .2)); }
/* "Simply" regular, "Order" bold: hetzelfde contrast als in het aangeleverde
   logo, maar met ons eigen systeemlettertype in plaats van het Poppins uit dat
   bestand, dat de app van het web zou moeten halen. */
.merk-naam { font-weight: 400; font-size: 16px; line-height: 1.2; }
.merk-naam strong { font-weight: 700; }
.merk-onder { font-size: 12px; color: rgba(255, 255, 255, .6); }

/* Taalkiezer: vier korte knoppen op een rij, altijd zichtbaar, meteen onder
   het eigen merk. Eén klik wisselt de hele interface, zonder submenu. */
.taal-kiezer {
  display: flex; gap: 4px;
  padding: 0 6px 20px;
  margin-bottom: 4px;
}
.taal-kiezer button {
  flex: 1 1 0;
  padding: 6px 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .68);
  font: inherit; font-size: 12px; font-weight: 650; letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s var(--gemak), color .16s var(--gemak), border-color .16s var(--gemak);
}
.taal-kiezer button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.taal-kiezer button.actief { background: #fff; color: var(--diepblauw); border-color: #fff; }

/* Onderaan de balk, gecentreerd: enkel het logo, een rustige verwijzing naar
   het netwerk waar de praktijk deel van uitmaakt, niet naar de eigen
   productidentiteit daarboven. */
.netwerk {
  display: flex; justify-content: center;
  padding: 14px 6px 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.netwerk img { display: block; opacity: .85; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px 10px 15px;
  border-radius: var(--radius-klein);
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  transition: background .16s var(--gemak), color .16s var(--gemak), transform .16s var(--gemak);
}
.nav a::before {
  content: "";
  position: absolute; left: 3px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px;
  background: var(--groen);
  transform: scaleY(0);
  transition: transform .18s var(--gemak);
}
.nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; transform: translateX(2px); }
.nav a:hover .ico { transform: scale(1.08); opacity: 1; }
.nav a.actief {
  background: #fff; color: var(--diepblauw); font-weight: 640;
  box-shadow: 0 8px 20px rgba(8, 10, 34, .28);
}
.nav a.actief::before { transform: scaleY(1); }
.nav a.actief .ico { opacity: 1; }
.ico { width: 19px; height: 19px; flex: 0 0 19px; opacity: .85; transition: transform .18s var(--gemak), opacity .16s; }
.nav-badge {
  margin-left: auto;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 11px;
  background: var(--groen); color: #fff;
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  transition: transform .16s var(--gemak);
}
.nav a.actief .nav-badge { background: var(--diepblauw); color: #fff; }
.nav-badge.bump { animation: badge-bump .32s var(--gemak); }
@keyframes badge-bump { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

.zijbalk-voet {
  margin-top: auto;
  padding: 14px 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}
.zijbalk-voet button {
  margin-top: 10px;
  width: 100%;
  background: rgba(255, 255, 255, .1);
  border: 0; color: rgba(255, 255, 255, .8);
  padding: 8px; border-radius: var(--radius-klein);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: background .16s var(--gemak), color .16s var(--gemak), transform .12s var(--gemak);
}
.zijbalk-voet button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.zijbalk-voet button:active { transform: translateY(1px); }

/* Geen eigen scheidingslijn: .netwerk erboven heeft er al een, samen vormen ze
   één rustig blokje onderaan. */
.ds-credit {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 2px; padding-bottom: 2px;
  font-size: 11px; color: rgba(255, 255, 255, .5);
  text-decoration: none;
  opacity: .78;
  transition: opacity .18s var(--gemak), color .18s var(--gemak);
}
.ds-credit img { display: block; opacity: .85; }
.ds-credit:hover { opacity: 1; color: rgba(255, 255, 255, .88); }

.inhoud {
  position: relative; z-index: 1;
  background: var(--achtergrond);
  padding: 30px 34px 60px; max-width: 1240px; width: 100%;
  /* Zonder dit weigert een grid-kolom smaller te worden dan haar inhoud. Een
     brede tabel duwt dan de hele pagina opzij in plaats van binnen haar eigen
     .tabel-omhulsel te schuiven. */
  min-width: 0;
}
.kop { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.kop-tekst { flex: 1 1 320px; }
.kop-tekst p { color: var(--grijs); font-size: 14px; margin-top: 3px; }
.kop-acties { display: flex; gap: 9px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Kaarten */

.kaart {
  background: var(--vlak);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  border: 1px solid var(--rand-zacht);
  overflow: hidden;
}
.kaart + .kaart { margin-top: 18px; }
.kaart-kop {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rand-zacht);
  background: var(--vlak-zacht);
  flex-wrap: wrap;
}
.kaart-kop h2 { flex: 1 1 auto; }
.kaart-lijf { padding: 20px; }
.kaart-lijf.strak { padding: 0; }

/* -------------------------------------------------------------------- Knoppen */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  padding: 9px 16px;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .16s var(--gemak), border-color .16s var(--gemak), color .16s var(--gemak),
              transform .12s var(--gemak), box-shadow .18s var(--gemak);
  white-space: nowrap;
}
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(1px) scale(.98); }
.knop-vol { background: var(--diepblauw); color: #fff; }
.knop-vol:hover { background: var(--diepblauw-donker); box-shadow: 0 8px 18px rgba(30, 20, 115, .3); }
.knop-accent { background: linear-gradient(135deg, var(--groen), var(--groen-donker)); color: #fff; }
.knop-accent:hover { background: linear-gradient(135deg, var(--groen-donker), var(--groen-donker)); box-shadow: 0 8px 18px rgba(95, 182, 112, .38); }
.knop-rand { background: #fff; color: var(--diepblauw); border-color: var(--rand); }
.knop-rand:hover { border-color: var(--diepblauw); background: var(--vlak-zacht); box-shadow: 0 6px 14px rgba(30, 20, 115, .1); }
.knop-zacht { background: var(--rand-zacht); color: var(--tekst-zacht); }
.knop-zacht:hover { background: #e4e4ee; }
.knop-gevaar { background: #fff; color: var(--rood); border-color: #f2cfcb; }
.knop-gevaar:hover { background: var(--rood-fel); color: #fff; border-color: var(--rood-fel); box-shadow: 0 8px 18px rgba(253, 84, 84, .35); }
.knop-klein { padding: 6px 11px; font-size: 13px; }
.knop:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ------------------------------------------------------------------ Formulier */

label.veld { display: block; margin-bottom: 14px; }
label.veld > span {
  display: block;
  font-size: 12.5px; font-weight: 620; color: var(--tekst-zacht);
  margin-bottom: 5px; letter-spacing: .01em;
}
label.veld .hint { display: block; font-weight: 400; color: var(--grijs); font-size: 12px; margin-top: 4px; }

input[type=text], input[type=email], input[type=number], input[type=password], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: #fff;
  font: inherit; font-size: 14px;
  color: var(--tekst);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 178, 255, .16);
}
textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }

/* -------------------------------------------------------------------- Tabellen */

.tabel-omhulsel { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabel th {
  text-align: left;
  padding: 11px 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--grijs);
  /* Bewust een vlakke achtergrond, geen vervaging: bij snel scrollende rijen
     onder de kop leest een scherp afgebakende koptekst prettiger. Zie
     docs/PLAN.md 4.9 voor de volledige afweging, ook rond .zijbalk-glas. */
  background: var(--vlak-zacht);
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.tabel td { padding: 11px 16px; border-bottom: 1px solid var(--rand-zacht); vertical-align: middle; }
table.tabel tbody tr { transition: background-color .14s var(--gemak); }
table.tabel tbody tr:last-child td { border-bottom: 0; }
table.tabel tbody tr:hover { background: #fafaff; }
table.tabel tr.klikbaar { cursor: pointer; }
table.tabel tr.klikbaar:hover { background: #f2f6ff; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; font-size: 13px; }
.zacht { color: var(--grijs); }
.klein { font-size: 12.5px; }

/* --------------------------------------------------------------------- Aantal */

.aantal { display: inline-flex; align-items: center; border: 1px solid var(--rand); border-radius: var(--radius-klein); overflow: hidden; background: #fff; }
.aantal button {
  width: 32px; height: 32px;
  border: 0; background: #fff; color: var(--diepblauw);
  font-size: 17px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: background .14s var(--gemak), color .14s var(--gemak), transform .1s var(--gemak);
}
.aantal button:hover { background: var(--groen-zacht); color: var(--groen-donker); }
.aantal button:active { transform: scale(.9); }
.aantal button:disabled { color: var(--rand); cursor: not-allowed; background: #fff; transform: none; }
.aantal input {
  width: 46px; height: 32px;
  border: 0; border-left: 1px solid var(--rand); border-right: 1px solid var(--rand);
  border-radius: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 0;
}
.aantal input:focus { box-shadow: none; }

/* --------------------------------------------------------------------- Labels */

.label {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 620;
  background: var(--rand-zacht); color: var(--tekst-zacht);
  white-space: nowrap;
}
.label-groen { background: var(--groen-zacht); color: var(--groen-donker); }
.label-rood { background: var(--rood-zacht); color: var(--rood); }
.label-oranje { background: var(--oranje-zacht); color: var(--oranje); }
.label-blauw { background: #e6f6ff; color: #0072a8; }
.stip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.merkjes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }

/* --------------------------------------------------------------- Favorieten */

/* De ster is bewust grijs tot ze aanstaat: een rij vol gekleurde sterren zou de
   paar echte favorieten juist onzichtbaar maken. */
.ster {
  background: none; border: 0; padding: 4px; line-height: 0; cursor: pointer;
  color: var(--rand); border-radius: 8px;
  transition: color .14s var(--gemak), transform .14s var(--gemak);
}
.ster:hover { color: #e8a33d; transform: scale(1.15); }
.ster-aan { color: #e8a33d; }
.ster-aan svg { fill: currentColor; }
#cat-favoriet-filter { display: inline-flex; align-items: center; gap: 6px; }
#cat-favoriet-filter svg { width: 15px; height: 15px; }

input.vinkje {
  width: 17px; height: 17px; flex: 0 0 auto; margin: 0; padding: 0;
  accent-color: var(--diepblauw); cursor: pointer;
}
label.veld.schakelaar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
label.veld.schakelaar > span {
  display: inline; margin: 0;
  font-size: 14px; font-weight: 600; color: var(--tekst); cursor: pointer;
}

/* Voor koppen die er alleen voor schermlezers moeten zijn, zoals de sterkolom. */
.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------- Meldingen */

.melding {
  padding: 12px 16px; border-radius: var(--radius-klein);
  font-size: 14px; margin-bottom: 18px;
  border: 1px solid transparent;
}
.melding-info { background: #e6f6ff; border-color: #b9e6ff; color: #05506f; }
.melding-goed { background: var(--groen-zacht); border-color: #bfe8d6; color: #2c6b3a; }
.melding-waarschuwing { background: var(--oranje-zacht); border-color: #f0dcb4; color: #8a5a12; }
.melding-fout { background: var(--rood-zacht); border-color: #f5c9c3; color: #9b2c1e; }

.leeg { padding: 54px 20px; text-align: center; color: var(--grijs); }
.leeg h3 { color: var(--tekst-zacht); margin-bottom: 6px; }

/* ---------------------------------------------------------------------- Toast */

.toasts { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 60; }
.toast {
  background: rgba(21, 26, 71, .88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  padding: 12px 18px; border-radius: var(--radius-klein);
  box-shadow: var(--schaduw-hoog);
  font-size: 14px; max-width: 380px;
  animation: opkomst .2s var(--gemak);
}
.toast-fout { background: var(--rood); border-color: rgba(255, 255, 255, .16); }
.toast-goed { background: var(--groen-donker); border-color: rgba(255, 255, 255, .16); }
@keyframes opkomst { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------- Filters */

.filterbalk { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.zoek { position: relative; flex: 1 1 260px; min-width: 200px; }
.zoek input { padding-left: 36px; }
.zoek svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--grijs); pointer-events: none; }
.filterbalk select { width: auto; min-width: 170px; }

/* --------------------------------------------------------------- Mandjegroepen */

.groep-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.groep-teken {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--diepblauw); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  flex: 0 0 34px;
}

.samenvatting { display: flex; gap: 26px; flex-wrap: wrap; }
.samenvatting div { min-width: 92px; }
.samenvatting dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs); font-weight: 700; }
.samenvatting dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; }

.regelbalk { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- Modaal */

.modaal-achtergrond {
  position: fixed; inset: 0;
  background: rgba(21, 26, 71, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 24px; z-index: 70;
  animation: opkomst .12s var(--gemak);
}
.modaal {
  background: #fff; border-radius: var(--radius); box-shadow: var(--schaduw-hoog);
  width: min(520px, 100%); overflow: hidden;
  animation: modaal-op .18s var(--gemak);
}
@keyframes modaal-op { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
.modaal-lijf { padding: 24px; }
.modaal-lijf h2 { margin-bottom: 8px; }
.modaal-voet { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; background: var(--vlak-zacht); border-top: 1px solid var(--rand-zacht); }

/* ---------------------------------------------------------------------- Print */

@media print {
  .zijbalk, .kop-acties, .toasts, .waas, .niet-printen { display: none !important; }
  .app { display: block; }
  .inhoud { padding: 0; max-width: none; background: #fff; }
  .kaart { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------- Smaller */

@media (max-width: 900px) {
  /* Zonder vaste rijhoogtes deelt de grid de vrije ruimte over beide rijen en
     rekt de balk bovenaan onnodig uit. */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .zijbalk-inhoud { flex-direction: column; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav a { flex: 1 1 auto; }
  .netwerk, .zijbalk-voet { display: none; }
  .inhoud { padding: 20px 16px 48px; }
}

/* Inlogscherm (DS-SimplyOrder-Cloud, niet in de lokale app) */

#inlog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--achtergrond);
  padding: 24px;
}

.inlog-kaart {
  width: 100%;
  max-width: 360px;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-hoog);
  padding: 32px 28px;
  text-align: center;
}

.inlog-icoon { margin-bottom: 8px; }

.inlog-titel {
  margin: 0 0 24px;
  font-size: 19px;
  color: var(--diepblauw);
  font-weight: 500;
}
.inlog-titel strong { font-weight: 700; }

.inlog-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }

.inlog-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--tekst-zacht);
}

.inlog-label input {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  color: var(--tekst);
  background: var(--vlak-zacht);
}
.inlog-label input:focus {
  outline: 2px solid var(--groen);
  outline-offset: 1px;
  border-color: var(--groen);
}

.inlog-knop {
  margin-top: 4px;
  padding: 11px 16px;
  border: none;
  border-radius: var(--radius-klein);
  background: var(--groen);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s var(--gemak);
}
.inlog-knop:hover:not(:disabled) { background: var(--groen-donker); }
.inlog-knop:disabled { opacity: .6; cursor: default; }

.inlog-uitleg {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--tekst-zacht);
  text-align: left;
  line-height: 1.5;
}

.inlog-qr {
  display: block;
  margin: 0 auto 20px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}

.inlog-fout {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-klein);
  background: var(--rood-zacht);
  color: var(--rood);
  font-size: 13px;
  text-align: left;
}