:root { font-family: "Segoe UI", SegoeUI, Arial, sans-serif; color: #242424; background: #f5f5f5; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #f5f5f5; }
a { color: #005a9e; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; }
button, .knop { cursor: pointer; }
input, select { min-height: 36px; padding: 7px 10px; border: 1px solid #8a8886; border-radius: 4px; background: #fff; color: #242424; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid #0078d4; outline-offset: 2px; }
label { display: grid; gap: 6px; min-width: 160px; color: #424242; font-size: 13px; font-weight: 600; }

.aanmeldpagina { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #deecf9 0, transparent 34rem), #f5f5f5; }
.aanmeldkaart { width: min(100%, 410px); padding: 36px; background: #fff; border: 1px solid #e1dfdd; border-radius: 8px; box-shadow: 0 8px 32px #00000014; }
.aanmeldkaart h1 { margin: 18px 0 6px; font-size: 28px; font-weight: 600; }
.aanmeldkaart form { display: grid; gap: 16px; margin-top: 28px; }
.merk { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; color: #fff; background: #0078d4; font-size: 20px; font-weight: 700; }

.app { height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; }
.zijbalk { min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 20px 12px; color: #fff; background: #243a5e; }
.merkblok { padding: 0 12px 18px; margin-bottom: 9px; border-bottom: 1px solid #ffffff33; }
.merkblok h1 { margin: 0; font-size: 25px; }.merkblok p { margin: 2px 0 0; color: #dbeafe; font-size: 14px; }
.nav { width: 100%; padding: 10px 12px; border: 0; border-radius: 4px; color: #fff; background: transparent; text-align: left; }
.nav:hover, .nav.actief { background: #ffffff24; text-decoration: none; }
.nav.actief { box-shadow: inset 3px 0 #60cdff; }
.afmelden { width: 100%; margin-top: auto; padding: 10px 12px; border: 1px solid #ffffff80; border-radius: 4px; color: #fff; background: transparent; text-align: left; }

.inhoud { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0 24px 20px; }
.hoofdbalk { flex: 0 0 70px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1dfdd; }
.hoofdbalk .product { font-weight: 600; }.hoofdbalk .omgeving { margin-left: 10px; color: #605e5c; font-size: 13px; }
.werkruimte { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; padding-top: 20px; }
.werkruimte.scrollbaar { overflow-y: auto; padding-bottom: 28px; }
.sectie-titel, .detail-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.sectie-titel h1, .detail-kop h1 { margin: 0 0 4px; font-size: 26px; font-weight: 600; }
.detail-kop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.detail-acties, .formulier-acties, .rij-acties { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.sectie-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.subtiel { margin: 0; color: #605e5c; font-size: 14px; }

.primair, .secundair, .gevaar, .knop { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid transparent; border-radius: 4px; font-weight: 600; text-decoration: none; }
.primair { color: #fff; background: #0078d4; }.primair:hover { background: #106ebe; text-decoration: none; }
.secundair { color: #242424; background: #fff; border-color: #8a8886; }.secundair:hover { background: #f3f2f1; text-decoration: none; }
.gevaar { color: #fff; background: #c42b1c; }.gevaar:hover { background: #a4262c; }
.tekstknop { padding: 7px 9px; border: 0; border-radius: 4px; color: #005a9e; background: transparent; }.tekstknop:hover { background: #e8f3fc; }

.statistieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; margin-bottom: 20px; }
.statistiek { min-width: 0; padding: 14px 16px; background: #fff; border: 1px solid #e1dfdd; border-radius: 6px; box-shadow: 0 1px 2px #00000008; text-align: left; }
.statistiek.tegel { cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
.statistiek.tegel:hover { border-color: #0078d4; box-shadow: 0 3px 10px #00000016; transform: translateY(-1px); }
.statistiek h3 { margin: 0 0 12px; color: #605e5c; font-size: 13px; font-weight: 600; }
.statistiek strong { display: block; overflow-wrap: anywhere; color: #201f1e; font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.statistiek p { margin: 7px 0 0; color: #605e5c; font-size: 12px; line-height: 1.4; }
.tussenkop { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.onderdelen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.onderdeel, .startpaneel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; background: #fff; border: 1px solid #e1dfdd; border-radius: 6px; }
.onderdeel h2, .startpaneel h2 { margin: 0 0 5px; font-size: 17px; font-weight: 600; }
.onderdeel p, .startpaneel p { margin: 0; color: #605e5c; font-size: 14px; line-height: 1.5; }
.onderdeel .knop { flex: 0 0 auto; }
.startpaneel { margin-top: 2px; padding: 18px; border-left: 4px solid #0078d4; }
.startpaneel > div:first-child { max-width: 680px; }
.bestandsinfo { margin: 14px 0 18px; color: #424242; font-size: 13px; overflow-wrap: anywhere; }

.actiebalk { flex: 0 0 auto; display: flex; align-items: end; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e1dfdd; border-bottom: 0; border-radius: 6px 6px 0 0; }
.actiebalk label:first-child { flex: 1; max-width: 420px; }
.tabel-container { min-height: 220px; flex: 1 1 auto; overflow: auto; background: #fff; border: 1px solid #e1dfdd; border-radius: 0 0 6px 6px; scrollbar-gutter: stable; }
.paneel .tabel-container { max-height: 340px; border-radius: 4px; }
table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; background: #fff; }
th, td { padding: 10px 12px; border-bottom: 1px solid #edebe9; text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 2; color: #424242; background: #faf9f8; border-bottom-color: #d2d0ce; font-size: 13px; font-weight: 600; white-space: nowrap; }
tfoot td { color: #424242; background: #faf9f8; border-top: 1px solid #d2d0ce; border-bottom-color: #d2d0ce; font-size: 13px; font-weight: 600; }
.tabel-totaal-label { text-align: right; }.tabel-totaal strong { font-weight: 700; }
tbody tr:hover { background: #f5f9fc; }
td { max-width: 380px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.bedrag, .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }.acties-kolom { width: 1%; text-align: right; }.rij-acties { white-space: nowrap; }.lege-rij { padding: 34px; color: #605e5c; text-align: center; }
.bank-werkruimte { padding-top: 16px; }
.bank-werkruimte .sectie-titel { margin-bottom: 12px; }
.bank-werkruimte .actiebalk { padding: 9px 12px; }
.bank-tabel-container { min-height: 0; overflow: auto; }
.bank-tabel { min-width: 0; table-layout: fixed; }
.bank-tabel th, .bank-tabel td { padding: 8px 10px; }
.bank-tabel th:nth-child(1) { width: 85px; }
.bank-tabel th:nth-child(2) { width: 17%; }
.bank-tabel th:nth-child(3) { width: 20%; }
.bank-tabel th:nth-child(4) { width: 90px; }
.bank-tabel th:nth-child(5) { width: 75px; }
.bank-tabel th:nth-child(6) { width: 19%; }
.bank-tabel th:nth-child(7) { width: 160px; }
.bank-tabel .tegenpartij, .bank-tabel .omschrijving, .bank-tabel .voorstel-kolom { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.bank-tabel .status { white-space: nowrap; }
.bank-acties { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.primair.compact { min-height: 30px; padding: 5px 8px; font-size: 12px; }
.icoonknop { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #c8c6c4; border-radius: 4px; background: #fff; color: #323130; cursor: pointer; font-size: 18px; line-height: 1; }
.icoonknop:hover { background: #f3f2f1; }.icoonknop:focus-visible { outline: 2px solid #0078d4; outline-offset: 1px; }
.icoonknop.accepteren { border-color: #107c10; color: #107c10; }.icoonknop.accepteren:hover { background: #e7f4e4; }
.voorstel { margin: 0; color: #005a9e; font-size: 12px; font-weight: 600; }
.voorstel.geen { color: #605e5c; font-weight: 400; }

.formulier-pagina, .paneel, .importkaart { padding: 20px; background: #fff; border: 1px solid #e1dfdd; border-radius: 6px; }
.formulier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }.formulier-acties { margin-top: 22px; padding-top: 16px; border-top: 1px solid #edebe9; }
.detail-grid { min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; overflow: auto; padding-bottom: 8px; }.detail-grid.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }.paneel h2, .importkaart h2 { margin: 0 0 14px; font-size: 18px; }.paneel dl { display: grid; grid-template-columns: 120px 1fr; gap: 9px; }.paneel dt { color: #605e5c; }.paneel dd { margin: 0; }
.activiteit-detail > * { flex: 0 0 auto; }
.activiteit-detail .detail-grid { overflow: visible; padding-bottom: 16px; }
.activiteit-detail > .paneel { margin-bottom: 24px; }
.activiteit-tabs { display: flex; gap: 3px; margin-bottom: 18px; border-bottom: 1px solid #d2d0ce; }
.activiteit-tab { min-height: 38px; padding: 8px 16px; border: 0; border-bottom: 3px solid transparent; color: #605e5c; background: transparent; font-weight: 600; }
.activiteit-tab:hover { color: #005a9e; background: #f3f9fd; }.activiteit-tab.actief { border-bottom-color: #0078d4; color: #005a9e; }
.activiteit-paneel { min-height: 0; flex: 1 1 auto; padding: 20px; background: #fff; border: 1px solid #e1dfdd; border-radius: 6px; }
.activiteit-paneel h2 { margin: 0 0 8px; font-size: 18px; }
.kanban-bord { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; overflow-x: auto; }
.kanban-kolom { min-height: 240px; padding: 12px; background: #f8f8f8; border: 1px solid #e1dfdd; border-radius: 6px; }
.kanban-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.kanban-kop h3 { margin: 0; font-size: 15px; }.kanban-kop span { min-width: 24px; padding: 2px 7px; border-radius: 12px; color: #424242; background: #e1dfdd; font-size: 12px; font-weight: 600; text-align: center; }
.kanban-kolom > .subtiel { min-height: 34px; margin: 6px 0 10px; font-size: 12px; }.kanban-kaarten { display: grid; gap: 8px; }
.deelnemer-kaart { padding: 10px; border: 1px solid #d2d0ce; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px #00000008; }.deelnemer-kaart > a { display: block; overflow-wrap: anywhere; font-weight: 600; }
.deelnemer-acties { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }.deelnemer-acties .tekstknop { padding: 4px 6px; font-size: 12px; }.kanban-leeg { padding: 10px 2px; text-align: center; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; }.inline-form label { flex: 1 1 170px; }.importkaart { flex: 0 0 auto; margin-bottom: 14px; }.importkaart form { display: flex; align-items: center; gap: 12px; }
.bank-controle { margin: 12px 0; padding: 9px 11px; border-radius: 4px; font-size: 14px; }.bank-controle.gereed { color: #0b6a0b; background: #dff6dd; border: 1px solid #8cda8c; }.bank-controle.waarschuwing { color: #8a3700; background: #fff4ce; border: 1px solid #d8a800; }
.status { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }.status.open { color: #8a3700; background: #fff4ce; }.status.gereed { color: #107c10; background: #dff6dd; }

.melding, .fout { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 10px 12px; border-radius: 4px; }.melding { color: #0b6a0b; background: #dff6dd; border: 1px solid #8cda8c; }.fout { color: #a4262c; background: #fde7e9; border: 1px solid #d13438; }.melding button, .fout button { border: 0; color: inherit; background: transparent; font-size: 18px; }
.zijpaneel { position: fixed; z-index: 20; top: 0; right: 0; width: min(440px, 100vw); height: 100vh; display: grid; align-content: start; gap: 16px; padding: 24px; background: #fff; box-shadow: -8px 0 30px #00000026; overflow-y: auto; }.zijpaneel-kop { display: flex; align-items: center; justify-content: space-between; }.zijpaneel-kop h2 { margin: 0; }.sluiten { border: 0; background: transparent; font-size: 26px; }
.dialoog-achtergrond { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: #0008; }.dialoog { width: min(100%, 460px); padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 16px 50px #0004; }.dialoog h2 { margin-top: 0; }
.documenten-dialoog { width: min(100%, 900px); max-height: calc(100vh - 40px); overflow: auto; }.documenten-dialoog .documenten-paneel { border: 0; padding: 0; box-shadow: none; }.documenten-paneel form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }.documenten-paneel input[type=file] { max-width: 100%; }

@media (max-width: 800px) {
  .app { height: auto; min-height: 100vh; grid-template-columns: 1fr; overflow: visible; }
  .zijbalk { min-height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }.merkblok { width: 100%; }.nav, .afmelden { width: auto; margin-top: 0; }
  .inhoud { min-height: 100vh; overflow: visible; padding: 0 16px 24px; }.werkruimte { overflow: visible; }.hoofdbalk { min-height: 64px; }
  .sectie-titel, .detail-kop { display: flex; flex-wrap: wrap; }
  .onderdelen { grid-template-columns: 1fr; }.onderdeel, .startpaneel { align-items: flex-start; flex-direction: column; gap: 14px; }
  .tabel-container { max-height: 60vh; }.detail-grid.twee { grid-template-columns: 1fr; }.actiebalk { flex-wrap: wrap; }.kanban-bord { grid-template-columns: repeat(4, minmax(210px, 1fr)); }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .onderdelen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}