:root {
  --cream: #f7f5ef;
  --paper: #ffffff;
  --navy: #172138;
  --navy-soft: #202e4c;
  --coral: #f37845;
  --coral-dark: #d85e2f;
  --blue: #3768d9;
  --yellow: #f5c650;
  --ink-muted: #667086;
  --line: #dfddd5;
  --line-soft: #ebe8e0;
  --success: #2e7d56;
  --danger: #a73a34;
  --shadow: 0 8px 28px rgba(23, 33, 56, 0.07);
  --shadow-hover: 0 13px 34px rgba(23, 33, 56, 0.12);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--navy);
  background: var(--cream);
  line-height: 1.5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { background: var(--cream); }
body { margin: 0; min-width: 320px; background: var(--cream); }
a { color: var(--blue); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

h1, h2, h3 {
  color: var(--navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.12;
}
h1 { margin: 0; font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -0.035em; }
h2 { margin: 0; font-size: 1.45rem; }
h3 { margin: 0; font-size: 1.1rem; }
p { margin: 0 0 1rem; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 248px;
  flex-direction: column;
  padding: 28px 20px 22px;
  border-right: 1px solid var(--line-soft);
  background: var(--paper);
}
.brand-lockup, .mobile-brand, .login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--navy);
  text-decoration: none;
}
.brand-mark {
  position: relative;
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 50% 50% 46% 54%;
  background: var(--coral);
  color: white;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: inset -7px 0 0 rgba(23, 33, 56, 0.08);
}
.brand-mark::after {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  content: '';
}
.brand-copy, .login-brand > span:last-child { display: grid; line-height: 1.15; }
.brand-copy strong, .login-brand strong { font-size: 1.08rem; }
.brand-copy small, .login-brand small { margin-top: 4px; color: var(--ink-muted); font-size: 0.67rem; letter-spacing: 0.12em; text-transform: uppercase; }

.sidebar-nav { display: grid; gap: 6px; margin-top: 48px; }
.nav-link {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  border-radius: 12px;
  color: #485168;
  font-size: 0.91rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.nav-link:hover { background: #f8eee9; color: var(--navy); transform: translateX(2px); }
.nav-link[aria-current='page'] { background: #fff0e9; color: var(--coral-dark); }
.nav-icon { display: grid; width: 24px; height: 24px; place-items: center; color: currentColor; font-size: 1.22rem; }
.sidebar-footer { display: grid; gap: 10px; margin-top: auto; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-top: 1px solid var(--line-soft); }
.user-card > span:last-child { display: grid; line-height: 1.25; }
.user-card strong { font-size: 0.88rem; }
.user-card small { color: var(--ink-muted); font-size: 0.75rem; }
.user-avatar { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: var(--navy-soft); color: white; font-family: Georgia, serif; }
.sidebar-footer form, .mobile-topbar form { margin: 0; }
.logout-link { border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; font-size: 0.8rem; }
.logout-link:hover { color: var(--danger); }

.app-content { min-height: 100vh; margin-left: 248px; }
.mobile-topbar { display: none; }
.page-content { width: 100%; margin: 0; padding: 52px 48px 72px; }
.page-intro { margin-bottom: 32px; }
.eyebrow {
  margin: 0 0 11px;
  color: var(--coral-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.intro-copy { max-width: 620px; margin-top: 12px; color: var(--ink-muted); font-size: 1rem; }

.heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.heading > div > p:not(.eyebrow) { margin-top: 9px; color: var(--ink-muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.section-heading h2 { margin: 0; }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.module-card {
  position: relative;
  display: grid;
  min-height: 215px;
  grid-template-rows: auto 1fr;
  padding: 23px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
  box-shadow: var(--shadow);
  color: var(--navy);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.module-card::after { position: absolute; right: -20px; bottom: -35px; width: 110px; height: 110px; border-radius: 50%; background: currentColor; content: ''; opacity: 0.055; }
.module-card:hover { transform: translateY(-3px); border-color: #ccc8bd; box-shadow: var(--shadow-hover); }
.module-card > span:nth-child(2) { align-self: end; display: grid; }
.module-card small { margin-bottom: 5px; color: var(--ink-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.module-card strong { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; }
.module-card strong + span { margin-top: 5px; color: var(--ink-muted); font-size: 0.83rem; }
.module-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: #fff0e9; color: var(--coral-dark); font-size: 1.35rem; }
.module-act .module-icon { background: #fff7dc; color: #a27500; }
.module-employee .module-icon { background: #edf2ff; color: var(--blue); }
.module-customer .module-icon { background: #edf7f2; color: var(--success); }
.card-arrow { position: absolute; right: 21px; top: 24px; font-size: 1.2rem; }

.button, button:not(.logout-link) {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--coral);
  box-shadow: 0 3px 8px rgba(243, 120, 69, 0.2);
  color: white;
  cursor: pointer;
  font-weight: 750;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.button:hover, button:not(.logout-link):hover { background: var(--coral-dark); box-shadow: 0 5px 12px rgba(243, 120, 69, 0.28); transform: translateY(-1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.button.secondary, button.secondary { border-color: #d6dae3; background: white; box-shadow: none; color: var(--navy); }
.button.secondary:hover, button.secondary:hover { border-color: var(--blue); background: #f3f6ff; color: var(--blue); }
.button.danger, button.danger { background: var(--danger); box-shadow: none; }
.small { min-height: 34px !important; padding: 5px 10px !important; border-radius: 9px !important; font-size: 0.8rem; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card, .panel, .row, .empty, .filter-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.card { display: flex; flex-direction: column; padding: 22px; color: inherit; text-decoration: none; }
.panel { margin: 18px 0; padding: 24px; }
.empty { padding: 42px 28px; color: var(--ink-muted); text-align: center; }
.empty strong { display: block; margin-bottom: 5px; color: var(--navy); font-family: Georgia, serif; font-size: 1.3rem; font-weight: 400; }

.list { display: grid; gap: 10px; }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 2fr auto;
  align-items: center;
  min-height: 78px;
  padding: 17px 20px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.row::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--coral); content: ''; }
.row:hover { border-color: #cdc9be; box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.row div:first-child { display: flex; flex-direction: column; gap: 5px; }
.row strong { font-size: 0.95rem; }
.row span { color: var(--ink-muted); font-size: 0.86rem; }
.employee-row { grid-template-columns: 2fr 2fr 1fr; }
.employee-row::before { background: var(--blue); }
.customer-row::before { background: var(--success); }
.contact-list { display: grid; gap: 9px; }
.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid var(--line-soft); border-radius: 13px; background: #fbfaf7; color: var(--navy); text-decoration: none; }
.contact-card:hover { border-color: #c9c6bb; background: white; }
.contact-card > span:first-child { display: grid; gap: 3px; }
.contact-card small { color: var(--ink-muted); }
.contact-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.archived-contacts { margin-top: 16px; }
.archived-contacts summary { cursor: pointer; color: var(--ink-muted); font-weight: 750; }
.archived-contacts .contact-list { margin-top: 10px; }
.compact-empty { padding: 25px 20px; box-shadow: none; }
.location-list { display: grid; gap: 10px; }
.location-card { border: 1px solid var(--line-soft); border-radius: 14px; background: #fbfaf7; }
.location-card > a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; color: var(--navy); text-decoration: none; }
.location-card > a > span:first-child { display: grid; gap: 3px; }
.location-card small { color: var(--ink-muted); }
.location-actions { display: flex; justify-content: flex-end; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: .82rem; }
.field-help { margin: -4px 0 4px; color: var(--ink-muted); font-size: .82rem; }
.sales-price-row { display: grid; grid-template-columns: 130px 190px minmax(180px,1fr) auto; align-items: end; gap: 10px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 12px; background: white; }
.sales-price-row + .sales-price-row { margin-top: 9px; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th,.price-table td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.price-table th { color: var(--ink-muted); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.table-panel { overflow-x: auto; }
.booking-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.booking-table th,.booking-table td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.booking-table th { color: var(--ink-muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.booking-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.booking-form { max-width: 1240px; }
.form-section { display: grid; gap: 19px; }
.inline-subform { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fbfaf7; }
.booking-days { display: grid; gap: 18px; }
.booking-day { background: #fbfaf7; }
.booking-day > .fieldset-heading legend { padding: 0; }
.same-location-note,.notice { padding: 12px 14px; border-radius: 10px; background: #eef3ff; color: #344d85; }
.immutable-confirmation { border-color: #e0c878; background: #fffaf0; }
.duplicate-choice { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.booking-day-list { display: grid; margin-top: 18px; }
.booking-day-list article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.booking-day-list article > div { display: grid; gap: 4px; }

.status, .tag {
  display: inline-block;
  width: fit-content;
  border-radius: 999px;
  background: #eef1f7;
  color: #45516a !important;
  font-size: 0.72rem !important;
  font-weight: 750;
  line-height: 1.4;
  padding: 4px 9px;
}
.tag.test { background: #fff3ce; color: #795900 !important; }
.success, .errors { margin: 18px 0; padding: 14px 16px; border-radius: 12px; }
.success { border: 1px solid #c9e5d5; background: #eaf7ef; color: #245b3d; }
.errors { border: 1px solid #f1ccc7; background: #fff0ed; color: #84231d; }

.form { display: grid; width: 100%; max-width: 1120px; gap: 20px; }
.form.panel { padding: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.name-grid { grid-template-columns: 2fr 1fr 2fr; }
.address-grid { grid-template-columns: 2fr 1fr; }
label { display: grid; gap: 7px; color: #344057; font-size: 0.84rem; font-weight: 750; }
input, textarea, select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #c9c8c2;
  border-radius: 10px;
  background: white;
  color: var(--navy);
  padding: 10px 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(55, 104, 217, 0.13); outline: 0; }
fieldset { display: grid; gap: 17px; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
legend { padding: 0 7px; color: var(--navy); font-family: Georgia, serif; font-size: 1.05rem; }
.checkbox { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 9px; font-weight: 500; }
.checkbox input { width: 19px; min-height: 19px; height: 19px; accent-color: var(--blue); }
.checkbox-group { background: #fbfaf7; }
.checkbox-group .checkbox { font-weight: 500; }
.inline-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.inline-add { min-height: 38px !important; padding: 8px 12px !important; border-color: #d6dae3 !important; background: white !important; box-shadow: none !important; color: var(--blue) !important; font-size: 0.8rem; }
.inline-add:hover { border-color: var(--blue) !important; background: #f3f6ff !important; }
.fieldset-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 2px; }
.fieldset-heading > span { color: var(--ink-muted); font-size: 0.78rem; }
.duplicate-warning { max-width: 1120px; border-color: #e7ce78; background: #fffaf0; }
.duplicate-list { display: grid; gap: 9px; margin: 18px 0; }
.duplicate-list article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px; border: 1px solid #e4dcc3; border-radius: 12px; background: white; }
.duplicate-list article > div { display: grid; gap: 4px; }
.duplicate-list article span { color: var(--ink-muted); font-size: 0.82rem; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.actions form { margin: 0; }

/* Fase 8B.1: compacte CRM-vormtaal, uitsluitend geactiveerd met .crm-page. */
.crm-page{--crm-space-1:.5rem;--crm-space-2:.85rem;--crm-space-3:1.25rem;--crm-space-4:1.8rem;--crm-space-5:2.5rem;width:min(100%,1480px);margin-inline:auto}.crm-header{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--crm-space-4);margin-bottom:var(--crm-space-4)}.crm-header h1{margin:.25rem 0}.crm-surface,.crm-form{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}.crm-section,.form-section{padding:var(--crm-space-4) var(--crm-space-5)}.crm-section+.crm-section,.form-section+.form-section{border-top:1px solid var(--line-soft)}.form-section{display:grid;gap:var(--crm-space-3)}.form-section-heading{display:flex;align-items:baseline;gap:.75rem}.form-section-heading h2,.form-section-heading p{margin:0}.grid-2,.grid-3,.address-row{display:grid;gap:var(--crm-space-3)}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.span-2{grid-column:span 2}.address-row{grid-template-columns:minmax(240px,2.2fr) minmax(110px,.7fr) minmax(150px,1fr) minmax(190px,1.4fr)}.contact-entry{padding:var(--crm-space-3) 0;border:0;border-radius:0;border-top:1px solid var(--line-soft)}.contact-entry:first-child{border-top:0}.choice-row,.compact-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem}.compact-actions{font-size:.82rem}.button.compact{min-height:34px;padding:6px 10px}.form-submit{display:flex;align-items:center;justify-content:space-between}.crm-toolbar{display:flex;align-items:end;justify-content:space-between;gap:var(--crm-space-3)}.crm-toolbar .filters{flex:1}.crm-table-wrap{width:100%;overflow-x:auto}.crm-table{width:100%;border-collapse:collapse}.crm-table th,.crm-table td{padding:.85rem .75rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}.crm-table th{color:var(--ink-muted);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}.crm-table tbody tr:hover{background:#fbfaf7}.crm-table small{display:block;margin-top:.25rem;color:var(--ink-muted)}.crm-data{grid-template-columns:minmax(130px,180px) 1fr}.crm-danger{margin-top:var(--crm-space-4)}

.filters { display: flex; align-items: end; gap: 12px; margin-bottom: 18px; }
.filters label { flex: 1; }
.tabs { display: flex; gap: 7px; margin-bottom: 20px; padding: 4px; width: fit-content; border-radius: 12px; background: #ebe9e2; }
.tabs a { padding: 7px 12px; border-radius: 9px; color: var(--ink-muted); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.tabs a[aria-current='page'] { background: white; box-shadow: 0 2px 7px rgba(23, 33, 56, 0.08); color: var(--navy); }
.act-search { margin-bottom: 22px; }
.act-search-row { display: flex; align-items: end; gap: 12px; }
.act-search-row label { flex: 1; }
.filter-panel { margin-top: 12px; overflow: hidden; box-shadow: none; }
.filter-panel summary { padding: 13px 16px; cursor: pointer; font-weight: 750; }
.filter-panel[open] summary { border-bottom: 1px solid var(--line); }
.filter-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px; }
.filter-options fieldset { border: 0; padding: 0; }
.filter-actions { display: flex; align-items: center; gap: 14px; padding: 0 18px 18px; }

dl { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 11px 22px; margin: 0; }
dt { color: var(--ink-muted); font-size: 0.8rem; font-weight: 750; }
dd { margin: 0; }
.pre { white-space: pre-wrap; }
.cast { display: flex; flex-direction: column; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.cast-slot { flex-direction: row; justify-content: space-between; gap: 20px; }
.cast-slot > div:first-child { display: flex; flex-direction: column; gap: 5px; }
.row-actions, .order-actions { display: flex; align-items: center; gap: 8px; }
.row-actions { gap: 12px; }
.order-actions form { margin: 0; }
.danger-link { color: var(--danger); }
.confirm { max-width: 700px; margin-inline: auto; }

.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 16%, rgba(245, 198, 80, 0.24) 0 6%, transparent 6.2%),
    radial-gradient(circle at 12% 90%, rgba(55, 104, 217, 0.10) 0 13%, transparent 13.2%),
    var(--cream);
}
.login { width: min(100% - 36px, 460px); margin: 0 auto; padding: 58px 0; }
.login-brand { width: fit-content; margin: 0 auto 30px; }
.login-card { padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 18px 55px rgba(23, 33, 56, 0.11); }
.login-card h1 { font-size: 2.35rem; }
.login-card > p:not(.eyebrow) { margin-top: 10px; color: var(--ink-muted); }
.login-form { margin-top: 24px; }
.login-form button { margin-top: 3px; }

@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .contact-list, .location-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .crm-page{--crm-space-4:1.25rem;--crm-space-5:1.25rem}.crm-header,.crm-toolbar,.form-submit{align-items:stretch;flex-direction:column}.grid-2,.grid-3,.address-row{grid-template-columns:1fr}.span-2{grid-column:auto}.crm-table thead{display:none}.crm-table,.crm-table tbody,.crm-table tr,.crm-table td{display:block;width:100%}.crm-table tr{padding:.75rem 0;border-bottom:1px solid var(--line)}.crm-table td{display:grid;grid-template-columns:minmax(105px,35%) 1fr;gap:.75rem;padding:.35rem .75rem;border:0}.crm-table td::before{content:attr(data-label);color:var(--ink-muted);font-size:.72rem;font-weight:750;text-transform:uppercase}.crm-table-wrap{overflow:visible}
  .sidebar {
    inset: auto 0 0;
    z-index: 30;
    width: auto;
    height: 76px;
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    border-right: 0;
    box-shadow: 0 -8px 26px rgba(23, 33, 56, 0.08);
  }
  .brand-lockup, .sidebar-footer { display: none; }
  .sidebar-nav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 0; }
  .nav-link { min-width: 0; min-height: 60px; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 1px; border-radius: 11px; font-size: 0.5rem; }
  .nav-link:hover { transform: none; }
  .nav-icon { width: 23px; height: 25px; font-size: 1.2rem; }
  .app-content { margin-left: 0; }
  .mobile-topbar { display: flex; height: 66px; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.9); }
  .mobile-brand { gap: 8px; }
  .mobile-brand .brand-mark { width: 36px; height: 36px; flex-basis: 36px; font-size: 1.1rem; }
  .mobile-brand strong { font-size: 0.95rem; }
  .page-content { padding: 31px 18px 112px; }
  h1 { font-size: 2.2rem; }
  .heading { align-items: stretch; flex-direction: column; gap: 17px; }
  .heading .button { width: 100%; }
  .dashboard-grid, .cards { grid-template-columns: 1fr; }
  .booking-sections { grid-template-columns: 1fr; }
  .contact-list, .location-list { grid-template-columns: 1fr; }
  .booking-day-list article,.duplicate-choice { align-items: stretch; flex-direction: column; }
  .module-card { min-height: 170px; }
  .row, .employee-row { grid-template-columns: 1fr; gap: 7px; padding: 17px 18px; }
  .contact-card { align-items: stretch; flex-direction: column; }
  .location-card > a { align-items: stretch; flex-direction: column; }
  .sales-price-row { grid-template-columns: 1fr; }
  .price-table { display: block; overflow-x: auto; }
  .contact-tags { justify-content: flex-start; }
  .form-grid, .name-grid, .address-grid { grid-template-columns: 1fr; }
  .inline-field { grid-template-columns: 1fr; }
  .inline-add { width: 100%; }
  .fieldset-heading, .duplicate-list article { align-items: stretch; flex-direction: column; }
  .form.panel, .panel { padding: 20px; }
  .filters, .act-search-row { align-items: stretch; flex-direction: column; }
  .filter-options { grid-template-columns: 1fr; }
  .filter-actions { align-items: stretch; flex-direction: column; }
  .filter-actions button { width: 100%; }
  .tabs { max-width: 100%; overflow-x: auto; }
  dl { grid-template-columns: 1fr; gap: 4px; }
  dd { margin-bottom: 11px; }
  .section-heading, .cast-slot { align-items: stretch; flex-direction: column; }
  .section-heading .button { text-align: center; }
  .row-actions { justify-content: space-between; }
  .actions { align-items: stretch; flex-direction: column; }
  .actions a, .actions button { width: 100%; text-align: center; }
}

.planning-time-row { padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: grid; gap: .75rem; margin-bottom: .75rem; }
.calculation-card { padding: .75rem 1rem; border-radius: 14px; background: #f7f5ef; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.calculation-card span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.calculation-card strong { color: var(--navy); }
.planning-section { display: grid; gap: .8rem; }
.warning-confirm { border-left: 4px solid var(--yellow); padding: .75rem; }
.planning-timeline { border-left: 2px solid #d8deea; margin: 1rem .4rem; padding-left: 1.2rem; display: grid; gap: 1rem; }
.planning-timeline > div { display: grid; grid-template-columns: minmax(8.5rem, auto) 1fr; gap: .85rem; align-items: baseline; position: relative; }
.planning-timeline > div::before { content: ""; position: absolute; width: .65rem; height: .65rem; border-radius: 50%; background: var(--blue); left: -1.58rem; top: .35rem; }
.planning-timeline span { color: var(--muted); }
.booking-day-list article.booking-day-card { display: block; }
.booking-day-card > .section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.booking-day-card > .section-heading > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.booking-day-card > .planning-timeline { width: min(100%, 52rem); margin-top: 1.25rem; }
.conflict-warning, .conflict-summary { padding: 16px; border: 1px solid #e0c878; border-radius: 14px; background: #fffaf0; }
.conflict-summary { margin: 14px 0; }
.conflict-list { display: grid; gap: 10px; margin: 16px 0; }
.conflict-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px; border: 1px solid #e4dcc3; border-radius: 12px; background: white; }
.conflict-list article > div { display: grid; gap: 3px; }
.conflict-list small { color: var(--ink-muted); }
.cancelled-days { border-color: #d7d4cc; background: #f3f1eb; }
.cancelled-day { opacity: .88; }
@media (max-width: 560px) { .planning-timeline > div { grid-template-columns: minmax(7rem, auto) 1fr; gap: .55rem; } }
.compact-time { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(9rem, auto); gap: .65rem; align-items: end; }
@media (max-width: 560px) { .compact-time { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}
.section-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--crm-space-3); margin-bottom: var(--crm-space-3); }
.crm-section-title { margin-bottom: var(--crm-space-3); }
.customer-overview-surface { padding: var(--crm-space-4) var(--crm-space-5); border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow); }
.form-submit { justify-content: center; }
.form-submit button { min-width: 220px; }
/* Boekingen fase 7A */
.dashboard-work-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1.25rem;margin-bottom:1.25rem}.dashboard-list{display:grid;gap:.45rem}.dashboard-list>a{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid #e4e1d9;color:inherit;text-decoration:none}.dashboard-list>a:last-child{border-bottom:0}.dashboard-list span{display:grid;gap:.25rem}.dashboard-list>a>span:last-child{text-align:right;justify-items:end}.task-deadline{font-weight:700;color:#3768d9}.task-deadline.overdue{color:#b74728}.task-list{display:grid;gap:.75rem}.task-card{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid #dedbd2;border-radius:16px;background:#fff}.task-card-heading,.task-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}.task-actions form{margin:0}.task-actions details form{display:grid;gap:.5rem;margin-top:.5rem}.task-card.muted{background:#f7f5ef}.task-history{margin-top:1rem}.module-booking .module-icon{color:#f37845}@media(max-width:800px){.dashboard-work-grid{grid-template-columns:1fr}.task-card{display:grid}.dashboard-list>a{align-items:flex-start}}