*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#f4f7fa;color:#243542}
header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#143d52;color:white;padding:16px 28px}
a{color:#136788}header a{color:white;text-decoration:none}header nav{display:flex;gap:12px;flex:1;flex-wrap:wrap;font-size:13px}.brand{font-weight:800;font-size:19px;white-space:nowrap}.brand span{color:#b8dee1}
main{max-width:1280px;margin:28px auto;padding:0 18px}
h1{font-size:26px;margin:0 0 18px}h2{font-size:18px;margin:0 0 14px}h3{font-size:16px;margin:8px 0 12px}
.panel{background:white;border:1px solid #dbe5eb;border-radius:12px;box-shadow:0 3px 12px rgba(17,51,85,.08);padding:22px;margin:18px 0}.narrow{max-width:520px;margin:auto}.muted,small{color:#667a89}small{display:block}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}.stat{background:white;padding:20px;border:1px solid #dbe5eb;border-radius:12px}.stat strong{display:block;font-size:32px;margin-top:10px}.stat-link{text-decoration:none;color:inherit;transition:transform .08s ease,box-shadow .08s ease}.stat-link:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(17,51,85,.08)}
table{border-collapse:collapse;width:100%}th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #e6edf1;vertical-align:top}table tr:hover{background:#f6fafc}
form{margin:0}label{display:block;font-weight:600;font-size:13px;margin-bottom:14px}input,textarea,select{display:block;width:100%;border:1px solid #cbd8de;border-radius:7px;padding:10px;font:inherit;margin-top:6px;background:white;color:#233745}textarea{min-height:70px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 20px}.full{grid-column:1/-1}.check{display:flex;align-items:center;gap:10px}.check input{width:auto;margin:0}
button{border:0;border-radius:7px;padding:10px 16px;color:white;background:#146b89;cursor:pointer;font-weight:600}button:hover{filter:brightness(.93)}button.secondary{background:#647783}.danger{background:#a74442}button.small{padding:8px 10px;font-size:12px}
.toolbar,.inline{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:12px 0}.toolbar input,.toolbar select{max-width:330px}.inline select,.inline input{width:185px}
.line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid #e6ebef;padding:12px 0}.line>div{min-width:220px}
.notice{background:#dcefe8;padding:12px;border-radius:8px;margin:12px 0}.notice.error{background:#ffdddd}
.pill,.status-select{display:inline-block;padding:6px 10px;border-radius:6px;color:white;font-size:12px;border:1px solid transparent}
.pill.bezet,.mapunit.bezet,.status-select.status-bezet{background:#0055ff;color:white}
.pill.beschikbaar,.mapunit.beschikbaar,.status-select.status-beschikbaar{background:#238b68;color:white}
.pill.komt-vrij,.mapunit.komt-vrij,.status-select.status-komt-vrij{background:#e5a63e;color:#28303d}
.pill.in-optie,.mapunit.in-optie,.status-select.status-in-optie{background:#7a56c5;color:white}
.pill.in-onderhoud,.mapunit.in-onderhoud,.status-select.status-in-onderhoud{background:#b85c52;color:white}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.mapscroll{overflow:auto;background:white;border:1px solid #dbe5eb;border-radius:12px;padding:15px}.floor{position:relative;background:repeating-linear-gradient(0deg,transparent 0px,transparent calc(var(--cell-y) - 1px),#f0f4f6 var(--cell-y)),repeating-linear-gradient(90deg,transparent 0px,transparent calc(var(--cell-x) - 1px),#f0f4f6 var(--cell-x))}.mapunit{position:absolute;display:grid;place-items:center;border-radius:5px;text-decoration:none;font-size:11px;font-weight:700;white-space:nowrap}
footer{text-align:center;font-size:12px;color:#667a89;padding:24px}
.tag-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px}.tag-fields label{min-width:0}.agreement-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.agreement-row-break{grid-column:1/-1;height:0}
.inline-status-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-status-form .status-select{width:auto;min-width:150px;margin-top:0;padding-right:28px}.inline-status-form .status-note-input{width:260px;min-width:220px;margin-top:0}.inline-status-form button{margin:0}.inline-note{margin-top:6px}
.clickable-stats .stat-link small,.clickable-stats .stat-link strong{pointer-events:none}
.segmented-links{display:flex;gap:6px;flex-wrap:wrap}.seg{display:inline-block;padding:10px 12px;border:1px solid #cbd8de;border-radius:8px;text-decoration:none;color:#234}.seg.active{background:#143d52;color:white;border-color:#143d52}
.tenant-fields{grid-template-columns:repeat(4,minmax(160px,1fr))}.tenant-fields label:nth-child(5),.tenant-fields label:nth-child(6){grid-column:span 2}.unit-detail-fields{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.status-select option{color:#233745;background:white}
@media(max-width:900px){.tenant-fields{grid-template-columns:repeat(2,minmax(200px,1fr))}.tenant-fields label:nth-child(5),.tenant-fields label:nth-child(6){grid-column:auto}}
@media(max-width:800px){header{padding:14px}main{padding:0 10px}.panel{overflow:auto}}
@media(max-width:760px){.agreement-fields{grid-template-columns:1fr}.agreement-row-break{display:none}.tenant-fields{grid-template-columns:1fr}.tenant-fields label:nth-child(5),.tenant-fields label:nth-child(6){grid-column:auto}}
@media(max-width:680px){.tag-fields{grid-template-columns:1fr}.inline-status-form .status-note-input{width:100%;min-width:0}}

.income-value{font-size:34px;color:#0d536f}.user-edit{display:grid;grid-template-columns:1fr 150px 1fr auto;align-items:end;gap:10px;border-bottom:1px solid #e5ebef;padding:10px 0}.user-actions{display:flex;gap:6px;padding-bottom:14px}@media(max-width:800px){.user-edit{grid-template-columns:1fr 1fr}}
/* Version 3.0 floorplans */
.floor-plan-scroll{max-width:100%;overflow-x:auto}.floor-plan{position:relative;background:#d3d3d3;transform-origin:top left}.plan-unit{position:absolute;display:flex;align-items:center;justify-content:center;background:white;color:#111;text-decoration:none;border:1px solid #333;font-size:13px;font-weight:600;min-width:22px;min-height:20px}.plan-unit:hover{outline:3px solid #f1c24a;z-index:1}.plan-unit.bezet{background:#0055ff;color:#fff}.plan-unit.beschikbaar{background:#fff;color:#161616}.plan-unit.in-optie{background:#7950c6;color:#fff}.plan-unit.in-onderhoud{background:#b85c52;color:#fff}.plan-unit.komt-vrij{background:#e9ae3f;color:#2d2d2d}.unit-number-link{display:inline-block;padding:5px 9px;margin:2px;border:1px solid #ccdce6;border-radius:5px}.status-colored.bezet,.status-colored.status-bezet{background:#0055ff;color:white}.status-colored.status-beschikbaar{background:#238b68;color:white}.status-colored.status-in-optie{background:#7950c6;color:white}.status-colored.status-in-onderhoud{background:#b85c52;color:white}.status-colored.status-komt-vrij{background:#e9ae3f;color:#222}

.agreement-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.agreement-top h1{margin:0}

/* Versie 3.1 */
.tenant-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tenant-toolbar>.sort-field{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
.tenant-toolbar>.sort-field select{margin:0;width:96px;min-height:42px}
.tenant-toolbar>input{margin:0;min-height:42px}
.tenant-toolbar>button{min-height:42px}
.tenant-toolbar .segmented-links{align-self:center}
.unit-number-link.status-colored{font-weight:700;text-decoration:none;border-color:transparent}
.unit-number-link.status-colored.beschikbaar,.unit-number-link.status-colored.status-beschikbaar{background:#238b68;color:white}
.unit-number-link.status-colored.bezet,.unit-number-link.status-colored.status-bezet{background:#0055ff;color:white}
.unit-number-link.status-colored.in-optie,.unit-number-link.status-colored.status-in-optie{background:#7950c6;color:white}
.unit-number-link.status-colored.in-onderhoud,.unit-number-link.status-colored.status-in-onderhoud{background:#b85c52;color:white}
.unit-number-link.status-colored.komt-vrij,.unit-number-link.status-colored.status-komt-vrij{background:#e9ae3f;color:#222}
.agreement-new-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.button-secondary{display:inline-flex;align-items:center;text-decoration:none;border-radius:7px;padding:10px 16px;background:#647783;color:white;font-weight:600}
.button-secondary:hover{filter:brightness(.93)}

.action-link{display:inline-block;background:#146b89;color:white;text-decoration:none;padding:10px 14px;border-radius:7px;font-weight:600}.action-link:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:not-allowed}

/* Contract-PDF acties: gelijke vormgeving en afmetingen. */
.button-primary,.contract-pdf-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:265px;min-height:42px;border:0;border-radius:7px;padding:10px 16px;background:#146b89;color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.button-primary:hover,.contract-pdf-button:hover{filter:brightness(.93)}

/* 3.2.4 huisstijl */
header{background:#0C68FF;gap:12px;align-items:center}
header .brand{display:inline-flex;align-items:center;gap:10px;background:white;padding:5px 9px;border-radius:8px;color:#0C68FF;font-size:15px}
header .brand img{display:block;width:136px;height:40px;object-fit:contain}
header .brand span{color:#0C68FF}
header nav{gap:6px}
header nav a{border:1px solid rgba(255,255,255,.45);padding:9px 11px;border-radius:8px;background:rgba(255,255,255,.14);font-weight:600}
header nav a:hover,header nav a:focus-visible{background:white;color:#0C68FF}
button,.action-link,.button-primary,.contract-pdf-button{background:#0C68FF}
.income-value{color:#0C68FF}
.unit-link-toolbar{align-items:flex-end}
.unit-link-toolbar>label{margin-bottom:0}
.unit-link-toolbar>button{min-height:42px}
.plan-unit{margin-right:-1px;margin-bottom:-1px;border-radius:0}

/* 3.2.5: signalering aflopende huurovereenkomsten */
.dashboard-table-scroll{overflow-x:auto}
.end-alert{display:inline-block;border-radius:5px;padding:4px 8px;font-size:12px;font-weight:700}
.end-alert-overdue{background:#fce7e7;color:#9b2020}
.end-alert-today{background:#fff0c6;color:#785200}

/* 3.2.6: exact dezelfde knopstijl bij een nieuwe overeenkomst */
.agreement-new-actions button,.agreement-new-actions .new-tenant-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border:0;border-radius:7px;background:#0C68FF;color:#fff;font:inherit;font-size:13px;font-weight:600;line-height:normal;text-decoration:none;cursor:pointer}
.agreement-new-actions .new-tenant-button:hover{filter:brightness(.93)}

/* Versie 3.4.2: rustige identiteitscontrole */
.identity-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:16px}
.identity-actions button{min-height:40px}
.identity-edit-form:not([hidden]){border:1px solid #dbe5eb;background:#f7faff;border-radius:9px;padding:16px;margin-top:15px}
.identity-edit-form[hidden]{display:none}
.identity-edit-form .fields{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.identity-edit-form button{margin-right:8px}