:root { --inkt: #1f1e1a; --grond: #f4f3ee; --wit: #ffffff; --lijn: #dedbd2; --blauw: #2b5aa6; --oranje: #b8561f; --groen: #1f7a4f; --rood: #b3261e; --paars: #6e3ea0; --paars-licht: #ebe0f5; --stil: #5c5a52; --groen-licht: #e3f2e9; --rood-licht: #fdf1f0; --oranje-licht: #fbeee4; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; background: var(--grond); color: var(--inkt); font-size: 14px; }
a { color: var(--blauw); }
h1 { margin: 0; font-size: 18px; font-weight: 600; }
h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.ruimte { flex-grow: 1; }
.stil { color: var(--stil); font-size: 13px; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; }
.rood { color: var(--rood); } .groen { color: var(--groen); } .oranje { color: var(--oranje); }

.bovenbalk { height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 12px; background: var(--wit); border-bottom: 1px solid var(--lijn); flex-wrap: wrap; }
.merk { font-weight: 600; font-size: 17px; }
nav { display: flex; gap: 4px; }
nav a { padding: 8px 12px; border-radius: 8px; color: var(--inkt); text-decoration: none; }
nav a.actief { background: var(--inkt); color: var(--wit); font-weight: 500; }
.knop { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; min-height: 36px; }
.knop.primair { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.knop.gevaar { color: var(--rood); border-color: var(--rood); }
.knop.klein { padding: 4px 10px; min-height: 28px; }

main { padding: 16px; display: flex; flex-direction: column; gap: 16px; max-width: 1280px; margin: 0 auto; }
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 20px; }
.kaart.klein { padding: 14px 16px; }
.kop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pijl { text-decoration: none; font-size: 20px; padding: 0 10px; border: 1px solid var(--lijn); border-radius: 8px; color: var(--inkt); min-width: 36px; text-align: center; }

.status { border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; border: 1px solid; }
.status-groen { background: var(--groen-licht); border-color: var(--groen); }
.status-rood { background: var(--rood-licht); border-color: var(--rood); }
.status-grijs { background: #ecebe6; border-color: #c9c6bb; }
.status-icoon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--wit); font-weight: 600; font-size: 20px; background: #8d8a7e; }
.status-groen .status-icoon { background: var(--groen); } .status-rood .status-icoon { background: var(--rood); }
.status-titel { font-size: 18px; font-weight: 600; }
.status-sub { font-size: 13px; color: var(--stil); margin-top: 2px; }

.tijdlijn-scroll { overflow-x: auto; }
.tijdlijn { position: relative; min-width: 640px; display: grid; grid-template-columns: 120px 1fr; row-gap: 12px; padding-top: 24px; }
.maanden { grid-column: 2; display: flex; font-size: 13px; font-weight: 500; color: var(--stil); }
.maanden div { border-left: 1px solid var(--lijn); padding: 0 10px 8px; white-space: nowrap; overflow: hidden; }
.rij-label { font-size: 13px; font-weight: 600; align-self: center; }
.rij { position: relative; height: 52px; }
.rij-uitz { height: calc(var(--rijen-uitz) * 40px - 6px); min-height: 34px; }
.blok { position: absolute; top: 0; height: 52px; border-radius: 8px; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; color: var(--wit); border: 0; font: inherit; text-align: left; cursor: pointer; overflow: hidden; box-shadow: inset -3px 0 0 var(--wit); }
.blok-titel { font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.blok-sub { font-size: 12px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lijst-a { background: var(--blauw); } .lijst-b { background: var(--oranje); } .lijst-c { background: var(--groen); }
.blok.gat { background: transparent; border: 2px dashed var(--rood); color: var(--rood); cursor: default; box-shadow: none; }
.blok.uitz { height: 34px; background: var(--paars-licht); border: 1px solid var(--paars); color: #3f2260; flex-direction: row; align-items: center; gap: 8px; box-shadow: none; }
.blok.uitz .blok-titel { font-size: 13px; } .blok.uitz .blok-sub { font-size: 13px; opacity: 1; }
.leeg { padding: 8px 0; }
.vandaag-lijn { position: absolute; top: 40px; bottom: 0; width: 2px; background: var(--inkt); margin-left: 120px; transform: translateX(calc((100% - 120px) * 0)); pointer-events: none; }
.vandaag-label { position: absolute; top: 0; margin-left: 120px; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; background: var(--inkt); color: var(--wit); font-size: 11px; font-weight: 500; pointer-events: none; }
.rij-hoofd, .rij-uitz, .maanden { position: relative; }

.kaartjes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kaart-kop { font-size: 12px; color: var(--stil); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.kaart-waarde { font-size: 16px; font-weight: 600; margin-top: 6px; }
.kaart-sub { font-size: 13px; margin-top: 2px; display: inline-block; }

.overlay { position: fixed; inset: 0; background: rgba(31, 30, 26, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow: auto; z-index: 10; }
.dialoog { background: var(--wit); border-radius: 12px; padding: 20px; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.dialoog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.dialoog input, .dialoog select, .dialoog textarea, .filters input, .filters select, .upload input, .upload select, .tabel select { font: inherit; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; min-height: 36px; background: var(--wit); }
.formrij { display: flex; gap: 8px; }
.formrij > * { flex: 1; min-width: 0; }
.rijen { display: flex; flex-direction: column; gap: 8px; }
.dialoog-knoppen { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.fout { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: var(--rood); color: var(--wit); padding: 10px 16px; border-radius: 8px; z-index: 20; max-width: 90vw; }

.filters, .upload form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.upload { margin-bottom: 12px; } .upload summary { cursor: pointer; font-weight: 500; margin-bottom: 8px; }
.rapport { background: var(--grond); border-radius: 8px; padding: 12px; } .rapport ul { margin: 6px 0 0; padding-left: 18px; }
.tabel-scroll { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.tabel th { font-size: 12px; color: var(--stil); text-transform: uppercase; letter-spacing: 0.06em; }
tr.zonder-lijst td { background: var(--rood-licht); }
.label { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--oranje-licht); color: var(--oranje); margin-left: 6px; }
.paginering { display: flex; gap: 12px; align-items: center; margin-top: 12px; }

@media (max-width: 720px) {
  .kaartjes { grid-template-columns: 1fr; }
  .bovenbalk { height: auto; padding: 8px 16px; }
  .status { flex-wrap: wrap; }
}

.meldingen { display: flex; flex-direction: column; gap: 8px; }
.melding { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid; font-size: 13px; flex-wrap: wrap; }
.melding.rood { background: var(--rood-licht); border-color: var(--rood); color: #7a1a14; }
.melding.oranje { background: var(--oranje-licht); border-color: var(--oranje); color: #6b3312; }
.melding .bol { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.melding form.inline { display: flex; gap: 6px; align-items: center; }
.melding input { font: inherit; padding: 4px 8px; border: 1px solid var(--lijn); border-radius: 6px; min-height: 28px; width: 130px; }
.doorgave-balk { display: flex; align-items: center; gap: 12px; }
.knop.uit { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
a.knop { text-decoration: none; display: inline-flex; align-items: center; }
.lijstje { margin: 6px 0 0; padding-left: 18px; }
.diff { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .diff { grid-template-columns: 1fr 1fr; } }
.inline-label { display: flex; align-items: center; gap: 6px; font-size: 13px; }