/* ============================================================================
   UrenFlow — stijlfundament
   ============================================================================
   Eén bron voor kleuren, typografie en basiscomponenten van álle pagina's.
   Wordt automatisch in elke <head> geladen (zie injecteer_stijlfundament in
   app.py), vóór de inline <style> van de pagina zelf. Een pagina kan dus nog
   afwijken waar dat nodig is; wat de pagina's onderling scheeftrekt, wordt
   daarna weer rechtgetrokken door static/urenflow-harmonie.css.

   Het ontwerp volgt de uitzendplanning: een wítte zijbalk naast een lichtgrijs
   werkvlak. Dat is de omkering van de oude opzet met een donker marineblauw
   paneel — en het is bewust. In de planning-app is marineblauw (#003087) het
   merk dat je alleen ziet waar het iets betekent: het logo, het actieve
   menu-item, een avatar. De rest is rustig grijs, zodat de gegevens op het
   scherm de enige kleur in beeld zijn. Helderblauw (#2563eb) is de kleur van
   een actie: een knop die iets start, een link, een actieve tab.

   De vormtaal is die van Tailwind, want daar is de planning-app in gebouwd:
   randen van 1px in grijs-200, hoeken van 12px op een paneel en 8px op een
   knop, en geen schaduwen. Een dunne rand tekent een vlak scherper af dan een
   zweem eronder, en houdt een druk scherm rustig.
   ========================================================================= */

:root {
  /* Merk — marineblauw. Alleen voor identiteit: logo, actief menu-item,
     avatar. Nooit voor een gewone knop; daar is actieblauw voor. */
  --uf-merk:          #003087;
  --uf-merk-donker:   #00246a;
  --uf-merk-zacht:    #eef3fc;

  /* Actie — helderblauw (Tailwind blue-600/700). Elke knop die iets doet. */
  --uf-actie:         #2563eb;
  --uf-actie-hover:   #1d4ed8;
  --uf-actie-zacht:   #eff6ff;
  --uf-actie-rand:    #bfdbfe;
  --uf-actie-tekst:   #1d4ed8;

  /* Zijbalk — wit paneel. Dezelfde neutrale schaal als de rest van het scherm,
     met een eigen randkleur die net iets blauwer is dan grijs-200; dat maakt
     de scheiding tussen menu en werkvlak zichtbaar zonder een lijn te trekken
     die opvalt. */
  --uf-zijbalk:        #ffffff;
  --uf-zijbalk-rand:   #e4eaf2;
  --uf-zijbalk-tekst:  #506080;
  --uf-zijbalk-fel:    #003087;
  --uf-zijbalk-vlak:   #eef3fc;
  --uf-zijbalk-actief: #003087;
  --uf-zijbalk-sub:    #6b7a99;
  --uf-zijbalk-sub-actief: #e8edff;

  /* Neutrale schaal — tekst (Tailwind gray-900 t/m gray-400) */
  --uf-tekst:         #111827;
  --uf-tekst-zacht:   #374151;
  --uf-tekst-zwak:    #6b7280;
  --uf-tekst-dun:     #9ca3af;

  /* Neutrale schaal — vlakken en randen (gray-50 t/m gray-300) */
  --uf-achtergrond:   #f9fafb;
  --uf-vlak:          #f9fafb;
  --uf-vlak-diep:     #f3f4f6;
  --uf-wit:           #ffffff;
  --uf-rand:          #e5e7eb;
  --uf-rand-zacht:    #f3f4f6;
  --uf-rand-sterk:    #d1d5db;

  /* Status — de vier kleuren van de planning-app: groen, amber, rood, blauw.
     Elk met een vlak, een rand en een tekstkleur, zodat een melding of badge
     altijd uit hetzelfde drietal is opgebouwd. */
  --uf-goed:          #16a34a;
  --uf-goed-tekst:    #15803d;
  --uf-goed-zacht:    #f0fdf4;
  --uf-goed-rand:     #bbf7d0;
  --uf-attent:        #d97706;
  --uf-attent-tekst:  #b45309;
  --uf-attent-zacht:  #fffbeb;
  --uf-attent-rand:   #fde68a;
  --uf-fout:          #dc2626;
  --uf-fout-tekst:    #b91c1c;
  --uf-fout-zacht:    #fef2f2;
  --uf-fout-rand:     #fecaca;

  /* Vorm — Tailwind-rondingen. Een paneel is rounded-xl (12px), een knop of
     veld rounded-lg (8px), een menu-item 9px. Schaduwen staan op none: de
     panelen dragen hun eigen rand. De variabelen blijven bestaan omdat de
     pagina's ze aanroepen; ze zijn alleen leeg. */
  --uf-radius-s:      8px;
  --uf-radius:        8px;
  --uf-radius-l:      12px;
  --uf-schaduw:       none;
  --uf-schaduw-m:     none;
  --uf-schaduw-l:     0 20px 25px -5px rgba(17, 24, 39, 0.10),
                      0 8px 10px -6px rgba(17, 24, 39, 0.10);
  --uf-ring:          0 0 0 3px rgba(37, 99, 235, 0.30);

  /* Typografie — Inter, net als de planning-app. Staat hij niet op het
     systeem, dan de systeemletter (SF Pro op macOS, Segoe UI op Windows). */
  --uf-font: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, Helvetica, Arial, sans-serif;
  --uf-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ===== Basis ============================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--uf-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--uf-tekst);
  background: var(--uf-achtergrond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { letter-spacing: -0.02em; }

/* Cijfers overal even breed, zodat kolommen niet dansen bij het bijwerken. */
td, th, .waarde, .uf-telling, .sidebar-telbadge { font-variant-numeric: tabular-nums; }

/* Eén zichtbare focusring voor toetsenbordbediening. */
:focus-visible { outline: 2px solid var(--uf-actie); outline-offset: 2px; }


/* ===== Zijbalk ============================================================
   Wit paneel van 230px, ingeklapt 58px. De scheiding met het werkvlak is een
   dunne rand plus een brede, bijna onzichtbare schaduw in merkkleur — dat
   tilt het menu net genoeg op om als eigen laag te lezen, zonder een grijze
   band te trekken.

   Een menu-item is grijsblauwe tekst; aanwijzen geeft een lichtblauw vlak,
   het actieve item is volledig marineblauw met witte tekst. Zo is er precies
   één gekleurd blok in het menu: waar je bent.
   ========================================================================= */

.sidebar-toggle-input { display: none; }
.sidebar-toggle-btn {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 200;
  background: var(--uf-merk); border: none; border-radius: 9px;
  width: 40px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 48, 135, 0.25);
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35); z-index: 99; cursor: pointer;
}
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 230px;
  background: var(--uf-zijbalk); border-right: 1px solid var(--uf-zijbalk-rand);
  box-shadow: 2px 0 20px rgba(0, 48, 135, 0.08);
  display: flex; flex-direction: column; z-index: 100; overflow: hidden;
  transition: width 0.2s ease-out, transform 0.2s ease-out;
}
.sidebar-logo {
  padding: 18px 20px; border-bottom: 1px solid #f0f3f8;
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-brand {
  font-size: 21px; font-weight: 800; color: var(--uf-merk);
  text-decoration: none; letter-spacing: -0.03em; white-space: nowrap;
}
/* Het tweede woord van het logo in actieblauw — hetzelfde accent als
   "Uitzend|planning" in de planning-app. */
.sidebar-brand span { color: var(--uf-actie); }
.sidebar-nav {
  flex: 1; padding: 14px 10px; display: flex; flex-direction: column;
  gap: 2px; overflow-y: auto; overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--uf-rand); border-radius: 999px;
}
.sidebar-link {
  position: relative;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 9px; color: var(--uf-zijbalk-tekst); text-decoration: none;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.sidebar-link svg { flex-shrink: 0; }
.sidebar-link:hover {
  background: var(--uf-zijbalk-vlak); color: var(--uf-zijbalk-fel);
}
/* Actief: het menu-item is zelf het merkvlak. Geen streepje ernaast meer —
   een volledig gevuld item is op een witte zijbalk al onmiskenbaar. */
.sidebar-link.active {
  background: var(--uf-zijbalk-actief); color: #fff; font-weight: 600;
}
.sidebar-link.active svg { stroke: #fff; }

/* Telbadge achter een menu-item: aantal punten dat aandacht vraagt. */
.sidebar-telbadge {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: #dc2626; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1.6; text-align: center;
}
.sidebar-link.active .sidebar-telbadge { background: #fff; color: var(--uf-merk); }
.sidebar-sep { height: 1px; background: #eef1f7; margin: 6px 4px; }
.sidebar-footer {
  padding: 12px 10px; border-top: 1px solid #f0f3f8;
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-radius: 9px; color: var(--uf-zijbalk-tekst); text-decoration: none;
  font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s;
}
.sidebar-user:hover { background: var(--uf-zijbalk-vlak); color: var(--uf-zijbalk-fel); }
.sidebar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--uf-merk); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  text-transform: uppercase; flex-shrink: 0;
}
.sidebar-username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-radius: 9px; color: #c53030; text-decoration: none;
  font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s;
}
.sidebar-logout:hover { background: #fff5f5; color: #9b1c1c; }

/* Uitklapbare groepen */
.sidebar-group { display: flex; flex-direction: column; }
.sidebar-group-toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 9px; color: var(--uf-zijbalk-tekst);
  font-size: 14px; font-weight: 500;
  text-align: left; font-family: inherit; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.sidebar-group-toggle:hover,
.sidebar-group.open > .sidebar-group-toggle {
  background: var(--uf-zijbalk-vlak); color: var(--uf-zijbalk-fel);
}
.sidebar-chevron { margin-left: auto; transition: transform 0.2s; flex-shrink: 0; }
.sidebar-group.open .sidebar-chevron { transform: rotate(180deg); }
/* Submenu springt in zonder verbindingslijn: op wit werkt de inspringing
   alleen al door de witruimte, en een extra lijn maakt het menu druk. */
.sidebar-submenu {
  display: none; flex-direction: column; gap: 1px;
  padding: 2px 0 4px 38px; margin: 0;
}
.sidebar-group.open > .sidebar-submenu { display: flex; }
.sidebar-sublink {
  padding: 7px 12px; border-radius: 8px;
  color: var(--uf-zijbalk-sub); font-size: 13px; font-weight: 500;
  text-decoration: none; display: block;
  transition: background 0.15s, color 0.15s;
}
.sidebar-sublink:hover { background: var(--uf-zijbalk-vlak); color: var(--uf-zijbalk-fel); }
/* Een sublink actief maken met hetzelfde volle marineblauw als een hoofditem
   zou twee zware blokken onder elkaar geven. Vandaar de lichte variant. */
.sidebar-sublink.active {
  background: var(--uf-zijbalk-sub-actief); color: var(--uf-merk); font-weight: 600;
}

/* Ingeklapt */
.sidebar.collapsed { width: 58px; }
.sidebar.collapsed .sidebar-logo { justify-content: center; gap: 0; padding: 18px 0; }
.sidebar.collapsed .sidebar-brand { display: none; }
.sidebar.collapsed .sidebar-nav { padding: 14px 6px; }
.sidebar.collapsed .sidebar-group-toggle { font-size: 0; justify-content: center; gap: 0; padding: 10px 0; }
.sidebar.collapsed .sidebar-chevron,
.sidebar.collapsed .sidebar-submenu { display: none !important; }
.sidebar.collapsed .sidebar-link { font-size: 0; justify-content: center; gap: 0; padding: 10px 0; }
.sidebar.collapsed .sidebar-telbadge { display: none; }
.sidebar.collapsed .sidebar-footer { padding: 12px 6px; }
.sidebar.collapsed .sidebar-user { font-size: 0; justify-content: center; gap: 0; padding: 8px 0; }
.sidebar.collapsed .sidebar-username { display: none; }
.sidebar.collapsed .sidebar-avatar { font-size: 13px !important; }
.sidebar.collapsed .sidebar-logout { font-size: 0; justify-content: center; gap: 0; padding: 8px 0; }
.sidebar-collapse-btn {
  width: 28px; height: 28px; background: none;
  border: 1.5px solid #e0e8f0; color: var(--uf-merk);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.sidebar-collapse-btn:hover { background: var(--uf-zijbalk-vlak); }
/* De pagina's zetten stroke="#10306e" hard in het pijltje; met currentColor
   volgt het gewoon de knopkleur en klopt het ook na een kleurwijziging. */
.sidebar-collapse-btn svg { stroke: currentColor !important; }
body.sidebar-collapsed { padding-left: 58px !important; }

@media (max-width: 900px) {
  .sidebar-collapse-btn { display: none !important; }
  .sidebar { transform: translateX(-100%); }
  .sidebar-toggle-input:checked ~ .sidebar { transform: translateX(0); }
  .sidebar-toggle-input:checked ~ .sidebar-overlay { display: block; }
  .sidebar-toggle-btn { display: flex; }
  body { padding-left: 0 !important; }
}


/* ===== Kaarten ============================================================
   Een paneel is wit met een rand van grijs-200 en hoeken van 12px. De kop is
   een regel van 16px in halfvet grijs-800, met een dunne scheiding eronder.
   ========================================================================= */

.card {
  background: var(--uf-wit);
  border: 1px solid var(--uf-rand);
  border-radius: var(--uf-radius-l);
  padding: 20px;
  box-shadow: none;
}
.card h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--uf-tekst-zacht);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--uf-rand-zacht);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card h2 svg,
.card h2 .uf-ico { color: var(--uf-actie); flex-shrink: 0; }


/* ===== Knoppen ============================================================
   Elke variant is een volledige knop, niet alleen een kleur-modifier: in de
   templates staat zowel class="btn btn-primary" als kaal class="btn-primary",
   en beide moeten er hetzelfde uitzien.

   Vier soorten, meer niet. Hoofdactie is vol actieblauw, nevenactie is wit
   met een rand, bevestigen is groen en verwijderen is rood. Geen schaduwen,
   geen zetje bij het indrukken — alleen een kleurwissel, zoals in de
   planning-app.
   ========================================================================= */

.btn,
.btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-outline,
.btn-primair, .btn-merk, .btn-gevaar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 8px 14px; border-radius: var(--uf-radius);
  border: 1px solid var(--uf-rand-sterk); background: var(--uf-wit);
  color: var(--uf-tekst-zacht);
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-danger:focus-visible, .btn-success:focus-visible, .btn-outline:focus-visible,
.btn-primair:focus-visible, .btn-merk:focus-visible, .btn-gevaar:focus-visible {
  outline: none; box-shadow: var(--uf-ring);
}

.btn:hover { background: var(--uf-vlak); }

.btn:disabled, .btn[disabled],
.btn-primary:disabled, .btn-primary[disabled],
.btn-secondary:disabled, .btn-secondary[disabled],
.btn-danger:disabled, .btn-danger[disabled],
.btn-success:disabled, .btn-success[disabled],
.btn-merk:disabled, .btn-merk[disabled],
.btn-primair:disabled, .btn-primair[disabled],
.btn-gevaar:disabled, .btn-gevaar[disabled] {
  opacity: 0.5; cursor: default; box-shadow: none;
}

/* Hoofdactie — actieblauw, één per scherm */
.btn-primary, .btn-merk, .btn-primair {
  background: var(--uf-actie); border-color: var(--uf-actie); color: #fff;
  font-weight: 500;
}
.btn-primary:hover, .btn-merk:hover, .btn-primair:hover {
  background: var(--uf-actie-hover); border-color: var(--uf-actie-hover);
}

/* Nevenactie — wit met een rand, tekst in grijs-700 */
.btn-secondary, .btn-outline {
  background: var(--uf-wit); color: var(--uf-tekst-zacht);
  border-color: var(--uf-rand-sterk);
}
.btn-secondary:hover, .btn-outline:hover {
  background: var(--uf-vlak); border-color: var(--uf-rand-sterk);
  color: var(--uf-tekst);
}

.btn-success {
  background: var(--uf-goed); border-color: var(--uf-goed); color: #fff;
}
.btn-success:hover {
  background: var(--uf-goed-tekst); border-color: var(--uf-goed-tekst);
}

/* Verwijderen is vol rood, zoals in de planning-app. Dat is duidelijker dan
   een omlijnde knop die pas bij aanwijzen kleur bekent. */
.btn-danger, .btn-gevaar {
  background: var(--uf-fout); border-color: var(--uf-fout); color: #fff;
}
.btn-danger:hover, .btn-gevaar:hover {
  background: var(--uf-fout-tekst); border-color: var(--uf-fout-tekst); color: #fff;
}

/* Maten */
.btn-sm, .btn-klein { min-height: 30px; padding: 6px 12px; font-size: 13px; gap: 5px; }
.btn-lg, .btn-groot { min-height: 42px; padding: 10px 20px; font-size: 15px; gap: 8px; }

/* Alleen een icoon: vierkant, zodat een rij knoppen strak uitlijnt. */
.btn-icoon { padding: 8px; width: 36px; }
.btn-icoon.btn-sm, .btn-icoon.btn-klein { padding: 6px; width: 30px; }

/* Vlakke knop zonder rand — voor derde-rangs acties in een drukke rij. */
.btn-vlak {
  background: transparent; border-color: transparent;
  color: var(--uf-tekst-zwak);
}
.btn-vlak:hover {
  background: var(--uf-vlak-diep); border-color: transparent; color: var(--uf-tekst);
}

/* Bezig — zet aria-busy="true" op de knop terwijl de server werkt. De knop
   blijft even breed, krijgt een draaiend rondje en neemt geen kliks meer aan. */
.btn[aria-busy="true"], .btn-primary[aria-busy="true"], .btn-merk[aria-busy="true"],
.btn-primair[aria-busy="true"], .btn-secondary[aria-busy="true"],
.btn-success[aria-busy="true"], .btn-danger[aria-busy="true"],
.btn-gevaar[aria-busy="true"] {
  pointer-events: none; opacity: 0.7;
}
.btn[aria-busy="true"]::before, .btn-primary[aria-busy="true"]::before,
.btn-merk[aria-busy="true"]::before, .btn-primair[aria-busy="true"]::before,
.btn-secondary[aria-busy="true"]::before, .btn-success[aria-busy="true"]::before,
.btn-danger[aria-busy="true"]::before, .btn-gevaar[aria-busy="true"]::before {
  content: ''; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: uf-draai 0.7s linear infinite;
}
@keyframes uf-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::before { animation-duration: 2s; }
}

/* Rij knoppen onder een kaart of formulier: vaste tussenruimte, en op smalle
   schermen onder elkaar over de volle breedte. */
.uf-knoprij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uf-knoprij .rechts { margin-left: auto; }
@media (max-width: 560px) {
  .uf-knoprij { flex-direction: column; align-items: stretch; }
  .uf-knoprij .rechts { margin-left: 0; }
}

/* --- Losse knopnamen uit oudere pagina's -----------------------------------
   Deze klassen hadden elk hun eigen kleur en vorm. Ze houden hun naam (de
   templates en het JavaScript verwijzen ernaar), maar krijgen hier het
   uiterlijk van de vier vaste soorten hierboven. Nieuwe knoppen: gebruik
   .btn-primary, .btn-secondary, .btn-success of .btn-danger.
--------------------------------------------------------------------------- */

.btn-login, .btn-convert, .btn-save-nk, .btn-hf, .btn-verwerken, .btn-ophalen,
.btn-aanvul-export, .btn-pick, .download-btn, .btn-blauw,
.btn-export, .btn-gebruik, .btn-groen,
.btn-del, .btn-verwijder,
.btn-upload, .btn-toggle, .btn-huidig, .btn-terug, .btn-wis, .btn-opnieuw {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 8px 14px; border-radius: var(--uf-radius);
  border: 1px solid var(--uf-rand-sterk); background: var(--uf-wit);
  color: var(--uf-tekst-zacht);
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-login:focus-visible, .btn-convert:focus-visible, .btn-save-nk:focus-visible,
.btn-hf:focus-visible, .btn-verwerken:focus-visible, .btn-ophalen:focus-visible,
.btn-aanvul-export:focus-visible, .btn-pick:focus-visible, .download-btn:focus-visible,
.btn-blauw:focus-visible, .btn-export:focus-visible, .btn-gebruik:focus-visible,
.btn-groen:focus-visible, .btn-del:focus-visible, .btn-verwijder:focus-visible,
.btn-upload:focus-visible, .btn-toggle:focus-visible, .btn-huidig:focus-visible,
.btn-terug:focus-visible, .btn-wis:focus-visible, .btn-opnieuw:focus-visible {
  outline: none; box-shadow: var(--uf-ring);
}

.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-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);
}

.btn-export, .btn-gebruik, .btn-groen {
  background: var(--uf-goed); border-color: var(--uf-goed); color: #fff;
}
.btn-export:hover, .btn-gebruik:hover, .btn-groen:hover {
  background: var(--uf-goed-tekst); border-color: var(--uf-goed-tekst);
}

.btn-del, .btn-verwijder {
  background: var(--uf-fout); border-color: var(--uf-fout); color: #fff;
}
.btn-del:hover, .btn-verwijder:hover {
  background: var(--uf-fout-tekst); border-color: var(--uf-fout-tekst); color: #fff;
}

.btn-upload, .btn-toggle, .btn-huidig, .btn-terug, .btn-wis, .btn-opnieuw {
  color: var(--uf-tekst-zacht); border-color: var(--uf-rand-sterk);
}
.btn-upload:hover, .btn-toggle:hover, .btn-huidig:hover, .btn-terug:hover,
.btn-wis:hover, .btn-opnieuw:hover {
  background: var(--uf-vlak); color: var(--uf-tekst);
}

/* Afwijkingen die over de basis heen blijven gelden */
.btn-login { width: 100%; min-height: 42px; padding: 10px; font-size: 15px; }
.btn-convert { min-height: 42px; padding: 10px 26px; font-size: 15px; }
.btn-toggle, .btn-opnieuw, .btn-wis, .btn-del {
  min-height: 30px; padding: 6px 12px; font-size: 13px;
}
.download-btn { margin-top: 14px; }
.btn-login:disabled, .btn-convert:disabled, .btn-hf:disabled,
.btn-verwerken:disabled, .btn-aanvul-export:disabled {
  opacity: 0.5; cursor: default;
}


/* ===== Voortgangsbalk =====================================================
   Zelfde vorm als de balken op het dashboard van de planning-app: een baan
   van grijs-100 met een gevulde staaf erin, allebei volledig rond.
   ========================================================================= */

.uf-voortgang {
  background: var(--uf-wit);
  border: 1px solid var(--uf-rand);
  border-radius: var(--uf-radius-l);
  padding: 16px;
}
.uf-voortgang-kop {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 14px; font-weight: 500; color: var(--uf-tekst-zwak); margin-bottom: 6px;
}
.uf-voortgang-kop span:last-child {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--uf-tekst);
}
.uf-voortgang-baan {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--uf-vlak-diep);
}
.uf-voortgang-balk {
  width: 0; height: 100%; border-radius: 999px;
  background: var(--uf-actie);
  transition: width 0.4s ease;
}
.uf-voortgang-balk.goed { background: var(--uf-goed); }
.uf-voortgang-balk.fout { background: var(--uf-fout); }
.uf-voortgang-voet {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
  font-size: 12px; color: var(--uf-tekst-dun); font-variant-numeric: tabular-nums;
}


/* ===== Tabellen ===========================================================
   Rustige lijsten: een lichte kopregel, scheidingslijnen in grijs-100 en een
   rij die bij aanwijzen net iets oplicht. Geen streepjespatroon, geen randen
   tussen de kolommen.
   ========================================================================= */

.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
/* De kop blijft staan bij het scrollen van een lange lijst. */
.tabel th {
  position: sticky; top: 0; z-index: 1;
  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;
  letter-spacing: 0; text-transform: none;
  white-space: nowrap;
}
.tabel td {
  padding: 12px 16px; border-bottom: 1px solid var(--uf-rand-zacht);
  color: var(--uf-tekst-zacht); vertical-align: middle;
}
.tabel tbody tr:last-child td { border-bottom: none; }
.tabel tbody tr { transition: background 0.12s; }
.tabel tbody tr:hover { background: var(--uf-vlak); }
/* Bedragen en aantallen horen rechts en op één lijn. */
.tabel .getal, .tabel td.getal, .tabel th.getal { text-align: right; }


/* ===== Labels / badges ====================================================
   Een badge is een pilletje: een gekleurd vlak met een rand van dezelfde
   kleurfamilie en tekst in de donkere variant — precies het drietal uit de
   KLEUREN-tabel van het planningsdashboard.
   ========================================================================= */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--uf-rand);
  background: var(--uf-vlak); color: var(--uf-tekst-zwak);
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.badge-goed   { background: var(--uf-goed-zacht);   border-color: var(--uf-goed-rand);   color: var(--uf-goed-tekst); }
.badge-attent { background: var(--uf-attent-zacht); border-color: var(--uf-attent-rand); color: var(--uf-attent-tekst); }
.badge-fout   { background: var(--uf-fout-zacht);   border-color: var(--uf-fout-rand);   color: var(--uf-fout-tekst); }
.badge-info   { background: var(--uf-actie-zacht);  border-color: var(--uf-actie-rand);  color: var(--uf-actie-tekst); }


/* ===== Formulieren ======================================================== */

.veld-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--uf-tekst-zacht); margin-bottom: 6px;
}
/* Korte toelichting onder een veld. */
.veld-hulp { margin: 5px 0 0; font-size: 12px; color: var(--uf-tekst-zwak); }
.veld-hulp.fout { color: var(--uf-fout-tekst); }

.veld {
  width: 100%; min-height: 36px; padding: 8px 12px;
  border: 1px solid var(--uf-rand-sterk); border-radius: var(--uf-radius);
  font-family: inherit; font-size: 14px; color: var(--uf-tekst);
  background: var(--uf-wit);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.veld::placeholder { color: var(--uf-tekst-dun); }
.veld:hover { border-color: #b9c0cc; }
.veld:focus {
  outline: none; border-color: var(--uf-actie); box-shadow: var(--uf-ring);
}
.veld:disabled, .veld[readonly] {
  background: var(--uf-vlak-diep); color: var(--uf-tekst-zwak); cursor: default;
}
.veld.fout { border-color: var(--uf-fout); }
.veld.fout:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25); }
/* Keuzelijsten krijgen hun eigen pijl, anders zien ze er per browser anders uit. */
select.veld {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
textarea.veld { min-height: 88px; line-height: 1.55; resize: vertical; }


/* ===== Meldingen ========================================================== */

.melding {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px; border-radius: var(--uf-radius);
  border: 1px solid var(--uf-rand); background: var(--uf-vlak);
  font-size: 14px; line-height: 1.55; color: var(--uf-tekst-zacht);
}
.melding .uf-ico { margin-top: 2px; flex-shrink: 0; }
.melding-goed   { background: var(--uf-goed-zacht);   border-color: var(--uf-goed-rand);   color: var(--uf-goed-tekst); }
.melding-attent { background: var(--uf-attent-zacht); border-color: var(--uf-attent-rand); color: var(--uf-attent-tekst); }
.melding-fout   { background: var(--uf-fout-zacht);   border-color: var(--uf-fout-rand);   color: var(--uf-fout-tekst); }
.melding-info   { background: var(--uf-actie-zacht);  border-color: var(--uf-actie-rand);  color: var(--uf-actie-tekst); }


/* ===== Kleine hulpstukken ================================================= */

.tekst-zacht { color: var(--uf-tekst-zacht); }
.tekst-zwak  { color: var(--uf-tekst-zwak); }
.tekst-dun   { color: var(--uf-tekst-dun); }
.mono { font-family: var(--uf-font-mono); font-size: 0.94em; }


/* ===== Paginakop ==========================================================
   Titel met ondertitel boven aan een scherm. In de planning-app is dat een
   kop van 24px in bijna-zwart, zonder kleur en zonder zwaar gewicht.
   ========================================================================= */

.uf-paginakop { margin-bottom: 20px; }
.uf-paginakop h1 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px; font-size: 24px; font-weight: 700;
  letter-spacing: -0.025em; color: var(--uf-tekst);
}
.uf-paginakop h1 .uf-ico { color: var(--uf-actie); }
.uf-paginakop p {
  margin: 0; font-size: 14px; color: var(--uf-tekst-zwak); max-width: 74ch;
}
/* Variant met een actie rechts van de titel. */
.uf-paginakop.met-actie {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}


/* ===== Tabbladen ==========================================================
   Eén tabbalk met panelen eronder. Alleen het paneel met .actief is zichtbaar;
   het omschakelen gebeurt in de pagina zelf (of via de #hash in de URL), zodat
   een tab deelbaar en herlaadbaar blijft.

   Gebruik:
     <nav class="uf-tabs"><button class="uf-tab actief" data-tab="x">…</button></nav>
     <section class="uf-paneel actief" id="tab-x"> … </section>
   ========================================================================= */

.uf-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 1px solid var(--uf-rand);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.uf-tabs::-webkit-scrollbar { display: none; }
.uf-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--uf-tekst-zwak); white-space: nowrap; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.uf-tab:hover { color: var(--uf-tekst); }
.uf-tab:focus { outline: none; }
.uf-tab:focus-visible { outline: none; color: var(--uf-actie); box-shadow: var(--uf-ring); }
.uf-tab.actief {
  color: var(--uf-actie); font-weight: 600;
  border-bottom-color: var(--uf-actie);
}
.uf-tab .uf-telling {
  padding: 1px 7px; border-radius: 999px;
  background: var(--uf-vlak-diep); color: var(--uf-tekst-zwak);
  font-size: 12px; font-weight: 600;
}
.uf-tab.actief .uf-telling { background: var(--uf-actie-zacht); color: var(--uf-actie-tekst); }

.uf-paneel { display: none; flex-direction: column; gap: 18px; }
.uf-paneel.actief { display: flex; }


/* ===== Kerncijfers ========================================================
   De KPI-kaart van het planningsdashboard: een licht gekleurd vlak met een
   rand in dezelfde kleur, een klein grijs label en een groot cijfer in de
   donkere variant van die kleur. Zonder soortaanduiding is de kaart neutraal
   grijs.
   ========================================================================= */

.uf-stats {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.uf-stat {
  background: var(--uf-vlak); border: 1px solid var(--uf-rand);
  border-radius: var(--uf-radius-l); padding: 16px;
  box-shadow: none;
}
.uf-stat .label {
  font-size: 12px; font-weight: 500; color: var(--uf-tekst-zwak);
  text-transform: none; letter-spacing: 0; margin-bottom: 2px;
}
.uf-stat .waarde {
  font-size: 30px; font-weight: 700; color: var(--uf-tekst-zacht);
  line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.uf-stat .waarde.klein { font-size: 18px; letter-spacing: -0.015em; }
.uf-stat .sub { margin-top: 2px; font-size: 12px; color: var(--uf-tekst-dun); }
/* Kleuraccent per soort cijfer: het hele kaartje kleurt mee, licht genoeg om
   naast elkaar te kunnen staan. */
.uf-stat.goed   { background: var(--uf-goed-zacht);   border-color: var(--uf-goed-rand); }
.uf-stat.goed   .waarde { color: var(--uf-goed-tekst); }
.uf-stat.attent { background: var(--uf-attent-zacht); border-color: var(--uf-attent-rand); }
.uf-stat.attent .waarde { color: var(--uf-attent-tekst); }
.uf-stat.fout   { background: var(--uf-fout-zacht);   border-color: var(--uf-fout-rand); }
.uf-stat.fout   .waarde { color: var(--uf-fout-tekst); }
.uf-stat.merk   { background: var(--uf-actie-zacht);  border-color: var(--uf-actie-rand); }
.uf-stat.merk   .waarde { color: var(--uf-actie-tekst); }


/* ===== Instelrij ==========================================================
   Eén instelling: omschrijving links, bediening rechts. Onder 640px komt de
   bediening onder de tekst te staan.
   ========================================================================= */

.uf-instelrij {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 14px 0;
  border-bottom: 1px solid var(--uf-rand-zacht);
}
.uf-instelrij:last-child { border-bottom: none; padding-bottom: 0; }
.uf-instelrij:first-child { padding-top: 0; }
.uf-instelrij .uitleg { flex: 1; min-width: 0; }
.uf-instelrij .uitleg strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--uf-tekst-zacht);
}
.uf-instelrij .uitleg p {
  margin: 2px 0 0; font-size: 13px; color: var(--uf-tekst-zwak);
}
.uf-instelrij .bediening {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
}
@media (max-width: 640px) {
  .uf-instelrij { flex-direction: column; gap: 10px; }
}

/* Terugkoppeling na opslaan — verschijnt naast de knop. */
.uf-terugkoppeling { font-size: 13px; color: var(--uf-tekst-zwak); }
.uf-terugkoppeling.goed { color: var(--uf-goed-tekst); }
.uf-terugkoppeling.fout { color: var(--uf-fout-tekst); }

/* Aan/uit-vinkje in actiekleur. */
.uf-vink { width: 16px; height: 16px; cursor: pointer; accent-color: var(--uf-actie); }


/* ===== Statusstip ========================================================= */

.uf-stip {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; background: var(--uf-tekst-dun);
}
.uf-stip-goed { background: var(--uf-goed); }
.uf-stip-fout { background: var(--uf-fout); }


/* ===== Logvenster =========================================================
   Donker vlak met vaste breedte-letters voor uitvoer van een taak. Dit is het
   enige donkere onderdeel dat blijft: een log leest nu eenmaal beter op zwart.
   ========================================================================= */

.uf-log {
  margin: 0; padding: 12px 14px;
  background: #111827; color: #e5e7eb;
  border-radius: var(--uf-radius);
  font-family: var(--uf-font-mono);
  font-size: 12px; line-height: 1.55; white-space: pre-wrap;
  max-height: 260px; overflow-y: auto;
}


/* ===== Tabel met horizontale schuif ======================================= */

.tabel-schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ===== Icoonset ===========================================================
   Lijniconen als CSS-mask: de vorm komt uit een data-URI SVG, de kleur is
   altijd currentColor en de grootte 1em. Een icoon neemt dus vanzelf de
   kleur en het formaat over van de tekst of knop waar het in staat.

   Gebruik:  <span class="uf-ico uf-ico-sync"></span> Synchroniseer nu
   ========================================================================= */

.uf-ico {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.14em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--uf-ico-vorm) no-repeat center / contain;
          mask: var(--uf-ico-vorm) no-repeat center / contain;
}
/* Iets groter dan de tekst, voor koppen en kaarten. */
.uf-ico-l { width: 1.35em; height: 1.35em; vertical-align: -0.28em; }
.uf-ico-xl { width: 2em; height: 2em; vertical-align: -0.45em; }

.uf-ico-sync { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%2221 3 21 9 15 9%22/><polyline points=%223 21 3 15 9 15%22/><path d=%22M21 9a9 9 0 0 0-15-4.6L3 7%22/><path d=%22M3 15a9 9 0 0 0 15 4.6L21 17%22/></svg>"); }
.uf-ico-download { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/><polyline points=%227 10 12 15 17 10%22/><line x1=%2212%22 y1=%2215%22 x2=%2212%22 y2=%223%22/></svg>"); }
.uf-ico-upload { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/><polyline points=%2217 8 12 3 7 8%22/><line x1=%2212%22 y1=%223%22 x2=%2212%22 y2=%2215%22/></svg>"); }
.uf-ico-opslaan { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z%22/><polyline points=%2217 21 17 13 7 13 7 21%22/><polyline points=%227 3 7 8 15 8%22/></svg>"); }
.uf-ico-bewerken { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7%22/><path d=%22M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z%22/></svg>"); }
.uf-ico-verwijder { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%223 6 5 6 21 6%22/><path d=%22M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2%22/><line x1=%2210%22 y1=%2211%22 x2=%2210%22 y2=%2217%22/><line x1=%2214%22 y1=%2211%22 x2=%2214%22 y2=%2217%22/></svg>"); }
.uf-ico-zoek { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2211%22 cy=%2211%22 r=%227%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.65%22 y2=%2216.65%22/></svg>"); }
.uf-ico-start { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polygon points=%226 3 20 12 6 21 6 3%22/></svg>"); }
.uf-ico-plus { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%2212%22 y1=%225%22 x2=%2212%22 y2=%2219%22/><line x1=%225%22 y1=%2212%22 x2=%2219%22 y2=%2212%22/></svg>"); }
.uf-ico-check { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%2220 6 9 17 4 12%22/></svg>"); }
.uf-ico-check-rond { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M22 11.1V12a10 10 0 1 1-5.9-9.1%22/><polyline points=%2222 4 12 14.1 9 11.1%22/></svg>"); }
.uf-ico-kruis { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%2218%22 y1=%226%22 x2=%226%22 y2=%2218%22/><line x1=%226%22 y1=%226%22 x2=%2218%22 y2=%2218%22/></svg>"); }
.uf-ico-kruis-rond { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><line x1=%2215%22 y1=%229%22 x2=%229%22 y2=%2215%22/><line x1=%229%22 y1=%229%22 x2=%2215%22 y2=%2215%22/></svg>"); }
.uf-ico-attent { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z%22/><line x1=%2212%22 y1=%229%22 x2=%2212%22 y2=%2213%22/><line x1=%2212%22 y1=%2217%22 x2=%2212.01%22 y2=%2217%22/></svg>"); }
.uf-ico-verboden { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><line x1=%224.9%22 y1=%224.9%22 x2=%2219.1%22 y2=%2219.1%22/></svg>"); }
.uf-ico-info { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><line x1=%2212%22 y1=%2216%22 x2=%2212%22 y2=%2212%22/><line x1=%2212%22 y1=%228%22 x2=%2212.01%22 y2=%228%22/></svg>"); }
.uf-ico-vraag { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3%22/><line x1=%2212%22 y1=%2217%22 x2=%2212.01%22 y2=%2217%22/></svg>"); }
.uf-ico-idee { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M9 18h6%22/><path d=%22M10 22h4%22/><path d=%22M15.1 14c.4-1.6 1.9-2.5 2.5-4a5.6 5.6 0 1 0-11.2 0c.6 1.5 2.1 2.4 2.5 4%22/></svg>"); }
.uf-ico-ster { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polygon points=%2212 2 15.1 8.5 22 9.5 17 14.4 18.2 21.4 12 18.1 5.8 21.4 7 14.4 2 9.5 8.9 8.5 12 2%22/></svg>"); }
.uf-ico-bestand { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/><polyline points=%2214 2 14 8 20 8%22/></svg>"); }
.uf-ico-lijst { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22/><rect x=%228%22 y=%222%22 width=%228%22 height=%224%22 rx=%221%22/></svg>"); }
.uf-ico-map { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z%22/></svg>"); }
.uf-ico-doos { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z%22/><polyline points=%223.3 7 12 12 20.7 7%22/><line x1=%2212%22 y1=%2222%22 x2=%2212%22 y2=%2212%22/></svg>"); }
.uf-ico-inbox { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%2222 12 16 12 14 15 10 15 8 12 2 12%22/><path d=%22M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z%22/></svg>"); }
.uf-ico-mail { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><rect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/><polyline points=%2222 6 12 13 2 6%22/></svg>"); }
.uf-ico-kalender { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><rect x=%223%22 y=%224%22 width=%2218%22 height=%2218%22 rx=%222%22/><line x1=%2216%22 y1=%222%22 x2=%2216%22 y2=%226%22/><line x1=%228%22 y1=%222%22 x2=%228%22 y2=%226%22/><line x1=%223%22 y1=%2210%22 x2=%2221%22 y2=%2210%22/></svg>"); }
.uf-ico-klok { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><polyline points=%2212 6 12 12 16 14%22/></svg>"); }
.uf-ico-wachten { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><polyline points=%2212 7 12 12 15.5 13.5%22/></svg>"); }
.uf-ico-bel { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9%22/><path d=%22M13.7 21a2 2 0 0 1-3.4 0%22/></svg>"); }
.uf-ico-gebouw { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M3 21h18%22/><path d=%22M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16%22/><path d=%22M15 9h2a2 2 0 0 1 2 2v10%22/><line x1=%229%22 y1=%227%22 x2=%2211%22 y2=%227%22/><line x1=%229%22 y1=%2211%22 x2=%2211%22 y2=%2211%22/><line x1=%229%22 y1=%2215%22 x2=%2211%22 y2=%2215%22/></svg>"); }
.uf-ico-personen { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2%22/><circle cx=%229%22 cy=%227%22 r=%224%22/><path d=%22M23 21v-2a4 4 0 0 0-3-3.9%22/><path d=%22M16 3.1a4 4 0 0 1 0 7.8%22/></svg>"); }
.uf-ico-persoon { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%22/><circle cx=%2212%22 cy=%227%22 r=%224%22/></svg>"); }
.uf-ico-slot { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><rect x=%223%22 y=%2211%22 width=%2218%22 height=%2211%22 rx=%222%22/><path d=%22M7 11V7a5 5 0 0 1 10 0v4%22/></svg>"); }
.uf-ico-slot-open { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><rect x=%223%22 y=%2211%22 width=%2218%22 height=%2211%22 rx=%222%22/><path d=%22M7 11V7a5 5 0 0 1 9.9-1%22/></svg>"); }
.uf-ico-sleutel { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%227.5%22 cy=%2216.5%22 r=%224.5%22/><line x1=%2210.7%22 y1=%2213.3%22 x2=%2221%22 y2=%223%22/><line x1=%2217%22 y1=%227%22 x2=%2220%22 y2=%2210%22/><line x1=%2214%22 y1=%2210%22 x2=%2216.5%22 y2=%2212.5%22/></svg>"); }
.uf-ico-maan { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z%22/></svg>"); }
.uf-ico-grafiek { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%2218%22 y1=%2220%22 x2=%2218%22 y2=%2210%22/><line x1=%2212%22 y1=%2220%22 x2=%2212%22 y2=%224%22/><line x1=%226%22 y1=%2220%22 x2=%226%22 y2=%2214%22/></svg>"); }
.uf-ico-instelling { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%224%22 y1=%2221%22 x2=%224%22 y2=%2214%22/><line x1=%224%22 y1=%2210%22 x2=%224%22 y2=%223%22/><line x1=%2212%22 y1=%2221%22 x2=%2212%22 y2=%2212%22/><line x1=%2212%22 y1=%228%22 x2=%2212%22 y2=%223%22/><line x1=%2220%22 y1=%2221%22 x2=%2220%22 y2=%2216%22/><line x1=%2220%22 y1=%2212%22 x2=%2220%22 y2=%223%22/><line x1=%221%22 y1=%2214%22 x2=%227%22 y2=%2214%22/><line x1=%229%22 y1=%228%22 x2=%2215%22 y2=%228%22/><line x1=%2217%22 y1=%2216%22 x2=%2223%22 y2=%2216%22/></svg>"); }
.uf-ico-schild { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%22/></svg>"); }
.uf-ico-link { --uf-ico-vorm: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7%22/><path d=%22M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7%22/></svg>"); }

