:root {
  --navy: #273c5a;
  --blue: #2d5fa1;
  --blue-dark: #244d84;
  --blue-soft: #edf3fb;
  --slate: #4b5361;
  --ink: #202b39;
  --muted: #687487;
  --line: #dfe4ea;
  --surface: #ffffff;
  --canvas: #f5f6f8;
  --green: #17745e;
  --amber: #a96512;
  --red: #b43a3a;
  --shadow: 0 14px 38px rgba(31, 48, 74, .10);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.hidden { display: none !important; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0 55%, rgba(255,255,255,.72) 55%),
    linear-gradient(135deg, #d9e3ef, #aebdd0);
  position: relative;
}
.auth-shell::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--blue);
}
.auth-card {
  width: min(460px, 100%);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(45,95,161,.14);
  border-radius: 12px;
  padding: 42px;
  box-shadow: var(--shadow);
}
.login-logo { width: 230px; max-height: 92px; object-fit: contain; object-position: left; }
.eyebrow { margin: 20px 0 6px; color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
.auth-card h1 { margin: 0; color: var(--slate); font-size: 2rem; font-weight: 500; }
.muted { color: var(--muted); line-height: 1.55; }
.stack { display: grid; gap: 16px; margin-top: 26px; }
label { color: #46556a; font-size: .82rem; font-weight: 700; }
input, select, textarea {
  width: 100%;
  margin-top: 7px;
  border: 1px solid #cfd7e1;
  border-radius: 6px;
  padding: 12px 13px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45,95,161,.12); }
button { border: 1px solid transparent; border-radius: 6px; padding: 11px 16px; background: #edf0f4; color: var(--ink); font-weight: 700; cursor: pointer; }
button:hover { transform: translateY(-1px); }
.primary { background: var(--blue); color: #fff; box-shadow: 0 5px 14px rgba(45,95,161,.18); }
.primary:hover { background: var(--blue-dark); }
.secondary { background: #fff; color: var(--blue); border-color: #b9c9dc; }
.secondary:hover { background: var(--blue-soft); border-color: var(--blue); }
.link-button { padding: 10px 0; background: none; color: var(--blue); box-shadow: none; }
.message { min-height: 20px; color: var(--red); font-size: .86rem; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 276px 1fr; grid-template-rows: 88px 1fr; }
.sidebar {
  grid-row: 1 / 3;
  background: #fff;
  color: var(--ink);
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; align-items: center; gap: 13px; padding: 0 8px 23px; color: var(--slate); font-size: .84rem; font-weight: 750; line-height: 1.25; }
.brand img { width: 110px; height: 52px; object-fit: contain; object-position: left center; background: #fff; }
.sidebar nav { display: flex; flex: 1; flex-direction: column; gap: 4px; min-height: 0; padding-top: 15px; border-top: 1px solid var(--line); }
.sidebar nav button { display: flex; gap: 12px; align-items: center; text-align: left; background: transparent; color: #58667a; padding: 12px 13px; border-left: 3px solid transparent; }
.sidebar nav button:hover { background: #f6f8fb; color: var(--blue); }
.sidebar nav button.active { background: var(--blue-soft); color: var(--blue); border-left-color: var(--blue); }
.sidebar nav span { width: 22px; color: var(--blue); font-size: 1.15rem; text-align: center; }
.nav-settings-label { margin: auto 13px 4px; padding-top: 18px; border-top: 1px solid var(--line); color: #8a95a4; font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 8px 0; display: grid; gap: 4px; }
.sidebar-bottom small { color: var(--muted); }
.sidebar-bottom button { margin-top: 10px; background: #f1f3f6; color: #4f5b6b; border-color: #e1e5ea; }

.topbar {
  background: #fff;
  border-top: 6px solid var(--slate);
  border-bottom: 1px solid var(--line);
  padding: 13px 30px 15px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar .eyebrow { margin: 0; }
.topbar h2 { margin: 4px 0 0; color: var(--slate); font-size: 1.45rem; font-weight: 550; }
.topbar #add { margin-left: auto; }
.topbar #menu { display: none; background: none; font-size: 1.4rem; }
.tenant-mobile-logo,.tenant-mobile-nav,.tenant-mobile-footer { display: none; }
main { min-width: 0; padding: 30px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 18px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px; box-shadow: 0 5px 18px rgba(31,48,74,.045); }
.kpi { position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--blue); }
.kpi strong { display: block; margin-top: 13px; color: var(--slate); font-size: 1.85rem; font-weight: 550; }
.kpi small, .table-sub { color: var(--muted); }
.kpi-accent { display: none; }
.dashboard-kpi-action { width: 100%; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.dashboard-kpi-action:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,48,74,.12); }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 30px 0 13px; }
.section-head h3 { margin: 0; color: var(--slate); font-weight: 550; }
.property360-head { margin-top: 38px; }
.property360-head .eyebrow { margin-top: 0; }
.property360-head .muted { margin: 5px 0 0; }
.property360-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.property360-tile { --tile-color: var(--blue); min-height: 205px; padding: 20px; overflow: hidden; text-align: left; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--tile-color); box-shadow: 0 7px 22px rgba(31,48,74,.06); }
.property360-tile:hover { border-color: color-mix(in srgb, var(--tile-color) 55%, white); box-shadow: 0 13px 32px rgba(31,48,74,.12); }
.property360-tile.tone-1 { --tile-color: #397e92; }
.property360-tile.tone-2 { --tile-color: #516a99; }
.property360-tile.tone-3 { --tile-color: #8a6b3e; }
.tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tile-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: color-mix(in srgb, var(--tile-color) 12%, white); color: var(--tile-color); font-size: 1.05rem; font-weight: 900; }
.tile-arrow { color: var(--tile-color); font-size: 1.25rem; }
.property360-tile > strong, .property360-tile > small { display: block; }
.property360-tile > strong { color: var(--slate); font-size: 1.18rem; }
.property360-tile > small { min-height: 34px; margin-top: 4px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.tile-stats { display: flex; justify-content: space-between; gap: 10px; margin-top: 17px; color: var(--muted); font-size: .68rem; font-weight: 500; }
.tile-stats span:last-child { text-align: right; }
.tile-stats b { display: block; margin-bottom: 2px; color: var(--slate); font-size: .78rem; }
.occupancy-track { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: #e8edf2; }
.occupancy-track i { display: block; height: 100%; border-radius: inherit; background: var(--tile-color); }
.table-wrap { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 5px 18px rgba(31,48,74,.035); }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: 13px 15px; border-bottom: 1px solid #edf0f3; text-align: left; font-size: .88rem; }
th { position: sticky; top: 0; background: #f6f8fa; color: #667386; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:hover { background: #fafbfd; }
tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; border-radius: 999px; padding: 5px 10px; background: var(--blue-soft); color: var(--blue); font-size: .72rem; font-weight: 800; }
.badge.Actief, .badge.Verhuurd, .badge.Uitgevoerd { background: #e5f3ed; color: var(--green); }
.badge.Nieuw, .badge.Dringend { background: #fdeaea; color: var(--red); }
.empty { padding: 55px 20px; color: var(--muted); text-align: center; }

dialog { width: min(760px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 10px; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(38,48,62,.58); }
dialog form { padding: 26px; }
.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; }
.dialog-head h2 { margin: 0; color: var(--slate); font-weight: 550; }
.dialog-head .eyebrow { margin-top: 0; }
.dialog-head #close-dialog { background: none; box-shadow: none; font-size: 1.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.form-grid .wide { grid-column: 1 / -1; }
.dialog-actions { justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.portal-welcome { background: linear-gradient(115deg, var(--slate), var(--blue)); color: #fff; }
.portal-welcome .muted { color: #e1e8f0; }

dialog.contract-dialog { width: min(1180px, calc(100% - 28px)); max-height: calc(100vh - 32px); }
.contract-dialog form { max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.contract-dialog .dialog-head { flex: 0 0 auto; }
.contract-dialog .dialog-actions { flex: 0 0 auto; }
.contract-wizard { min-height: 0; margin: 20px -5px 18px 0; padding-right: 5px; overflow-y: auto; }
.contract-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.contract-builder { min-width: 0; display: grid; gap: 18px; }
.wizard-section { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.wizard-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--slate); }
.wizard-heading > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--blue); color: #fff; font-size: .8rem; font-weight: 800; }
.wizard-heading strong, .wizard-heading small { display: block; }
.wizard-heading small { margin-top: 2px; color: var(--muted); font-size: .75rem; font-weight: 500; }
.contract-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.contract-type-card { position: relative; min-height: 132px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; color: var(--slate); cursor: pointer; }
.contract-type-card:hover { border-color: #a9bdd8; background: #f6f9fd; }
.contract-type-card.selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.contract-type-card input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.contract-type-card .type-icon { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 6px; background: #fff; color: var(--blue); border: 1px solid #d8e2ef; font-size: .8rem; font-weight: 900; }
.contract-type-card strong, .contract-type-card small { display: block; }
.contract-type-card strong { font-size: .82rem; }
.contract-type-card small { margin-top: 5px; color: var(--muted); font-size: .68rem; line-height: 1.35; font-weight: 500; }
.contract-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.contract-form-grid .wide { grid-column: 1 / -1; }
.money-input { position: relative; }
.money-input > span { position: absolute; left: 13px; top: 50%; z-index: 1; color: var(--muted); transform: translateY(-50%); }
.money-input input { padding-left: 30px; }
.contract-summary { position: sticky; top: 0; padding: 22px; border-radius: 10px; background: var(--slate); color: #fff; box-shadow: 0 12px 30px rgba(31,48,74,.16); }
.contract-summary .eyebrow { margin-top: 0; color: #b9d4f4; }
.contract-summary h3 { margin: 3px 0 7px; font-size: 1.35rem; font-weight: 550; }
.summary-intro { margin: 0 0 17px; color: #d8e0ea; font-size: .78rem; line-height: 1.45; }
.summary-type { display: inline-block; margin-bottom: 16px; padding: 6px 9px; border-radius: 5px; background: var(--blue); color: #fff; font-size: .7rem; font-weight: 800; }
.contract-summary dl { margin: 0; }
.contract-summary dl > div { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.contract-summary dt { color: #bfc9d5; font-size: .7rem; }
.contract-summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-size: .78rem; font-weight: 700; }
.contract-summary .summary-total { margin: 4px -8px; padding: 11px 8px; border: 0; border-radius: 6px; background: rgba(255,255,255,.1); }
.contract-summary .summary-total dd { color: #fff; font-size: 1rem; }
.summary-note { display: grid; gap: 4px; margin-top: 17px; padding: 12px; border-radius: 7px; background: rgba(255,255,255,.08); }
.summary-note strong { color: #fff; font-size: .72rem; }
.summary-note span { color: #d8e0ea; font-size: .68rem; line-height: 1.45; }

.field-hint { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; font-weight: 500; }
.field-label { display: block; color: #46556a; font-size: .82rem; font-weight: 700; }
.unit-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 220px; margin-top: 8px; padding: 10px; overflow-y: auto; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.unit-option { display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px; border: 1px solid #dbe2ea; border-radius: 6px; background: #fff; cursor: pointer; }
.unit-option:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.unit-option input { width: 17px; height: 17px; margin: 0; flex: 0 0 17px; }
.unit-option strong, .unit-option small { display: block; }
.unit-option small { margin-top: 2px; color: var(--muted); font-size: .68rem; font-weight: 500; }
.selected-units { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.selected-units span { padding: 5px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .68rem; }

.contract-table { max-height: calc(100vh - 190px); overflow: auto; scrollbar-gutter: stable; }
.contract-table table { min-width: 1500px; }
.contract-table thead tr:first-child th { top: 0; z-index: 4; height: 39px; box-shadow: 0 1px 0 var(--line); }
.contract-table td:nth-child(n+9):nth-child(-n+11), .contract-table th:nth-child(n+9):nth-child(-n+11), .select-cell { text-align: center; }
.select-cell input { width: 17px; height: 17px; margin: 0; }
.contract-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contract-actions button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.filter-row th { top: 39px; z-index: 3; padding: 7px; background: #eef2f6; box-shadow: 0 2px 4px rgba(31,48,74,.08); }
.filter-row input, .filter-row select { min-width: 82px; margin: 0; padding: 8px; font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.document-mark { display: inline-grid; justify-items: center; min-width: 62px; gap: 1px; padding: 6px 7px; background: transparent; }
.document-mark span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; font-size: .8rem; }
.document-mark small { font-size: .58rem; }
.document-mark.complete { color: var(--green); }
.document-mark.complete span { background: #e5f3ed; }
.document-mark.complete:hover { background: #f0f8f5; }
.document-mark.missing { color: var(--amber); }
.document-mark.missing span { background: #fff1db; }
.row-action { white-space: nowrap; padding: 8px 10px; color: var(--blue); background: var(--blue-soft); }

dialog.wide-dialog { width: min(1050px, calc(100% - 28px)); max-height: calc(100vh - 32px); }
.wide-dialog form { max-height: calc(100vh - 32px); overflow-y: auto; }
.property360-shell { max-height: calc(100vh - 32px); padding: 26px; overflow-y: auto; }
.property360-shell .dialog-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.property360-shell .dialog-head .eyebrow { margin-top: 0; }
.property-mini { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 12px 0; padding: 15px 17px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 8px; background: #fafbfd; }
.property-mini span, .property-mini strong, .property-mini small { display: block; }
.property-mini span { color: var(--blue); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.property-mini strong { margin-top: 3px; color: var(--slate); }
.property-mini small { margin-top: 4px; color: var(--muted); }
.property360-table { max-height: min(520px, calc(100vh - 330px)); margin-top: 17px; overflow: auto; scrollbar-gutter: stable; }
.property360-table thead th { top: 0; z-index: 3; box-shadow: 0 2px 4px rgba(31,48,74,.1); }
.property360-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.property360-main-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.property360-settings-action { display: grid; justify-items: end; gap: 7px; margin-left: auto; }
.property360-settings-action > span { color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.dialog-close { padding: 6px 10px; background: none; font-size: 1.5rem; box-shadow: none; }
.dossier-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 20px 0; }
.dossier-summary div, .dossier-summary-card { padding: 12px; border-radius: 7px; background: #f4f7fa; border: 1px solid transparent; text-align: left; }
.dossier-summary button.dossier-summary-card { width: 100%; font: inherit; cursor: pointer; }
.dossier-summary button.dossier-summary-card:hover, .dossier-summary button.dossier-summary-card:focus-visible { border-color: #2d6bb3; background: #eef5fc; outline: none; }
.dossier-summary span, .dossier-summary strong, .dossier-summary small { display: block; }
.dossier-summary span { color: var(--muted); font-size: .68rem; }
.dossier-summary strong { margin-top: 4px; color: var(--slate); font-size: .78rem; }
.dossier-summary small { margin-top: 5px; color: var(--muted); font-size: .62rem; }
.dossier-workflow-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin: -6px 0 18px; }
.workflow-note { display: grid; gap: 4px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid #c8dcf2; border-left: 4px solid var(--blue); border-radius: 8px; background: var(--blue-soft); color: var(--slate); }
.workflow-note strong { font-size: .78rem; }
.workflow-note span { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.move-dialog form { padding: 26px; }
.move-source { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 18px 0 12px; }
.move-source div { padding: 11px 12px; border-radius: 7px; background: #f4f7fa; }
.move-source span,.move-source strong { display: block; }
.move-source span { color: var(--muted); font-size: .66rem; }
.move-source strong { margin-top: 4px; color: var(--slate); font-size: .76rem; }
.move-grid { margin-top: 18px; }
.internal-move-label { display: inline-block; margin-top: 5px; padding: 4px 7px; border-radius: 999px; background: #eaf2fd; color: var(--blue); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.document-mark.not-applicable { color: var(--muted); }
.document-mark.not-applicable span { background: #edf1f5; font-size: .63rem; font-weight: 800; }
.document-preview { margin: 0 0 18px; overflow: hidden; border: 1px solid #cbd8e8; border-radius: 10px; background: #f7f9fc; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); background: #fff; }
.preview-head .eyebrow { margin: 0 0 4px; }
.preview-head h3 { margin: 0; color: var(--slate); font-weight: 600; }
.preview-head span { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }
.preview-body { min-height: 390px; background: #e9edf2; }
.preview-body iframe { display: block; width: 100%; height: 560px; border: 0; background: #fff; }
.preview-body img { display: block; max-width: 100%; max-height: 620px; margin: auto; object-fit: contain; }
.preview-body pre { min-height: 390px; margin: 0; padding: 22px; overflow: auto; white-space: pre-wrap; background: #fff; color: var(--ink); }
.preview-body.word-document-preview { max-height: 650px; overflow: auto; padding: 18px; background: #727983; }
.preview-body.word-document-preview .docx-wrapper { padding: 0; background: transparent; }
.preview-body.word-document-preview .docx-wrapper > section.docx { margin: 0 auto 18px; box-shadow: 0 8px 24px rgba(18,32,49,.24); }
.preview-placeholder { display: grid; min-height: 390px; place-items: center; padding: 35px; color: var(--muted); text-align: center; }
.preview-placeholder strong, .preview-placeholder span { display: block; }
.preview-placeholder strong { color: var(--slate); }
.preview-placeholder span { max-width: 520px; margin-top: 7px; line-height: 1.5; }
.upload-panel { padding: 18px; border: 1px solid #cbd8e8; border-radius: 9px; background: var(--blue-soft); }
.upload-panel h3, .document-list h3 { margin: 0; color: var(--slate); }
.upload-panel p { margin: 4px 0 14px; font-size: .78rem; }
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.upload-grid .wide { grid-column: 1 / -1; }
.upload-panel .primary { margin-top: 12px; }
.upload-panel .message { margin-left: 10px; }
.upload-panel .message.success { color: var(--green); font-weight: 700; }
.upload-panel button:disabled { opacity: .65; cursor: wait; transform: none; }
.document-list { margin-top: 22px; }
.document-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.document-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 7px; background: var(--slate); color: #fff; font-size: .65rem; font-weight: 800; }
.document-preview-trigger { padding: 0; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.document-preview-trigger:hover, .document-preview-trigger:focus-visible { transform: translateY(-1px); border-color: var(--gold); box-shadow: 0 5px 14px rgba(8,24,40,.18); outline: none; }
.document-item strong, .document-item span, .document-item small { display: block; }
.document-item span, .document-item small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.document-item.selected { margin-inline: -10px; padding-inline: 10px; border-radius: 7px; background: var(--blue-soft); }
.document-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.document-viewer-dialog { width: min(1180px, calc(100% - 28px)); max-height: calc(100vh - 28px); }
.document-viewer-dialog .document-viewer-shell { display: flex; max-height: calc(100vh - 28px); padding: 0; overflow: hidden; flex-direction: column; }
.document-viewer-head { flex: 0 0 auto; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fffdf9; }
.document-viewer-head .eyebrow { margin: 0 0 4px; }
.document-viewer-head h2 { margin: 0; }
.document-viewer-head #preview-meta { display: block; margin-top: 5px; color: var(--muted); font-size: .72rem; }
.document-viewer-actions { display: flex; align-items: center; gap: 9px; }
.document-viewer-dialog .preview-body { min-height: 0; height: calc(100vh - 150px); overflow: auto; }
.document-viewer-dialog .preview-body iframe { height: calc(100vh - 150px); }
.danger-action { color: var(--red); border-color: #e4bcbc; background: #fff; }
.danger-action:hover { border-color: var(--red); background: #fdf1f1; }
.invoice-row-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.settings-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settings-subhead { margin-top: 34px; margin-bottom: 12px; }
.settings-subhead h3 { margin-bottom: 0; }
.compact-empty { padding: 22px; }

.template-dialog { width: min(1200px, calc(100% - 28px)); }
.template-layout { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 22px; margin-top: 20px; }
.template-layout > aside { padding-right: 14px; border-right: 1px solid var(--line); }
.full-button { width: 100%; }
.template-list { display: grid; gap: 7px; margin-top: 12px; }
.template-list button { width: 100%; text-align: left; background: #f5f7fa; border-color: transparent; }
.template-list button.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.template-list strong, .template-list small { display: block; }
.template-list small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.template-editor .form-grid { margin-top: 0; }
.template-editor textarea { min-height: 370px; resize: vertical; font-family: Consolas, "Courier New", monospace; line-height: 1.55; }
.placeholder-help { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; padding: 11px; border-radius: 7px; background: #f4f6f8; }
.placeholder-help strong { width: 100%; color: var(--slate); font-size: .72rem; }
.placeholder-help code { padding: 4px 6px; border-radius: 4px; background: #fff; color: var(--blue); font-size: .65rem; }
.check-line { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.check-line input { width: 17px; height: 17px; margin: 0; }
.template-editor .dialog-actions { justify-content: space-between; }
.word-template-panel { margin: 8px 0 16px; padding: 18px; border: 1px solid #c8d8ea; border-radius: 9px; background: linear-gradient(145deg,#f8fbff,#edf4fb); }
.word-template-panel h3 { margin: 3px 0 4px; }
.word-template-status { margin: 13px 0; padding: 11px 13px; border-radius: 7px; background: #fff; border: 1px solid var(--line); }
.word-template-status strong,.word-template-status span { display: block; }
.word-template-status span { margin-top: 3px; color: var(--muted); font-size: .76rem; }
.word-template-actions,.template-preview-row,.floorplan-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; }
.file-button { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.template-preview-row { margin-top: 13px; padding-top: 13px; border-top: 1px solid #cfdae6; }
.template-preview-row label { min-width: 260px; flex: 1; }
.template-inline-preview { margin-top: 14px; max-height: 650px; overflow: auto; padding: 18px; border: 1px solid #cfdae6; border-radius: 12px; background: #727983; }
.template-inline-preview .docx-wrapper { padding: 18px 0; background: transparent; }
.template-inline-preview .docx-wrapper > section.docx { margin: 0 auto 18px; box-shadow: 0 8px 24px rgba(18,32,49,.24); }
.template-version-list { display: grid; gap: 6px; margin-top: 12px; }
.template-version { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.8); }
.template-version span,.template-version small { display: block; }
.template-version small { color: var(--muted); }
.fallback-template { margin: 13px 0; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; }
.fallback-template summary { padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--slate); }
.fallback-template label { display: block; padding: 0 14px 14px; }
.template-editor .fallback-template textarea { min-height: 230px; margin-top: 7px; }
.floorplan-dialog { width: min(1180px,calc(100% - 28px)); }
.floorplan-toolbar { margin: 18px 0 12px; }
.floorplan-toolbar > label:first-child { min-width: 300px; flex: 1; }
.floorplan-canvas-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: #e9edf2; }
#floorplan-canvas { display: block; width: 100%; height: auto; min-width: 760px; cursor: crosshair; background: #fff; }

@media (max-width: 1050px) {
  .brand span { display: none; }
  .app-shell { grid-template-columns: 220px 1fr; }
  .sidebar { padding-inline: 13px; }
  .brand img { width: 126px; }
}

@media (max-width: 950px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .property360-grid { grid-template-columns: 1fr 1fr; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 20; width: 276px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .brand span { display: inline; }
  .topbar #menu { display: block; }
  main { padding: 20px; }
  .topbar { padding: 11px 18px 13px; }
  .contract-workspace { grid-template-columns: 1fr; }
  .contract-summary { position: static; }
  .contract-type-grid { grid-template-columns: 1fr 1fr; }
  .dossier-summary, .move-source { grid-template-columns: 1fr 1fr; }
  .template-layout { grid-template-columns: 1fr; }
  .template-layout > aside { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .template-list { grid-template-columns: 1fr 1fr; }
  .template-preview-row { align-items: stretch; }
}

@media (max-width: 580px) {
  .auth-shell { padding: 0; background: #fff; }
  .auth-shell::before { width: 5px; }
  .auth-card { min-height: 100vh; padding: 34px 28px; border: 0; border-radius: 0; box-shadow: none; }
  .login-logo { width: 215px; }
  .kpis { grid-template-columns: 1fr; }
  .property360-grid { grid-template-columns: 1fr; }
  .property360-tile { min-height: 180px; }
  .topbar .eyebrow { display: none; }
  .topbar h2 { font-size: 1.15rem; }
  .topbar #add { padding: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  dialog.contract-dialog { width: 100%; max-height: 100vh; border-radius: 0; }
  .contract-dialog form { max-height: 100vh; padding: 20px 16px; }
  .contract-wizard { margin-top: 14px; }
  .wizard-section { padding: 16px; }
  .contract-type-grid, .contract-form-grid { grid-template-columns: 1fr; }
  .unit-checklist, .upload-grid, .dossier-summary, .move-source, .template-list { grid-template-columns: 1fr; }
  .dossier-workflow-actions { justify-content: stretch; }
  .dossier-workflow-actions button { flex: 1 1 100%; }
  .preview-head { align-items: stretch; flex-direction: column; }
  .preview-body, .preview-placeholder, .preview-body pre { min-height: 300px; }
  .preview-body iframe { height: 430px; }
  .document-item { grid-template-columns: 42px 1fr; }
  .document-item-actions { grid-column: 1 / -1; justify-content: stretch; }
  .document-item-actions button { flex: 1; }
  .word-template-actions button,.word-template-actions .file-button,.template-preview-row button,.floorplan-toolbar button,.floorplan-toolbar .file-button { flex: 1 1 100%; justify-content: center; }
  dialog.wide-dialog { width: 100%; max-height: 100vh; border-radius: 0; }
  .wide-dialog form { max-height: 100vh; padding: 18px 14px; }
  .property360-shell { max-height: 100vh; padding: 18px 14px; }
  .property360-actions { align-items: stretch; flex-direction: column; gap: 16px; }
  .property360-main-actions, .property360-settings-action { width: 100%; }
  .property360-main-actions > button { flex: 1 1 130px; }
  .property360-settings-action { justify-items: stretch; margin-left: 0; }
  .property360-settings-action > span { text-align: right; }
  .property360-settings-action > button { width: 100%; }
  .property-mini { align-items: stretch; flex-direction: column; }
  .contract-form-grid .wide { grid-column: auto; }
  .contract-type-card { min-height: 0; }
  main { padding: 14px; }
  .card { padding: 18px; }
}
.table-sort{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:800;padding:0;display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-align:left}
.table-sort:hover{color:var(--primary,#245b9e)}
.table-sort span{font-size:14px;color:#6f7f94}
.termination-label{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#fff1df;color:#9a5310;font-size:11px;font-weight:800;white-space:nowrap}
.document-category-edit{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;font-weight:700;color:#4f6077}
.document-category-edit select{width:auto;min-width:165px;padding:6px 28px 6px 8px;font-size:12px}
.status-control{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#4f6077}
.status-control select{width:auto;min-width:155px;padding:9px 32px 9px 10px;background:#fff}

/* BCTax-inspired property theme — warm, calm and premium */
:root {
  --navy: #081828;
  --blue: #1f6680;
  --blue-dark: #164f65;
  --blue-soft: #e9f2f3;
  --slate: #17283b;
  --ink: #172335;
  --muted: #6c7582;
  --line: #e1ddd4;
  --surface: #fffdf9;
  --canvas: #f3f0e9;
  --green: #16715c;
  --amber: #a86b1c;
  --red: #b33c42;
  --gold: #c7a56b;
  --cream: #f8f2e8;
  --shadow: 0 20px 55px rgba(8, 24, 40, .13);
}

html, body { background: var(--canvas); }
body {
  background:
    radial-gradient(circle at 88% 0%, rgba(199,165,107,.12), transparent 25rem),
    linear-gradient(180deg, #f8f6f1 0, var(--canvas) 30rem);
}

button { border-radius: 999px; }
input, select, textarea { border-color: #d8d2c7; border-radius: 10px; background: #fffefa; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,165,107,.18); }
.primary { background: var(--navy); color: var(--cream); box-shadow: 0 8px 20px rgba(8,24,40,.18); }
.primary:hover { background: #12314b; }
.secondary { background: #fffdf9; color: var(--navy); border-color: #cfc6b7; }
.secondary:hover { background: var(--cream); border-color: var(--gold); }
.eyebrow { color: #9c7842; letter-spacing: .18em; }

.app-shell { grid-template-columns: 264px 1fr; grid-template-rows: 82px 1fr; }
.sidebar {
  padding: 20px 15px;
  color: var(--cream);
  border-right: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(199,165,107,.14), transparent 15rem),
    linear-gradient(180deg, #071522 0%, #0c2033 100%);
  box-shadow: 8px 0 30px rgba(8,24,40,.09);
}
.brand { color: #fffaf1; padding: 0 8px 21px; }
.brand-logo-link { display: block; flex: 0 0 auto; border-radius: 10px; line-height: 0; }
.brand-logo-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.brand img { width: 126px; height: 60px; padding: 5px; border-radius: 9px; background: rgba(255,253,249,.96); transition: transform .18s ease, box-shadow .18s ease; }
.brand-logo-link:hover img { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.brand span { color: #f5eee2; font-family: Georgia, "Times New Roman", serif; font-size: .9rem; letter-spacing: .01em; }
.sidebar nav { border-top-color: rgba(255,255,255,.11); gap: 6px; }
.sidebar nav button { color: #cad3dc; border: 1px solid transparent; border-left: 1px solid transparent; border-radius: 10px; }
.sidebar nav button span { color: #d9bd8b; }
.sidebar nav button:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar nav button.active { color: #fff; background: rgba(199,165,107,.16); border-color: rgba(199,165,107,.28); box-shadow: inset 3px 0 0 var(--gold); }
.nav-settings-label { color: #bba77f; border-top-color: rgba(255,255,255,.11); }
.sidebar-bottom { border-top-color: rgba(255,255,255,.11); color: #f5eee2; }
.sidebar-bottom small { color: #aebdca; }
.sidebar-bottom button { color: #f8f2e8; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.sidebar-bottom button:hover { background: rgba(255,255,255,.11); }

.topbar {
  min-width: 0;
  padding: 12px 30px 14px;
  color: var(--cream);
  border: 0;
  border-bottom: 1px solid rgba(199,165,107,.34);
  background: rgba(8,24,40,.97);
  box-shadow: 0 8px 24px rgba(8,24,40,.10);
}
.topbar .eyebrow { color: #d5bb8d; }
.topbar h2 { color: #fffaf1; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 600; }
.topbar #add { color: var(--navy); background: var(--cream); border-color: rgba(199,165,107,.5); box-shadow: 0 0 0 3px rgba(199,165,107,.12); }
.topbar #add:hover { background: #fff; border-color: var(--gold); }
.topbar #menu { color: var(--cream); }

main { padding: 34px; }
.section-head { margin-top: 34px; }
.section-head h3, .property360-head h3, .dialog-head h2, .upload-panel h3, .document-list h3 {
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
}
.section-head h3, .property360-head h3 { font-size: 1.45rem; }

.kpis { grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 17px; }
.card, .kpi {
  border-color: rgba(199,165,107,.27);
  border-radius: 16px;
  background: rgba(255,253,249,.94);
  box-shadow: 0 12px 32px rgba(8,24,40,.07);
}
.kpi { min-height: 142px; padding: 24px; }
.kpi::after { inset: 0 auto 0 0; width: 4px; height: 100%; background: var(--gold); }
.kpi:nth-child(3n+2)::after { background: #2b7880; }
.kpi:nth-child(3n)::after { background: #45627a; }
.kpi strong { color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 600; }
.dashboard-kpi-action:hover { border-color: rgba(199,165,107,.6); box-shadow: 0 18px 38px rgba(8,24,40,.12); }

.property360-grid { gap: 18px; }
.property360-tile {
  --tile-color: #c7a56b;
  min-height: 218px;
  padding: 22px;
  border: 1px solid rgba(199,165,107,.28);
  border-top: 1px solid rgba(199,165,107,.28);
  border-radius: 16px;
  color: #f8f2e8;
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--tile-color) 22%, transparent), transparent 50%),
    linear-gradient(145deg, #10283d, #081828 74%);
  box-shadow: 0 15px 35px rgba(8,24,40,.14);
}
.property360-tile.tone-1 { --tile-color: #6ca1a1; }
.property360-tile.tone-2 { --tile-color: #8fa8bf; }
.property360-tile.tone-3 { --tile-color: #d0ad72; }
.property360-tile:hover { border-color: var(--tile-color); box-shadow: 0 22px 44px rgba(8,24,40,.21); }
.tile-icon { color: #fff8ed; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); }
.tile-arrow { color: var(--tile-color); }
.property360-tile > strong { color: #fffaf1; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; }
.property360-tile > small, .tile-stats { color: #b9c6d1; }
.tile-stats b { color: #fffaf1; }
.occupancy-track { background: rgba(255,255,255,.12); }
.occupancy-track i { background: var(--tile-color); }
.tile-zones { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; margin-top: 8px; }
.tile-zones span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #e8edf1; background: rgba(255,255,255,.07); font-size: .62rem; font-weight: 750; letter-spacing: .04em; }
.tile-zones [data-property360-zone] { position: relative; z-index: 2; cursor: pointer; transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease; }
.tile-zones [data-property360-zone]:hover, .tile-zones [data-property360-zone]:focus-visible { color: var(--navy); border-color: #efd7ae; background: #efd7ae; outline: none; transform: translateY(-1px); }

.table-wrap { border-color: #ded8cd; border-radius: 15px; background: #fffdf9; box-shadow: 0 12px 30px rgba(8,24,40,.06); }
th { color: #596777; background: #f3efe7; }
tbody tr:hover { background: #faf6ee; }
.contract-table thead tr:first-child th { color: #f6efe4; background: #10273b; box-shadow: 0 1px 0 rgba(199,165,107,.35); }
.contract-table thead tr:first-child .table-sort span { color: #d5bb8d; }
.filter-row th { background: #eee9df; box-shadow: 0 2px 5px rgba(8,24,40,.09); }
.filter-row input, .filter-row select { background: #fffdf9; border-color: #d6cfc3; }
.row-action { color: var(--navy); background: #eee7db; border: 1px solid transparent; }
.row-action:hover { border-color: var(--gold); background: #fff8ed; }
.badge { color: #315a70; background: #e7f0f2; }
.badge.Actief, .badge.Verhuurd, .badge.Uitgevoerd { color: #14644f; background: #e4f1eb; }

dialog { border: 1px solid rgba(199,165,107,.25); border-radius: 18px; background: #fffdf9; }
dialog::backdrop { background: rgba(3,14,25,.72); backdrop-filter: blur(3px); }
dialog form, .property360-shell { background: #fffdf9; }
.dossier-summary div, .dossier-summary-card, .move-source div { border-color: #e4ddd1; border-radius: 11px; background: #f5f0e8; }
.dossier-summary strong, .move-source strong { color: var(--navy); }
.workflow-note { border-color: #dfc89e; border-left-color: var(--gold); background: #faf3e5; }
.upload-panel { border-color: #d9c49e; background: #f8f1e5; }
.document-icon { border-radius: 10px; background: var(--navy); color: #f5dfb8; }
.document-item.selected { background: #f7efe1; }
.contract-summary { border: 1px solid rgba(199,165,107,.28); border-radius: 15px; background: linear-gradient(155deg,#153149,#081828); }
.contract-summary .eyebrow { color: #d8bd8e; }
.summary-type { background: #b08c52; }
.wizard-section { border-color: #e1dbd0; border-radius: 14px; background: #fffdf9; }
.wizard-heading > span { background: var(--navy); color: #f4deb8; }
.contract-type-card { border-radius: 12px; background: #faf7f1; }
.contract-type-card.selected { border-color: var(--gold); background: #faf1df; box-shadow: inset 0 0 0 1px var(--gold); }
.contract-type-card .type-icon { color: #9d7840; border-color: #ded1b9; }

.auth-shell {
  background:
    radial-gradient(circle at 78% 18%, rgba(199,165,107,.28), transparent 24rem),
    linear-gradient(125deg, #061421 0 54%, #102a40 100%);
}
.auth-shell::before { width: 5px; background: var(--gold); }
.auth-card { border-color: rgba(199,165,107,.35); border-radius: 20px; box-shadow: 0 28px 70px rgba(1,10,18,.34); }
.auth-card h1 { color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
.login-logo { padding: 8px; border-radius: 10px; background: #fff; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 220px 1fr; }
}
@media (max-width: 950px) {
  .app-shell { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .auth-shell { background: #fffdf9; }
  .kpis { grid-template-columns: 1fr; }
  .topbar { padding-inline: 16px; }
  main { padding: 16px; }
}

/* Editorial vastgoeddashboard — geïnspireerd door rustige luxury real-estate sites. */
.dashboard-hero {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
  padding: 54px 56px;
  color: #fffaf1;
  background:
    linear-gradient(90deg, rgba(3,15,27,.96) 0%, rgba(3,15,27,.77) 44%, rgba(3,15,27,.18) 78%),
    url("property-hero-v1.png") center / cover no-repeat;
  box-shadow: 0 24px 55px rgba(5,19,32,.20);
}
.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  border: 1px solid rgba(229,205,164,.32);
}
.dashboard-hero-copy, .dashboard-hero-folio { position: relative; z-index: 1; }
.dashboard-hero-copy { max-width: 670px; }
.dashboard-hero .eyebrow { margin: 0 0 18px; color: #dec59b; }
.dashboard-hero h1 {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(2.35rem, 4.15vw, 4.6rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}
.dashboard-hero h1 em { color: #e5cda5; font-weight: 400; }
.dashboard-hero-copy > p:not(.eyebrow) {
  max-width: 610px;
  margin: 24px 0 0;
  color: #d4dbe1;
  font-size: .96rem;
  line-height: 1.7;
}
.dashboard-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dashboard-hero-actions button {
  min-width: 158px;
  padding: 13px 20px;
  border-radius: 2px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-primary { color: #102234; background: #f3e9d8; }
.hero-primary:hover { background: #fff; }
.hero-secondary { color: #f8f1e6; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.42); }
.hero-secondary:hover { background: rgba(255,255,255,.12); border-color: #e5cda5; }
.dashboard-hero-folio {
  width: 170px;
  flex: 0 0 170px;
  padding: 22px 0 2px 22px;
  border-left: 1px solid rgba(229,205,164,.55);
}
.dashboard-hero-folio span, .dashboard-hero-folio strong, .dashboard-hero-folio small { display: block; }
.dashboard-hero-folio span { color: #dec59b; font-size: .62rem; font-weight: 800; letter-spacing: .16em; }
.dashboard-hero-folio strong { margin: 8px 0 2px; font-family: Georgia, serif; font-size: 3rem; font-weight: 400; }
.dashboard-hero-folio small { color: #c5cdd4; line-height: 1.45; }
.dashboard-section-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: 43px 0 17px;
}
.dashboard-section-intro .eyebrow { margin: 0 0 7px; }
.dashboard-section-intro h3 {
  margin: 0;
  color: var(--navy);
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
}
.dashboard-section-intro > p { max-width: 430px; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; text-align: right; }

/* Minder afgerond en meer editorial, met behoud van compacte beheercomponenten. */
.card, .kpi, .property360-tile, .table-wrap { border-radius: 5px; }
.kpi { min-height: 134px; }
.property360-tile { border-radius: 5px; }
.section-head h3, .property360-head h3, .dialog-head h2, .upload-panel h3, .document-list h3 {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

@media (max-width: 900px) {
  .dashboard-hero { min-height: 360px; padding: 44px 38px; }
  .dashboard-hero-folio { display: none; }
}
@media (max-width: 580px) {
  .dashboard-hero { min-height: 430px; align-items: flex-end; padding: 38px 28px; background-position: 62% center; }
  .dashboard-hero::after { inset: 10px; }
  .dashboard-hero h1 { font-size: 2.45rem; }
  .dashboard-hero-copy > p:not(.eyebrow) { font-size: .85rem; }
  .dashboard-hero-actions { display: grid; }
  .dashboard-section-intro { display: block; margin-top: 34px; }
  .dashboard-section-intro > p { margin-top: 10px; text-align: left; }
}

/* Dashboard verfijning v0.1.42 */
.auth-shell {
  background:
    linear-gradient(90deg, rgba(3,15,27,.90) 0%, rgba(3,15,27,.58) 47%, rgba(3,15,27,.15) 100%),
    url("property-hero-v1.png") center / cover no-repeat;
}
.auth-shell::before { display: none; }
.auth-card { background: rgba(255,253,249,.96); backdrop-filter: blur(10px); }
.login-logo { width: 265px; max-height: 106px; }
.auth-card > .login-logo + h1 { margin-top: 20px; }

.brand { padding-inline: 5px; }
.brand img { width: 146px; height: 70px; }

#content > .dashboard-section-intro { margin-top: 0; }
.kpi[data-dashboard-action] {
  cursor: pointer;
  border-color: transparent;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.kpi[data-dashboard-action]:hover,
.kpi[data-dashboard-action]:focus-within {
  transform: translateY(-3px);
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 14px 32px rgba(7,27,44,.16), inset 0 0 0 1px rgba(199,165,107,.35);
}
.kpi[data-dashboard-action]::before {
  content: "Openen →";
  position: absolute;
  right: 17px;
  bottom: 13px;
  color: #9d7840;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .18s ease, transform .18s ease;
}
.kpi[data-dashboard-action]:hover::before { opacity: 1; transform: translateX(0); }
.property360-tile {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.property360-tile:hover,
.property360-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 14px 32px rgba(7,27,44,.17), inset 0 0 0 1px rgba(199,165,107,.30);
}

@media (max-width: 580px) {
  .auth-shell {
    padding: 20px;
    background:
      linear-gradient(rgba(3,15,27,.56), rgba(3,15,27,.70)),
      url("property-hero-v1.png") 64% center / cover no-repeat;
  }
  .login-logo { width: 235px; }
}

/* Huurdersportaal v0.1.43 */
.portal-language { margin-top: 12px; color: #d7dee5; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.portal-language select { margin-top: 6px; padding: 9px 10px; border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.08); color: #fff; }
.portal-language select option { color: #15283a; background: #fff; }
.tenant-portal-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 34px 38px; color: #fff; background: linear-gradient(115deg,rgba(4,21,35,.97),rgba(17,50,72,.90)),url("property-hero-v1.png") 70% center/cover; box-shadow: 0 20px 42px rgba(7,27,44,.16); }
.tenant-portal-hero .eyebrow { margin: 0 0 10px; color: #e4cda6; }
.tenant-portal-hero h2 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(1.8rem,3vw,3rem); font-weight: 500; }
.tenant-portal-hero p:not(.eyebrow) { max-width: 670px; margin: 13px 0 0; color: #d4dde4; line-height: 1.6; }
.tenant-primary { flex: 0 0 auto; color: #102234; background: #f3e9d8; border-radius: 3px; }
.tenant-primary:hover { background: #fff; }
.tenant-kpis { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 16px; margin-top: 20px; }
.tenant-kpis > * { min-height: 112px; padding: 22px; text-align: left; border: 1px solid #e2dacd; border-radius: 5px; background: #fffdf9; box-shadow: 0 10px 25px rgba(8,24,40,.07); }
.tenant-kpis button:hover { border-color: var(--gold); box-shadow: 0 13px 28px rgba(8,24,40,.13); }
.tenant-kpis small,.tenant-kpis strong { display: block; }
.tenant-kpis small { color: var(--muted); }
.tenant-kpis strong { margin-top: 12px; color: var(--navy); font-family: Georgia,serif; font-size: 2rem; }
.tenant-section-head { margin: 34px 0 14px; }
.tenant-section-head .eyebrow { margin: 0 0 6px; }
.tenant-section-head h3 { margin: 0; color: var(--navy); font-family: Georgia,serif; font-size: 1.55rem; font-weight: 500; }
.tenant-unit-grid { display: grid; grid-template-columns: repeat(3,minmax(240px,1fr)); gap: 17px; }
.tenant-unit-card { padding: 24px; border: 1px solid #e2dacd; border-radius: 5px; background: #fffdf9; box-shadow: 0 10px 26px rgba(8,24,40,.07); }
.tenant-unit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tenant-unit-top > span:first-child { color: #9d7840; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tenant-unit-card h3 { margin: 18px 0 5px; color: var(--navy); font-family: Georgia,serif; font-size: 1.45rem; }
.tenant-unit-card > p { min-height: 38px; margin: 0; color: var(--muted); font-size: .82rem; }
.tenant-unit-card dl,.tenant-contract-list dl { display: grid; gap: 9px; margin: 20px 0; }
.tenant-unit-card dl div,.tenant-contract-list dl div { display: flex; justify-content: space-between; gap: 16px; padding-top: 9px; border-top: 1px solid #ece5da; }
.tenant-unit-card dt,.tenant-contract-list dt { color: var(--muted); font-size: .76rem; }
.tenant-unit-card dd,.tenant-contract-list dd { margin: 0; color: var(--navy); font-weight: 700; text-align: right; }
.tenant-message-list { display: grid; gap: 12px; }
.tenant-message-list { scroll-margin-top: 82px; }
.tenant-message-list article { padding: 20px 22px; border-left: 4px solid var(--gold); background: #fffdf9; box-shadow: 0 8px 22px rgba(8,24,40,.06); }
.tenant-message-list time { color: var(--muted); font-size: .72rem; }
.tenant-message-list h4 { margin: 6px 0; color: var(--navy); font-family: Georgia,serif; font-size: 1.1rem; }
.tenant-message-list p { margin: 0; color: #536171; line-height: 1.55; white-space: pre-line; }
.tenant-finance-card { overflow: hidden; border: 1px solid #ded4c5; border-radius: 6px; background: #fffdf9; box-shadow: 0 12px 30px rgba(8,24,40,.08); }
.tenant-finance-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 26px; color: #fff; background: linear-gradient(115deg,#0a2133,#173b51); }
.tenant-balance small,.tenant-balance strong,.tenant-balance span { display: block; }
.tenant-balance small { color: #d7c092; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tenant-balance strong { margin-top: 7px; font-family: Georgia,serif; font-size: clamp(1.9rem,4vw,2.7rem); font-weight: 500; }
.tenant-balance span { margin-top: 5px; color: #d6dee4; font-size: .8rem; }
.tenant-finance-summary button { flex: 0 0 auto; color: #102234; border-color: #f3e9d8; background: #f3e9d8; }
.tenant-invoice-preview,.tenant-invoices-list { display: grid; }
.tenant-invoice-row { display: grid; grid-template-columns: minmax(125px,.7fr) minmax(220px,1.5fr) minmax(110px,.6fr) minmax(110px,.6fr); align-items: center; gap: 18px; padding: 17px 24px; border-top: 1px solid #ece5da; }
.tenant-invoice-row > div { min-width: 0; }
.tenant-invoice-row strong,.tenant-invoice-row span,.tenant-invoice-row small { display: block; }
.tenant-invoice-row strong { color: var(--navy); }
.tenant-invoice-row span,.tenant-invoice-row small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.tenant-invoice-amount { color: var(--navy); font-weight: 800; text-align: right; }
.tenant-invoice-status { justify-self: end; }
.tenant-invoices-dialog { width: min(960px,calc(100% - 28px)); }
.tenant-invoices-shell { max-height: 88vh; padding: 26px; overflow: auto; }
.tenant-invoices-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.tenant-invoices-summary article { padding: 17px 19px; border: 1px solid #e4dccf; border-radius: 5px; background: #f8f5ef; }
.tenant-invoices-summary small,.tenant-invoices-summary strong { display: block; }
.tenant-invoices-summary small { color: var(--muted); font-size: .72rem; }
.tenant-invoices-summary strong { margin-top: 5px; color: var(--navy); font-family: Georgia,serif; font-size: 1.45rem; }
.invoice-admin-kpis { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 16px; margin-bottom: 24px; }
.invoice-admin-kpis article { padding: 20px 22px; border: 1px solid #ded6ca; border-radius: 6px; background: #fffdf9; box-shadow: 0 10px 28px rgba(8,24,40,.06); }
.invoice-admin-kpis small,.invoice-admin-kpis strong { display: block; }
.invoice-admin-kpis small { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.invoice-admin-kpis strong { margin-top: 7px; color: var(--navy); font-family: Georgia,serif; font-size: 1.55rem; }
.invoice-list-tools { display: grid; grid-template-columns: minmax(220px,1fr) repeat(3,minmax(145px,180px)); gap: 12px; margin: 0 0 14px; padding: 14px; border: 1px solid #ded8cd; border-radius: 7px; background: #f8f5ef; }
.invoice-list-tools label { display: grid; gap: 5px; color: #7f6946; font-size: .63rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.invoice-list-tools input,.invoice-list-tools select { width: 100%; min-width: 0; padding: 10px 11px; background: #fff; }
.invoice-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.invoice-pager button { min-width: 105px; padding: 9px 14px; }
.invoice-pager button:disabled { opacity: .42; cursor: default; }
.invoice-pager span,.invoice-pager small { display: block; text-align: center; }
.invoice-pager span { min-width: 145px; color: var(--navy); font-weight: 800; }
.invoice-pager small { margin-top: 2px; color: var(--muted); font-size: .68rem; font-weight: 500; }
.tenant-invoice-pager { padding: 18px 12px 4px; border-top: 1px solid #ece5da; }
#content { container-type: inline-size; }
.invoice-admin-table { overflow-x: clip; }
.invoice-admin-table table { width: 100%; min-width: 0; table-layout: fixed; }
.invoice-admin-table th:nth-child(1),.invoice-admin-table td:nth-child(1) { width: 13%; }
.invoice-admin-table th:nth-child(2),.invoice-admin-table td:nth-child(2) { width: 13%; }
.invoice-admin-table th:nth-child(3),.invoice-admin-table td:nth-child(3) { width: 12%; }
.invoice-admin-table th:nth-child(4),.invoice-admin-table td:nth-child(4) { width: 10%; }
.invoice-admin-table th:nth-child(5),.invoice-admin-table td:nth-child(5) { width: 10%; }
.invoice-admin-table th:nth-child(6),.invoice-admin-table td:nth-child(6) { width: 10%; }
.invoice-admin-table th:nth-child(7),.invoice-admin-table td:nth-child(7) { width: 12%; }
.invoice-admin-table th:nth-child(8),.invoice-admin-table td:nth-child(8) { width: 11%; }
.invoice-admin-table th:nth-child(9),.invoice-admin-table td:nth-child(9) { width: 9%; }
.invoice-admin-table th,.invoice-admin-table td { min-width: 0; padding-inline: clamp(8px,1.1vw,15px); overflow-wrap: anywhere; }
.invoice-admin-table select { width: 100%; min-width: 0; padding: 8px 9px; }
.invoice-admin-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: .7rem; }
.invoice-table-action { padding: 8px 11px; white-space: nowrap; }
.invoice-link-control { display: grid; gap: 6px; min-width: 190px; }
.invoice-link-control select { width: 100%; min-width: 170px; }
.invoice-link-control button { justify-self: start; padding: 7px 10px; }
.badge.review { color: #825b12; background: #fff1ce; }
.invoice-comparison { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 2px 6px; color: #526173; }
.invoice-comparison b { display: grid; grid-row: 1 / 3; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #edf1f4; font-size: .72rem; }
.invoice-comparison span { font-weight: 800; font-size: .74rem; }
.invoice-comparison small { grid-column: 2; margin-top: 0!important; line-height: 1.3; }
.invoice-comparison.up { color: #a14f24; }
.invoice-comparison.up b { background: #fae7dc; }
.invoice-comparison.down { color: #376f86; }
.invoice-comparison.down b { background: #e1eff3; }
.invoice-comparison.equal { color: #39745e; }
.invoice-comparison.equal b { background: #e4f1eb; }
.invoice-admin-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.invoice-admin-actions button { padding: 8px 11px; }
.invoice-form-grid .wide { grid-column: 1 / -1; }
.invoice-editor-dialog { width: min(860px,calc(100% - 28px)); }
.invoice-bulk-dialog { width: min(1100px,calc(100% - 28px)); }
.invoice-bulk-shell { max-height: 90vh; padding: 26px; overflow: auto; }
.bulk-file-picker { display: grid; gap: 8px; margin: 20px 0; padding: 18px; border: 1px dashed #b7c5d2; border-radius: 7px; color: var(--navy); background: #f5f8fb; font-weight: 800; cursor: pointer; }
.bulk-file-picker input { padding: 10px; background: #fff; }
.bulk-file-picker small { color: var(--muted); font-weight: 500; }
.invoice-bulk-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.invoice-bulk-summary article { padding: 14px 16px; border: 1px solid #e1d9cc; border-radius: 6px; background: #faf7f1; }
.invoice-bulk-summary strong,.invoice-bulk-summary small { display: block; }
.invoice-bulk-summary strong { color: var(--navy); font-family: Georgia,serif; font-size: 1.35rem; }
.invoice-bulk-summary small { margin-top: 3px; color: var(--muted); }
.invoice-bulk-results { display: grid; gap: 8px; max-height: 48vh; overflow: auto; }
.invoice-bulk-row { display: grid; grid-template-columns: minmax(160px,1fr) 125px 135px minmax(220px,1.2fr); align-items: center; gap: 14px; padding: 14px; border: 1px solid #e4ddd1; border-radius: 6px; background: #fff; }
.invoice-bulk-row.duplicate { opacity: .62; background: #f2f3f4; }
.invoice-bulk-row strong,.invoice-bulk-row small { display: block; }
.invoice-bulk-row small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.invoice-bulk-row select { width: 100%; padding: 9px; }

@container (max-width: 940px) {
  .invoice-admin-table { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .invoice-admin-table table,.invoice-admin-table tbody { display: block; width: 100%; }
  .invoice-admin-table thead { display: none; }
  .invoice-admin-table tbody { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
  .invoice-admin-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 22px; min-width: 0; padding: 18px; border: 1px solid #ded8cd; border-radius: 7px; background: #fffdf9; box-shadow: 0 9px 24px rgba(8,24,40,.06); }
  .invoice-admin-table td,.invoice-admin-table td:nth-child(n) { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
  .invoice-admin-table td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #8e7348; font-size: .62rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
  .invoice-admin-table td[data-label="Factuurnummer"],.invoice-admin-table td[data-label="Huurder"] { padding-bottom: 10px; border-bottom: 1px solid #ebe4d9; }
  .invoice-admin-table td[data-label="Document"] { display: flex; align-items: end; justify-content: flex-end; }
  .invoice-admin-table td[data-label="Document"]::before { margin-right: auto; }
  .invoice-admin-table .invoice-status-select { max-width: 220px; }
}

@container (max-width: 560px) {
  .invoice-list-tools { grid-template-columns: 1fr; }
  .invoice-pager { gap: 7px; }
  .invoice-pager button { min-width: 0; padding: 9px 11px; }
  .invoice-pager span { min-width: 105px; font-size: .78rem; }
  .invoice-admin-table tbody,.invoice-admin-table tr { grid-template-columns: 1fr; }
  .invoice-admin-table td[data-label="Factuurnummer"],.invoice-admin-table td[data-label="Huurder"] { padding-bottom: 0; border-bottom: 0; }
  .invoice-admin-table td { padding-bottom: 11px; border-bottom: 1px solid #eee7dc; }
  .invoice-admin-table td:last-child { padding-bottom: 0; border-bottom: 0; }
  .invoice-admin-table td[data-label="Document"] { justify-content: flex-start; }
  .invoice-admin-table td[data-label="Document"]::before { margin-right: 14px; }
}
.tenant-invoice-status { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tenant-invoice-status .invoice-pdf-button { padding: 6px 9px; color: var(--blue); border-color: #c9d8e8; background: #fff; font-size: .7rem; }
.tenant-contract-list { display: grid; gap: 14px; }
.tenant-contract-list article { display: grid; grid-template-columns: minmax(220px,1.2fr) minmax(320px,1fr) auto; align-items: center; gap: 24px; padding: 22px; border: 1px solid #e2dacd; border-radius: 5px; background: #fffdf9; }
.tenant-contract-list article > div > span { color: #9d7840; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tenant-contract-list h3 { margin: 7px 0 3px; color: var(--navy); font-family: Georgia,serif; }
.tenant-contract-list p { margin: 0; color: var(--muted); }
.tenant-contract-list dl { margin: 0; }
.tenant-contract-list .secondary { white-space: nowrap; }
.tenant-ticket-list { display: grid; gap: 14px; }
.tenant-ticket-list article { padding: 22px; border: 1px solid #e2dacd; border-radius: 5px; background: #fffdf9; box-shadow: 0 10px 25px rgba(8,24,40,.07); }
.tenant-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tenant-ticket-top > span:first-child { color: #9d7840; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tenant-ticket-list h3 { margin: 16px 0 7px; color: var(--navy); font-family: Georgia,serif; font-size: 1.3rem; }
.tenant-ticket-list article > p { margin: 0; color: #536171; line-height: 1.55; }
.tenant-ticket-list dl { display: grid; gap: 9px; margin: 20px 0 0; }
.tenant-ticket-list dl div { display: flex; justify-content: space-between; gap: 18px; padding-top: 9px; border-top: 1px solid #ece5da; }
.tenant-ticket-list dt { color: var(--muted); font-size: .76rem; }
.tenant-ticket-list dd { margin: 0; color: var(--navy); font-weight: 700; text-align: right; }

.pwa-update { position: fixed; z-index: 1000; right: 22px; bottom: max(22px,env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 16px; width: min(520px,calc(100% - 32px)); padding: 17px 18px; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: #10283b; box-shadow: 0 20px 50px rgba(3,15,27,.32); }
.pwa-update div { min-width: 0; flex: 1; }
.pwa-update strong,.pwa-update span { display: block; }
.pwa-update strong { font-family: Georgia,serif; font-size: 1.05rem; }
.pwa-update span { margin-top: 4px; color: #d5dee5; font-size: .78rem; line-height: 1.4; }
.pwa-update #pwa-update-button { flex: 0 0 auto; color: #102234; background: #f3e9d8; }
.pwa-update #pwa-update-later { flex: 0 0 auto; padding: 6px 9px; color: #fff; background: transparent; font-size: 1.25rem; }
.announcement-dialog { width: min(720px,calc(100% - 28px)); }
.announcement-fields { display: grid; gap: 16px; margin: 22px 0; }
.announcement-tenants { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 260px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.announcement-tenants label { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid transparent; border-radius: 6px; background: #fff; cursor: pointer; }
.announcement-tenants label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.announcement-tenants input { flex: 0 0 auto; width: auto; margin: 0; }
.announcement-tenants span,.announcement-tenants strong,.announcement-tenants small { display: block; min-width: 0; }
.announcement-tenants strong,.announcement-tenants small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement-tenants small { margin-top: 3px; color: var(--muted); font-weight: 500; }
.photo-help { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; font-weight: 500; }
.tenant-mode input[type="file"] { padding: 10px; border-style: dashed; background: #fffdf9; }

@media (max-width: 950px) {
  .tenant-kpis { grid-template-columns: 1fr 1fr; }
  .tenant-unit-grid { grid-template-columns: 1fr 1fr; }
  .tenant-contract-list article { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .tenant-portal-hero { display: block; padding: 28px 23px; }
  .tenant-portal-hero .tenant-primary { width: 100%; margin-top: 22px; }
  .tenant-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tenant-unit-grid { grid-template-columns: 1fr; }
  .tenant-kpis > * { min-height: 88px; padding: 16px; }
  .tenant-kpis strong { margin-top: 7px; font-size: 1.65rem; }
  .tenant-finance-summary { align-items: stretch; flex-direction: column; padding: 21px 19px; }
  .tenant-finance-summary button { width: 100%; }
  .tenant-invoice-row { grid-template-columns: 1fr auto; gap: 9px 14px; padding: 16px 18px; }
  .tenant-invoice-row > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .tenant-invoice-amount { grid-column: 2; grid-row: 1; }
  .tenant-invoice-status { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .tenant-invoices-summary { grid-template-columns: 1fr; }
  .invoice-admin-kpis { grid-template-columns: 1fr; }
  .invoice-bulk-summary { grid-template-columns: 1fr; }
  .invoice-bulk-row { grid-template-columns: 1fr; }
  .tenant-invoice-status { justify-content: flex-start; }
}

/* Mobiele huurderservaring en geïnstalleerde PWA v0.1.45 */
@media (max-width: 900px) {
  body.tenant-mode { background: #f5f1e9; }
  body.tenant-mode .app-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: 64px 1fr auto; }
  body.tenant-mode .topbar { min-width: 0; height: 64px; padding: 8px 12px max(8px,env(safe-area-inset-top)); border-top-width: 3px; }
  body.tenant-mode .topbar #menu { display: none; }
  body.tenant-mode .tenant-mobile-logo { display: block; flex: 0 0 auto; width: 62px; height: 39px; padding: 3px; object-fit: contain; border-radius: 5px; background: #fff; }
  body.tenant-mode .topbar h2 { max-width: 48vw; overflow: hidden; font-family: Georgia,"Times New Roman",serif; font-size: 1.18rem; text-overflow: ellipsis; white-space: nowrap; }
  body.tenant-mode .topbar #add { padding: 10px 12px; font-size: .78rem; white-space: nowrap; }
  body.tenant-mode main { width: 100%; min-width: 0; padding: 12px 12px 26px; overflow-x: hidden; }
  body.tenant-mode .sidebar { display: none; }
  body.tenant-mode .tenant-portal-hero { margin: 0; padding: 25px 20px; border-radius: 5px; background-position: 74% center; }
  body.tenant-mode .tenant-portal-hero h2 { font-size: clamp(1.65rem,8vw,2.2rem); line-height: 1.08; }
  body.tenant-mode .tenant-portal-hero p:not(.eyebrow) { font-size: .88rem; line-height: 1.5; }
  body.tenant-mode .tenant-section-head { margin: 27px 2px 11px; }
  body.tenant-mode .tenant-unit-card,body.tenant-mode .tenant-ticket-list article { padding: 19px; }
  body.tenant-mode .tenant-unit-card > p { min-height: 0; }
  body.tenant-mode .tenant-unit-card .secondary { width: 100%; min-height: 44px; }
  body.tenant-mode .tenant-contract-list article { gap: 17px; padding: 19px; }
  body.tenant-mode .tenant-contract-list .secondary { width: 100%; min-height: 44px; }
  body.tenant-mode .tenant-unit-card dl div,body.tenant-mode .tenant-contract-list dl div,body.tenant-mode .tenant-ticket-list dl div { align-items: flex-start; }
  body.tenant-mode .tenant-unit-card dd,body.tenant-mode .tenant-contract-list dd,body.tenant-mode .tenant-ticket-list dd { max-width: 58%; overflow-wrap: anywhere; }
  body.tenant-mode .section-head.tenant-list-head { margin-top: 8px; }
  body.tenant-mode dialog,body.tenant-mode dialog.wide-dialog,body.tenant-mode dialog.contract-dialog { width: 100%; max-width: none; max-height: 100dvh; margin: 0; border-radius: 0; }
  body.tenant-mode dialog form,body.tenant-mode .wide-dialog form,body.tenant-mode .contract-dialog form { max-height: 100dvh; padding: 18px 15px calc(18px + env(safe-area-inset-bottom)); }
  body.tenant-mode .document-viewer-dialog .document-viewer-shell { max-height: 100dvh; padding: 0; }
  body.tenant-mode .document-viewer-head { align-items: flex-start; padding: max(14px,env(safe-area-inset-top)) 13px 12px; }
  body.tenant-mode .document-viewer-head h2 { max-width: 58vw; font-size: 1rem; }
  body.tenant-mode .document-viewer-actions { gap: 4px; }
  body.tenant-mode .document-viewer-actions .secondary { padding: 9px; font-size: .75rem; }
  body.tenant-mode .document-viewer-dialog .preview-body,body.tenant-mode .document-viewer-dialog .preview-body iframe { height: calc(100dvh - 105px); }
  body.tenant-mode .tenant-mobile-footer { display: grid; gap: 12px; margin: 8px 12px calc(78px + env(safe-area-inset-bottom)); padding: 20px 18px; border-top: 1px solid #ded5c8; color: var(--muted); }
  body.tenant-mode .tenant-mobile-footer label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
  body.tenant-mode .tenant-mobile-footer select { padding: 10px 12px; background: #fffdf9; }
  body.tenant-mode .tenant-mobile-footer button { width: 100%; padding: 12px; color: #fff; border-color: rgba(255,255,255,.12); background: #10283b; }
  body.tenant-mode .tenant-mobile-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr; padding: 8px 10px max(8px,env(safe-area-inset-bottom)); border-top: 1px solid #d8d1c6; background: rgba(255,253,249,.97); box-shadow: 0 -8px 28px rgba(8,24,40,.10); backdrop-filter: blur(12px); }
  body.tenant-mode .tenant-mobile-nav button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; padding: 10px 16px; color: #fff; border-radius: 7px; background: #10283b; }
  body.tenant-mode .tenant-mobile-nav button span { color: #e4cda6; font-size: 1.18rem; }
  body.tenant-mode .tenant-mobile-nav button small { max-width: 100%; overflow: hidden; font-size: .84rem; font-weight: 800; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
  body.tenant-mode .tenant-mobile-nav button.active { color: #fff; background: #10283b; }
  body.tenant-mode .tenant-mobile-nav button.active span { color: #e4cda6; }
  body.tenant-mode .pwa-update { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .announcement-dialog { width: 100%; max-height: 100dvh; margin: 0; border-radius: 0; }
  .announcement-dialog form { max-height: 100dvh; overflow: auto; padding: 18px 15px; }
  .announcement-tenants { grid-template-columns: 1fr; max-height: 38vh; }
  .pwa-update { right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); width: calc(100% - 20px); gap: 10px; padding: 14px; }
  .pwa-update #pwa-update-button { padding: 10px 12px; font-size: .78rem; }
}

@media (max-width: 390px) {
  body.tenant-mode .tenant-kpis { grid-template-columns: 1fr; }
  body.tenant-mode .tenant-kpis > * { min-height: 76px; }
  .pwa-update { align-items: flex-start; flex-wrap: wrap; }
  .pwa-update div { flex-basis: calc(100% - 38px); }
  .pwa-update #pwa-update-button { order: 3; width: 100%; }
}

/* v0.1.54 - contractkolommen en beschikbaarheid */
.contract-column-panel { position: absolute; z-index: 25; top: 112px; right: 28px; width: min(360px,calc(100vw - 40px)); padding: 16px; border: 1px solid #d8cbb6; border-radius: 8px; background: #fffdf9; box-shadow: 0 18px 45px rgba(8,24,40,.18); }
.contract-column-panel.hidden { display: none; }
.column-panel-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.column-panel-head small { color: var(--muted); }
.contract-column-list { display: grid; gap: 5px; margin-bottom: 12px; }
.contract-column-item { display: grid; grid-template-columns: 24px 22px 1fr; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid transparent; border-radius: 5px; background: #f4f0e9; cursor: grab; }
.contract-column-item:hover { border-color: #c7a56b; }
.contract-column-item.dragging { opacity: .45; }
.contract-column-item input { margin: 0; }
.column-grip { color: #9a7b48; font-weight: 900; letter-spacing: -3px; }
#clear-contract-filters.has-active-filters { color: #fff; border-color: #9a6f2e; background: #9a6f2e; }
.availability-section { margin: 32px 0 40px; }
.availability-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.availability-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #d9d0c2; }
.availability-title h4 { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; }
.availability-title span { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #10283b; font-weight: 800; }
.availability-list { display: grid; gap: 10px; margin-top: 10px; }
.availability-card { display: grid; grid-template-columns: minmax(150px,1fr) minmax(230px,1.25fr); gap: 20px; padding: 17px 18px; border: 1px solid #ded5c8; border-radius: 7px; background: #fffdf9; }
.availability-card h4 { margin: 8px 0 3px; font-size: 1rem; }
.availability-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.availability-state { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #176247; background: #e1f1e9; font-size: .65rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.availability-state.future { color: #765514; background: #f6ead1; }
.availability-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; margin: 0; }
.availability-card dl div { min-width: 0; }
.availability-card dt { color: var(--muted); font-size: .66rem; text-transform: uppercase; }
.availability-card dd { margin: 3px 0 0; font-size: .82rem; overflow-wrap: anywhere; }
.availability-empty { padding: 24px 18px; border: 1px dashed #d9d0c2; border-radius: 7px; color: var(--muted); background: rgba(255,253,249,.55); }
@media (max-width: 1050px) { .availability-columns { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .availability-card { grid-template-columns: 1fr; } .availability-card dl { grid-template-columns: 1fr 1fr; } .contract-column-panel { position: fixed; top: 80px; right: 12px; } }

/* v0.1.58 - ondernemingsgegevens ophalen */
.enterprise-lookup-field { grid-column: 1 / -1; }
.enterprise-lookup-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.enterprise-lookup-actions .secondary { min-height: 39px; padding: 9px 13px; font-size: .78rem; text-decoration: none; }
.enterprise-lookup-note,.enterprise-lookup-result { display: block; margin-top: 8px; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.enterprise-lookup-result:empty { display: none; }
.enterprise-lookup-result.success { color: #176247; font-weight: 700; }
.enterprise-lookup-result.warning { color: #80601f; font-weight: 700; }
.enterprise-lookup-result.error { color: #a63838; font-weight: 700; }
@media (max-width: 620px) { .enterprise-lookup-actions > * { width: 100%; justify-content: center; text-align: center; } }
.invoice-source-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.billit-sync-message{margin:0 0 14px;padding:11px 14px;border:1px solid #d7c7a7;border-radius:10px;background:#fbf6e9;color:#27364a;font-weight:700}.invoice-source-actions button{white-space:nowrap}
@media(max-width:720px){.invoice-source-actions{width:100%;justify-content:stretch}.invoice-source-actions button{flex:1 1 100%}}

/* Leverancierscontrole */
.supplier-check-head{align-items:flex-end}.supplier-sync-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.supplier-check-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 18px}.supplier-check-kpis button{display:grid;gap:4px;padding:17px 19px;text-align:left;border:1px solid #ded5c6;border-radius:8px;background:#fbfaf7;color:var(--navy)}.supplier-check-kpis button:hover{border-color:var(--gold);box-shadow:0 8px 22px rgba(10,29,45,.08)}.supplier-check-kpis small{color:var(--muted)}.supplier-check-kpis strong{font-family:Georgia,serif;font-size:1.65rem}.supplier-check-tools{display:grid;grid-template-columns:minmax(260px,1fr) minmax(170px,230px) minmax(210px,280px) auto;gap:12px;align-items:end;margin:0 0 14px}.supplier-check-tools label{display:grid;gap:6px;color:var(--muted);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.supplier-check-tools span{padding-bottom:13px;color:var(--muted);font-size:.82rem}.supplier-check-list{display:grid;gap:10px}.supplier-check-card{display:grid;grid-template-columns:minmax(240px,1.25fr) minmax(250px,1fr) minmax(300px,auto);gap:18px;align-items:center;padding:18px 20px;border:1px solid #e4dccf;border-radius:8px;background:#fffdf9}.supplier-identity,.supplier-latest{display:grid;gap:4px}.supplier-identity strong{font-size:1.02rem}.supplier-identity span{font-variant-numeric:tabular-nums}.supplier-identity small,.supplier-latest small{color:var(--muted)}.supplier-scope-toggle{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--navy);font-size:.78rem;font-weight:700}.supplier-scope-toggle input{width:17px;height:17px;margin:0;accent-color:var(--gold)}.supplier-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.supplier-actions button{white-space:nowrap}.supplier-status{display:inline-flex;width:max-content;padding:5px 9px;border-radius:999px;background:#eee;color:#586474;font-size:.72rem;font-weight:900}.supplier-status.valid{background:#e4f3eb;color:#16704c}.supplier-status.obligation{background:#fbe2df;color:#a62b25}.supplier-status.attention{background:#fff0c8;color:#8c6300}.supplier-status.invalid{background:#eceff2;color:#596572}.supplier-check-guidance{display:grid;gap:3px;margin:0 0 18px;padding:13px 15px;border-left:4px solid var(--gold);background:#f8f4ec;color:var(--navy)}.supplier-check-guidance span{color:var(--muted);font-size:.84rem}.supplier-history-shell{padding:25px}.supplier-history-item{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:15px 4px;border-bottom:1px solid #e6ded1}.supplier-history-item>div{display:grid;gap:5px}.supplier-history-item small,.supplier-history-item p{color:var(--muted)}.supplier-history-item p{margin:2px 0 0}.supplier-history-dialog{width:min(900px,calc(100% - 28px))}
@media(max-width:1100px){.supplier-check-kpis{grid-template-columns:repeat(3,1fr)}.supplier-check-card{grid-template-columns:1fr 1fr}.supplier-actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:760px){.supplier-check-head{align-items:stretch}.supplier-sync-actions{display:grid}.supplier-sync-actions button{width:100%}.supplier-check-kpis{grid-template-columns:1fr 1fr}.supplier-check-tools{grid-template-columns:1fr}.supplier-check-tools span{padding:0}.supplier-check-card{grid-template-columns:1fr;padding:16px}.supplier-actions{grid-column:auto;display:grid}.supplier-actions button{width:100%}.supplier-history-item{align-items:flex-start;flex-direction:column}.supplier-history-item button{width:100%}}
.agenda-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.agenda-kpi{text-align:left;border:1px solid #ded6c8;background:#fffdfa;padding:20px;cursor:pointer;transition:.18s ease}.agenda-kpi:hover{border-color:#b48c4b;transform:translateY(-2px)}.agenda-kpi small,.agenda-kpi span{display:block;color:#667184}.agenda-kpi strong{display:block;font-family:Georgia,serif;font-size:2rem;color:#102031;margin:8px 0}.agenda-kpi.critical strong{color:#a63d32}.agenda-section{margin-bottom:18px;padding:22px}.agenda-head{align-items:flex-end}.agenda-filters{display:flex;gap:10px;flex-wrap:wrap}.agenda-filters label{min-width:165px;font-size:.78rem;color:#687487}.agenda-filters select{display:block;width:100%;margin-top:5px}.agenda-action-list,.agenda-record-list{display:grid;gap:1px;background:#e5e8ec;border:1px solid #e5e8ec;border-radius:10px;overflow:hidden}.agenda-action{display:grid;grid-template-columns:115px minmax(220px,1fr) 170px auto;gap:18px;align-items:center;padding:15px 17px;background:#fff}.agenda-source{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9a7132}.agenda-action-main strong,.agenda-action-main small{display:block}.agenda-action-main small,.agenda-record small,.agenda-record span{color:#687487;margin-top:4px}.agenda-due{display:grid;gap:5px}.agenda-urgency{width:max-content;border-radius:99px;padding:5px 9px;font-size:.72rem;background:#edf1f4;color:#4b5a6d}.agenda-urgency.late,.agenda-urgency.urgent{background:#fbe6e2;color:#9b3027}.agenda-urgency.soon{background:#fff0c9;color:#7b5a08}.agenda-urgency.missing{background:#fff2ce;color:#80600e}.agenda-urgency.planned{background:#e8f2ed;color:#2c674a}.agenda-record{display:grid;grid-template-columns:44px minmax(220px,1fr) auto;gap:14px;align-items:center;padding:15px 17px;background:#fff}.agenda-record>div:nth-child(2){display:grid}.agenda-record-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e8f2ed;color:#2c674a;font-weight:900}.agenda-record-icon:not(.task){background:#fff0c9;color:#7b5a08}.agenda-record-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.agenda-record-actions select{min-width:145px}.agenda-missing{color:#9b3027!important;font-weight:700}.danger-link{border:0;background:transparent;color:#a63d32;font-weight:700;padding:8px;cursor:pointer}.agenda-dashboard-kpi{cursor:pointer}.agenda-dashboard-kpi:hover{border-color:#b48c4b}.agenda-dialog{max-width:880px;width:min(94vw,880px)}
@media(max-width:1000px){.agenda-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.agenda-action{grid-template-columns:90px minmax(180px,1fr) 155px auto}}
@media(max-width:720px){.agenda-summary{grid-template-columns:1fr 1fr;gap:9px}.agenda-kpi{padding:14px}.agenda-kpi strong{font-size:1.55rem}.agenda-section{padding:14px}.agenda-head{align-items:stretch}.agenda-filters{width:100%}.agenda-filters label{flex:1;min-width:130px}.agenda-action{grid-template-columns:1fr auto;gap:8px 12px}.agenda-source{grid-column:1}.agenda-action-main{grid-column:1/-1}.agenda-due{grid-column:1}.agenda-action .row-action{grid-column:2;grid-row:3}.agenda-record{grid-template-columns:38px 1fr}.agenda-record-actions{grid-column:1/-1;justify-content:flex-start;padding-left:52px}.agenda-record-actions>*{flex:1}.agenda-record-actions .danger-link{flex:0 0 auto}.agenda-section .section-head>.primary{width:100%}}
.kpis.dashboard-kpi-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid #ded6c8;border-radius:12px;overflow:hidden;background:#fffdfa;box-shadow:0 8px 24px rgba(16,32,49,.05)}.dashboard-kpi-strip .kpi{min-width:0;min-height:0;padding:14px 16px;border:0;border-right:1px solid #e7e0d5;border-radius:0;box-shadow:none;background:transparent}.dashboard-kpi-strip .kpi:last-child{border-right:0}.dashboard-kpi-strip .kpi strong{font-size:1.55rem;margin:5px 0}.dashboard-kpi-strip .kpi small{font-size:.7rem;line-height:1.25}.dashboard-kpi-strip .kpi .table-sub{font-size:.72rem}.dashboard-kpi-strip .kpi-accent{height:2px;margin:-14px -16px 10px}
@media(max-width:1150px){.kpis.dashboard-kpi-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-kpi-strip .kpi:nth-child(3){border-right:0}.dashboard-kpi-strip .kpi:nth-child(-n+3){border-bottom:1px solid #e7e0d5}}
@media(max-width:720px){.kpis.dashboard-kpi-strip{grid-template-columns:1fr 1fr}.dashboard-kpi-strip .kpi,.dashboard-kpi-strip .kpi:nth-child(3){border-right:1px solid #e7e0d5;border-bottom:1px solid #e7e0d5}.dashboard-kpi-strip .kpi:nth-child(even){border-right:0}.dashboard-kpi-strip .kpi:last-child{border-bottom:0}}

/* Waarborgbeheer */
.deposit-head{align-items:flex-end}.deposit-filter{min-width:210px}.deposit-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #ded6c8;border-radius:12px;overflow:hidden;background:#fffdfa;margin-bottom:18px}.deposit-kpis article{padding:14px 18px;border-right:1px solid #e7e0d5}.deposit-kpis article:last-child{border-right:0}.deposit-kpis small{display:block;color:#697687;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.deposit-kpis strong{display:block;margin-top:5px;color:#102031;font-family:Georgia,serif;font-size:1.45rem}.deposit-table td small{display:block;margin-top:4px;color:#748090}.deposit-status{display:inline-flex;padding:6px 10px;border-radius:999px;background:#edf0f3;color:#445264;font-size:.72rem;font-weight:800;white-space:nowrap}.deposit-status.complete{background:#e2f3e9;color:#28704a}.deposit-status.missing{background:#fff0dc;color:#925a15}.deposit-status.partial{background:#fff6cf;color:#7b6410}.deposit-status.release{background:#e5eefb;color:#285b91}.deposit-status.returned{background:#ece7f6;color:#60478b}.deposit-due{color:#a54a39}.deposit-table .document-mark{min-width:74px}
.deposit-filters{display:grid;grid-template-columns:minmax(240px,1.7fr) minmax(180px,1fr) minmax(180px,1fr) auto;gap:12px;align-items:end;margin:0 0 16px}.deposit-filters label{margin:0}.deposit-filters button{min-height:44px}.deposit-actions{display:flex;flex-wrap:wrap;gap:6px}.deposit-actions .row-action{white-space:nowrap}.field-help{display:block;margin-top:5px;color:#748090;font-size:.74rem;line-height:1.35}
@media(max-width:900px){.deposit-filters{grid-template-columns:1fr 1fr}.deposit-filters label:first-child{grid-column:1/-1}.deposit-kpis{grid-template-columns:1fr 1fr}.deposit-kpis article:nth-child(2){border-right:0}.deposit-kpis article:nth-child(-n+2){border-bottom:1px solid #e7e0d5}.deposit-table table,.deposit-table thead,.deposit-table tbody,.deposit-table tr,.deposit-table th,.deposit-table td{display:block}.deposit-table thead{display:none}.deposit-table tr{padding:14px;border-bottom:1px solid #e7e0d5}.deposit-table td{padding:5px 0;border:0}.deposit-table td:nth-child(2){color:#697687}.deposit-table td:nth-child(3)::before{content:'Verschuldigd: ';color:#697687}.deposit-table td:nth-child(4)::before{content:'Ontvangen: ';color:#697687}.deposit-table td:nth-child(5)::before{content:'Saldo: ';color:#697687}}
@media(max-width:560px){.deposit-head{align-items:stretch}.deposit-filter{min-width:0}.deposit-filters{grid-template-columns:1fr}.deposit-filters label:first-child{grid-column:auto}.deposit-kpis{grid-template-columns:1fr 1fr}.deposit-kpis article{padding:12px}.deposit-kpis strong{font-size:1.18rem}}
.supplier-actions .danger{color:var(--red);border-color:#e4bcbc;background:#fff}.supplier-actions .danger:hover{border-color:var(--red);background:#fdf1f1}