/* BIZ-controle — huisstijl De Hurk Werkt (www.dehurkwerkt.nl): groen #0A6162, oranje #F39200, Montserrat. */
:root {
  --groen: #0A6162; --groen-2: #007E85; --groen-licht: #E6F0F0; --oranje: #F39200; --oranje-licht: #FDEFD9; --oranje-tekst: #8A4F00;
  --rood: #E6332A; --rood-tekst: #C4261E; --rood-licht: #FCE8E7; --donker: #0D303A; --zacht: #55686C; --grijs: #F0F0F0;
  --lijn: #DDE3E3; --lijn-licht: #ECEFEF; --veld: #C9D3D3; --rij: #F6F8F8; --wit: #FFFFFF; --balk: #E4E9E9;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--grijs); color: var(--donker); font: 14px/1.45 var(--font); }
a { color: var(--groen); } a:hover { color: var(--groen-2); }
h1 { margin: 4px 0 0; font-size: 28px; font-weight: 700; color: var(--groen); }
h2 { margin: 0; font-size: 18px; font-weight: 700; }
h3 { margin: 0; font-size: 15px; font-weight: 700; }
[hidden] { display: none !important; }
.zacht { color: var(--zacht); } .klein { font-size: 12px; } .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vet { font-weight: 700; } .rood { color: var(--rood-tekst); } .oranje { color: var(--oranje-tekst); } .groen { color: var(--groen); }
.sr { position: absolute; left: -9999px; }

/* ---------- layout */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.zij { flex: 1 1 240px; max-width: 260px; background: var(--groen); padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; }
.merk { background: var(--wit); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.merk img { height: 44px; width: auto; } .merk span { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--groen); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px; color: #DCEBEB; text-decoration: none; font-weight: 500; min-height: 44px; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: var(--wit); }
.nav a.actief { background: var(--wit); color: var(--groen); font-weight: 600; }
.nav svg { flex: none; }
.teller { margin-left: auto; background: var(--oranje); color: var(--donker); border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.wie { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 16px; display: flex; align-items: center; gap: 10px; color: var(--wit); text-decoration: none; }
.wie:hover { color: var(--wit); }
.avatar { width: 36px; height: 36px; border-radius: 18px; background: var(--oranje); color: var(--donker); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.wie small { display: block; color: #CFE3E3; font-size: 12px; }
.hoofd { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.kop { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.kop > div:first-child { flex: 1 1 300px; }
.boven { font-size: 13px; color: var(--zacht); font-weight: 500; }
.menuknop { display: none; }

/* ---------- onderdelen */
.kaart { background: var(--wit); border-radius: 12px; padding: 22px 24px; }
.kaart.groen { background: var(--groen); color: var(--wit); } .kaart.groen .k, .kaart.groen .s { color: #CFE3E3; }
.kaart.oranje { background: #FFF6E8; } .kaart.licht { background: var(--groen-licht); }
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tegel .k { font-size: 13px; color: var(--zacht); font-weight: 500; } .tegel .w { font-size: 26px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tegel .s { font-size: 12px; color: var(--zacht); margin-top: 4px; }
.rij2 { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.rij2 > * { min-width: 0; }
.scroll { overflow-x: auto; }
.balk { height: 10px; border-radius: 5px; background: var(--balk); overflow: hidden; display: flex; }
.balk > span { display: block; height: 100%; }
.label { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--groen-licht); color: var(--groen); text-transform: uppercase; letter-spacing: .02em; }
.label.oranje { background: var(--oranje-licht); color: var(--oranje-tekst); } .label.rood { background: var(--rood-licht); color: var(--rood-tekst); }
.label.grijs { background: var(--balk); color: var(--zacht); }
.stip { flex: none; width: 10px; height: 10px; border-radius: 5px; margin-top: 5px; background: var(--zacht); }
.stip.fout { background: var(--rood); } .stip.waarschuwing { background: var(--oranje); }
.melding { padding: 11px 14px; border-radius: 8px; } .melding.fout { background: var(--rood-licht); color: var(--rood-tekst); }
.melding.goed { background: var(--groen-licht); color: var(--groen); } .melding.let { background: #FFF6E8; color: #6B3E00; }
.leeg { color: var(--zacht); padding: 18px 0; }

table.t { width: 100%; border-collapse: collapse; }
.t th { padding: 8px; text-align: left; font-size: 12px; font-weight: 600; color: var(--zacht); border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.t td { padding: 11px 8px; border-bottom: 1px solid var(--lijn-licht); vertical-align: middle; }
.t tr.klik { cursor: pointer; } .t tr.klik:hover td { background: var(--rij); }
.t tr.post td { font-weight: 600; } .t tr.proj td { background: var(--rij); font-size: 13px; } .t tr.proj td:first-child { padding-left: 30px; }
.t tr.totaal td { font-weight: 700; padding-top: 14px; }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px; padding: 10px 16px;
  border-radius: 8px; min-height: 44px; cursor: pointer; border: 1px solid var(--veld); background: var(--wit); color: var(--donker); text-decoration: none; }
.knop:hover { border-color: var(--groen); color: var(--donker); }
.knop.primair { background: var(--groen); border-color: var(--groen); color: var(--wit); } .knop.primair:hover { background: var(--groen-2); color: var(--wit); }
.knop.accent { background: var(--oranje); border-color: var(--oranje); color: var(--donker); }
.knop.gevaar { color: var(--rood-tekst); border-color: var(--rood); }
.knop.klein { min-height: 34px; padding: 5px 10px; font-size: 12px; }
.knop:disabled { opacity: .45; cursor: default; }
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; }

.veld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.veld input, .veld select, .veld textarea, input.inv, select.inv {
  font: inherit; font-weight: 400; font-size: 15px; color: var(--donker); padding: 10px 12px; border: 1px solid var(--veld); border-radius: 8px; background: var(--wit); min-height: 44px; width: 100%; }
.veld textarea { resize: vertical; }
.veld .hint { font-size: 12px; font-weight: 400; color: var(--zacht); }
input.bedrag { width: 130px; text-align: right; font-variant-numeric: tabular-nums; min-height: 40px; padding: 8px 10px; }
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .raster .vol { grid-column: 1 / -1; }
.kiezers { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.kiezers label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--zacht); font-weight: 500; }
.kiezers select, .kiezers input { font: inherit; font-size: 15px; color: var(--donker); padding: 10px 12px; border: 1px solid var(--veld); border-radius: 8px; background: var(--wit); height: 48px; box-sizing: border-box; }
.kiezers select { min-width: 240px; }
.kiezers input[type="search"] { min-width: 340px; padding-left: 12px; }
.kiezers .knop { height: 48px; }
.kiezers .breed { flex: 1 1 340px; } .kiezers .breed input { width: 100%; }
@media (max-width: 760px) { .kiezers select, .kiezers input[type="search"] { min-width: 0; width: 100%; } .kiezers > label { flex: 1 1 100%; } }
.upload { display: flex; align-items: center; gap: 14px; border: 2px dashed #9FB8B8; border-radius: 10px; padding: 16px 18px; cursor: pointer; background: var(--rij); }

.stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stappen li { display: flex; align-items: center; gap: 8px; background: var(--wit); color: var(--zacht); padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.stappen li b { width: 22px; height: 22px; border-radius: 11px; background: var(--balk); color: var(--donker); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.stappen li.nu { background: var(--groen); color: var(--wit); font-weight: 600; } .stappen li.nu b { background: var(--wit); color: var(--groen); }
.stappen li.klaar b { background: var(--groen); color: var(--wit); }

.keten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.keten li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--lijn-licht); align-items: start; }
.keten li:last-child { border-bottom: 0; }
.bol { width: 28px; height: 28px; border-radius: 14px; border: 2px solid var(--veld); color: var(--zacht); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.keten li.klaar .bol { background: var(--groen); border-color: var(--groen); color: var(--wit); }
.keten li.nu .bol { border-color: var(--groen); color: var(--groen); }
.keten li.nee .bol { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.keten .wie2 { font-size: 12px; color: var(--zacht); margin-top: 2px; } .keten .tijd { font-size: 12px; color: var(--zacht); white-space: nowrap; font-variant-numeric: tabular-nums; }

.lijst { display: flex; flex-direction: column; gap: 10px; }
.item { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--lijn); border-radius: 10px; text-decoration: none; color: var(--donker); background: var(--wit); min-height: 60px; }
.item:hover { border-color: var(--groen); color: var(--donker); }
.item .tekst { flex: 1; min-width: 0; } .item .tekst b { display: block; } .item .tekst span { color: var(--zacht); font-size: 12px; }
.item.actief { outline: 2px solid var(--groen); background: var(--groen-licht); }
.post { display: grid; grid-template-columns: 44px minmax(0, 1fr) 70px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--lijn-licht); }
.icoon { width: 44px; height: 44px; border-radius: 10px; background: var(--groen); display: flex; align-items: center; justify-content: center; }
.icoon img { width: 32px; height: 32px; }
.legenda { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--zacht); }
.legenda span { display: flex; align-items: center; gap: 6px; } .legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
dialog { border: 0; border-radius: 14px; padding: 24px; max-width: 560px; width: calc(100% - 32px); color: var(--donker); }
dialog::backdrop { background: rgba(13, 48, 58, .45); }
.pdf { width: 100%; height: 680px; border: 0; border-radius: 8px; background: var(--balk); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); flex-wrap: wrap; }
.tabs button { border: 0; border-bottom: 3px solid transparent; background: none; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--zacht); cursor: pointer; min-height: 44px; }
.tabs button.actief { border-bottom-color: var(--groen); color: var(--groen); }

/* ---------- inloggen */
.inlog { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--groen); }
.inlog .kaart { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.inlog img { height: 64px; align-self: flex-start; }

/* ---------- telefoon */
@media (max-width: 760px) {
  .app { flex-direction: column; }
  .zij { max-width: none; flex: none; padding: 12px 16px; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .merk { padding: 6px 10px; } .merk img { height: 30px; } .merk span { display: none; }
  .menuknop { display: inline-flex; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: var(--wit); align-items: center; justify-content: center; }
  .nav, .wie { display: none; width: 100%; }
  .zij.open .nav { display: flex; } .zij.open .wie { display: flex; margin-top: 0; }
  .hoofd { padding: 18px 16px 40px; gap: 16px; }
  h1 { font-size: 22px; }
  .kaart { padding: 16px; }
  .raster { grid-template-columns: minmax(0, 1fr); }
  .verberg-smal { display: none; }
  .pdf { height: 420px; }
  .tegel .w { font-size: 22px; }
}