/* JMT GoGo veldapp — mobiele schil. Waarden 1-op-1 overgenomen uit de
   Tailwind-klassen van de Next.js-versie, zodat het beeld identiek blijft. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f1f5f9;
  color: #1e293b;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ja-schil { margin: 0 auto; width: 100%; max-width: 600px; padding: 16px 16px 28px 16px; }
.ja-schil.met-tabbalk { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

/* --- Live-dot --- */
@keyframes jmt-pulse-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.jmt-live-dot { position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 50%;
  background: #63c53b; flex-shrink: 0; }
.jmt-live-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #63c53b;
  animation: jmt-pulse-ring 1.6s cubic-bezier(0,0,.2,1) infinite; }

/* --- Basis --- */
.ja-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ja-header-tekst { min-width: 0; }
.ja-header-acties { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ja-icoonknop { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; color: #64748b;
  cursor: pointer; padding: 0; font-family: inherit; text-decoration: none; }
.ja-icoonknop:active { background: #f1f5f9; }

.ja-titel { font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 4px; }
.ja-titel.mb { margin-bottom: 12px; }
.ja-subtitel { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .06em; margin: 2px 0 0 0; }
.ja-kaart { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.ja-kaart-pad { padding: 16px 20px; }
.ja-kaart.mb, .mb { margin-bottom: 12px; }
.ja-groot-getal { font-size: 28px; font-weight: 900; color: #1e293b; line-height: 1; }
.ja-minilabel { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: #94a3b8; margin-top: 4px; }
.ja-minilabel.donker { font-size: 10px; letter-spacing: .08em; margin: 0 0 6px 0; }
.ja-naam { font-size: 14px; font-weight: 700; color: #1e293b; }
.ja-email { font-size: 12px; color: #94a3b8; }
.ja-leeg { padding: 20px; font-size: 13px; color: #94a3b8; text-align: center; }
.ja-terug { display: inline-block; margin-bottom: 12px; color: #64748b; font-size: 12px;
  font-weight: 700; text-decoration: none; }

.ja-knop { display: block; width: 100%; padding: 16px; border-radius: 11px; text-align: center;
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: inherit;
  margin-top: 8px; }
.ja-knop:first-of-type { margin-top: 12px; }
.ja-knop.donker { background: #1e293b; color: #fff; }
.ja-knop.wit { background: #fff; border-color: #e2e8f0; color: #475569; }
.ja-knop.rood { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* --- Projectlijst --- */
/* Zoeken in de beurzenlijst. Het kruisje verschijnt pas als er iets staat. */
.ja-zoek { position: relative; display: flex; align-items: center; margin-bottom: 10px; }
.ja-zoekicoon { position: absolute; left: 13px; color: #94a3b8; pointer-events: none; }
.ja-zoekveld { width: 100%; padding: 12px 38px 12px 36px; font-family: inherit; font-size: 14px;
  color: #1e293b; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  -webkit-appearance: none; appearance: none; }
.ja-zoekveld::placeholder { color: #94a3b8; }
.ja-zoekveld:focus { outline: 0; border-color: #51af2f; box-shadow: 0 0 0 3px rgba(81, 175, 47, .15); }
/* Het eigen kruisje van de browser weg; we hebben er zelf een die altijd
   even groot is en op elke telefoon hetzelfde oogt. */
.ja-zoekveld::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ja-zoekwis { position: absolute; right: 6px; width: 28px; height: 28px; padding: 0; border: 0;
  background: transparent; color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer;
  font-family: inherit; }
.ja-zoekwis[hidden] { display: none; }
.ja-project[hidden] { display: none; }

.ja-project { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px; margin-bottom: 8px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; text-decoration: none; color: inherit; }
.ja-project-info { flex: 1; min-width: 0; }
.ja-project-naamrij { display: flex; align-items: center; gap: 6px; }
.ja-project-naam { font-size: 14px; font-weight: 700; color: #1e293b; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ja-project-plaats { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.ja-chevron { color: #94a3b8; font-size: 16px; flex-shrink: 0; }

.ja-volumes { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; white-space: nowrap; }
.ja-volumes.ruim { gap: 14px; margin-top: 0; }
.ja-volumes strong { font-size: 14px; font-weight: 900; }
.ja-volumes span span, .ja-volumes > span > span { color: #94a3b8; font-weight: 700; }
.ja-volumes .oranje { color: #f97316; }
.ja-volumes .blauw { color: #3b82f6; }
.ja-volumes .groen { color: #51af2f; }

/* --- Projectdetail --- */
.ja-infobox { margin-bottom: 12px; }
.ja-beurs-naam { font-size: 12px; font-weight: 800; color: #0f172a; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.5; margin-bottom: 8px; }
.ja-beurs-locatie { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; }
.ja-beurs-datum { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 12px; }

.ja-blok { overflow: hidden; margin-bottom: 12px; }
.ja-blok-kop { padding: 12px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #64748b; }
.ja-blok-body { padding: 16px 20px; font-size: 13px; color: #94a3b8; font-style: italic; }


/* --- Navigatie --- */

.ja-subnav { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px;
  bottom: 0; z-index: 510; display: flex; gap: 4px; background: #1e293b;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) 6px;
  box-shadow: 0 -3px 12px rgba(15,23,42,.10); }
.ja-subnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 6px; background: transparent; border: none; border-radius: 10px; cursor: pointer;
  color: #94a3b8; font-family: inherit; transition: background .15s, color .15s; }
.ja-subnav-item.actief { background: #51af2f; color: #fff; }
.ja-subnav-item span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* --- Login --- */
.ja-login-scherm { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ja-login-kaart { width: 100%; max-width: 380px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 24px; }
.ja-login-merk { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ja-login-logo { width: 40px; height: 40px; border-radius: 12px; background: #51af2f; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; }
.ja-login-naam { font-size: 17px; font-weight: 800; color: #1e293b; line-height: 1.25; }
.ja-login-sub { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #94a3b8; }
.ja-login-fout { margin-bottom: 16px; padding: 10px 12px; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; font-size: 12px; font-weight: 700; color: #b91c1c; }
.ja-login-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #64748b; margin-bottom: 6px; }
.ja-login-invoer { width: 100%; padding: 12px 14px; margin-bottom: 16px; border: 1px solid #e2e8f0;
  border-radius: 11px; font-size: 16px; font-weight: 600; color: #1e293b; outline: none; font-family: inherit; }
.ja-login-invoer:focus { border-color: #63c53b; }
.ja-login-invoer[type="password"] { margin-bottom: 24px; }
.ja-login-knop { width: 100%; padding: 16px; background: #51af2f; border: none; border-radius: 10px;
  color: #fff; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; font-family: inherit; }

/* --- Inklok-tab --- */
.ik-kop { display: flex; justify-content: space-between; align-items: center; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; cursor: pointer; margin-bottom: 16px; }
.ik-kop-links .getal { font-size: 28px; font-weight: 900; color: #1e293b; line-height: 1; }
.ik-kop-links .sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ik-kop-links .sub span { font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: #94a3b8; }
.ik-kop-rechts { display: flex; align-items: center; gap: 10px; }
.ik-totaal { text-align: right; }
.ik-totaal .tijd { font-size: 20px; font-weight: 900; color: #1e293b; line-height: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ik-totaal .tijd em { font-size: 11px; font-weight: 800; font-style: normal; }
.ik-totaal .label { font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: #94a3b8; margin-top: 4px; }
.ik-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s; }
.ik-chevron.open { transform: rotate(180deg); }

.ik-inklok-knop { width: 100%; padding: 20px; background: #51af2f; border: none;
  border-radius: 13px; color: #fff; font-size: 16px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; margin-bottom: 16px; font-family: inherit;
  box-shadow: 0 2px 10px rgba(81,175,47,.30); transition: background .15s, box-shadow .15s; }
.ik-inklok-knop:active { background: #467d22; box-shadow: none; }

.ik-partij { border: 1px solid #e2e8f0; border-radius: 14px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.ik-partij-kop { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f8fafc; }
.ik-partij-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }
.ik-partij-logo.leeg { background: #e2e8f0; }
.ik-partij-info { flex: 1; min-width: 0; }
.ik-partij-naam { font-size: 13px; font-weight: 800; color: #1e293b; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ik-partij-sub { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.ik-partij-sub span { font-size: 10px; color: #94a3b8; font-weight: 700; }
.ik-partij-body { padding: 14px; }

.ik-sectielabel { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: #94a3b8; margin-bottom: 8px; }
.ik-sectielabel.log { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.ik-geen { font-size: 12px; color: #94a3b8; text-align: center; padding: 8px 0; }

/* Dagregel: stil, alleen om te weten welke dag je draait. */
.ik-dagbalk { font-size: 11.5px; font-weight: 600; color: #94a3b8; text-transform: capitalize;
  padding: 0 2px 8px 2px; }

/* Vergeten uitklok: valt op tot iemand hem nakijkt. */
.ik-alarm { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; }
.ik-alarm-icoon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #dc2626;
  color: #fff; font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ik-alarm-tekst { display: flex; flex-direction: column; gap: 2px; }
.ik-alarm-tekst strong { font-size: 13px; color: #991b1b; }
.ik-alarm-tekst span { font-size: 11.5px; color: #b91c1c; line-height: 1.45; }

/* Afgetekende shift: dichtgeklapt tot een groene regel. */
.ik-shiftkaart { border: 1px solid #cee9c5; background: #f3faee; border-radius: 12px;
  margin-top: 10px; overflow: hidden; }
.ik-shiftkaart.let-op { border-color: #fecaca; background: #fef5f5; }
.ik-shiftkaart-kop { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; }
.ik-shiftkaart-kop .vink { flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%;
  background: #51af2f; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.ik-shiftkaart-tekst { flex: 1; min-width: 0; }
.ik-shiftkaart-tekst .tijden { font-size: 13.5px; font-weight: 800; color: #2f5f18; }
.ik-shiftkaart-tekst .tijden .aantal { font-weight: 600; color: #64748b; font-size: 11.5px; margin-left: 7px; }
.ik-shiftkaart-tekst .sub { font-size: 11px; color: #64748b; margin-top: 1px; }
.ik-shiftkaart-kop .duur { font-size: 12px; font-weight: 800; color: #467d22; white-space: nowrap; }
.ik-shiftkaart-body { padding: 0 13px 13px 13px; border-top: 1px solid #dcefd4; }
.ik-shiftpauze { font-size: 11.5px; color: #64748b; margin-top: 8px; }
.ik-shiftnaam { font-size: 11.5px; color: #64748b; margin-top: 2px; }

/* Eerdere dagen: uit het hoofdscherm, wel te zien. */
.ik-vorige { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.ik-vorige-kop { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: #94a3b8; margin-bottom: 7px; }
.ik-vorige-rij { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 5px;
  background: #f8fafc; border-radius: 9px; font-size: 12px; color: #64748b;
  width: 100%; border: 0; text-align: left; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ik-vorige-rij .dag { font-weight: 700; color: #475569; text-transform: capitalize; }
.ik-vorige-rij .aantal { margin-left: auto; }
.ik-vorige-rij .duur { font-weight: 700; color: #475569; }
.ik-vorige-rij .pijl { color: #94a3b8; font-size: 10px; transition: transform .15s; }
.ik-vorige-rij.open { background: #eef2f7; margin-bottom: 0; border-radius: 9px 9px 0 0; }
.ik-vorige-rij.open .pijl { transform: rotate(180deg); }

/* Een opengeklapte dag */
.ik-dagdetail { background: #f8fafc; border-radius: 0 0 9px 9px; padding: 4px 11px 9px;
  margin-bottom: 5px; }
.ik-dagpersoon { padding: 7px 0; border-top: 1px solid #e8edf3; }
.ik-dagpersoon:first-child { border-top: 0; }
.ik-dagpersoon-kop { display: flex; align-items: baseline; gap: 8px; }
/* De naam krijgt wat overblijft en wordt zo nodig afgekapt; de twee kolommen
   rechts houden hun breedte, zodat de tijden en de totalen van alle mensen
   netjes onder elkaar uitkomen. */
.ik-dagpersoon-kop .naam { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700;
  color: #1e293b; overflow-wrap: anywhere; }
.ik-dagpersoon-kop .tijden { flex: 0 0 auto; min-width: 78px; text-align: right;
  font-size: 11px; color: #64748b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ik-dagpersoon-kop .netto { flex: 0 0 auto; min-width: 80px; text-align: right;
  font-size: 13px; font-weight: 800; color: #1e293b; font-variant-numeric: tabular-nums; }
/* Op een breed scherm (laptop, tablet) zou de naam alle ruimte pakken en
   schoven de tijden tegen de totalen aan. Een lege vierde kolom duwt ze terug
   naar het midden. Op een telefoon gebeurt dit niet: daar is elke pixel nodig
   voor de naam. */
@media (min-width: 520px) {
  .ik-dagpersoon-kop { display: grid; align-items: baseline; column-gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 80px; }
  .ik-dagpersoon-kop .netto { grid-column: 4; }
}

/* Op een smalle telefoon knijpen we de twee rechterkolommen in, anders valt
   elke naam op twee regels uiteen. */
@media (max-width: 359px) {
  .ik-dagpersoon-kop { gap: 6px; }
  .ik-dagpersoon-kop .naam { font-size: 12.5px; }
  .ik-dagpersoon-kop .tijden { min-width: 72px; font-size: 10.5px; }
  .ik-dagpersoon-kop .netto { min-width: 72px; font-size: 12.5px; }
}
.ik-dagpersoon-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px;
  font-size: 11px; color: #64748b; }
.ik-dagpersoon-sub .pauze { color: #b45309; }
.ik-dagpersoon-sub .bedrijf { color: #94a3b8; }
.ik-dagpersoon-sub .gegokt { color: #dc2626; }
.ik-dagtotaal { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #cbd5e1; font-size: 11px; color: #64748b; }
.ik-dagtotaal b { color: #475569; font-variant-numeric: tabular-nums; }
.ik-dagtotaal .netto { margin-left: auto; }
.ik-dagtotaal .netto b { color: #1e293b; }

/* Personen per groep */
.ik-uitlegvak { padding: 12px 14px; margin-bottom: 8px; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 10px; font-size: 13px; line-height: 1.5; color: #9a3412; }

.ik-groepkop { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: #64748b; margin: 12px 0 6px 0; }
.ik-groepkop span { font-weight: 700; color: #94a3b8; letter-spacing: .04em; }
.ik-persoon { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.ik-persoon.klaar { opacity: .72; }
.ik-persoon .stip { width: 8px; height: 8px; border-radius: 50%; background: #63c53b; flex-shrink: 0; }
.ik-persoon.klaar .stip { background: #94a3b8; }
.ik-persoon-tekst { flex: 1; min-width: 0; }
.ik-persoon-tekst .naam { font-size: 13px; font-weight: 800; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-persoon-tekst .naam em { color: #94a3b8; font-weight: 700; }
.ik-persoon-tekst .tijden { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.ik-persoon-tekst .duur { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #64748b; font-weight: 600; }
.ik-acties-knop { flex-shrink: 0; padding: 10px 14px; background: #e2e8f0; border: 1px solid #cbd5e1;
  border-radius: 9px; color: #334155; font-size: 12px; font-weight: 800; cursor: pointer;
  font-family: inherit; }
.ik-acties-knop:active { background: #cbd5e1; }

.ik-log { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px;
  margin-bottom: 3px; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.ik-log-tekst { color: #334155; font-weight: 600; display: flex; align-items: center; }
.ik-log-rechts { display: flex; align-items: center; flex-shrink: 0; }
.ik-log .stip { width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.ik-log .stip.in { background: #63c53b; }
.ik-log .stip.uit { background: #cbd5e1; }
.ik-tijdvak { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  font-weight: 700; color: #94a3b8; border: 1px solid #e2e8f0; background: #f8fafc; height: 24px;
  padding: 0 5px; border-radius: 6px; box-sizing: border-box; }
input.ik-tijdvak { cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ik-ongedaan { margin-left: 6px; width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; color: #94a3b8;
  font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit; }
.ik-icoontje { font-size: 10px; margin-right: 6px; }
.ik-icoontje.blauw { color: #1d4ed8; }
.ik-icoontje.grijs { color: #94a3b8; }

.ik-acties { margin-top: 14px; display: flex; gap: 8px; }
.ik-actieknop { flex: 1; padding: 14px; border-radius: 11px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer; font-family: inherit; }
.ik-actieknop.uitklok { background: #fee2e2; border: 1px solid #f87171; color: #991b1b; }
.ik-actieknop:disabled { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8;
  cursor: default; opacity: 1; }
.ik-actieknop.afteken { background: #51af2f; border: 1px solid #51af2f; color: #fff; }
/* Nog niet beschikbaar, maar wel klikbaar: de knop legt zelf uit waarom niet. */
.ik-actieknop.geblokkeerd { background: #f1f5f9; border: 1px solid #e2e8f0; color: #94a3b8; }
.ik-actieknop.geblokkeerd:active { background: #e2e8f0; }

/* Uitleg waarom een handeling nog niet kan. */
.ik-blokkade { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
  padding: 13px 15px; margin-bottom: 16px; }
.ik-blokkade-kop { font-size: 13px; font-weight: 700; color: #92400e; line-height: 1.45; }
.ik-blokkade-lijst { list-style: none; margin: 9px 0 0 0; padding: 0; }
.ik-blokkade-lijst li { font-size: 13px; color: #78350f; padding: 6px 0;
  border-top: 1px solid #fde68a; }
.ik-blokkade-lijst li span { color: #b45309; font-size: 11.5px; }

/* Foutmelding in de modal, vlak boven de knop waar op gedrukt is. */
.ik-modal-fout { display: none; align-items: flex-start; gap: 9px; padding: 12px 14px;
  margin-bottom: 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 11px;
  font-size: 13px; color: #991b1b; line-height: 1.45; }
.ik-modal-fout.zichtbaar { display: flex; }
.ik-fout-icoon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #dc2626;
  color: #fff; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.ik-naaminvoer.fout { border-color: #dc2626; background: #fef2f2; }
.ik-canvas.fout { border-color: #dc2626; }

.ik-grijs-knop { width: 100%; padding: 15px; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 12px; font-size: 14px; font-weight: 800; color: #475569; cursor: pointer; }
.ik-grijs-knop:active { background: #e2e8f0; }

.ik-afgetekend { margin-top: 14px; text-align: center; padding: 18px 14px; background: #eff6ff;
  border: 1px solid #bfdbfe; border-radius: 12px; }
.ik-afgetekend .titel { font-size: 12px; font-weight: 800; color: #1d4ed8; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 6px; }
.ik-afgetekend .body { font-size: 11px; color: #1e40af; font-weight: 600; line-height: 1.6; margin-bottom: 12px; }
.ik-heropen { padding: 10px 18px; background: #fff; border: 1px solid #60a5fa; border-radius: 8px;
  color: #1e40af; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; font-family: inherit; }
.ik-shift-sluit { display: block; width: 100%; margin-top: 11px; padding: 14px; background: #51af2f;
  border: none; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer; font-family: inherit; }

/* Partij-blok in de vensters: laat zien vóór wie je iets doet. */
.ik-partijbanner { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  margin-bottom: 16px; background: #f3faee; border: 1px solid #cee9c5; border-radius: 12px; }
.ik-banner-logo { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain;
  border-radius: 7px; background: #fff; }
.ik-banner-logo.leeg { background: #cee9c5; }
.ik-banner-tekst { min-width: 0; }
.ik-partijbanner .naam { font-size: 14px; font-weight: 800; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-partijbanner .sub { font-size: 11px; font-weight: 700; color: #467d22; margin-top: 2px; }

/* --- Modals --- */
.ik-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: rgba(15,23,42,.5); }
.ik-modal { position: relative; background: #fff; border-radius: 16px; padding: 20px;
  max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; }
.ik-sluit { position: absolute; top: 14px; right: 14px; width: 31px; height: 31px; background: #f1f5f9;
  border: none; border-radius: 50%; color: #64748b; font-size: 16px; font-weight: 700;
  cursor: pointer; line-height: 31px; text-align: center; padding: 0; font-family: inherit; }
.ik-modal-titel { font-size: 15px; font-weight: 800; color: #1e293b; margin-bottom: 20px; }
.ik-modal-titel.strak { margin-bottom: 2px; }
.ik-modal-sub { font-size: 11px; color: #94a3b8; margin-bottom: 16px; }
.ik-veldlabel { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: #64748b; margin-bottom: 6px; }
.ik-veldlabel.groot { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #64748b; }
.ik-veld { margin-bottom: 12px; }
.ik-veld.ruim { margin-bottom: 20px; }
.ik-tijdinvoer { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 11px;
  font-size: 18px; font-weight: 800; color: #1e293b; font-family: inherit; }

.ik-dropdown { position: relative; margin-bottom: 16px; }
.ik-dd-knop { width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border: 1px solid #e2e8f0; border-radius: 11px; font-size: 15px; font-weight: 700; color: #1e293b;
  background: #fff; cursor: pointer; text-align: left; font-family: inherit; }
.ik-dd-knop .naam { flex: 1; }
.ik-dd-knop .pijl { color: #94a3b8; font-size: 11px; }
.ik-dd-lijst { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  z-index: 20; max-height: 200px; overflow-y: auto; }
.ik-dd-item { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid #f1f5f9; }
.ik-dd-item:hover { background: #f8fafc; }
.ik-dd-item span { font-size: 14px; font-weight: 700; color: #1e293b; }
.ik-dd-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
.ik-dd-logo.leeg { background: #e2e8f0; }

.ik-stepper { display: flex; align-items: center; gap: 8px; }
.ik-stepper button { width: 48px; height: 48px; flex-shrink: 0; padding: 0; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 11px; color: #1e293b; font-size: 24px; line-height: 1;
  cursor: pointer; font-family: inherit; }
.ik-stepper input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #e2e8f0; border-radius: 11px;
  font-size: 20px; font-weight: 800; text-align: center; color: #1e293b; font-family: inherit; }

.ik-groen-knop { width: 100%; padding: 16px; background: #51af2f; border: none;
  border-radius: 11px; color: #fff; font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; font-family: inherit; transition: background .15s; }
.ik-groen-knop:active { background: #467d22; }
.ik-rood-knop { width: 100%; padding: 16px; background: #b91c1c; border: none; border-radius: 11px;
  color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }
.ik-blauw-knop { width: 100%; padding: 16px; background: #51af2f; border: 1px solid #51af2f;
  border-radius: 11px; color: #1e40af; font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; font-family: inherit; }

.ik-pillen { display: flex; background: #f1f5f9; border-radius: 12px; padding: 3px; margin-bottom: 16px; }
.ik-pil { flex: 1; padding: 11px; border: none; border-radius: 9px; font-size: 13px; font-weight: 800;
  cursor: pointer; background: transparent; color: #94a3b8; font-family: inherit; }
.ik-pil.actief { background: #1e293b; color: #fff; }

.ik-checkrij { display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin-bottom: 7px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; }
.ik-checkrij input { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.ik-checkrij span { font-size: 13px; font-weight: 700; color: #1e293b; }

.ik-duurknoppen { display: flex; gap: 8px; margin-bottom: 12px; }
.ik-duurknop { flex: 1; padding: 16px; background: #fef3c7; border: 1px solid #fbbf24;
  border-radius: 11px; color: #92400e; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }
.ik-eigenduur { display: flex; gap: 8px; }
.ik-eigenduur input { flex: 1; min-width: 0; padding: 14px; border: 1px solid #e2e8f0;
  border-radius: 11px; font-size: 15px; color: #1e293b; font-family: inherit; }
.ik-eigenduur button { padding: 14px 18px; background: #e2e8f0; border: 1px solid #cbd5e1;
  border-radius: 11px; color: #1e293b; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }

.ik-canvas { width: 100%; height: 176px; border: 1px solid #e2e8f0; border-radius: 10px;
  background: #f8fafc; display: block; touch-action: none; }
.ik-wis { margin-top: 9px; padding: 10px 16px; background: #e2e8f0; border: 1px solid #cbd5e1;
  border-radius: 8px; color: #475569; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; font-family: inherit; }
.ik-naaminvoer { width: 100%; padding: 14px; border: 1px solid #e2e8f0; border-radius: 11px;
  font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 14px; font-family: inherit; }
.ik-stap { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 14px; }
.ik-modal-voet { margin-top: 16px; }

/* Namen invullen bij het inklokken */
.ik-naamrij { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ik-naamrij .nr { width: 24px; flex-shrink: 0; text-align: center; font-size: 11px;
  font-weight: 800; color: #94a3b8; }
.ik-naaminvoer-rij { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid #e2e8f0;
  border-radius: 11px; font-size: 16px; font-weight: 600; color: #1e293b; font-family: inherit; }
.ik-naaminvoer-rij:focus { border-color: #51af2f; outline: none; }

/* Keuzelijst in het Acties-venster */
.ik-keuzelijst { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.ik-keuze { width: 100%; padding: 16px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 11px; color: #1e293b; font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: inherit; text-align: left; }
.ik-keuze:active { background: #e2e8f0; }
.ik-keuze.primair { background: #51af2f; border-color: #51af2f; color: #fff; }
.ik-keuze.gevaar { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Pauzestap */
.ik-pauzeraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ik-pauzeraster .ik-duurknop { flex: none; padding: 18px 9px; }
.ik-pauzenoot { margin-top: 10px; font-size: 11px; color: #94a3b8; text-align: center; }

/* Wie klok je uit */
.ik-kiesrij { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; }
.ik-alleknop { padding: 9px 14px; background: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 9px;
  color: #334155; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; }
.ik-checkrij .sinds { color: #94a3b8; font-weight: 600; }

/* Terug-knop naast een hoofdknop */
.ik-knoprij { display: flex; gap: 8px; align-items: center; }
.ik-knoprij .ik-groen-knop { flex: 1; }
.ik-terug-knop { padding: 16px 18px; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 11px; color: #475569; font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: inherit; white-space: nowrap; }

/* Uitleg onder de actieknoppen (bv. waarom aftekenen nog niet kan) */
.ik-uitlegnoot { margin-top: 8px; font-size: 11px; color: #94a3b8; text-align: center;
  line-height: 1.5; }


/* Eerste leverdag */
.ja-leverrijen { padding: 6px 20px 14px 20px; }
.ja-leverrij { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.ja-leverrij:last-child { border-bottom: none; }
.ja-leverrij .soort { font-size: 13px; font-weight: 700; color: #1e293b; }
.ja-leverrij .datum { font-size: 13px; font-weight: 800; color: #467d22; }

/* Leverdag-blok */
.ja-blok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ja-blok-kop .telling { font-size: 9px; font-weight: 700; color: #94a3b8; letter-spacing: .04em;
  text-transform: none; }

/* Verdeling over de hallen: kolom per soort */
.ja-haltabel { width: 100%; border-collapse: collapse; }
.ja-haltabel th, .ja-haltabel td { padding: 8px 6px; text-align: right; }
.ja-haltabel th:first-child, .ja-haltabel td:first-child { text-align: left; padding-left: 20px; }
.ja-haltabel th:last-child, .ja-haltabel td:last-child { padding-right: 20px; }
.ja-haltabel thead th { font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; border-bottom: 1px solid #e2e8f0; padding-top: 4px; padding-bottom: 6px;
  white-space: nowrap; }
.ja-haltabel thead th.hal { color: #94a3b8; }
.ja-haltabel thead th.oranje { color: #f97316; }
.ja-haltabel thead th.blauw { color: #3b82f6; }
.ja-haltabel thead th.groen { color: #51af2f; }
.ja-haltabel tbody td { font-size: 12px; font-weight: 800;
  border-bottom: 1px solid #f8fafc; font-variant-numeric: tabular-nums; }
.ja-haltabel tbody td.hal { font-size: 12px; font-weight: 700; color: #1e293b; }
.ja-haltabel tbody tr:last-child td { border-bottom: none; }
.ja-haltabel tbody td.oranje { color: #f97316; }
.ja-haltabel tbody td.blauw  { color: #3b82f6; }
.ja-haltabel tbody td.groen  { color: #51af2f; }
.ja-haltabel .leeg { color: #e2e8f0; font-weight: 700; }
.ja-haltabel tfoot td { font-size: 12px; font-weight: 900; color: #1e293b;
  border-top: 2px solid #e2e8f0; padding-top: 10px; padding-bottom: 12px;
  font-variant-numeric: tabular-nums; }
.ja-haltabel tfoot td.hal { font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #94a3b8; }

/* Partij-blok in de vensters: laat zien vóór wie je iets doet. */
.ik-partijbanner { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  margin-bottom: 16px; background: #f3faee; border: 1px solid #cee9c5; border-radius: 12px; }
.ik-banner-logo { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain;
  border-radius: 7px; background: #fff; }
.ik-banner-logo.leeg { background: #cee9c5; }
.ik-banner-tekst { min-width: 0; }
.ik-partijbanner .naam { font-size: 14px; font-weight: 800; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-partijbanner .sub { font-size: 11px; font-weight: 700; color: #467d22; margin-top: 2px; }

/* --- Modals --- */
.ik-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: rgba(15,23,42,.5); }
.ik-modal { position: relative; background: #fff; border-radius: 16px; padding: 20px;
  max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; }
.ik-sluit { position: absolute; top: 14px; right: 14px; width: 31px; height: 31px; background: #f1f5f9;
  border: none; border-radius: 50%; color: #64748b; font-size: 16px; font-weight: 700;
  cursor: pointer; line-height: 31px; text-align: center; padding: 0; font-family: inherit; }
.ik-modal-titel { font-size: 15px; font-weight: 800; color: #1e293b; margin-bottom: 20px; }
.ik-modal-titel.strak { margin-bottom: 2px; }
.ik-modal-sub { font-size: 11px; color: #94a3b8; margin-bottom: 16px; }
.ik-veldlabel { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: #64748b; margin-bottom: 6px; }
.ik-veldlabel.groot { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #64748b; }
.ik-veld { margin-bottom: 12px; }
.ik-veld.ruim { margin-bottom: 20px; }
.ik-tijdinvoer { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 11px;
  font-size: 18px; font-weight: 800; color: #1e293b; font-family: inherit; }

.ik-dropdown { position: relative; margin-bottom: 16px; }
.ik-dd-knop { width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border: 1px solid #e2e8f0; border-radius: 11px; font-size: 15px; font-weight: 700; color: #1e293b;
  background: #fff; cursor: pointer; text-align: left; font-family: inherit; }
.ik-dd-knop .naam { flex: 1; }
.ik-dd-knop .pijl { color: #94a3b8; font-size: 11px; }
.ik-dd-lijst { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  z-index: 20; max-height: 200px; overflow-y: auto; }
.ik-dd-item { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid #f1f5f9; }
.ik-dd-item:hover { background: #f8fafc; }
.ik-dd-item span { font-size: 14px; font-weight: 700; color: #1e293b; }
.ik-dd-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
.ik-dd-logo.leeg { background: #e2e8f0; }

.ik-stepper { display: flex; align-items: center; gap: 8px; }
.ik-stepper button { width: 48px; height: 48px; flex-shrink: 0; padding: 0; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 11px; color: #1e293b; font-size: 24px; line-height: 1;
  cursor: pointer; font-family: inherit; }
.ik-stepper input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #e2e8f0; border-radius: 11px;
  font-size: 20px; font-weight: 800; text-align: center; color: #1e293b; font-family: inherit; }

.ik-groen-knop { width: 100%; padding: 16px; background: #51af2f; border: none;
  border-radius: 11px; color: #fff; font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; font-family: inherit; transition: background .15s; }
.ik-groen-knop:active { background: #467d22; }
.ik-rood-knop { width: 100%; padding: 16px; background: #b91c1c; border: none; border-radius: 11px;
  color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }
.ik-blauw-knop { width: 100%; padding: 14px; background: #dbeafe; border: 1px solid #60a5fa;
  border-radius: 11px; color: #1e40af; font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; font-family: inherit; }

.ik-pillen { display: flex; background: #f1f5f9; border-radius: 12px; padding: 3px; margin-bottom: 16px; }
.ik-pil { flex: 1; padding: 11px; border: none; border-radius: 9px; font-size: 13px; font-weight: 800;
  cursor: pointer; background: transparent; color: #94a3b8; font-family: inherit; }
.ik-pil.actief { background: #1e293b; color: #fff; }

.ik-checkrij { display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin-bottom: 7px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; }
.ik-checkrij input { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.ik-checkrij span { font-size: 13px; font-weight: 700; color: #1e293b; }

.ik-duurknoppen { display: flex; gap: 8px; margin-bottom: 12px; }
.ik-duurknop { flex: 1; padding: 16px; background: #fef3c7; border: 1px solid #fbbf24;
  border-radius: 11px; color: #92400e; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }
.ik-eigenduur { display: flex; gap: 8px; }
.ik-eigenduur input { flex: 1; min-width: 0; padding: 14px; border: 1px solid #e2e8f0;
  border-radius: 11px; font-size: 15px; color: #1e293b; font-family: inherit; }
.ik-eigenduur button { padding: 14px 18px; background: #e2e8f0; border: 1px solid #cbd5e1;
  border-radius: 11px; color: #1e293b; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }

.ik-canvas { width: 100%; height: 176px; border: 1px solid #e2e8f0; border-radius: 10px;
  background: #f8fafc; display: block; touch-action: none; }
.ik-wis { margin-top: 9px; padding: 10px 16px; background: #e2e8f0; border: 1px solid #cbd5e1;
  border-radius: 8px; color: #475569; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; font-family: inherit; }
.ik-naaminvoer { width: 100%; padding: 14px; border: 1px solid #e2e8f0; border-radius: 11px;
  font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 14px; font-family: inherit; }
.ik-stap { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 14px; }
.ik-modal-voet { margin-top: 16px; }

/* Namen invullen bij het inklokken */
.ik-naamrij { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ik-naamrij .nr { width: 24px; flex-shrink: 0; text-align: center; font-size: 11px;
  font-weight: 800; color: #94a3b8; }
.ik-naaminvoer-rij { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid #e2e8f0;
  border-radius: 11px; font-size: 16px; font-weight: 600; color: #1e293b; font-family: inherit; }
.ik-naaminvoer-rij:focus { border-color: #51af2f; outline: none; }

/* Keuzelijst in het Acties-venster */
.ik-keuzelijst { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.ik-keuze { width: 100%; padding: 16px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 11px; color: #1e293b; font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: inherit; text-align: left; }
.ik-keuze:active { background: #e2e8f0; }
.ik-keuze.primair { background: #51af2f; border-color: #51af2f; color: #fff; }
.ik-keuze.gevaar { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Pauzestap */
.ik-pauzeraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ik-pauzeraster .ik-duurknop { flex: none; padding: 18px 9px; }
.ik-pauzenoot { margin-top: 10px; font-size: 11px; color: #94a3b8; text-align: center; }

/* Wie klok je uit */
.ik-kiesrij { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; }
.ik-alleknop { padding: 9px 14px; background: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 9px;
  color: #334155; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; }
.ik-checkrij .sinds { color: #94a3b8; font-weight: 600; }

/* Terug-knop naast een hoofdknop */
.ik-knoprij { display: flex; gap: 8px; align-items: center; }
.ik-knoprij .ik-groen-knop { flex: 1; }
.ik-terug-knop { padding: 16px 18px; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 11px; color: #475569; font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: inherit; white-space: nowrap; }

/* Uitleg onder de actieknoppen (bv. waarom aftekenen nog niet kan) */
.ik-uitlegnoot { margin-top: 8px; font-size: 11px; color: #94a3b8; text-align: center;
  line-height: 1.5; }


/* Eerste leverdag */
.ja-leverrijen { padding: 6px 20px 14px 20px; }
.ja-leverrij { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.ja-leverrij:last-child { border-bottom: none; }
.ja-leverrij .soort { font-size: 13px; font-weight: 700; color: #1e293b; }
.ja-leverrij .datum { font-size: 13px; font-weight: 800; color: #467d22; }

/* Leverschema: per dag een kop met totalen, daaronder de hallen */
.ja-blok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ja-blok-kop .telling { font-size: 9px; font-weight: 700; color: #94a3b8; letter-spacing: .04em;
  text-transform: none; }
.ja-dag { border-bottom: 1px solid #f1f5f9; }
.ja-dag:last-child { border-bottom: none; }
.ja-dag-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 20px 7px 20px; background: #fbfcfd; }
.ja-dag-kop .dag { font-size: 13px; font-weight: 800; color: #1e293b; }
.ja-dag-kop .totaal { font-size: 11px; color: #94a3b8; font-weight: 700; white-space: nowrap; }
.ja-dag-kop .totaal strong { font-size: 12px; font-weight: 900; }
.ja-hallen { padding: 2px 20px 10px 20px; }
.ja-hal { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; }
.ja-hal .nr { font-size: 12px; font-weight: 700; color: #475569; }
.ja-hal .cijfers { font-size: 10px; color: #94a3b8; font-weight: 700; white-space: nowrap; }
.ja-hal .cijfers strong { font-size: 12px; font-weight: 900; }
.ja-hal .cijfers .groen { color: #51af2f; }
.ja-hallen { padding: 4px 20px 12px 20px; }
.ja-hal { padding: 8px 0; border-bottom: 1px solid #f8fafc; }
.ja-hal:last-child { border-bottom: none; }
.ja-dag-kop .oranje, .ja-hal .oranje { color: #f97316; }
.ja-dag-kop .blauw, .ja-hal .blauw { color: #3b82f6; }

/* Algemene locatietekening */
.ja-tekening { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; text-decoration: none; color: inherit; }
.ja-tekening:active { background: #f8fafc; }
.ja-tekening .ja-pdf-icoon { width: 40px; height: 40px; background: #fee2e2; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ja-tekening-tekst { flex: 1; min-width: 0; }
.ja-tekening-tekst .naam { font-size: 14px; font-weight: 800; color: #1e293b; }
.ja-tekening-tekst .sub { font-size: 11px; font-weight: 600; color: #94a3b8; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Extra ruimte en nadruk: alles op het inklokscherm moet in één oogopslag
   te lezen zijn, ook met een telefoon in je hand op een beursvloer. ---- */
.ik-persoon { padding: 13px 13px; gap: 11px; }
.ik-persoon-tekst .naam { font-size: 15px; }
.ik-persoon-tekst .tijden { font-size: 12.5px; color: #64748b; margin-top: 3px; }
.ik-persoon-tekst .duur { margin-left: 8px; font-size: 12.5px; color: #475569; font-weight: 700; }
.ik-persoon .stip { width: 10px; height: 10px; }
.ik-persoon.let-op { border-color: #fecaca; background: #fef5f5; }
.ik-persoon.let-op .stip { background: #dc2626; }
.ik-acties-knop { padding: 12px 15px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.ik-groepkop { font-size: 10.5px; letter-spacing: .08em; color: #475569; margin: 15px 0 7px 0; }
.ik-actieknop { padding: 17px 10px; font-size: 13.5px; letter-spacing: .03em; }
.ik-inklok-knop { font-size: 15px; letter-spacing: .04em; }

/* Pauzeregels van de lopende shift: stonden eerst in het logboek. */
.ik-pauzerij { display: flex; align-items: center; gap: 11px; padding: 12px 13px; margin-bottom: 6px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 11px; }
.ik-pauzerij-tekst { flex: 1; min-width: 0; }
.ik-pauzerij-tekst .hoofd { font-size: 14px; font-weight: 800; color: #334155; }
.ik-pauzerij-tekst .sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.ik-weghaalknop { flex-shrink: 0; padding: 11px 14px; background: #fff; border: 1px solid #cbd5e1;
  border-radius: 9px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #64748b; cursor: pointer; }
.ik-weghaalknop:active { background: #f1f5f9; }

/* Lege dag: zeggen wat er moet gebeuren, niet alleen dat er niets is. */
.ik-leegdag { text-align: center; padding: 26px 18px; margin-top: 12px; background: #fff;
  border: 1px dashed #cbd5e1; border-radius: 14px; font-size: 13.5px; color: #64748b; line-height: 1.6; }

.ik-shiftkaart-kop { cursor: pointer; }
.ik-shiftkaart-tekst .sub { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #467d22; }
.ik-heropen { letter-spacing: .04em; }

/* ---- Downloads-tab ---- */
.ja-downloadkop { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: #94a3b8; margin: 4px 2px 8px 2px; }
.ja-downloadkop.blauw { color: #2563eb; }
.ja-downloadkop.ruim { margin-top: 22px; }

/* De vaste tekening van het gebouw is blauw: die hoort bij de locatie en
   staat er altijd, ook als er voor deze beurs niets is geupload. */
.ja-tekening.algemeen { background: #eff6ff; border-color: #bfdbfe; }
.ja-tekening.algemeen .ja-pdf-icoon { background: #dbeafe; }
.ja-tekening.algemeen:active { background: #dbeafe; }
.ja-tekening.algemeen .ja-tekening-tekst .naam { color: #1e40af; }

/* ---- Keuzescherm bij een tekening ---- */
.dl-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(15, 23, 42, .62);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: dl-in .16s ease-out; }
.dl-blad { width: 100%; max-width: 400px; background: #fff; border-radius: 18px;
  padding: 18px 16px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
  animation: dl-blad-in .18s cubic-bezier(.2, .9, .3, 1); }
@keyframes dl-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dl-blad-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Geen grijze tikvlek die door de pop-up heen blijft nagloeien. */
/* Meer lucht tussen de downloads: op een telefoon met handschoenen aan moeten
   het duidelijk losse regels zijn, niet een aaneengesloten blok. Geldt zowel in
   de app als op de gedeelde pagina. */
.ja-tekening { -webkit-tap-highlight-color: transparent; margin-bottom: 10px; }
.ja-tekening:last-child { margin-bottom: 0; }
.ja-downloadkop { margin-bottom: 10px; }

.dl-kop { margin-bottom: 14px; }
.dl-kop-naam { font-size: 17px; font-weight: 800; color: #1e293b; line-height: 1.25; }
.dl-kop-sub { font-size: 12.5px; color: #94a3b8; margin-top: 3px; }

.dl-keuze { width: 100%; display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 13px 13px; margin-bottom: 8px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; cursor: pointer; }
.dl-keuze:active { background: #f8fafc; }
.dl-icoon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; font-size: 19px;
  display: flex; align-items: center; justify-content: center; }
.dl-icoon.blauw { background: #dbeafe; color: #1d4ed8; }
.dl-icoon.grijs { background: #f1f5f9; color: #475569; }
.dl-icoon.groen { background: #e6f4e0; color: #3d7a1f; }
.dl-keuze-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-keuze-tekst strong { font-size: 13.5px; font-weight: 800; color: #1e293b; letter-spacing: .03em; }
.dl-keuze-tekst span { font-size: 12px; color: #94a3b8; line-height: 1.4; }

.dl-terug { width: 100%; padding: 13px; margin-top: 4px; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 12px; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #475569; cursor: pointer; }
.dl-terug:active { background: #e2e8f0; }

.dl-melding { display: none; padding: 12px 14px; margin-bottom: 10px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.5; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.dl-melding.zichtbaar { display: block; }
.dl-melding.goed { background: #f3faee; border-color: #cee9c5; color: #3d7a1f; }
.dl-linkveld { width: 100%; margin-top: 8px; padding: 9px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: none; height: 62px; }

/* De QR moet groot en zwart-op-wit zijn: hij wordt van een scherm af gescand. */
.dl-qr { display: flex; justify-content: center; padding: 16px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 16px; margin-bottom: 12px; }
.dl-qr-vak img, .dl-qr-vak canvas { display: block; width: 210px; height: 210px; }
.dl-qr-noot { font-size: 12px; color: #94a3b8; text-align: center; line-height: 1.5; margin-bottom: 14px; }
.dl-qr-fout { font-size: 12.5px; color: #9a3412; text-align: center; line-height: 1.5; padding: 30px 10px; }

/* ---- Paginakop: terugpijl met de beursnaam ernaast ----
   Blijft op elk tabblad staan, zodat altijd zichtbaar is op welke beurs je
   zit, ook nu het infoblok alleen nog onder Informatie hangt. */
.ja-paginakop { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ja-paginakop .ja-terug { flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 11px; font-size: 20px; line-height: 1; color: #475569; text-decoration: none; }
.ja-paginakop .ja-terug:active { background: #f1f5f9; }
.ja-paginakop-tekst { min-width: 0; }
.ja-paginakop-tekst .naam { font-size: 15px; font-weight: 800; color: #1e293b; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ja-paginakop-tekst .sub { font-size: 11.5px; color: #94a3b8; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ja-beurs-datum.groot { font-size: 14px; font-weight: 700; color: #475569; margin-bottom: 4px; }

/* ---- Deel-knop naast het kopje ---- */
.ja-downloadkop.met-knop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ja-downloadkop.met-knop > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ja-deelknop { flex-shrink: 0; padding: 8px 13px; background: #51af2f; border: none;
  border-radius: 8px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff;
  white-space: nowrap; text-transform: uppercase; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ja-deelknop:active { background: #467d22; }
/* Bovenaan de Downloads-tab, over de volle breedte: deze knop deelt alles wat
   eronder staat, dus hoort hij boven de groepjes en niet in een ervan. */
.ja-deelknop.groot { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px; margin-bottom: 20px; font-size: 12.5px; letter-spacing: .06em;
  border-radius: 12px; }
.ja-deelknop.groot .pijl { font-size: 15px; font-weight: 900; line-height: 1; }

/* ---- Openbare deelpagina (deel.php) ---- */
.jd-kop { padding: 4px 2px 16px 2px; }
.jd-merk { display: inline-block; padding: 4px 10px; margin-bottom: 10px; background: #51af2f;
  border-radius: 7px; font-size: 11px; font-weight: 900; letter-spacing: .12em; color: #fff; }
.jd-titel { font-size: 21px; font-weight: 800; color: #1e293b; line-height: 1.2; }
.jd-sub { font-size: 13px; color: #64748b; margin-top: 3px; }
.jd-voet { margin-top: 22px; padding: 14px 16px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 12px; font-size: 12px; color: #94a3b8; line-height: 1.6; text-align: center; }

/* Actieknop op een downloadregel. Zelfde vorm als AANPASSEN bij de personen,
   zodat het overal hetzelfde betekent: hier valt iets te kiezen. */
.ja-acties-knop { flex-shrink: 0; padding: 10px 13px; background: #e2e8f0; border: 1px solid #cbd5e1;
  border-radius: 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #475569; }
.ja-tekening:active .ja-acties-knop { background: #cbd5e1; }
.ja-tekening.algemeen .ja-acties-knop { background: #dbeafe; border-color: #bfdbfe; color: #1e40af; }
.ja-tekening.algemeen:active .ja-acties-knop { background: #bfdbfe; }

/* ---- Aanmeldlinks bezorgapp (tab Inhuur, boven het inklokken) ---- */
.ja-links-geen { font-size: 12.5px; color: #94a3b8; text-align: center; padding: 14px 10px;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; }
/* Twee tabbladen naast elkaar. Flex met flex:1 en nowrap: zo kan de tekst
   nooit afbreken en de tabs dus nooit onder elkaar belanden.
   Deliver is groen, return donkerblauw; die kleuren komen terug op de blokjes. */
.ja-linktabs { display: flex; gap: 8px; margin-bottom: 12px; }
.ja-linktab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px;
  padding: 11px 12px; background: #fff; border: 2px solid #e2e8f0; border-radius: 12px;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ja-linktab .naam { font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: #64748b; overflow: hidden; text-overflow: ellipsis; }
.ja-linktab .telling { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; font-size: 12px; font-weight: 900; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; }
.ja-linktab .pijl { font-size: 11px; color: #cbd5e1; transition: transform .15s; }
.ja-linktab.actief .pijl { transform: rotate(180deg); }

.ja-linktab.deliver { border-color: #cee9c5; }
.ja-linktab.deliver .telling { background: #51af2f; }
.ja-linktab.deliver.actief { border-color: #51af2f; background: #f3faee; }
.ja-linktab.deliver.actief .naam { color: #3d7a1f; }

.ja-linktab.return { border-color: #c7d2e8; }
.ja-linktab.return .telling { background: #1e3a8a; }
.ja-linktab.return.actief { border-color: #1e3a8a; background: #eef2fb; }
.ja-linktab.return.actief .naam { color: #1e3a8a; }

/* Niets meer vrij: de kleur eraf, anders lijkt er nog iets te halen. */
.ja-linktab .telling.leeg { background: #e2e8f0; color: #94a3b8; }

.ja-linkpaneel.verborgen { display: none; }

/* Blokjes die er echt uitzien als een knop: rand in de kleur van de soort,
   schaduwrandje eronder, en een pijl die zegt dat er iets opengaat. */
.ja-linkraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .ja-linkraster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ja-linkblok { display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 13px 12px; background: #fff; border: 2px solid #cbd5e1; border-radius: 12px;
  box-shadow: 0 2px 0 #e2e8f0; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent; }
.ja-linkblok:active { background: #f8fafc; box-shadow: none; transform: translateY(2px); }
.ja-linkblok-kop { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ja-linkblok-naam { font-size: 14.5px; font-weight: 800; color: #1e293b; }
.ja-linkblok-pijl { font-size: 17px; font-weight: 900; color: #94a3b8; line-height: 1; }
.ja-linkblok-status { font-size: 8.5px; font-weight: 900; letter-spacing: .07em; }

.ja-linkblok.deliver { border-color: #51af2f; box-shadow: 0 2px 0 #cee9c5; }
.ja-linkblok.deliver .ja-linkblok-status { color: #3d7a1f; }
.ja-linkblok.deliver .ja-linkblok-pijl { color: #51af2f; }
.ja-linkblok.return { border-color: #1e3a8a; box-shadow: 0 2px 0 #c7d2e8; }
.ja-linkblok.return .ja-linkblok-status { color: #1e3a8a; }
.ja-linkblok.return .ja-linkblok-pijl { color: #1e3a8a; }

.ja-linkblok.gebruikt { background: #f8fafc; border-color: #e2e8f0; box-shadow: none; }
.ja-linkblok.gebruikt .ja-linkblok-naam { color: #94a3b8; text-decoration: line-through; }
.ja-linkblok.gebruikt .ja-linkblok-pijl { color: #cbd5e1; }
.ja-linkblok.gebruikt .ja-linkblok-status { color: #94a3b8; }

/* Sectiekop op de tab Inhuur: scheidt het aanmelden van het inklokken.
   Zelfde vorm als de kopjes op de Downloads-tab, zodat een kopje overal
   hetzelfde betekent. */
.ja-sectiekop { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: #94a3b8; margin: 2px 2px 8px 2px; }
.ja-sectiekop.ruim { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e2e8f0; }

/* Een vergeven link: nog wel te openen, maar duidelijk al gebruikt. */
/* Knop in het QR-scherm om een link af te tekenen als vergeven. */
.dl-gebruikt { width: 100%; padding: 13px; margin-bottom: 12px; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 12px; font-size: 12px; font-weight: 800;
  letter-spacing: .05em; color: #475569; cursor: pointer; }
.dl-gebruikt:active { background: #f1f5f9; }
.dl-gebruikt.aan { background: #e6f4e0; border-color: #cee9c5; color: #3d7a1f; }
.dl-gebruikt:disabled { opacity: .5; }

/* ---- Uitnodiging: zelf een account aanmaken ---- */
.ja-uitnodig { max-width: 380px; margin: 18px auto 0 auto; text-align: center; }
/* Merk bovenaan de uitnodiging: gecentreerd en ruim, niet het kleine
   vierkantje van het inlogscherm. Dit is voor veel mensen het eerste wat ze
   van JMT GoGo zien. */
.ja-uitnodig-merk { margin-bottom: 16px; }
.ja-uitnodig-logo { display: block; max-width: 160px; max-height: 56px; margin: 0 auto 8px auto; }
.ja-uitnodig-merkteken { width: 60px; height: 60px; margin: 0 auto 8px auto; border-radius: 20px;
  background: #51af2f; color: #fff; font-weight: 900; font-size: 26px; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center; }
.ja-uitnodig-merknaam { font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: #94a3b8; }
.ja-uitnodig-titel { font-size: 20px; font-weight: 800; color: #1e293b; margin-top: 0; }
.ja-uitnodig-sub { font-size: 13px; color: #64748b; line-height: 1.55; margin: 6px 0 16px 0; }
.ja-uitnodig-sub strong { color: #3d7a1f; }
.ja-uitnodig-form { text-align: left; }
.ja-uitnodig-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: #94a3b8; margin-bottom: 5px; }
.ja-uitnodig-fout { text-align: left; padding: 12px 14px; margin-bottom: 16px; background: #fef2f2;
  border: 1px solid #fecaca; border-radius: 11px; font-size: 13px; color: #991b1b; line-height: 1.5; }
.ja-login-invoer.strak { margin-bottom: 6px; }
.ja-uitnodig-eis { font-size: 11.5px; color: #94a3b8; line-height: 1.5; margin-bottom: 12px; }
.ja-uitnodig-noot { font-size: 11.5px; color: #94a3b8; margin-top: 12px; line-height: 1.5; }


/* --- Smalle telefoons: niets mag buiten het scherm vallen ---------------
   Opgemeten op 320, 360, 390 en 412 px breed met echte cijfers uit de
   beursdata (de grootste losse waarde daarin is 30.766,0). Twee dingen
   liepen over de rand:

   1. De volumeregel (m2 tegels / m3 meubels / m3 vracht) stond op één regel
      die niet mocht afbreken: 342 px breed, terwijl er op een telefoon van
      360 px maar 282 px voor is. Het derde blok viel buiten de kaart en trok
      daarmee de hele pagina scheef — vandaar dat álles buiten beeld viel.
   2. De haltabel werd breder dan zijn kaart, en die kaart heeft
      overflow:hidden. De rechterkolom werd dus gewoon afgesneden; zo leken
      de cijfers uit het schema te lopen.

   Deze regels staan bewust achteraan: eerder in dit bestand staat een blok
   van 143 regels dubbel, en bij gelijke specificiteit wint wat later komt. */

.ja-volumes { flex-wrap: wrap; row-gap: 8px; }
.ja-volumes.ruim { row-gap: 8px; }

/* De haltabel mag binnen zijn eigen kaart opzij schuiven in plaats van
   afgekapt te worden. Een vangnet: door de krappere maten hieronder past hij
   in de praktijk gewoon. */
.ja-tabelrol { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 400px) {
  /* Zijruimte teruggeven aan de cijfers. Dat scheelt bij elkaar ruim 40 px,
     genoeg om de tabel ook op een scherm van 320 px heel te laten. */
  .ja-schil { padding-left: 12px; padding-right: 12px; }
  .ja-kaart-pad { padding-left: 14px; padding-right: 14px; }
  .ja-blok-kop { padding-left: 12px; padding-right: 12px; }
  .ja-leverrijen { padding-left: 12px; padding-right: 12px; }
  .ja-haltabel th, .ja-haltabel td { padding-left: 4px; padding-right: 4px; }
  .ja-haltabel th:first-child, .ja-haltabel td:first-child { padding-left: 12px; }
  .ja-haltabel th:last-child, .ja-haltabel td:last-child { padding-right: 12px; }
}

/* --- Inklokken via QR --------------------------------------------------
   Twee schermen: dat van de projectleider (ik-*, in de inklok-tab) en dat
   van de inhuur zelf (kl-*, op klok.php en mijn.php). Die tweede groep
   staat los, want die mensen hebben geen account en zien verder niets van
   de app: hun hele wereld is de QR die ze net gescand hebben. */

/* De twee hoofdknoppen bovenaan de inklok-tab. */
.ik-klokknoppen { display: flex; gap: 8px; margin-bottom: 10px; }
.ik-klokknop { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 15px 8px; border: none; border-radius: 12px; color: #fff; cursor: pointer;
  font-family: inherit; text-align: center; }
.ik-klokknop .titel { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.ik-klokknop .sub { font-size: 10.5px; font-weight: 600; opacity: .8; }
.ik-klokknop.in { background: #51af2f; }
.ik-klokknop.in:active { background: #467d22; }
.ik-klokknop.uit { background: #b91c1c; }
.ik-klokknop.uit:active { background: #911616; }

/* Balk voor een QR die openstaat. Staat bewust altijd in beeld: zolang hij
   open is bepaalt de tijd erin wat er geregistreerd wordt. */
.ik-qrbalk { display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border-radius: 11px; margin-bottom: 8px; border: 1px solid; }
.ik-qrbalk.in { background: #f3faee; border-color: #cee9c5; }
.ik-qrbalk.uit { background: #fef2f2; border-color: #fecaca; }
.ik-qrbalk-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ik-qrbalk-tekst strong { font-size: 12.5px; font-weight: 800; color: #1e293b; }
.ik-qrbalk-tekst span { font-size: 11.5px; color: #64748b; }
.ik-qrbalk-knop { flex-shrink: 0; padding: 8px 13px; border-radius: 9px; border: 1px solid #cbd5e1;
  background: #fff; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  color: #334155; cursor: pointer; }
.ik-qrbalk-knop:active { background: #f1f5f9; }

/* De uitweg als scannen niet lukt. Bewust klein: het is de uitzondering. */
.ik-handmatig { display: block; width: 100%; margin: 0 0 14px; padding: 10px; background: none;
  border: none; font-family: inherit; font-size: 12px; font-weight: 600; color: #64748b;
  text-decoration: underline; cursor: pointer; }

/* De QR zelf, in het venster van de projectleider. */
.ik-qr-tijd { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 13px; border-radius: 12px; margin: 14px 0; }
.ik-qr-tijd.in { background: #f3faee; }
.ik-qr-tijd.uit { background: #fef2f2; }
.ik-qr-tijd .label { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; color: #64748b; }
.ik-qr-tijd .tijd { font-size: 30px; font-weight: 800; color: #1e293b; line-height: 1.1; }
.ik-qrvak { display: flex; justify-content: center; padding: 14px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 10px; }
.ik-qrvak img, .ik-qrvak canvas { display: block; width: 220px; height: 220px; }
.ik-qr-fout { font-size: 12.5px; color: #9a3412; text-align: center; line-height: 1.5; padding: 30px 10px; }
.ik-qr-url { font-size: 11px; color: #94a3b8; text-align: center; word-break: break-all;
  line-height: 1.5; margin-bottom: 10px; }
.ik-qr-melding { display: none; padding: 12px 14px; margin: 10px 0 0; border-radius: 11px;
  font-size: 12.5px; line-height: 1.5; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; }
.ik-qr-melding.zichtbaar { display: block; }
.ik-qr-melding.goed { background: #f3faee; border-color: #cee9c5; color: #3d7a1f; }
.ik-qr-linkveld { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid #e2e8f0;
  border-radius: 8px; font-family: inherit; font-size: 11px; color: #475569; resize: none; height: 60px; }
.ik-qr-noot { font-size: 11.5px; color: #94a3b8; text-align: center; line-height: 1.5; margin: 12px 0; }
.ik-knoprij .ik-grijs-knop, .ik-knoprij .ik-rood-knop { flex: 1; }

/* --- Het scherm van de inhuur (klok.php en mijn.php) ------------------- */

.kl-kop { padding: 16px 4px 12px; text-align: center; }
.kl-merk { font-size: 22px; font-weight: 800; letter-spacing: .1em; color: #51af2f; }
.kl-titel { font-size: 19px; font-weight: 800; color: #1e293b; margin-top: 6px; }
.kl-beurs { font-size: 14px; font-weight: 700; color: #334155; margin-top: 10px; }
.kl-plaats { font-size: 12.5px; color: #94a3b8; margin-top: 2px; }

.kl-tijdvak { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px; border-radius: 14px; margin-bottom: 16px; }
.kl-tijdvak.in { background: #f3faee; }
.kl-tijdvak.uit { background: #fef2f2; }
.kl-tijdvak .label { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; color: #64748b; }
.kl-tijdvak .tijd { font-size: 34px; font-weight: 800; color: #1e293b; line-height: 1.1; }

.kl-fout { padding: 13px 15px; margin-bottom: 14px; border-radius: 11px; background: #fef2f2;
  border: 1px solid #fecaca; color: #991b1b; font-size: 13px; line-height: 1.5; }
.kl-melding { padding: 13px 15px; margin-bottom: 14px; border-radius: 11px; font-size: 13px;
  line-height: 1.5; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; }
.kl-melding.goed { background: #f3faee; border-color: #cee9c5; color: #3d7a1f; }

.kl-formulier { display: block; }
.kl-veldlabel { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #94a3b8; margin-bottom: 8px; }
.kl-invoer { width: 100%; padding: 15px; border: 1px solid #e2e8f0; border-radius: 12px;
  font-family: inherit; font-size: 16px; color: #1e293b; background: #fff; margin-bottom: 14px; }
.kl-invoer:focus { outline: none; border-color: #51af2f; }

.kl-knop { display: block; width: 100%; padding: 16px; border: none; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .05em; color: #fff;
  text-align: center; text-decoration: none; cursor: pointer; }
.kl-knop.groen { background: #51af2f; }
.kl-knop.groen:active { background: #467d22; }
.kl-knop.rood { background: #b91c1c; }
.kl-knop.rood:active { background: #911616; }
.kl-knop.grijs { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; }
.kl-knop.grijs:active { background: #e2e8f0; }
.kl-noot { font-size: 11.5px; color: #94a3b8; line-height: 1.5; margin-top: 10px; text-align: center; }

.kl-lijst { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.kl-keuze { display: flex; align-items: center; gap: 11px; padding: 14px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; }
.kl-keuze input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #51af2f; }
.kl-keuze .naam { font-size: 14px; font-weight: 700; color: #1e293b; flex: 1; min-width: 0; }
.kl-keuze .sinds { font-size: 11.5px; color: #94a3b8; flex-shrink: 0; }

.kl-al { margin-bottom: 14px; text-align: center; }
.kl-al-kop { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: #94a3b8; }
.kl-al-naam { font-size: 22px; font-weight: 800; color: #1e293b; margin: 6px 0 4px; }
.kl-al-tekst { font-size: 13px; color: #475569; line-height: 1.55; }

/* Statuskaart bovenaan Klokken: wie ben je, en loopt de tijd nu. */
.kl-statuskaart { padding: 20px 16px; border-radius: 14px; text-align: center; margin-bottom: 12px;
  border: 1px solid; }
.kl-statuskaart.aan { background: #f3faee; border-color: #cee9c5; }
.kl-statuskaart.uit { background: #f8fafc; border-color: #e2e8f0; }
.kl-status-naam { font-size: 18px; font-weight: 800; color: #1e293b; }
.kl-status-regel { display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; color: #64748b; margin-top: 7px; }
.kl-status-teller { font-size: 30px; font-weight: 800; color: #1e293b; margin-top: 8px; line-height: 1.1; }
.kl-status-teller.klein { font-size: 13px; margin: 0; }
.kl-status-sub { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.kl-uitleg { font-size: 12.5px; color: #64748b; line-height: 1.55; text-align: center;
  padding: 0 6px; margin-bottom: 6px; }

.kl-urenrij { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 8px; }
.kl-urenrij.loopt { border-color: #cee9c5; background: #f3faee; }
.kl-urenrij-dag { font-size: 12px; font-weight: 700; color: #334155; flex: 1; min-width: 0; }
.kl-urenrij-tijd { font-size: 12px; color: #64748b; flex-shrink: 0; }
.kl-urenrij-duur { font-size: 13px; font-weight: 800; color: #1e293b; flex-shrink: 0;
  min-width: 74px; text-align: right; }
.kl-urenrij-noot { font-size: 11.5px; color: #9a3412; line-height: 1.5; margin: -4px 0 10px;
  padding: 0 14px; }

/* --- Herkende naam en de eigen geschiedenis ---------------------------- */

/* "Ik ben iemand anders": bewust dichtgeklapt en klein, want het is de
   uitzondering. Het driehoekje van de browser gaat eruit. */
.kl-anders { margin-top: 18px; }
.kl-anders > summary { list-style: none; cursor: pointer; text-align: center; padding: 10px;
  font-size: 12.5px; font-weight: 600; color: #64748b; text-decoration: underline; }
.kl-anders > summary::-webkit-details-marker { display: none; }
.kl-anders[open] > summary { margin-bottom: 12px; }

/* Een eerdere beurs in de geschiedenislijst. Een verlopen beurs blijft
   staan maar is geen link meer, dus die krijgt ook geen klik-uiterlijk. */
.kl-beursrij { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 8px;
  text-decoration: none; color: inherit; }
.kl-beursrij:active { background: #f8fafc; }
.kl-beursrij.dicht { background: #f8fafc; border-style: dashed; }
.kl-beursrij.dicht:active { background: #f8fafc; }
.kl-beursrij-tekst { flex: 1; min-width: 0; }
.kl-beursrij-tekst .kop { display: flex; align-items: center; gap: 7px; }
.kl-beursrij-tekst .naam { font-size: 13px; font-weight: 700; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-beursrij-tekst .sub { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.kl-beursrij-duur { font-size: 13px; font-weight: 800; color: #1e293b; flex-shrink: 0;
  min-width: 74px; text-align: right; }
.kl-beursrij.dicht .kl-beursrij-duur { color: #64748b; }

.kl-totaalregel { margin-top: 14px; padding: 13px 15px; border-radius: 11px; background: #f8fafc;
  border: 1px solid #e2e8f0; font-size: 12.5px; color: #475569; line-height: 1.55;
  text-align: center; }
.kl-totaalregel strong { color: #1e293b; font-weight: 800; }

/* --- Pauze volgens de CAO ----------------------------------------------
   De uren die op het scherm staan zijn netto: de pauze volgens de CAO
   Tentoonstellingsbedrijven is er al af (30 min boven 5,5 uur, 45 min boven
   10 uur). Dat stil doen zou een projectleider aan het rekenen zetten, dus
   het staat erbij. */
.ik-cao { display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 700;
  color: #a16207; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 20px; padding: 0 6px; vertical-align: 1px; }
.ik-kop-rechts .label.cao { font-size: 9px; font-weight: 700; color: #94a3b8;
  letter-spacing: .02em; text-transform: none; margin-top: 2px; }

/* --- Eigen naam verbeteren ---------------------------------------------
   Het potloodje naast de naam klapt het veld eronder open. Dat gaat via een
   verborgen selectievakje en niet via JavaScript, net als "Ik ben iemand
   anders" op de scanpagina: minder om stuk te gaan op de beursvloer. */
.kl-potlood { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 2px; vertical-align: -4px;
  border-radius: 8px; color: #c2ccd8; cursor: pointer; }
.kl-potlood:active { color: #64748b; background: rgba(100, 116, 139, .08); }
.kl-naam-schakelaar { position: absolute; opacity: 0; pointer-events: none; }
.kl-naamvak { display: none; margin-bottom: 14px; padding: 14px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
.kl-naam-schakelaar:checked ~ .kl-naamvak { display: block; }

/* --- Eigen urenoverzicht van de inhuur ---------------------------------
   Deze mannen moeten zonder rekenen kunnen zien wat ze gewerkt hebben, wat
   er aan pauze af gaat en wat er overblijft. Netto staat daarom groot en
   bruto klein eronder, en niet andersom. */
.kl-status-uitsplitsing { display: flex; justify-content: center; gap: 16px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .06); }
.kl-status-uitsplitsing .stuk { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kl-status-uitsplitsing .lbl { font-size: 9px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #94a3b8; }
.kl-status-uitsplitsing .val { font-size: 13px; font-weight: 800; color: #334155; }
.kl-status-uitsplitsing .val.min { color: #a16207; }

/* Eén regel per dag: links de dag en de tijden, rechts groot wat er meetelt
   met de rekensom er klein onder. Kort houden, want dit lijstje wordt op een
   telefoon anders meteen een muur. */
.kl-dagrij { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 7px; }
.kl-dagrij.loopt { border-color: #cee9c5; background: #f7fdf4; }
.kl-dagrij-links { flex: 1; min-width: 0; }
.kl-dagrij-links .kop { display: flex; align-items: center; gap: 6px; }
.kl-dagrij-links .dag { font-size: 13px; font-weight: 800; color: #1e293b; }
.kl-dagrij-links .tijden { font-size: 11.5px; color: #94a3b8; margin-top: 1px;
  font-variant-numeric: tabular-nums; }
.kl-dagrij-rechts { text-align: right; flex-shrink: 0; }
.kl-dagrij-rechts .netto { font-size: 16px; font-weight: 800; color: #3d7a1f;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.kl-dagrij-rechts .som { font-size: 10.5px; color: #94a3b8; margin-top: 1px;
  font-variant-numeric: tabular-nums; }
.kl-dagrij-noot { margin: -3px 0 8px; padding: 0 14px; font-size: 11px;
  line-height: 1.45; color: #9a3412; }

.kl-dagtotaal { display: flex; align-items: baseline; gap: 10px; padding: 13px 15px;
  border-radius: 12px; background: #f3faee; border: 1px solid #cee9c5; margin-top: 4px; }
.kl-dagtotaal .lbl { font-size: 12px; font-weight: 800; color: #3d7a1f; flex: 1; }
.kl-dagtotaal .val { font-size: 19px; font-weight: 800; color: #3d7a1f;
  font-variant-numeric: tabular-nums; }

/* De bevestigingsmelding schuift na een paar tellen weg. Een foutmelding
   (.kl-fout) niet: die blijft staan tot je er iets mee doet. */
.kl-melding { transition: opacity .45s ease, max-height .45s ease,
  margin .45s ease, padding .45s ease; max-height: 200px; overflow: hidden; }
.kl-melding.weg { opacity: 0; max-height: 0; margin-bottom: 0;
  padding-top: 0; padding-bottom: 0; border-width: 0; }

/* Onder "worked" staat er klein bij dat dat getal op het kwartier is
   afgerond, zodat niemand hoeft te gokken waarom het niet gelijk loopt met
   de teller erboven. Dat is een tweede regel, dus de labels krijgen een
   vaste hoogte: anders zakt het ene getal onder het andere. */
.kl-status-uitsplitsing { align-items: flex-start; }
.kl-status-uitsplitsing .lbl { text-align: center; line-height: 1.25; min-height: 24px; }
.kl-status-uitsplitsing .lbl .bij { display: block; font-size: 8.5px; font-weight: 700;
  letter-spacing: .01em; text-transform: none; color: #b4c0ce; }

/* De aftelklok in het QR-scherm. Een QR loopt na een kwartier af; dat moet
   je zien terwijl je hem ophoudt, niet pas merken doordat er niemand meer
   binnenkomt. Rustig grijs, want het is geen alarm. */
.ik-qr-aftel { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: .09em; color: #94a3b8; }
.ik-qr-aftel .klok { font-size: 14px; letter-spacing: 0; color: #475569;
  font-variant-numeric: tabular-nums; }

/* Wat er staat als de tijd om is terwijl het scherm nog open is. */
.ik-qr-verlopen { padding: 26px 16px; margin: 14px 0; text-align: center;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.ik-qr-verlopen .kop { font-size: 15px; font-weight: 800; color: #1e293b; margin-bottom: 6px; }
.ik-qr-verlopen .tekst { font-size: 12.5px; color: #64748b; line-height: 1.55; }

/* --- Formulieren (formulieren.php) --------------------------------------
   Zelfde rij als een tekening bij de plattegronden, met het soort bestand als
   gekleurd blokje ervoor: rood PDF, blauw Word, groen Excel. */
.jf-terug { display: inline-block; margin: 2px 0 12px; font-size: 13px; font-weight: 700;
  color: #64748b; text-decoration: none; }
.jf-terug:active { color: #1e293b; }
.jf-icoon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; font-size: 9.5px; font-weight: 900; letter-spacing: .02em; flex-shrink: 0; }
.jf-icoon.rood   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.jf-icoon.blauw  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.jf-icoon.groen  { background: #f3faee; color: #467d22; border: 1px solid #cee9c5; }
.jf-icoon.oranje { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.jf-icoon.grijs  { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.jf-formulier .oms { font-size: 12px; color: #64748b; line-height: 1.4; margin-top: 1px; }

/* De knop om de QR aan een ander te laten zien. Groot en onderaan, want dat
   is wat je doet als er iemand naast je staat die ook een formulier nodig heeft. */
.jf-deelknop { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  margin-top: 18px; padding: 15px; border: 1px solid #cee9c5; border-radius: 14px;
  background: #f3faee; color: #467d22; font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: .06em; cursor: pointer; }
.jf-deelknop:active { background: #e6f5dc; }

.jf-inlogknop { display: block; margin-top: 14px; padding: 15px; border-radius: 14px; text-align: center;
  background: #51af2f; color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; }

/* --- PDF-kijker (assets/kijker.js) -------------------------------------- */
/* Een tekening opent in de app zelf. Donkere achtergrond, want dan valt het
   wit van de tekening op en zie je meteen waar het papier ophoudt. */
body.pk-vast { overflow: hidden; }

.pk-overlay { position: fixed; inset: 0; z-index: 950; display: flex; flex-direction: column;
  background: #0f172a; }

.pk-balk { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  padding-top: calc(8px + env(safe-area-inset-top)); background: #1e293b; }
.pk-sluit, .pk-zoom { flex: none; width: 38px; height: 38px; border: 0; border-radius: 11px;
  background: rgba(255, 255, 255, .1); color: #fff; font-family: inherit; font-size: 20px;
  font-weight: 800; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pk-sluit { font-size: 26px; }
.pk-sluit:active, .pk-zoom:active { background: rgba(255, 255, 255, .22); }
.pk-titel { flex: 1; min-width: 0; }
.pk-titel .naam { font-size: 13px; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-titel .sub { font-size: 10px; font-weight: 700; color: #94a3b8; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* pan-x pan-y: de browser doet het schuiven, wij doen het knijpen zelf.
   Zonder dit zoomt de browser de hele pagina mee en wordt de tekening wazig. */
.pk-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; background: #334155; }
.pk-lijst { width: max-content; min-width: 100%; padding: 8px 0 14px; }

.pk-pagina { position: relative; margin: 0 auto 10px; background: #fff; border-radius: 4px;
  overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .38); }
.pk-pagina:last-child { margin-bottom: 0; }
.pk-canvas { display: block; width: 100%; height: 100%; }
/* Het scherp nagetekende stuk ligt over de pagina heen, precies op zijn plek. */
.pk-scherp { position: absolute; display: block; }
/* Het paginanummer staat er zolang de pagina nog niet getekend is. Zo zie je
   bij het scrollen door een dik document waar je bent, ook als het nog laadt. */
.pk-nummer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #e2e8f0; }
.pk-pagina.getekend .pk-nummer { display: none; }

.pk-onder { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; padding-bottom: calc(11px + env(safe-area-inset-bottom));
  background: #1e293b; }
.pk-teller { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #94a3b8; }
.pk-open { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #8fd36f;
  text-decoration: none; }

.pk-laden { position: absolute; left: 0; right: 0; top: 54px; bottom: 44px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.pk-laadbalk { width: 60%; max-width: 240px; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .16); }
.pk-laadbalk i { display: block; width: 4%; height: 100%; background: #51af2f; transition: width .25s; }
/* Zolang er geen percentage bekend is (de kijker haalt dan losse stukken op)
   loopt de balk heen en weer. Anders lijkt het of de app hangt. */
.pk-laadbalk.bezig i { width: 38%; animation: pk-schuif 1.3s infinite ease-in-out; transition: none; }
@keyframes pk-schuif { 0% { transform: translateX(-100%); } 100% { transform: translateX(263%); } }
.pk-laadtekst { font-size: 12px; font-weight: 700; color: #cbd5e1; }
.pk-fout { padding: 0 26px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.5;
  color: #fecaca; }

/* --- Uitklokken met handtekening (de pagina achter de QR) ---
   Eén kaartopmaak voor alles op dit scherm, zodat het rijtje uren en het
   tekenvak dezelfde randen en marges hebben als de rest van de app. */
.ku-kaart { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; }
.ku-kop { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; }
.ku-kop .naam { font-size: 15px; font-weight: 800; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ku-kop .label { font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #94a3b8; flex-shrink: 0; }

.ku-rij { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-top: 1px solid #f1f5f9; font-size: 14px; color: #1e293b; }
.ku-rij:first-of-type { border-top: 0; padding-top: 0; }
.ku-rij .tijden { font-weight: 700; font-variant-numeric: tabular-nums; }
.ku-rij .duur { font-size: 12.5px; color: #94a3b8; font-variant-numeric: tabular-nums; }

.ku-totaal { display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 6px; padding-top: 7px; border-top: 1px solid #cbd5e1;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #94a3b8; }
.ku-totaal strong { font-size: 17px; letter-spacing: 0; color: #1e293b;
  text-transform: none; font-variant-numeric: tabular-nums; }
.ku-noot { margin-top: 6px; font-size: 10.5px; color: #b6c0cb; line-height: 1.45; }

.ku-wissen { border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b;
  border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 700;
  font-family: inherit; cursor: pointer; flex-shrink: 0; }
.ku-canvas { display: block; width: 100%; height: 140px; background: #f8fafc;
  border: 1px dashed #cbd5e1; border-radius: 9px; touch-action: none; cursor: crosshair; }
.ku-lijn { margin-top: 5px; text-align: center; font-size: 10.5px; color: #b6c0cb; }
.kl-knop.geblokkeerd { background: #e2e8f0; color: #94a3b8; box-shadow: none; }

/* --- Venue informatie (tabblad Informatie) --- */
/* Rechtsboven in de paginakop, naast de venuenaam waar het over gaat. Bewust
   geen knop maar klikbare tekst: het vraagt zo minder aandacht dan de kop zelf. */
.ja-paginakop .ja-venueknop { flex-shrink: 0; margin-left: auto; display: flex;
  align-items: center; gap: 5px; padding: 6px 2px; background: transparent; border: 0;
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #64748b; }
.ja-paginakop .ja-venueknop svg { flex-shrink: 0; color: #94a3b8; }
.ja-paginakop .ja-venueknop .woorden { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: #cbd5e1; }
.ja-paginakop .ja-venueknop:active { color: #1e293b; }

/* Bewerken is een rustig regeltje, geen knop: lezen is het gewone geval. */
.ja-bewerklink { margin-top: 12px; padding: 6px 0; background: transparent; border: 0;
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #51af2f;
  text-decoration: underline; text-underline-offset: 3px; }
/* Het leesblad in het venster. */
.ja-venue-tekst { font-size: 14px; line-height: 1.6; color: #334155; overflow-wrap: anywhere; }
.ja-venue-tekst.leeg { color: #94a3b8; }

/* Het venster eroverheen. Eenzelfde soort overlay als bij het inklokken. */
.ja-overlay { position: fixed; inset: 0; z-index: 800; display: flex; align-items: flex-end;
  justify-content: center; padding: 0; background: rgba(15, 23, 42, .5); }
.ja-overlay[hidden] { display: none; }
body.ja-vast { overflow: hidden; }

.ja-venster { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  background: #fff; border-radius: 16px 16px 0 0; }
@media (min-width: 560px) {
  .ja-overlay { align-items: center; padding: 20px; }
  .ja-venster { border-radius: 16px; }
}
.ja-venster-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; font-size: 16px; font-weight: 800; color: #1e293b; }
.ja-venster-sluit { flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0;
  border-radius: 9px; background: #f1f5f9; color: #64748b; font-size: 21px; line-height: 1;
  cursor: pointer; font-family: inherit; }
.ja-venster-voetnoot { margin-top: 8px; font-size: 11px; color: #94a3b8; }
.ja-venster-voet { display: flex; gap: 8px; margin-top: 14px; }
.ja-venster-voet .ja-knop { flex: 1; margin-top: 0; }
.ja-knop.groen { background: #51af2f; color: #fff; }

.ja-invoer { display: block; width: 100%; padding: 13px; font-family: inherit; font-size: 14px;
  line-height: 1.55; color: #1e293b; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; -webkit-appearance: none; appearance: none; resize: vertical; }
.ja-invoer:focus { outline: 0; border-color: #51af2f; box-shadow: 0 0 0 3px rgba(81, 175, 47, .15); }
textarea.ja-invoer { max-height: 46vh; }

/* --- Urenstand: geboekte uren tegen de berekening (tabblad Informatie) --- */
.ja-urenstand { padding: 11px 14px 14px 14px; margin-bottom: 12px; }
/* Het restant onder het percentage: hoeveel uur er nog over is of hoeveel
   er al overheen gegaan is. */
.ja-us-restant { display: block; font-size: 11.5px; font-weight: 700; margin-top: 3px; }
.ja-us-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ja-us-tabs { display: inline-flex; padding: 2px; background: #f1f5f9; border-radius: 9px; }
.ja-us-tab { padding: 5px 11px; border: 0; border-radius: 7px; background: transparent;
  font-family: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  color: #94a3b8; cursor: pointer; }
.ja-us-tab.actief { background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(15, 23, 42, .10); }
.ja-us-tab:disabled { opacity: .45; cursor: default; }
.ja-us-datum { font-size: 10.5px; color: #94a3b8; }

.ja-us-cijfers { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 9px; }
.ja-us-pct { font-size: 22px; font-weight: 800; line-height: 1; }
.ja-us-pct.leeg { font-size: 15px; font-weight: 800; color: #94a3b8; line-height: 1.3; }
.ja-us-uren { font-size: 12.5px; font-weight: 700; color: #1e293b; }
/* Het berekende getal is klikbaar: daarachter zit de opbouw van de som. */
.ja-us-berekening { display: inline-flex; align-items: center; gap: 4px; padding: 0;
  border: 0; background: transparent; font-family: inherit; font-size: 12.5px;
  font-weight: 700; color: #51af2f; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; }
.ja-us-berekening svg { flex-shrink: 0; text-decoration: none; }
/* Lucht onder de dagen, anders plakken ze tegen de rand van de kaart. */
.ja-us-grafiek { display: block; margin-top: 7px; margin-bottom: 6px; }
.ja-us-leeg { margin-top: 9px; font-size: 12px; color: #94a3b8; }

/* De berekening in het venster. */
.ja-ber-regel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid #eef2f7; }
.ja-ber-regel .titel { font-size: 13px; font-weight: 700; color: #1e293b; }
.ja-ber-regel .sub { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.ja-ber-regel .uren { flex-shrink: 0; font-size: 13px; font-weight: 700; color: #1e293b; }
.ja-ber-totaal { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding: 10px 0 2px; border-top: 2px solid #1e293b;
  font-size: 13px; font-weight: 800; color: #1e293b; }
.ja-ber-totaal span:last-child { font-size: 16px; }
.ja-ber-tegenover { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef2f7;
  font-size: 12px; color: #64748b; }
.ja-ber-tegenover span:last-child { font-size: 13px; font-weight: 800; }