/* ==========================================================================
   Urenregistratie – huisstijl
   Kaartpapier (koel blauwgrijs), inktblauw, havenkraan-geel als signaal.
   Koppen: Bricolage Grotesque · Tekst en cijfers: Instrument Sans
   ========================================================================== */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700; font-display: swap;
}

:root {
  --papier: #edf0f3;
  --vlak: #ffffff;
  --inkt: #18283a;
  --inkt-zacht: #4a5a6b;
  --grijs: #6d7b89;
  --lijn: #d9dfe5;
  --lijn-zacht: #e8ecf0;
  --kraan: #f2b230;
  --kraan-diep: #c98a0c;
  --kraan-licht: #fdf0d2;
  --haven: #2d6a8f;
  --rood: #b8392a;
  --rood-licht: #fbe9e6;
  --groen: #2f7a57;
  --groen-licht: #e3f2ea;
  --oranje: #b26a00;
  --kop: "Bricolage", "Avenir Next", system-ui, sans-serif;
  --tekst: "Instrument", "Helvetica Neue", system-ui, sans-serif;
  --r-klein: 6px;
  --r: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--tekst); color: var(--inkt); background: var(--papier); font-variant-numeric: tabular-nums; }
a { color: var(--haven); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--kraan); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 { font-family: var(--kop); font-weight: 650; letter-spacing: -0.01em; line-height: 1.15; }
h1 { font-size: 1.85rem; margin: 0 0 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; margin: 0 0 .85rem; }
h3 { font-size: 1rem; margin: 1.3rem 0 .45rem; }
code { background: var(--lijn-zacht); padding: .1em .4em; border-radius: 4px; font-size: .88em; word-break: break-all; }

/* ---------- Zijbalk ---------- */
body.met-zijbalk { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.zijbalk { background: var(--inkt); color: #c9d3dd; padding: 1.3rem .9rem 1rem; display: flex; flex-direction: column; gap: 1.2rem;
           position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.woordmerk { display: flex; align-items: center; gap: .6rem; color: #fff; font: 700 1.12rem/1.1 var(--kop); letter-spacing: -0.01em; padding: 0 .55rem; }
.woordmerk:hover { text-decoration: none; }
.merkteken { width: 24px; height: 24px; border-radius: 7px; flex: none; position: relative;
  background: var(--kraan); }
.merkteken::after { content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: conic-gradient(var(--inkt) 0 25%, transparent 0); }
.zijbalk .merkteken::after { background: conic-gradient(var(--inkt) 0 25%, transparent 0); }
.los-merk { display: flex; align-items: center; gap: .6rem; font: 700 1.2rem var(--kop); letter-spacing: -0.01em; margin: 0 0 1.2rem .3rem; }
.los-merk .merkteken { width: 30px; height: 30px; border-radius: 8px; }
.los-merk .merkteken::after { inset: 6px; }
.menu > summary { display: none; }
.menugroep { display: flex; flex-direction: column; gap: 1px; margin-bottom: 1rem; }
.groepnaam { font-size: .78rem; color: #8193a5; padding: 0 .6rem .25rem; }
.menugroep a { color: #d6dee6; padding: .42rem .6rem; border-radius: var(--r-klein); font-size: .95rem; }
.menugroep a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.menugroep a.actief { background: rgba(242,178,48,.14); color: #fff; box-shadow: inset 3px 0 0 var(--kraan); }
.ik { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: .9rem; display: flex; flex-direction: column; gap: .35rem; }
.ik-naam { display: flex; align-items: center; gap: .55rem; color: #fff; padding: .3rem .55rem; border-radius: var(--r-klein); }
.ik-naam:hover, .ik-naam.actief { background: rgba(255,255,255,.07); text-decoration: none; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--haven); color: #fff; display: grid; place-items: center; font: 600 .85rem var(--kop); }
.ik .link { color: #8fa1b3; font-size: .85rem; padding: 0 .6rem; }
.ik .link:hover { color: #fff; }

main { padding: 1.8rem 2.2rem 3rem; max-width: 1360px; width: 100%; }
body.zonder-zijbalk main { margin: 0 auto; max-width: 560px; padding-top: 9vh; }

@media (max-width: 860px) {
  body.met-zijbalk { display: block; }
  .zijbalk { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .8rem 1rem; gap: .6rem; }
  .menu { order: 3; width: 100%; }
  .menu > summary { display: inline-block; color: #fff; cursor: pointer; padding: .3rem .6rem; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-klein); }
  .menu:not([open]) nav { display: none; }
  .menu nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem 1rem; margin-top: .8rem; }
  .ik { margin: 0 0 0 auto; border: 0; padding: 0; flex-direction: row; align-items: center; }
  main { padding: 1.2rem 1rem 2.5rem; }
}

/* ---------- Bouwstenen ---------- */
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.3rem 1.45rem; margin-bottom: 1.25rem; }
.kaart.smal { max-width: 500px; }
body.zonder-zijbalk .kaart { padding: 2rem 2rem 1.6rem; border: 0; box-shadow: 0 1px 0 var(--lijn), 0 12px 40px -18px rgba(24,40,58,.35); }
body.zonder-zijbalk .kaart h1 { font-size: 1.6rem; }


.twee-kolommen { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 1.25rem; align-items: start; }
.twee-kolommen.gelijk { grid-template-columns: 1fr 1fr; }
.drie-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; align-items: start; }
.twee-kolommen > *, .drie-kolommen > * { min-width: 0; }
@media (max-width: 1100px) { .twee-kolommen, .twee-kolommen.gelijk, .drie-kolommen { grid-template-columns: 1fr; } }

.paginakop { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .8rem 1.2rem; margin-bottom: 1.2rem; }
.paginakop h1 { margin: 0; }
.weeknav { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

/* ---------- Formulieren ---------- */
label { display: block; font-size: .86rem; font-weight: 600; color: var(--inkt-zacht); margin-bottom: .85rem; }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem; font: 400 .95rem var(--tekst); color: var(--inkt);
  border: 1px solid #c7d0d9; border-radius: var(--r-klein); background: #fff; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: #a9b6c3; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--haven); box-shadow: 0 0 0 3px rgba(45,106,143,.18); }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--inkt); }
label.vink { display: flex; align-items: center; gap: .55rem; font-weight: 400; color: var(--inkt); }
label.vink input { width: auto; margin: 0; }
label.inline { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
label.inline input { margin: 0; }
input.code { font: 600 1.5rem var(--kop); letter-spacing: .35em; text-align: center; }
.rij { display: grid; grid-template-columns: 1fr 2fr; gap: .8rem; }

.urenform { display: flex; flex-wrap: wrap; gap: 0 .8rem; align-items: flex-end; }
.urenform > label { flex: 1 1 170px; }
.urenform > label.datumveld { flex: 0 0 150px; }
.urenform > label.smalveld { flex: 0 0 90px; }
.urenform > label.breed { flex: 1 1 420px; }
.urenform .acties { margin-bottom: .85rem; }

/* ---------- Knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--kraan); color: var(--inkt);
  border: 0; border-radius: var(--r-klein); padding: .58rem 1.05rem; font: 650 .95rem var(--tekst); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 -2px 0 var(--kraan-diep); transition: transform .08s, background .12s; }
.knop:hover { background: #f5bf4e; text-decoration: none; }
.knop:active { transform: translateY(1px); box-shadow: none; }
.knop.licht { background: #fff; color: var(--inkt); box-shadow: inset 0 0 0 1px #c7d0d9; }
.knop.licht:hover { background: var(--lijn-zacht); }
.knop.klein { padding: .32rem .7rem; font-size: .85rem; color: var(--inkt); }
.knop.gevaar { color: var(--rood); }
.knop.donker { background: var(--inkt); color: #fff; box-shadow: none; }
.knop.donker:hover { background: #24384e; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--haven); cursor: pointer; }
.link:hover { text-decoration: underline; }
.link.gevaar { color: var(--rood); margin-left: .6rem; }
form.inline { display: inline; }
form.los { margin-top: 1rem; }
.acties { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .82rem; color: var(--grijs); font-weight: 600; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid var(--lijn-zacht); vertical-align: middle; }
tbody tr:hover td { background: #f7f9fb; }
tfoot th { color: var(--inkt); font-size: .92rem; border-bottom: 0; border-top: 2px solid var(--lijn); }
.num { text-align: right; white-space: nowrap; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
td.smal { width: 64px; }
.tabelwrap { overflow-x: auto; }
table.week th.vandaag { color: var(--inkt); box-shadow: inset 0 -3px 0 var(--kraan); }
tr.inactief td { color: var(--grijs); }
.leeg { color: var(--grijs); }
.grijs { color: var(--grijs); font-weight: 400; }
.klein { font-size: .86rem; color: var(--grijs); }
.label { display: inline-block; font-size: .74rem; background: var(--lijn-zacht); color: var(--inkt-zacht); border-radius: 999px; padding: .08em .6em; font-weight: 600; vertical-align: 1px; }

/* ---------- Meldingen ---------- */
.melding { padding: .75rem 1rem; border-radius: var(--r-klein); margin-bottom: 1rem; background: var(--groen-licht); color: var(--groen); border-left: 4px solid var(--groen); }
.melding.fout { background: var(--rood-licht); color: var(--rood); border-left-color: var(--rood); }
.qr { text-align: center; }
.qr img { border: 1px solid var(--lijn); border-radius: var(--r); }

/* ---------- Budget en kengetallen ---------- */
.balk { position: relative; height: 8px; background: var(--lijn-zacht); border-radius: 4px; overflow: hidden; min-width: 90px; }
.balk > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--groen); border-radius: 4px; }
.balk.oranje > span { background: var(--kraan-diep); }
.balk.rood > span { background: var(--rood); }
.pct { font-size: .8rem; color: var(--grijs); }
.pct.oranje { color: var(--oranje); font-weight: 600; }
.pct.rood { color: var(--rood); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1rem 1.15rem; }
.kpi .waarde { font: 700 1.55rem/1.15 var(--kop); letter-spacing: -0.02em; margin-top: .15rem; }
.kpi .naam { font-size: .84rem; color: var(--grijs); }
.faseveld input { margin-top: 0; }
table.fasebudget input { width: 110px; display: inline-block; }
.verborgen { display: none !important; }

/* ---------- Klantpagina ---------- */
.contacten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.contact { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .25rem; font-size: .92rem; }
.contact.inactief { opacity: .6; }
.contactkop { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.contactacties { font-size: .8rem; white-space: nowrap; }
.contactacties .link.gevaar { margin-left: .4rem; }
.contactregels { display: flex; flex-direction: column; }
table.gegevens td { vertical-align: top; }
table.gegevens td:first-child { width: 120px; }

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

/* ==========================================================================
   Uren: kop, weergaveschakelaar
   ========================================================================== */
.urenkop { align-items: flex-end; }
.weekregel { display: flex; align-items: center; gap: .35rem; margin-top: .1rem; }
.weektitel { font-size: .98rem; color: var(--inkt-zacht); margin-left: .35rem; }
.schakelaar { display: inline-flex; background: #fff; border: 1px solid #c7d0d9; border-radius: 999px; padding: 3px; }
.schakelaar a { padding: .32rem .9rem; border-radius: 999px; color: var(--inkt-zacht); font-weight: 600; font-size: .9rem; }
.schakelaar a:hover { text-decoration: none; color: var(--inkt); }
.schakelaar a[aria-current] { background: var(--inkt); color: #fff; }

/* ==========================================================================
   Weekagenda
   ========================================================================== */
.agenda { --tijdas: 58px; --dagen: 5; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden;
          user-select: none; -webkit-user-select: none; }
.agenda[data-laden] { min-height: 420px; display: grid; place-items: center; }
.agenda-kop, .zonder-tijd, .agenda-raster { display: grid; grid-template-columns: var(--tijdas) repeat(var(--dagen), minmax(0, 1fr)); }
.agenda-kop { border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.daghoofd { padding: .7rem .75rem .65rem; border-left: 1px solid var(--lijn-zacht); display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .1rem .5rem; }
.dagnaam { display: flex; align-items: baseline; gap: .35rem; }
.dag-kort { color: var(--grijs); font-size: .9rem; }
.dag-nr { font: 650 1.45rem/1 var(--kop); letter-spacing: -0.02em; }
.daghoofd.vandaag .dag-nr { background: var(--kraan); border-radius: 8px; padding: .12rem .38rem; }
.dagtotaal { font: 600 .95rem var(--kop); color: var(--inkt-zacht); }
.dagbalk { grid-column: 1 / -1; height: 4px; background: var(--lijn-zacht); border-radius: 2px; overflow: hidden; margin-top: .45rem; }
.dagbalk span { display: block; height: 100%; background: var(--inkt); border-radius: 2px; transition: width .3s ease; }
.dagbalk.vol span { background: var(--kraan-diep); }

.zonder-tijd { border-bottom: 1px solid var(--lijn); background: #f7f9fb; }
.zonder-tijd .tijdas-hoek { padding: .45rem .4rem; font-size: .72rem; text-align: right; }
.zonder-tijd-dag { border-left: 1px solid var(--lijn-zacht); padding: .35rem; display: flex; flex-direction: column; gap: .3rem; }

.agenda-scroll { height: min(68vh, 720px); overflow-y: auto; position: relative; scroll-behavior: auto; }
.agenda-raster { position: relative; }
.tijdas { position: relative; }
.tijdas span { position: absolute; right: .55rem; transform: translateY(-50%); font-size: .76rem; color: var(--grijs); }
.dagkolom { position: relative; border-left: 1px solid var(--lijn-zacht); cursor: crosshair; touch-action: none;
  background-image: linear-gradient(var(--lijn-zacht) 1px, transparent 1px), linear-gradient(#f3f5f7 1px, transparent 1px);
  background-size: 100% 54px, 100% 27px; }
.dagkolom.weekend { background-color: #f8f9fb; }
.dagkolom.vandaag { background-color: #fffcf3; }
.nu-lijn { position: absolute; left: -1px; right: 0; height: 2px; background: var(--kraan-diep); z-index: 4; pointer-events: none; }
.nu-lijn::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--kraan-diep); }

/* Blokken: kleur per klant via --h */
.blok { --h: 210; position: absolute; z-index: 2; overflow: hidden; border-radius: 7px; padding: .3rem .5rem .3rem .6rem;
  background: hsl(var(--h) 62% 93%); color: hsl(var(--h) 45% 18%); border-left: 4px solid hsl(var(--h) 52% 46%);
  font-size: .8rem; line-height: 1.3; cursor: grab; touch-action: none; box-shadow: 0 1px 0 hsl(var(--h) 30% 80%); }
.blok:hover { background: hsl(var(--h) 66% 90%); }
.blok:focus-visible { outline: 3px solid var(--kraan); outline-offset: 1px; }
.blok.niet-declarabel { background-image: repeating-linear-gradient(135deg, transparent 0 7px, hsl(var(--h) 40% 86% / .7) 7px 9px); }
.blok.vast { cursor: default; filter: saturate(.35); }
.blok.sleept { z-index: 5; cursor: grabbing; box-shadow: 0 10px 24px -8px rgba(24,40,58,.45); opacity: .95; }
.blok.nieuw { background: var(--kraan-licht); border-left-color: var(--kraan-diep); color: var(--inkt); box-shadow: inset 0 0 0 1px var(--kraan); }
.blok.net-opgeslagen { animation: oplichten 1.1s ease-out; }
@keyframes oplichten { from { box-shadow: 0 0 0 4px var(--kraan); } to { box-shadow: 0 0 0 0 transparent; } }
.blok-tijd { font-weight: 600; font-size: .74rem; opacity: .8; white-space: pre; }
.blok-klant { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blok-project, .blok-oms { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blok-oms { opacity: .75; }
.blok-slot { font-size: .7rem; font-weight: 600; opacity: .7; }
.blok.kort { display: flex; gap: .4rem; align-items: baseline; padding-top: .1rem; padding-bottom: 0; }
.blok.kort .blok-project, .blok.kort .blok-oms, .blok.kort .blok-slot { display: none; }
.blok.los { position: relative; cursor: pointer; padding: .25rem .45rem .25rem .5rem; }
.greep { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.greep::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px;
  background: hsl(var(--h) 40% 50% / .45); opacity: 0; transition: opacity .12s; }
.blok:hover .greep::after { opacity: 1; }

.agenda-voet { display: flex; align-items: center; gap: 1.2rem; padding: .75rem 1rem; border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.weektotaal strong { font: 700 1.25rem var(--kop); letter-spacing: -0.01em; }
.agenda-voet .vink { margin: 0 0 0 auto; }
.agenda-hulp { padding: 1rem; }

.agenda-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 140%); background: var(--inkt); color: #fff; padding: .65rem 1.1rem;
  border-radius: 999px; font-size: .92rem; box-shadow: 0 10px 30px -10px rgba(24,40,58,.6); transition: transform .22s ease, visibility 0s .22s; z-index: 50; max-width: 90vw;
  visibility: hidden; transform: translate(-50%, 250%); }
.agenda-toast.zichtbaar { transform: translate(-50%, 0); visibility: visible; transition: transform .22s ease; }
.agenda-toast.fout { background: var(--rood); }

/* Dialoog */
.blokdialoog { border: 0; padding: 0; border-radius: 14px; width: min(520px, calc(100vw - 2rem)); color: var(--inkt);
  box-shadow: 0 30px 80px -20px rgba(24,40,58,.55); }
.blokdialoog::backdrop { background: rgba(24,40,58,.38); backdrop-filter: blur(2px); }
.blokdialoog[open] { animation: dialoogIn .16s ease-out; }
@keyframes dialoogIn { from { transform: translateY(8px) scale(.985); opacity: 0; } }
.dialoog-kop { background: var(--inkt); color: #fff; padding: 1.05rem 1.4rem .95rem; }
.dialoog-kop h2 { margin: 0; color: #fff; font-size: 1.25rem; }
.dialoog-tijd { color: #f6cf7a; font-size: .95rem; margin-top: .2rem; min-height: 1.4em; }
.dialoog-velden { padding: 1.2rem 1.4rem .2rem; }
.rij-3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .7rem; }
.soortkeuze { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .95rem; }
.soortkeuze .soort { margin: 0; font-weight: 500; }
.soortkeuze .soort input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.soortkeuze .soort span { display: inline-block; padding: .38rem .8rem; border: 1px solid #c7d0d9; border-radius: 999px; cursor: pointer; color: var(--inkt); font-size: .88rem; }
.soortkeuze .soort.niet-declarabel span { border-style: dashed; }
.soortkeuze .soort input:checked + span { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.soortkeuze .soort input:focus-visible + span { outline: 3px solid var(--kraan); outline-offset: 2px; }
.dialoog-acties { display: flex; align-items: center; gap: .5rem; padding: .9rem 1.4rem 1.2rem; border-top: 1px solid var(--lijn-zacht); }
.dialoog-acties .ruimte { flex: 1; }
.dialoog-fout { margin: 0 0 .8rem; }

@media (max-width: 700px) {
  .agenda { --tijdas: 44px; }
  .daghoofd { padding: .5rem .35rem; grid-template-columns: 1fr; }
  .dag-nr { font-size: 1.1rem; }
  .blok-project, .blok-oms { display: none; }
  .rij-3 { grid-template-columns: 1fr 1fr; }
  .rij-3 label:first-child { grid-column: 1 / -1; }
}

.veldlabel { font-size: .86rem; font-weight: 600; color: var(--inkt-zacht); margin-bottom: .1rem; }

/* Klantpagina */
.gegevenskaart table.gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); column-gap: 2rem; }
.gegevenskaart table.gegevens tbody { display: contents; }
.gegevenskaart table.gegevens tr { display: grid; grid-template-columns: 130px minmax(0, 1fr); border-bottom: 1px solid var(--lijn-zacht); }
.gegevenskaart table.gegevens td:first-child { width: auto; }
.gegevenskaart table.gegevens td { border: 0; }
.gegevenskaart table.gegevens tr:hover td { background: none; }
table.personen td { vertical-align: top; }
.label.factuurlabel { background: var(--kraan-licht); color: #7a5200; }
.contactform { max-width: 720px; }
.ontvangers { display: flex; flex-direction: column; gap: .2rem; margin: .3rem 0 .8rem; }
.ontvangers .vink { margin: 0; align-items: flex-start; }
.ontvangers .vink input { margin-top: .2rem; }

/* ---------- Urentegoed, export, verlof, websites ---------- */
.kaartkop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.kaartkop h2 { margin: 0; }
.signaal { padding: .6rem 1rem; border-radius: var(--r-klein); margin-bottom: .8rem; font-weight: 600; background: var(--kraan-licht); color: #7a5200; border-left: 4px solid var(--kraan); }
.signaal.rood { background: var(--rood-licht); color: var(--rood); border-left-color: var(--rood); }
.tegoedkop { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 2rem; align-items: end; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--lijn-zacht); }
.tegoedkop .balk { margin-top: .4rem; display: inline-block; width: calc(100% - 3.5rem); vertical-align: middle; }
.groot { font: 700 1.6rem/1.1 var(--kop); letter-spacing: -0.02em; }
.uitklap { margin-top: 1rem; }
.uitklap summary { cursor: pointer; color: var(--haven); font-weight: 600; }
.tegoedinfo { margin: -.2rem 0 .2rem; padding: .35rem .7rem; background: var(--kraan-licht); color: #7a5200; border-radius: var(--r-klein); font-size: .88rem; font-weight: 600; }
.urenform .tegoedinfo { grid-column: 1 / -1; margin: 0; }
.exportfilter { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem .8rem; align-items: end; margin-bottom: .8rem; }
.exportfilter label { margin: 0; }
.filterknoppen { align-self: end; }
.snelkeuzes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.snelkeuzes a { font-size: .82rem; padding: .18rem .7rem; border-radius: 999px; background: var(--lijn-zacht); color: var(--inkt-zacht); font-weight: 600; }
.snelkeuzes a[aria-current] { background: var(--inkt); color: #fff; }
.kpi.hoofd { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.kpi.hoofd .naam, .kpi.hoofd .klein { color: #b8c4d0; }
.kpi.hoofd.negatief { background: var(--rood); border-color: var(--rood); }
.saldo-uitleg { margin: -.4rem 0 1.2rem; }
.ziekbanner { background: var(--kraan-licht); border-color: var(--kraan); }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.inline-form label.inline, .inline-form input { margin: 0; }
label.inline { display: inline-flex; align-items: center; gap: .5rem; }
label.inline input { width: auto; margin: 0; }
.feestlijst { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; font-size: .9rem; }
.feestlijst li { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem 0; break-inside: avoid; }
.status { display: inline-block; font-size: .78rem; font-weight: 700; padding: .08em .6em; border-radius: 999px; background: var(--lijn-zacht); color: var(--inkt-zacht); }
.status.aangevraagd { background: var(--kraan-licht); color: #7a5200; }
.status.goedgekeurd { background: var(--groen-licht); color: var(--groen); }
.status.afgewezen { background: var(--rood-licht); color: var(--rood); }
.aanvraagkop { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.aanvraagkop h2 { margin-bottom: .3rem; }
.aanvraagknoppen { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; }
.afwijsform { display: inline-flex; gap: .4rem; }
.afwijsform input { margin: 0; width: 180px; }
.tegelijk { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--lijn-zacht); }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--lijn); margin-bottom: 1.2rem; flex-wrap: wrap; }
.tabs a { padding: .5rem .9rem; color: var(--inkt-zacht); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { text-decoration: none; color: var(--inkt); }
.tabs a[aria-current] { color: var(--inkt); border-bottom-color: var(--kraan); }
.teller { display: inline-block; min-width: 1.4em; text-align: center; background: var(--kraan); color: var(--inkt); border-radius: 999px; font-size: .78rem; padding: 0 .4em; margin-left: .2rem; }
.smalinvoer { width: 7rem; margin: 0; padding: .3rem .5rem; }
.roostertabel { border-collapse: collapse; margin-bottom: 1rem; }
.roostertabel th { font-size: .85rem; color: var(--grijs); padding: .3rem .4rem; text-align: left; font-weight: 600; }
.roostertabel td { padding: .2rem; }
.dagveld { width: 4.2rem; margin: 0; padding: .35rem .4rem; text-align: center; }
/* Afwezigheidskalender */
.afwkalender { border-collapse: separate; border-spacing: 2px; font-size: .78rem; }
.afwkalender thead th { font-weight: 600; color: var(--inkt-zacht); text-align: center; min-width: 26px; padding: .2rem 0; line-height: 1.15; }
.afwkalender thead th span { display: block; font-size: .68rem; color: var(--grijs); font-weight: 500; }
.afwkalender thead th.vandaag { background: var(--kraan); border-radius: 6px; }
.afwkalender tbody th { text-align: left; white-space: nowrap; padding-right: .8rem; font-weight: 600; }
.afwkalender td { height: 26px; background: var(--lijn-zacht); border-radius: 5px; position: relative; padding: 0; }
.afwkalender td.weekend, .afwkalender th.weekend { background: transparent; }
.afwkalender td.feest { background: repeating-linear-gradient(135deg, #f6e3b5 0 4px, #fdf0d2 4px 8px); }
.afwkalender td.roostervrij { background: repeating-linear-gradient(135deg, #dde3e9 0 3px, #eef1f4 3px 7px); }
.afwkalender .vlak { position: absolute; inset: 0; border-radius: 5px; }
.afwkalender .vlak.half { inset: 50% 0 0 0; border-radius: 0 0 5px 5px; }
.afwkalender td.vakantie .vlak, .legenda i.vakantie { background: var(--haven); }
.afwkalender td.ander .vlak, .legenda i.ander { background: #7d5ba6; }
.afwkalender td.ziek .vlak, .legenda i.ziek { background: var(--rood); }
.afwkalender td.afwezig .vlak, .legenda i.afwezig { background: var(--grijs); }
.afwkalender td.aangevraagd .vlak, .legenda i.aangevraagd { background: repeating-linear-gradient(135deg, var(--kraan) 0 4px, var(--kraan-licht) 4px 8px); }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; }
.legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: .35rem; background: var(--lijn-zacht); }
.legenda i.feest { background: repeating-linear-gradient(135deg, #f6e3b5 0 4px, #fdf0d2 4px 8px); }
.legenda i.roostervrij { background: repeating-linear-gradient(135deg, #dde3e9 0 3px, #eef1f4 3px 7px); }
/* Agenda: afwezigheid */
.dagbalk { position: relative; }
.dagbalk span.weg { position: absolute; top: 0; height: 100%; background: repeating-linear-gradient(135deg, var(--grijs) 0 3px, #b9c3cc 3px 6px); border-radius: 0; }
.dagchip { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; background: #e3ebf2; color: var(--haven); border-radius: 5px; padding: .08rem .4rem; margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dagchip.feest { background: var(--kraan-licht); color: #7a5200; }
.dagchip.ziek { background: var(--rood-licht); color: var(--rood); }
.dagchip.aangevraagd { background: transparent; border: 1px dashed var(--haven); }
.afwezigrij td { color: var(--haven); background: #f3f7fa; }
#vrijvragen { margin-left: .6rem; }
/* Websites */
.kenmerken { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; margin-bottom: 1.25rem; }
.kenmerk { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: .85rem 1rem; }
.kenmerk .naam { font-size: .8rem; color: var(--grijs); }
.kenmerk .waarde { font: 650 1.1rem/1.25 var(--kop); margin: .15rem 0 .2rem; word-break: break-word; }
.kenmerk .bron { font-size: .74rem; color: var(--grijs); }
.stip { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--grijs); margin-right: .35rem; vertical-align: 1px; }
.stip.groen { background: var(--groen); } .stip.oranje { background: var(--kraan-diep); } .stip.rood { background: var(--rood); }
.signaalfilter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.signaalfilter a { font-size: .82rem; padding: .22rem .75rem; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); color: var(--inkt-zacht); font-weight: 600; }
.signaalfilter a[aria-current] { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.signaallijst { list-style: none; padding: 0; margin: 0; }
.signaallijst li { padding: .15rem 0; font-size: .86rem; }
.tijdlijn { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--lijn); }
.tijdlijn li { padding: .3rem 0 .3rem 1rem; position: relative; font-size: .9rem; }
.tijdlijn li::before { content: ""; position: absolute; left: -6px; top: .75rem; width: 10px; height: 10px; border-radius: 50%; background: var(--kraan); }

fieldset.regels { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: .7rem .9rem .8rem; margin: 0 0 1rem; }
fieldset.regels legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
[hidden] { display: none !important; }
.aboregel { display: grid; grid-template-columns: minmax(0, 2.4fr) 110px 132px 132px 24px; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.aboregel input { margin: 0; padding: .4rem .5rem; }
#abowebsites { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
#abowebsites legend { width: 100%; }
#abowebsites .klein { width: 100%; margin: 0; }
@media (max-width: 700px) { .aboregel { grid-template-columns: 1fr 100px 28px; } .aboregel input[type=date] { display: none; } }