:root {
  --brand: #F26A21;
  --brand-dark: #cf571a;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-alt: #fff7f2;
  --ink: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --success: #15803d;
  --danger: #b91c1c;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  color: var(--ink);
}
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.portal-shell {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: 100vh;
}

.portal-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 18px 18px;
  background: rgba(255,255,255,0.94);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.brand-mark img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}
.brand-mark .title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-mark .title strong { font-size: 16px; }
.brand-mark .title span { font-size: 12px; color: var(--muted); }

.side-section {
  margin-bottom: 20px;
}
.side-section h4 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.side-nav {
  display: grid;
  gap: 6px;
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 600;
}
.side-nav a:hover,
.side-nav a.active {
  background: var(--surface-alt);
  color: var(--brand-dark);
}
.side-nav .pill {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(242,106,33,.12);
  color: var(--brand-dark);
}

.portal-main {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
}
.topbar .page-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.topbar .page-meta .eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.topbar .page-meta h1 {
  margin: 0;
  font-size: 22px;
}
.topbar .userbox {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  font-size: 14px;
}

.content {
  padding: 24px;
}

.grid {
  display: grid;
  gap: 16px;
}
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card, .stat-card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card, .panel { padding: 18px; }
.stat-card { padding: 18px; }
.stat-card .label { color: var(--muted); font-size: 13px; }
.stat-card .value { margin-top: 8px; font-size: 30px; font-weight: 800; color: var(--brand-dark); }
.stat-card .hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.planning-kpi { display: block; color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.planning-kpi:hover, .planning-kpi:focus-visible { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 8px 24px rgba(15, 23, 42, .10); }
.planning-kpi > span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.planning-today-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-alt); color: var(--muted); font-size: 13px; }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 28px 0 14px;
}
.section-title h2, .section-title h3 { margin: 0; }
.section-title p { margin: 4px 0 0; color: var(--muted); }

.btn, .button, .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover, .button:hover, .button-secondary:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary, .button, .btn {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover, .button:hover, .btn:hover { background: var(--brand-dark); }
.btn-secondary, .button-secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--border);
}
.btn-danger {
  background: #fee2e2;
  color: var(--danger);
  border-color: #fecaca;
}

.table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.table th, .table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: #fafafa; }
.table tbody tr:hover { background: #fffaf7; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #eef2ff;
  color: #3730a3;
}
.badge.ok { background: #dcfce7; color: var(--success); }
.badge.fail { background: #fee2e2; color: var(--danger); }
.badge.brand { background: rgba(242,106,33,.12); color: var(--brand-dark); }

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.search-input, input[type="text"], input[type="search"] {
  width: min(100%, 340px);
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font: inherit;
}

.signature-pad {
  display: block;
  width: 100%;
  height: 180px;
  margin-top: 8px;
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  touch-action: none;
}
.messages {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.message {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
}
.message.success { border-color: #bbf7d0; background: #f0fdf4; }
.message.error { border-color: #fecaca; background: #fef2f2; }
.message.warning { border-color: #fde68a; background: #fffbeb; }
.message.info { border-color: #bfdbfe; background: #eff6ff; }

.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.75);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14px;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs span::before { content: "/"; margin: 0 8px 0 0; color: #cbd5e1; }

.mobile-toggle { display: none; }
.mobile-sidebar {
  display: none;
}
.skip-link { position: fixed; left: 14px; top: 10px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; transform: translateY(-180%); transition: transform .15s ease; }
.skip-link:focus { transform: translateY(0); color: #fff; }

@media (max-width: 1080px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    transform: translateX(-102%);
    transition: transform .22s ease;
    z-index: 40;
    box-shadow: var(--shadow);
  }
  body.sidebar-open .portal-sidebar { transform: translateX(0); }
  .mobile-toggle { display: inline-flex; }
  .portal-main { min-height: 100vh; }
  .content { padding: 18px; }
  .grid.cols-4, .grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .topbar { padding: 14px 16px; align-items: flex-start; }
  .topbar .userbox { justify-content: flex-start; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5 { grid-template-columns: 1fr; }
  .content { padding: 14px; }
  .table { min-width: 620px; }
}

.dashboard-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
  border-left: 6px solid var(--brand);
}
.dashboard-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(242, 106, 33, 0.12);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dashboard-hero h2 {
  margin: 12px 0 8px;
  font-size: clamp(26px, 2.2vw, 40px);
}
.dashboard-hero p,
.dashboard-panel-subtitle,
.dashboard-row-hint,
.dashboard-stat-hint {
  color: var(--muted);
}
.dashboard-focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 760px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.dashboard-focus-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
}
.dashboard-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dashboard-hero-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dashboard-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(242,106,33,.12);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
}
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.dashboard-stat {
  position: relative;
  overflow: hidden;
}
.dashboard-stat::after {
  content: '';
  position: absolute;
  inset: auto -20px -20px auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,106,33,.12) 0%, rgba(242,106,33,0) 70%);
}
.dashboard-stat-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.dashboard-stat-value {
  margin-top: 8px;
  font-size: clamp(28px, 2.5vw, 42px);
  font-weight: 800;
  line-height: 1;
}
.dashboard-stat-hint {
  margin-top: 8px;
  font-size: 13px;
}
.dashboard-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.dashboard-panels-customer {
  grid-template-columns: 1fr;
}
.dashboard-panel {
  min-width: 0;
}
.dashboard-row-list {
  display: grid;
  gap: 10px;
}
.dashboard-row-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.dashboard-row-label {
  font-weight: 700;
}
.dashboard-row-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-dark);
  text-align: right;
}
.dashboard-table th,
.dashboard-table td {
  vertical-align: top;
}
.dashboard-table .btn-sm {
  padding: 8px 10px;
  font-size: 12px;
}
@media (max-width: 1080px) {
  .dashboard-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-panels { grid-template-columns: 1fr; }
  .dashboard-hero { flex-direction: column; }
}
@media (max-width: 720px) {
  .dashboard-stats-grid { grid-template-columns: 1fr; }
  .dashboard-row-item { flex-direction: column; }
  .dashboard-row-value { text-align: left; }
}

.mechanic-mode .btn,
.mechanic-mode button,
.mechanic-mode input[type="submit"] {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 16px;
}
.mechanic-mode input,
.mechanic-mode select,
.mechanic-mode textarea {
  min-height: 48px;
  font-size: 16px;
}
.mechanic-mode .panel { scroll-margin-top: 90px; }
.mechanic-mode .workorder-mobile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mechanic-mode .workorder-mobile-actions .btn { width: 100%; }
.mechanic-quick-card { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; padding:18px; border:1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius:var(--radius); background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface)); box-shadow:var(--shadow); }
.mechanic-quick-card h2 { margin:4px 0 2px; }
.mechanic-quick-card p { margin:0; color:var(--muted); }
.mechanic-quick-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.mechanic-secondary-details { margin-top:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
.mechanic-secondary-details > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:14px 18px; color:var(--ink); cursor:pointer; font-weight:750; list-style:none; }
.mechanic-secondary-details > summary::-webkit-details-marker { display:none; }
.mechanic-secondary-details > summary::after { content:"＋"; color:var(--brand); font-size:20px; }
.mechanic-secondary-details[open] > summary::after { content:"−"; }
.mechanic-secondary-details[open] > .grid { padding:0 14px 14px; }
.mechanic-checklist { scroll-margin-top:90px; }

@media (max-width: 720px) {
  .mechanic-mode .topbar { position: sticky; }
  .mechanic-mode .topbar .eyebrow { display: none; }
  .mechanic-mode .topbar .user-chip { display: none; }
  .mechanic-mode .topbar .userbox { width: 100%; justify-content: space-between; }
  .mechanic-mode .topbar .userbox .btn { min-width: 92px; }
  .mechanic-mode .content { padding: 10px; }
  .mechanic-mode .card, .mechanic-mode .panel { padding: 14px; border-radius: 14px; }
  .mechanic-mode .grid.cols-2, .mechanic-mode .grid.cols-3 { gap: 10px; }
  .mechanic-mode .dashboard-hero { margin-bottom: 10px; }
  .mechanic-mode .dashboard-hero h2 { font-size: 25px; }
  .mechanic-mode .dashboard-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .mechanic-mode .dashboard-hero-actions .btn { width: 100%; }
  .mechanic-mode .dashboard-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mechanic-mode .dashboard-stat { padding: 12px; }
  .mechanic-mode .dashboard-stat-value { font-size: 28px; }
  .mechanic-mode .dashboard-table { min-width: 0; }
  .mechanic-mode .dashboard-table thead { display: none; }
  .mechanic-mode .dashboard-table,
  .mechanic-mode .dashboard-table tbody,
  .mechanic-mode .dashboard-table tr,
  .mechanic-mode .dashboard-table td { display: block; width: 100%; }
  .mechanic-mode .dashboard-table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .mechanic-mode .dashboard-table td { padding: 4px 0; border: 0; }
  .mechanic-mode .dashboard-table td:last-child { margin-top: 8px; }
  .mechanic-mode .dashboard-table td:last-child .btn { width: 100%; }
  .mechanic-mode .workorder-mobile-actions { grid-template-columns: 1fr; }
  .mechanic-mode input[type="file"] { width: 100%; padding: 10px 0; }
  .mechanic-quick-card { display:block; padding:14px; }
  .mechanic-quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px; }
  .mechanic-quick-actions .btn { width:100%; }
  .mechanic-secondary-details > summary { padding:13px 14px; }
  .mechanic-mode .workorder-table thead { display:none; }
  .mechanic-mode .workorder-table, .mechanic-mode .workorder-table tbody, .mechanic-mode .workorder-table tr, .mechanic-mode .workorder-table td { display:block; width:100%; }
  .mechanic-mode .workorder-table tr { padding:12px 0; border-bottom:1px solid var(--border); }
  .mechanic-mode .workorder-table td { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border:0; text-align:right; }
  .mechanic-mode .workorder-table td::before { content:attr(data-label); color:var(--muted); font-weight:700; text-align:left; }
  /* Keep detail grids shrinkable when an inner table or workflow row is wider. */
  .mechanic-mode .grid.cols-2,
  .mechanic-mode .grid.cols-3 { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .mechanic-mode .grid.cols-2 > *,
  .mechanic-mode .grid.cols-3 > *,
  .mechanic-mode .panel,
  .mechanic-mode .card { min-width: 0; max-width: 100%; }
  .mechanic-mode .table-wrap,
  .mechanic-mode .workflow-statuses { min-width: 0; max-width: 100%; }
}

/* ===== Instellingenmodule (F-settings) ===== */
.settings-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-side { position: sticky; top: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.settings-side .side-nav { display: flex; flex-direction: column; gap: 6px; }
.settings-side .side-nav a { padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; }
.settings-side .side-nav a:hover { background: var(--surface-alt); text-decoration: none; }
.settings-side .side-nav a.active { background: var(--brand); color: #fff; }
.settings-main { min-width: 0; }
.settings-form { display: grid; gap: 16px; max-width: 720px; }
.settings-form .form-row { display: grid; gap: 6px; }
.settings-form label { font-weight: 700; }
.settings-form input[type="text"], .settings-form input[type="email"], .settings-form input[type="url"], .settings-form input[type="number"], .settings-form textarea, .settings-form select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; width: 100%; }
.settings-form .secret-row input { letter-spacing: 0.05em; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cat-card { display: block; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); }
.cat-card:hover { text-decoration: none; border-color: var(--brand); }
.card.warn-card, .warn-card { background: #fffbeb; border-color: #fcd34d; }
.badge.warn, .pill.secret { background: #fef3c7; color: #92400e; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.quote-primary-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quote-action-menu { position: relative; }
.quote-action-menu > summary { list-style: none; cursor: pointer; }
.quote-action-menu > summary::-webkit-details-marker { display: none; }
.quote-action-menu-panel { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: minmax(190px, 1fr); gap: 6px; min-width: 250px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.quote-action-menu-panel form { margin: 0; }
.quote-action-menu-panel .btn { width: 100%; text-align: left; }
.quote-action-group { display:grid; gap:6px; padding:5px 0 9px; border-bottom:1px solid var(--border); }
.quote-action-group:last-child { padding-bottom:0; border-bottom:0; }
.quote-action-group-title { padding:3px 6px; color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width: 560px) { .quote-primary-actions > .btn, .quote-action-menu, .quote-action-menu > summary { width: 100%; } .quote-action-menu-panel { position: static; min-width: 0; margin-top: 8px; box-shadow: none; } }
.task-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-actions-menu { position: relative; }
.task-actions-menu > summary { list-style: none; cursor: pointer; }
.task-actions-menu > summary::-webkit-details-marker { display: none; }
.task-actions-menu-panel { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; gap: 6px; min-width: 180px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.task-actions-menu-panel .btn { width: 100%; text-align: left; }
.task-relations { display: grid; gap: 4px; min-width: 150px; }
.task-relations > div { overflow-wrap: anywhere; }
.task-relations > div > span { display: inline-block; min-width: 54px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.task-completed-date { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.agenda-capacity-warning { display: block; max-width: 32rem; margin-top: 5px; color: var(--danger, #b42318); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 900px) { .task-table { min-width: 0; } .task-table thead { display: none; } .task-table, .task-table tbody, .task-table tr, .task-table td { display: block; width: 100%; } .task-table tr { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); } .task-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; text-align: right; } .task-table td::before { flex: 0 0 34%; color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; } .task-table td:first-child { display: block; padding-top: 0; text-align: left; } .task-table td:first-child::before { display: none; } .task-table td[data-label="Acties"] { align-items: center; flex-wrap: wrap; justify-content: flex-end; } .task-table td[data-label="Acties"]::before { margin-right: auto; } .task-actions-menu-panel { position: static; min-width: 0; margin-top: 6px; box-shadow: none; } }
.product-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.product-actions-menu { position: relative; }
.product-actions-menu > summary { list-style: none; cursor: pointer; }
.product-actions-menu > summary::-webkit-details-marker { display: none; }
.product-actions-menu-panel { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; gap: 6px; min-width: 190px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.product-actions-menu-panel .btn { width: 100%; text-align: left; }
@media (max-width: 900px) { .product-table { min-width: 0; } .product-table thead { display: none; } .product-table, .product-table tbody, .product-table tr, .product-table td { display: block; width: 100%; } .product-table tr { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); } .product-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; text-align: right; } .product-table td::before { flex: 0 0 34%; color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; } .product-table td[data-label="Product"] { display: block; padding-top: 0; text-align: left; } .product-table td[data-label="Product"]::before { display: none; } .product-table td[data-label="Acties"] { align-items: center; flex-wrap: wrap; justify-content: flex-end; } .product-table td[data-label="Acties"]::before { margin-right: auto; } .product-actions-menu-panel { position: static; min-width: 0; margin-top: 6px; box-shadow: none; } }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.data-table input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; width: 100%; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } .settings-side { position: static; } }

/* Inline price-matrix editor */
.matrix-editor { display: block; }
.matrix-head, .matrix-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.3fr 1.1fr 0.9fr 1.2fr;
  gap: 12px;
  align-items: center;
}
.matrix-head {
  padding: 10px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
}
.matrix-row {
  padding: 12px;
  border: 1px solid var(--border);
  border-top: none;
  background: #fff;
}
.matrix-row:last-child { border-radius: 0 0 12px 12px; }
.matrix-row:hover { background: #fffaf7; }
.matrix-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
}
.matrix-input:focus { outline: 2px solid rgba(242,106,33,.35); border-color: var(--brand); }
.matrix-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.matrix-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.matrix-actions { display: flex; gap: 8px; justify-content: flex-end; }
.matrix-actions-col { text-align: right; }
.matrix-empty {
  padding: 18px 12px;
  border: 1px dashed var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: var(--muted);
  background: #fff;
}
.matrix-footer {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.matrix-hint {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 900px) {
  .matrix-head { display: none; }
  .matrix-row {
    grid-template-columns: 1fr 1fr;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .matrix-row:last-child { border-radius: 12px; }
  .matrix-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .matrix-empty { border-radius: 12px; }
}

/* Quote line add/edit form */
.quote-line-layout { align-items: start; }
.quote-line-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.quote-line-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.quote-line-grid label.field-wide { grid-column: 1 / -1; }
.quote-line-grid input,
.quote-line-grid select,
.quote-line-grid textarea {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  width: 100%;
  background: #fff;
}
.quote-line-grid input:focus,
.quote-line-grid select:focus,
.quote-line-grid textarea:focus { outline: 2px solid rgba(242,106,33,.35); border-color: var(--brand); }
.quote-line-grid small { font-weight: 400; color: var(--muted); }
.matrix-price-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); min-height: 1.2em; }
.matrix-price-note.ok { color: #15803d; font-weight: 600; }
.matrix-price-note.warn {
  color: #b45309;
  font-weight: 600;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 10px 12px;
}

/* Live price preview card */
.quote-preview-card {
  background: linear-gradient(160deg, var(--surface-alt), #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.quote-preview-product { font-size: 16px; font-weight: 700; color: var(--ink); }
.quote-preview-dim { color: var(--muted); font-size: 14px; margin-top: 2px; }
.quote-preview-price {
  margin-top: 12px;
  font-size: 38px;
  font-weight: 800;
  color: var(--brand-dark);
  letter-spacing: -0.02em;
}
.quote-preview-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.quote-preview-total { margin-top: 10px; font-weight: 700; color: var(--ink); }
.quote-preview-hint { color: var(--muted); font-size: 13px; margin: 14px 0 0; }

.product-picklist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.product-pick {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.product-pick:hover { border-color: var(--brand); background: var(--surface-alt); }
.product-pick-name { font-weight: 700; color: var(--ink); }
.product-pick-price { color: var(--muted); font-size: 13px; white-space: nowrap; }

@media (max-width: 900px) {
  .quote-line-layout { grid-template-columns: 1fr; }
  .quote-line-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Unified form styling — applies to all standard Django forms
   rendered with .form-grid ({{ form }} or {% for field in form %}).
   Matches the look of the quote line add/edit page.
   ============================================================ */
.form-grid,
form.grid.cols-2,
form.grid.cols-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
form.grid.cols-1 { grid-template-columns: 1fr; }
.form-grid > p,
.form-grid > div,
.form-grid label,
form.grid.cols-2 > div,
form.grid.cols-2 label,
form.grid.cols-1 > div,
form.grid.cols-1 label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  margin: 0;
}
/* Fields that should span the full width (textarea, long inputs, checkboxes) */
.form-grid .full-width,
.form-grid label.full-width,
.form-grid .checkbox-row,
.form-grid .field-wide {
  grid-column: 1 / -1;
}
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="url"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="datetime-local"],
.form-grid input[type="password"],
.form-grid input[type="search"],
form.grid.cols-2 input,
form.grid.cols-2 select,
form.grid.cols-2 textarea,
form.grid.cols-1 input,
form.grid.cols-1 select,
form.grid.cols-1 textarea {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  width: 100%;
  background: #fff;
  color: var(--ink);
}
.form-grid textarea { min-height: 110px; resize: vertical; }
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
form.grid.cols-2 input:focus,
form.grid.cols-2 select:focus,
form.grid.cols-2 textarea:focus,
form.grid.cols-1 input:focus,
form.grid.cols-1 select:focus,
form.grid.cols-1 textarea:focus {
  outline: 2px solid rgba(242,106,33,.35);
  border-color: var(--brand);
}
.form-grid input[type="checkbox"],
.form-grid input[type="radio"],
form.grid.cols-2 input[type="checkbox"],
form.grid.cols-2 input[type="radio"],
form.grid.cols-1 input[type="checkbox"],
form.grid.cols-1 input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  margin: 0;
}
/* Checkbox/radio rows: label beside the control instead of stacked */
.form-grid label:has(input[type="checkbox"]),
.form-grid label:has(input[type="radio"]),
form.grid.cols-2 label:has(input[type="checkbox"]),
form.grid.cols-2 label:has(input[type="radio"]),
form.grid.cols-1 label:has(input[type="checkbox"]),
form.grid.cols-1 label:has(input[type="radio"]) {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.form-grid small,
.form-grid .help,
form.grid.cols-2 small,
form.grid.cols-1 small {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}
.form-grid .error,
.form-grid .errorlist,
form.grid.cols-2 .error,
form.grid.cols-2 .errorlist,
form.grid.cols-1 .error,
form.grid.cols-1 .errorlist {
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Single-column forms stay readable */
.form-grid.single-column,
.form-grid.cols-1 { grid-template-columns: 1fr; }

/* Toolbar / action row used on add & edit pages */
.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Customer portal: rustige, leesbare dossierweergave */
.customer-portal-subtitle { color: var(--muted); }
.customer-portal { max-width: 1180px; margin: 0 auto; }
.customer-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fff7f2 0%, #fff 72%);
  border: 1px solid #f5d7c5;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.customer-welcome h2 { margin: 5px 0 8px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; }
.customer-welcome p { margin: 0; color: var(--muted); max-width: 680px; }
.customer-eyebrow, .customer-section-number { color: var(--brand-dark); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.customer-account-button { flex: 0 0 auto; white-space: nowrap; }
.customer-attention { margin-bottom: 18px; padding: 18px 20px; background: #fff8ed; border: 1px solid #f5d29a; border-left: 5px solid #e79b19; border-radius: var(--radius); }
.customer-attention-heading { display: flex; align-items: center; gap: 12px; }
.customer-attention-heading h2 { margin: 0; font-size: 18px; }
.customer-attention-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.customer-attention-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #e79b19; color: #fff; font-weight: 900; }
.customer-attention-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; margin-top: 14px; }
.customer-attention-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--ink); background: #fff; border: 1px solid #f2dfbd; border-radius: 10px; font-size: 13px; font-weight: 700; }
.customer-attention-item:hover { color: var(--brand-dark); text-decoration: none; border-color: var(--brand); }
.customer-attention-item strong { color: var(--brand-dark); font-size: 18px; }
.customer-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.customer-summary-card { min-height: 112px; padding: 17px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 5px 18px rgba(15,23,42,.05); }
.customer-summary-card strong { display: block; margin: 7px 0 3px; color: var(--brand-dark); font-size: 28px; line-height: 1; }
.customer-summary-card span:last-child { color: var(--muted); font-size: 12px; }
.customer-summary-label { display: block; color: var(--ink); font-size: 13px; font-weight: 750; }
.customer-section { margin-bottom: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 5px 18px rgba(15,23,42,.045); }
.customer-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.customer-section-header > div { display: flex; align-items: flex-start; gap: 12px; }
.customer-section-number { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; background: var(--surface-alt); }
.customer-section h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.customer-section-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.customer-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.customer-table { min-width: 620px; margin: 0; }
.customer-table th { background: #fafafa; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.customer-table td { vertical-align: middle; }
.customer-table tr:last-child td { border-bottom: 0; }
.customer-action-column { text-align: right; white-space: nowrap; }
.customer-action-column .btn, .customer-action-column .badge { margin: 2px 0 2px 6px; }
.customer-status { color: var(--muted); font-size: 13px; }
.customer-signed-badge { display: inline-block; }
.customer-empty { display: flex; flex-direction: column; gap: 4px; padding: 20px 10px; color: var(--muted); text-align: center; }
.customer-empty strong { color: var(--ink); font-size: 14px; }
.customer-notification { display: flex; gap: 13px; padding: 18px; border-bottom: 1px solid var(--border); }
.customer-notification:last-child { border-bottom: 0; }
.customer-notification.is-unread { background: #fffaf5; }
.customer-notification-marker { width: 8px; flex: 0 0 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--border); }
.customer-notification.is-unread .customer-notification-marker { background: var(--brand); box-shadow: 0 0 0 4px #fff0e6; }
.customer-notification-content { min-width: 0; flex: 1; }
.customer-notification-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.customer-notification-content h2 { margin: 7px 0 4px; font-size: 17px; }
.customer-notification-content p { margin: 0; color: var(--muted); font-size: 13px; }
.customer-notification-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; }
.customer-notification-actions form { margin: 0; }
.email-error { max-width: 300px; margin-top: 5px; color: var(--danger); font-size: 12px; line-height: 1.35; }
.filter-links { color: var(--muted); font-size: 13px; }
.filter-links a { font-weight: 700; }
.customer-payment-note { display: block; max-width: 190px; margin-top: 7px; color: var(--muted); line-height: 1.35; }
.internal-search-form label { display: block; margin-bottom: 7px; font-weight: 700; }
.internal-search-form > div { display: flex; gap: 8px; }
.internal-search-form input { flex: 1; min-width: 0; }
.search-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.search-result-section h3 { margin: 0 0 10px; }
.search-result { display: block; padding: 12px 0; border-top: 1px solid var(--border); }
.search-result:first-of-type { border-top: 0; }
.search-result strong, .search-result span { display: block; }
.search-result span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.customer-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.customer-two-columns .customer-section { min-width: 0; }
@media (max-width: 1100px) { .customer-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .customer-welcome { align-items: flex-start; flex-direction: column; padding: 22px; }
  .customer-account-button { width: 100%; text-align: center; }
  .customer-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-section { padding: 16px; }
  .customer-two-columns { grid-template-columns: 1fr; gap: 0; }
  .internal-search-form > div { align-items: stretch; flex-direction: column; }
  .search-results-grid { grid-template-columns: 1fr; }
  .customer-table thead { display: none; }
  .customer-table, .customer-table tbody, .customer-table tr, .customer-table td { display: block; width: 100%; }
  .customer-table tr { margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 14px rgba(15, 23, 42, .05); }
  .customer-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; text-align: right; }
  .customer-table td::before { flex: 0 0 38%; color: var(--muted); content: attr(data-label); font-size: 12px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
  .customer-table td.customer-action-column { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .customer-table td.customer-action-column::before { align-self: center; margin-right: auto; }
  .customer-table td[colspan] { display: block; text-align: left; }
  .customer-table td[colspan]::before { display: none; }
  .customer-table .btn { max-width: 100%; white-space: normal; }
}
.customer-summary { grid-template-columns: 1fr 1fr; gap: 8px; } .customer-summary-card { padding: 14px 12px; }
.measurement-page, .measurement-detail, .measurement-form-shell { max-width: 1500px; margin: 0 auto; }
.measurement-toolbar { margin-bottom: 16px; }
.measurement-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.measurement-filters label, .form-field { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
.measurement-filter-actions, .action-row, .form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.measurement-table { min-width: 1080px; }
.strong-link { font-weight: 800; }
.muted { color: var(--muted); font-size: 13px; }
.page-lead { color: var(--muted); }
.measurement-section { scroll-margin-top: 90px; margin-top: 16px; }
.measurement-tabs { position: sticky; top: 83px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 8px; margin: 16px 0; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.95); }
.measurement-tabs a { flex: 0 0 auto; padding: 9px 12px; border-radius: 10px; font-weight: 700; white-space: nowrap; }
.measurement-tabs a:hover { background: var(--surface-alt); }
.status-concept { background: #f3f4f6; }.status-ingepland { background: #dbeafe; color: #1d4ed8; }.status-bezig { background: #ffedd5; color: #c2410c; }.status-uitgevoerd, .status-gecontroleerd { background: #fef3c7; color: #92400e; }.status-goedgekeurd { background: #dcfce7; color: #166534; }.status-geannuleerd { background: #fee2e2; color: #991b1b; }
.measurement-summary { display: grid; grid-template-columns: minmax(130px, .7fr) 1fr; gap: 10px 18px; margin: 0; }.measurement-summary dt { color: var(--muted); font-size: 13px; }.measurement-summary dd { margin: 0; font-weight: 700; }
.measurement-room { padding: 16px 0; border-top: 1px solid var(--border); }.room-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }.room-heading h3 { margin: 0 0 4px; }.inline-form { display: inline; margin: 0; }.link-button { padding: 0; border: 0; background: none; color: var(--brand-dark); cursor: pointer; font: inherit; text-decoration: underline; }.btn-danger { border-color: #fecaca; color: var(--danger); background: #fff; }.btn-small { padding: 7px 10px; font-size: 12px; }.form-section { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }.form-section h2 { margin-top: 0; }.measurement-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.measurement-part-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.required { color: var(--danger); margin-left: 4px; }.field-error, .form-errors { color: var(--danger); font-size: 13px; }.form-errors { padding: 12px; margin-bottom: 14px; border-radius: 10px; background: #fef2f2; }.narrow-form { max-width: 700px; margin: 0 auto; }.form-actions { margin-top: 16px; }.workflow-actions form { display: flex; flex-wrap: wrap; gap: 8px; }.photo-upload-form { padding: 16px; margin-bottom: 16px; border: 1px dashed var(--brand); border-radius: 14px; background: var(--surface-alt); }.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.photo-card { overflow: hidden; margin: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }.photo-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }.photo-card figcaption { padding: 10px; font-size: 13px; }.photo-card figcaption form { margin-top: 8px; }.audit-timeline { display: grid; gap: 12px; }.audit-entry { padding: 12px 14px; border-left: 3px solid var(--brand); background: var(--surface-alt); }.audit-entry span { display: block; color: var(--muted); font-size: 12px; }.audit-entry p { margin: 6px 0 0; }.measurement-print-sheet { max-width: 1100px; margin: 0 auto; padding: 26px; background: #fff; box-shadow: var(--shadow); }.print-header { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 3px solid var(--brand); }.print-room { margin-top: 24px; }.print-room h2 small { color: var(--muted); font-size: 14px; }.print-notes { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 1100px) { .measurement-filters { grid-template-columns: repeat(2, minmax(150px, 1fr)); }.photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.measurement-part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .measurement-filters, .measurement-form-grid, .measurement-part-grid { grid-template-columns: 1fr; }.measurement-filter-actions, .measurement-filter-actions .btn, .action-row .btn { width: 100%; }.measurement-filter-actions { align-items: stretch; }.room-heading { flex-direction: column; }.room-heading .action-row { width: 100%; }.room-heading .action-row .btn { flex: 1 1 auto; }.workflow-actions form { width: 100%; }.workflow-actions form .btn { flex: 1 1 100%; }.photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.measurement-summary { grid-template-columns: 1fr; gap: 4px; }.measurement-summary dd { margin-bottom: 8px; }.measurement-print-sheet { padding: 16px; }.print-header { font-size: 13px; }.no-print { display: flex; } }
@media (max-width: 420px) { .photo-grid { grid-template-columns: 1fr; }.measurement-tabs { top: 70px; }.measurement-page .panel, .measurement-detail .panel { padding: 14px; } }
@media print { .portal-sidebar, .topbar, .breadcrumbs, .no-print { display: none !important; }.portal-shell { display: block; }.measurement-print-sheet { max-width: none; padding: 0; box-shadow: none; }.measurement-print-sheet .table { min-width: 0; } }

/* Optionele donkere werkmodus; de standaard VekaFactory-huisstijl blijft licht. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111827;
  --surface: #1f2937;
  --surface-alt: #2a211c;
  --ink: #f3f4f6;
  --muted: #b6becb;
  --border: #374151;
  --shadow: 0 10px 30px rgba(0, 0, 0, .24);
}
[data-theme="dark"] body { background: linear-gradient(180deg, #111827 0%, #0f172a 100%); }
[data-theme="dark"] .portal-sidebar { background: rgba(17, 24, 39, .96); }
[data-theme="dark"] .topbar { background: rgba(17, 24, 39, .92); }
[data-theme="dark"] .user-chip,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .btn-danger { background: #3b1d20; border-color: #7f1d1d; }
[data-theme="dark"] .table th { background: #172033; }
[data-theme="dark"] .table tr:hover { background: #252f40; }
[data-theme="dark"] .brand-mark img { background: #fff; }
[data-theme="dark"] .measurement-print-sheet { background: #fff; color: #1f2937; }

/* Internal portal theme layer. The public calculator intentionally does not
   receive these selectors because it uses public_base.html instead of the
   portal-app body. */
:root {
  --text: var(--ink);
  --surface-raised: var(--surface);
  --surface-soft: #f8fafc;
  --border-strong: #cbd5e1;
  --focus: rgba(242,106,33,.28);
}
[data-theme="dark"] {
  --text: #f8fafc;
  --surface-raised: #1f2937;
  --surface-soft: #273449;
  --border-strong: #526174;
  --focus: rgba(251,146,60,.48);
}
.portal-app .table-wrap { overflow-x: auto; }
.portal-app .project-list-table { min-width: 1120px; table-layout: fixed; }
.portal-app .project-list-table th,
.portal-app .project-list-table td { overflow-wrap: normal; }
.portal-app .project-list-table th:nth-child(1),
.portal-app .project-list-table td:nth-child(1) { width: 19%; }
.portal-app .project-list-table th:nth-child(2),
.portal-app .project-list-table td:nth-child(2) { width: 15%; }
.portal-app .project-list-table th:nth-child(3),
.portal-app .project-list-table td:nth-child(3) { width: 11%; }
.portal-app .project-list-table th:nth-child(n+4):nth-child(-n+8),
.portal-app .project-list-table td:nth-child(n+4):nth-child(-n+8) { width: 7%; text-align: center; white-space: nowrap; }
.portal-app .project-list-table th:nth-child(n+4):nth-child(-n+8) { padding-inline: 4px; font-size: 9px; letter-spacing: .025em; white-space: normal; }
.portal-app .project-list-table th:nth-child(9),
.portal-app .project-list-table td:nth-child(9) { width: 10%; white-space: nowrap; }
.portal-app .project-list-table th:nth-child(10),
.portal-app .project-list-table td:nth-child(10) { width: 10%; }
.portal-app { overflow-x: hidden; }
.portal-app .grid,
.portal-app .grid > *,
.portal-app .card,
.portal-app .panel,
.portal-app .stat-card { min-width: 0; }
.portal-app img,
.portal-app svg { max-width: 100%; }
.portal-app p,
.portal-app h1,
.portal-app h2,
.portal-app h3,
.portal-app h4,
.portal-app td,
.portal-app th { overflow-wrap: anywhere; }
.portal-app .list-toolbar { margin-bottom: 16px; }
.portal-app .list-toolbar form { display: grid; gap: 12px; align-items: end; }
.portal-app .toolbar { align-items: center; }
.portal-app .section-title { gap: 12px; }
.portal-app .section-title > div { min-width: 0; }
.portal-app .table tbody tr { transition: background .15s ease; }
.portal-app .table td a:not(.btn) { font-weight: 700; }
.portal-app .empty-state { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 18px; }

/* Complete dark mode for internal pages. */
html[data-theme="dark"] body.portal-app {
  background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
  color: var(--ink);
}
html[data-theme="dark"] body.portal-app .portal-sidebar {
  background: rgba(15,23,42,.98);
  border-right-color: var(--border);
}
html[data-theme="dark"] body.portal-app .topbar {
  background: rgba(15,23,42,.94);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] body.portal-app .card,
html[data-theme="dark"] body.portal-app .panel,
html[data-theme="dark"] body.portal-app .stat-card,
html[data-theme="dark"] body.portal-app .table-wrap,
html[data-theme="dark"] body.portal-app .user-chip,
html[data-theme="dark"] body.portal-app .btn-secondary,
html[data-theme="dark"] body.portal-app .form-section,
html[data-theme="dark"] body.portal-app .photo-card,
html[data-theme="dark"] body.portal-app .project-photo-card,
html[data-theme="dark"] body.portal-app .approval-card,
html[data-theme="dark"] body.portal-app .operations-kpi,
html[data-theme="dark"] body.portal-app .profitability-card,
html[data-theme="dark"] body.portal-app .project-smart-buttons a,
html[data-theme="dark"] body.portal-app .sla-strip > div,
html[data-theme="dark"] body.portal-app .mobile-workorder-card {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--ink);
}
html[data-theme="dark"] body.portal-app .surface-soft,
html[data-theme="dark"] body.portal-app .dashboard-row-item,
html[data-theme="dark"] body.portal-app .decision-note,
html[data-theme="dark"] body.portal-app .empty-state,
html[data-theme="dark"] body.portal-app .form-section {
  background: var(--surface-soft);
}
html[data-theme="dark"] body.portal-app .side-nav a,
html[data-theme="dark"] body.portal-app .project-tabs a,
html[data-theme="dark"] body.portal-app .operation-list-row,
html[data-theme="dark"] body.portal-app .link-button {
  color: var(--ink);
}
html[data-theme="dark"] body.portal-app .side-nav a:hover,
html[data-theme="dark"] body.portal-app .side-nav a.active,
html[data-theme="dark"] body.portal-app .dashboard-row-link:hover,
html[data-theme="dark"] body.portal-app .table tbody tr:hover {
  background: #303d52;
  border-color: #66758b;
  color: #fff;
}
html[data-theme="dark"] body.portal-app .table tbody tr:nth-child(even) {
  background: #222e41;
}
html[data-theme="dark"] body.portal-app .table th {
  background: #172033;
  color: #cbd5e1;
  border-color: var(--border);
}
html[data-theme="dark"] body.portal-app input,
html[data-theme="dark"] body.portal-app select,
html[data-theme="dark"] body.portal-app textarea {
  background: #182235;
  color: #f8fafc;
  border-color: var(--border-strong);
}
html[data-theme="dark"] body.portal-app input::placeholder,
html[data-theme="dark"] body.portal-app textarea::placeholder { color: #9aa8bb; }
html[data-theme="dark"] body.portal-app .btn-secondary:hover {
  background: #303d52;
  color: #fff;
  border-color: #fb923c;
}
html[data-theme="dark"] body.portal-app .btn-danger {
  background: #3b1d20;
  border-color: #9f4a4d;
  color: #fecaca;
}
html[data-theme="dark"] body.portal-app .dashboard-kicker,
html[data-theme="dark"] body.portal-app .dashboard-role-pill { color: #fdba74; }
html[data-theme="dark"] body.portal-app .dashboard-focus {
  background: #2a211c;
  border-color: #9a5b2b;
}
html[data-theme="dark"] body.portal-app .customer-welcome {
  background: linear-gradient(135deg, #242b38 0%, #1f2937 72%);
  border-color: #526174;
  color: #f8fafc;
}
html[data-theme="dark"] body.portal-app .customer-welcome h2 { color: #f8fafc; }
html[data-theme="dark"] body.portal-app .customer-welcome p { color: #cbd5e1; }
html[data-theme="dark"] body.portal-app .customer-eyebrow { color: #fdba74; }
html[data-theme="dark"] body.portal-app .dashboard-focus-icon { color: #111827; }
html[data-theme="dark"] body.portal-app .notice-warning,
html[data-theme="dark"] body.portal-app .mobile-day-section.warning {
  background: #352817;
  color: #fed7aa;
  border-color: #a16207;
}
html[data-theme="dark"] body.portal-app .message.success { background: #143525; color: #bbf7d0; border-color: #276749; }
html[data-theme="dark"] body.portal-app .message.error,
html[data-theme="dark"] body.portal-app .message.fail { background: #3a2024; color: #fecaca; border-color: #99454b; }
html[data-theme="dark"] body.portal-app .brand-mark img { background: #fff; }
html[data-theme="dark"] body.portal-app .measurement-tabs { background: rgba(15,23,42,.96); }
html[data-theme="dark"] body.portal-app .measurement-print-sheet { background: #fff; color: #1f2937; }

.planning-board { display: flex; gap: 14px; overflow-x: auto; margin-top: 16px; padding-bottom: 8px; }
.planning-day { flex: 0 0 280px; min-height: 280px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.planning-day > header { display: flex; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.planning-day > header span { color: var(--muted); font-size: 12px; }
.planning-dropzone { min-height: 220px; padding: 10px; }
.planning-card { margin-bottom: 10px; padding: 14px; cursor: grab; }
.planning-card:active { cursor: grabbing; }
.planning-card.is-dragging { opacity: .45; }
.planning-card.is-moving { opacity: .6; cursor: wait; }
.planning-card[aria-busy="true"] { pointer-events: none; }
.planning-feedback[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.planning-dropzone.is-over { outline: 2px dashed var(--brand); outline-offset: -4px; background: var(--surface); }
.planning-empty { padding: 35px 10px; text-align: center; color: var(--muted); font-size: 13px; }
.mobile-queue-status { display: inline-flex; align-items: center; margin-top: 7px; margin-left: 6px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 700; }
.mobile-queue-status[data-pending="0"] { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.mobile-queue-status[data-pending]:not([data-pending="0"]) { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.planning-move-control { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.planning-move-control summary { color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; }
.planning-move-control form { display: grid; gap: 8px; margin-top: 8px; }
.planning-move-control label { color: var(--muted); font-size: 12px; font-weight: 700; }
.planning-move-control input { margin-top: 4px; width: 100%; }
@media (max-width: 600px) {
  .planning-today-shortcut { align-items: stretch; flex-direction: column; }
  .planning-today-shortcut .btn { width: 100%; }
}
@media (max-width: 900px) {
  .agenda-table { min-width: 0; }
  .agenda-table thead { display: none; }
  .agenda-table, .agenda-table tbody, .agenda-table tr, .agenda-table td { display: block; width: 100%; }
  .agenda-table tr { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
  .agenda-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 7px 0; border: 0; text-align: right; }
  .agenda-table td::before { flex: 0 0 34%; color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
  .agenda-table td[data-label="Titel"], .agenda-table td[data-label="Afspraak"] { display: block; text-align: left; padding-top: 0; }
  .agenda-table td[data-label="Titel"]::before, .agenda-table td[data-label="Afspraak"]::before { display: none; }
}

.project-dossier { max-width: 1500px; margin: 0 auto; }
.project-dossier-subtitle { color: var(--muted); }
.project-attention-panel { margin: 0 0 14px; border-left: 4px solid var(--brand); }
.project-attention-list { display:grid; gap:8px; }
.project-attention-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }
.project-attention-item p { margin:4px 0 0; color:var(--muted); }
.project-attention-item .btn { flex:0 0 auto; }
.project-tabs { display:flex; gap:8px; overflow-x:auto; padding:4px 0 14px; margin-bottom:12px; scrollbar-width:thin; }
.project-tab-group { display:flex; align-items:center; flex:0 0 auto; gap:6px; padding:5px 7px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }
.project-tab-group-label { padding:0 4px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.project-tabs a { white-space:nowrap; border:1px solid var(--border); border-radius:999px; padding:8px 12px; color:var(--text); background:var(--surface); text-decoration:none; font-weight:700; font-size:13px; }
.project-tabs a:hover, .project-tabs a:focus { border-color:#F26A21; color:#F26A21; }
.dossier-section { scroll-margin-top:20px; margin-bottom:16px; }
.dossier-section h2 { margin:3px 0 0; }
.dossier-grid { display:grid; gap:14px; }
.dossier-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.dossier-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dossier-grid > div { min-width:0; padding:12px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.dossier-grid strong, .dossier-grid span { display:block; }
.dossier-grid strong { color:var(--muted); font-size:12px; margin-bottom:5px; }
.dossier-financial-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }
.dossier-financial-grid > div { padding:14px; border-radius:10px; background:#fff7ed; border:1px solid #fed7aa; }
.dossier-financial-grid span, .dossier-financial-grid strong { display:block; }
.dossier-financial-grid strong { font-size:20px; margin-top:5px; }
.progress-track { height:8px; border-radius:999px; background:#e5e7eb; margin-top:10px; overflow:hidden; }
.progress-track span { display:block; height:100%; background:#F26A21; border-radius:inherit; }
.dossier-description { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.inline-form { display:inline; margin-left:8px; }
.link-button { border:0; background:transparent; padding:0; color:#c2410c; cursor:pointer; font:inherit; text-decoration:underline; }
.photo-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.project-photo-card { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
.project-photo-card strong, .project-photo-card span { display:block; padding:8px 10px 0; }
.project-photo-card span { color:var(--muted); padding-top:2px; padding-bottom:10px; font-size:12px; }
.project-photo-frame { aspect-ratio:4/3; background:#f3f4f6; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.project-photo-frame img { width:100%; height:100%; object-fit:cover; }
.notes-list { display:grid; gap:10px; }
.project-note { border-left:4px solid #F26A21; padding:10px 14px; background:#fff7ed; border-radius:0 8px 8px 0; }
.project-note > div { display:flex; gap:10px; justify-content:space-between; color:var(--muted); font-size:13px; }
.project-note > div strong { color:var(--text); }
.project-note p { margin:8px 0 0; }
.timeline { display:grid; gap:0; margin-bottom:24px; }
.timeline-item { display:grid; grid-template-columns:145px 1fr; gap:14px; position:relative; padding:0 0 16px 18px; border-left:2px solid #fed7aa; }
.timeline-item::before { content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:#F26A21; left:-6px; top:3px; }
.timeline-item time { color:var(--muted); font-size:13px; }
.checklist-actions,.checklist-row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.workflow-statuses { display:flex; gap:6px; overflow-x:auto; padding:8px 0 14px; }
.status-step { min-height:44px; border:1px solid #d1d5db; border-radius:999px; background:#fff; padding:8px 12px; white-space:nowrap; cursor:pointer; }
.status-step.active { background:#F26A21; color:#fff; border-color:#F26A21; }
.workflow-section { border-top:1px solid #e5e7eb; padding-top:14px; margin-top:14px; }
.workflow-checklist { display:grid; gap:6px; }
.workflow-check-row { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:10px; min-height:56px; border:1px solid #e5e7eb; border-radius:10px; padding:6px 10px; }
.check-button { width:44px; height:44px; border:1px solid #cbd5e1; border-radius:50%; background:#fff; font-size:20px; color:#64748b; cursor:pointer; }
.check-button.checked { background:#16803c; border-color:#16803c; color:#fff; }
.time-grid p { display:grid; gap:4px; }
.restpoint-list { display:grid; gap:8px; }
.restpoint-card { display:grid; gap:4px; border-left:4px solid #F26A21; background:#fff7ed; border-radius:8px; padding:10px; }
@media (max-width:640px) { .workflow-check-row { grid-template-columns:48px 1fr; } .workflow-check-row small { grid-column:2; } .status-step { font-size:12px; } }
.checklist-list { display:grid; gap:8px; }
.checklist-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.checklist-missing { border-color:#fca5a5; background:#fff7f7; }
.checklist-meta { color:var(--muted); font-size:13px; margin-top:4px; }
.checklist-add-form { margin-top:14px; padding-top:12px; border-top:1px solid #e5e7eb; }
.badge.warning { background:#fee2e2; color:#991b1b; margin-left:8px; }
@media (max-width:720px) { .checklist-row { display:block; } .checklist-row-actions { margin-top:10px; } .checklist-row-actions .btn,.checklist-row-actions form,.checklist-row-actions a { width:100%; } .checklist-panel .section-title { align-items:flex-start; gap:10px; } .checklist-panel .section-title form { width:100%; } .checklist-panel .section-title form .btn { width:100%; } }
.timeline-item strong, .timeline-item span { display:block; }
.timeline-item span { color:var(--muted); margin-top:3px; }
@media (max-width:1100px) { .dossier-grid-4, .dossier-financial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .photo-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .dossier-grid-3, .dossier-grid-4, .dossier-financial-grid, .photo-category-grid { grid-template-columns:1fr; } .timeline-item { grid-template-columns:1fr; gap:3px; } .project-tabs { margin-left:-4px; margin-right:-4px; padding-left:4px; } .dossier-section .section-title { align-items:flex-start; gap:10px; } .dossier-section .section-title .toolbar { width:100%; } }
@media (max-width:720px) { .project-attention-item { align-items:flex-start; flex-direction:column; } }

.report-bars { display:grid; gap:9px; margin-top:16px; max-width:720px; }
.report-bar-row { display:grid; grid-template-columns:70px 1fr 90px; align-items:center; gap:10px; font-size:13px; }
.report-bar-track { height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
.report-bar-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--brand), #f5a623); }
@media (max-width:700px) { .report-bar-row { grid-template-columns:55px 1fr 75px; } }

/* Clear navigation and measurement workspace */
.nav-group { display:grid; gap:3px; margin-bottom:18px; }
.nav-group-title { padding:0 12px 6px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.nav-icon { display:inline-grid; place-items:center; width:20px; color:var(--muted); font-size:15px; font-weight:700; }
.side-nav a { min-height:40px; padding:9px 12px; }
.side-nav a.active { background:#fff2e9; color:var(--brand-dark); box-shadow:inset 3px 0 var(--brand); }
.side-nav a:hover,.btn:hover,.button:hover,.button-secondary:hover { text-decoration:none; }
.side-profile .card { padding:14px; box-shadow:none; }
.profile-role { margin-bottom:4px; font-weight:800; }
.profile-name { margin-bottom:10px; color:var(--muted); font-size:13px; }
.measurement-command-bar { display:grid; gap:14px; padding:16px; }
.measurement-command-primary, .measurement-command-secondary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.measurement-command-secondary { padding-top:12px; border-top:1px solid var(--border); }
.measurement-command-secondary form { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.command-label { margin-right:4px; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.measurement-tabs { position:sticky; top:83px; display:flex; gap:6px; padding:6px; margin:14px 0; background:rgba(255,255,255,.98); box-shadow:0 3px 12px rgba(15,23,42,.06); }
.measurement-tabs a { padding:11px 14px; border:1px solid transparent; color:var(--muted); font-size:13px; }
.measurement-tabs a:hover, .measurement-tabs a.active { border-color:#fed7aa; background:#fff7ed; color:var(--brand-dark); text-decoration:none; }
.measurement-start { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; border:1px solid #fed7aa; background:linear-gradient(110deg,#fffaf5,#fff); }
.measurement-start h2 { margin:3px 0 4px; }
.measurement-start p { max-width:700px; margin:0; }
.btn-large { padding:12px 18px; }
.measurement-empty-action { padding:26px; text-align:center; }
@media (max-width:760px) {
  .measurement-command-primary, .measurement-command-secondary, .measurement-command-secondary form, .measurement-start { align-items:stretch; flex-direction:column; }
  .measurement-command-primary .btn, .measurement-command-secondary .btn, .measurement-start .btn { width:100%; }
  .measurement-command-secondary form { width:100%; }
  .command-label { margin:0; }
  .measurement-tabs { top:70px; margin-inline:-4px; border-radius:0; }
  .measurement-tabs a { padding:10px; font-size:12px; }
}

/* Field-flow improvements */
.measurement-quick-form { max-width:1100px; margin-inline:auto; }
.measurement-quick-form .form-section + .form-section { margin-top:24px; padding-top:24px; border-top:1px solid var(--border, #e5e7eb); }
.measurement-part-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.measurement-part-grid .span-2 { grid-column:span 2; }
.measurement-quick-link { margin-top:16px; border:1px solid #fed7aa; background:#fffaf5; }
.notice-warning { margin:0 0 16px; border-left:4px solid #d97706; background:#fffbeb; color:#92400e; }
select option[hidden] { display:none; }
@media (max-width:760px) {
  .measurement-part-grid { grid-template-columns:1fr 1fr; }
  .measurement-part-grid .span-2 { grid-column:1 / -1; }
  .measurement-quick-form .form-actions { position:sticky; bottom:8px; z-index:5; padding:10px; border-radius:12px; background:rgba(255,255,255,.96); box-shadow:0 4px 18px rgba(15,23,42,.15); }
}
@media (max-width:480px) { .measurement-part-grid { grid-template-columns:1fr; } }

/* Canonical light-mode design layer. Keep all new screens on these tokens. */
:root { --surface-raised:#fff; --surface-soft:#f8fafc; --border-strong:#cbd5e1; --focus:rgba(242,106,33,.28); --shadow-sm:0 2px 10px rgba(15,23,42,.05); --text-on-brand:#fff; }
body { background:linear-gradient(180deg,#f8fafc 0%,var(--bg) 100%); color:var(--ink); }
h1,h2,h3,h4,h5,h6 { color:var(--ink); }
.card,.panel,.stat-card { background:var(--surface-raised); border-color:var(--border); box-shadow:var(--shadow-sm); }
.portal-sidebar,.topbar { border-color:var(--border); }
.portal-sidebar { background:rgba(255,255,255,.97); }
.topbar,.user-chip,.btn-secondary,.table-wrap { background:var(--surface-raised); }
.btn,.button,.button-secondary { min-height:40px; box-shadow:none; }
.btn-primary,.button { background:var(--brand); color:var(--text-on-brand); }
.btn-secondary,.button-secondary { border-color:var(--border-strong); color:var(--ink); }
.btn-secondary:hover,.button-secondary:hover { border-color:var(--brand); background:var(--surface-alt); color:var(--brand-dark); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
input,select,textarea { width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface-raised); color:var(--ink); font:inherit; }
textarea { min-height:100px; resize:vertical; }
input[type="checkbox"],input[type="radio"] { width:auto; min-height:auto; accent-color:var(--brand); }
input::placeholder,textarea::placeholder { color:#94a3b8; }
.form-field { display:flex; flex-direction:column; gap:6px; color:var(--ink); font-weight:650; }
.form-field small,.muted { color:var(--muted); font-weight:400; }
.table th { background:var(--surface-soft); color:var(--muted); }
.table tbody tr:nth-child(even) { background:#fcfcfd; }
.table tbody tr:hover { background:var(--surface-alt); }
.empty-state { background:var(--surface-soft); }
.dashboard-panels,.dashboard-stats-grid { gap:18px; }
.dashboard-panel,.dashboard-stat { min-width:0; }
.measurement-section { scroll-margin-top:140px; }
.measurement-section > .section-title { margin-top:0; }
.measurement-room { padding:20px 0; }
.measurement-room + .measurement-room { border-top:1px solid var(--border); }
.photo-upload-form { background:var(--surface-alt); border-color:#fdba74; }
.badge.status-concept { background:#f1f5f9; color:#475569; }
.badge.status-uitgevoerd,.badge.status-gecontroleerd,.badge.status-goedgekeurd { background:#dcfce7; color:#166534; }
.badge.status-bezig,.badge.status-ingepland { background:#dbeafe; color:#1d4ed8; }
.badge.status-geannuleerd { background:#fee2e2; color:#991b1b; }
@media (max-width:720px) { .topbar .page-meta h1 { font-size:20px; } .topbar .user-chip { display:none; } .card,.panel { border-radius:14px; } .section-title { align-items:flex-start; flex-direction:column; } .section-title > .btn,.section-title > a { width:100%; } }

/* Modern visual polish, same VekaFactory palette. */
:root { --radius:16px; --shadow:0 8px 24px rgba(15,23,42,.06); --shadow-hover:0 12px 30px rgba(15,23,42,.10); }
.portal-main { background:transparent; }
.content { width:min(100%,1640px); margin:0 auto; padding:28px clamp(16px,2.5vw,36px) 44px; }
.topbar { padding:16px clamp(16px,2.5vw,36px); }
.topbar .page-meta h1 { font-size:clamp(22px,2vw,30px); letter-spacing:-.025em; }
.topbar .page-meta .eyebrow { font-size:11px; font-weight:750; letter-spacing:.12em; }
.card,.panel,.stat-card { border-radius:16px; transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.card:hover,.panel:hover,.stat-card:hover { border-color:#d7dee8; box-shadow:var(--shadow-hover); }
.dashboard-hero { padding:28px; border-left-width:5px; border-radius:18px; }
.dashboard-hero h2 { letter-spacing:-.035em; }
.dashboard-config-alert { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; border-left:5px solid var(--warning, #c2410c); background:var(--surface-alt); }
.dashboard-config-alert h2 { margin:4px 0 6px; }
.dashboard-config-alert p { margin:0; color:var(--muted); }
.dashboard-stat { padding:20px; }
.dashboard-stat-label { letter-spacing:.02em; }
.dashboard-row-item { background:var(--surface-soft); border-color:transparent; }
.dashboard-row-item:hover { border-color:#fed7aa; background:var(--surface-alt); }
.section-title { margin:24px 0 14px; }
.section-title h2,.section-title h3 { letter-spacing:-.02em; }
.btn,.button,.button-secondary { border-radius:10px; font-weight:750; letter-spacing:-.01em; }
.btn-primary { box-shadow:0 4px 10px rgba(242,106,33,.18); }
.btn-primary:hover { box-shadow:0 6px 16px rgba(242,106,33,.25); }
.table-wrap { box-shadow:var(--shadow-sm); }
.table { min-width:680px; }
.table th { padding:12px 14px; font-size:11px; }
.table td { padding:13px 14px; }
.badge { line-height:1.2; }
.nav-group { margin-bottom:20px; }
.nav-group-title { padding-bottom:8px; }
.side-nav a { border:1px solid transparent; transition:background .15s ease,border-color .15s ease,color .15s ease; }
.side-nav a:hover { border-color:#fed7aa; background:#fffaf5; }
.side-nav a.active { border-color:#fed7aa; }
.measurement-start { padding:22px 24px; }
.measurement-tabs { border:1px solid var(--border); border-radius:12px; }
.measurement-tabs a { font-weight:750; }
.measurement-command-bar { border-radius:14px; }
.form-section { background:var(--surface-soft); border-color:transparent; }
.photo-card,.project-photo-card,.checklist-row,.workflow-check-row { box-shadow:var(--shadow-sm); }
.photo-card:hover,.project-photo-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
@media (max-width:720px) { .content { padding:18px 12px 30px; } .dashboard-hero { padding:20px; } .dashboard-stat { padding:16px; } .measurement-start { padding:18px; } }
@media (max-width:720px) { .dashboard-config-alert { align-items:flex-start; flex-direction:column; } .dashboard-config-alert .btn { width:100%; } }
/* Consistent list/detail controls and selectable dashboard metrics. */
.dashboard-stat-link,.dashboard-row-link{color:inherit;text-decoration:none}
.dashboard-stat-link{display:block;transition:transform .18s ease,box-shadow .18s ease}
.dashboard-stat-link:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(25,35,52,.12)}
.dashboard-row-link{display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:12px;transition:background .16s ease,transform .16s ease}
.dashboard-row-link:hover{background:#fff7f1;transform:translateX(3px)}
.list-toolbar form{grid-template-columns:minmax(220px,1fr) minmax(180px,240px) auto}
.list-toolbar .btn{min-height:44px;white-space:nowrap}
.quote-option-picker{border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:18px;background:#fffaf7}
.quote-option-picker legend{font-weight:800;padding:0 6px}
.quote-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.quote-option{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}
.quote-option:hover{border-color:var(--brand);box-shadow:0 6px 16px rgba(25,35,52,.08)}
.quote-option input{margin-top:3px;accent-color:var(--brand)}
.quote-option span{display:grid;gap:3px}.quote-option small{color:var(--muted)}
@media (max-width:760px){.list-toolbar form{grid-template-columns:1fr}.dashboard-row-link{align-items:flex-start}.quote-option-grid{grid-template-columns:1fr}}

/* Unified, role-friendly search bars for internal CRM overviews. */
body.portal-app .list-toolbar__layout{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
body.portal-app .list-toolbar__form{display:flex;align-items:flex-end;gap:12px;flex:1 1 600px;flex-wrap:wrap;margin:0}
body.portal-app .list-toolbar__form>label{flex:1 1 190px;min-width:min(100%,160px)}
body.portal-app .list-toolbar__actions,body.portal-app .list-toolbar__primary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.portal-app .list-toolbar__actions .btn,body.portal-app .list-toolbar__primary .btn{white-space:nowrap}
@media (max-width:720px){body.portal-app .list-toolbar__layout,body.portal-app .list-toolbar__form{align-items:stretch;flex-direction:column}body.portal-app .list-toolbar__actions,body.portal-app .list-toolbar__primary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}body.portal-app .list-toolbar__actions .btn,body.portal-app .list-toolbar__primary .btn{width:100%}}

/* Odoo-inspired operational workspace, using the VekaFactory visual language. */
.operations-hero,.profitability-grid,.project-smart-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.operations-kpi,.profitability-card,.project-smart-buttons a{display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface-raised);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm)}
.operations-kpi:hover,.project-smart-buttons a:hover{border-color:#fdba74;box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.operations-kpi>span,.profitability-card>span,.project-smart-buttons span{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.operations-kpi>strong,.profitability-card>strong,.project-smart-buttons strong{font-size:clamp(23px,2.4vw,34px);letter-spacing:-.04em;line-height:1.05}
.operations-kpi small,.profitability-card small{color:var(--muted);line-height:1.35}
.operations-kpi.attention{border-color:#fdba74;background:linear-gradient(135deg,#fff7ed,#fff)}
.profitability-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.profitability-card.primary{border-color:#fdba74;background:linear-gradient(135deg,#fff7ed,#fff)}
.operations-grid{align-items:start}.operations-section{margin-top:18px}
.operation-list-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 4px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border)}
.operation-list-row:last-child{border-bottom:0}.operation-list-row>div{display:flex;min-width:0;flex-direction:column;gap:3px}.operation-list-row span:not(.badge){color:var(--muted);font-size:13px}

/* Dashboard refresh: clearer hierarchy, calmer surfaces, and stronger scanability. */
body.portal-app .content:has(> .dashboard-hero) { max-width: 1720px; }
body.portal-app .dashboard-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 190px;
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--border);
  border-left: 5px solid var(--brand);
  background: linear-gradient(112deg, #f26a21 0%, #e45f19 66%, #cf571a 100%);
  border-color: #e45f19;
  color: #fff;
  box-shadow: 0 16px 34px rgba(190, 76, 17, .20);
}
body.portal-app .dashboard-hero::after {
  position: absolute;
  z-index: -1;
  top: -100px;
  right: 10%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .07), 0 0 0 58px rgba(255, 255, 255, .045);
  content: "";
  pointer-events: none;
}
body.portal-app .dashboard-hero-copy { max-width: 760px; }
body.portal-app .dashboard-hero h2 { margin: 15px 0 8px; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; }
body.portal-app .dashboard-hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.92); line-height: 1.6; }
body.portal-app .dashboard-hero .dashboard-kicker { background: rgba(255,255,255,.18); color: #fff; }
body.portal-app .dashboard-focus { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.14); color: #fff; }
body.portal-app .dashboard-focus-icon { background: #fff; color: #d95715; }
body.portal-app .dashboard-hero-actions { position: relative; z-index: 1; flex: 0 0 auto; max-width: 440px; justify-content: flex-end; }
body.portal-app .dashboard-hero-actions .btn { min-height: 46px; padding-inline: 17px; }
body.portal-app .dashboard-hero-actions .btn-primary { border-color: #fff; background: #fff; color: #c94e12; box-shadow: 0 5px 14px rgba(105, 42, 12, .14); }
body.portal-app .dashboard-hero-actions .btn-primary:hover { background: #fff7f2; }
body.portal-app .dashboard-hero-actions .btn-secondary { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff; }
body.portal-app .dashboard-hero-actions .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.22); color: #fff; }
body.portal-app .dashboard-config-alert { padding: 20px 24px; border: 1px solid color-mix(in srgb, var(--warning, #c2410c) 28%, var(--border)); border-left: 5px solid var(--warning, #c2410c); border-radius: var(--radius); }
body.portal-app .dashboard-stats-grid { gap: 14px; margin: 0 0 22px; }
body.portal-app .dashboard-stat { min-height: 142px; padding: 20px 22px; border-color: var(--border); box-shadow: 0 5px 18px rgba(15, 23, 42, .045); }
body.portal-app .dashboard-stat::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--brand); content: ""; }
body.portal-app .dashboard-stat-label { font-size: 12px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
body.portal-app .dashboard-stat-value { margin-top: 13px; color: var(--ink); font-size: clamp(30px, 3vw, 40px); letter-spacing: -.045em; }
body.portal-app .dashboard-stat-hint { margin-top: 7px; font-size: 12px; }
body.portal-app .dashboard-stat-link:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); transform: translateY(-3px); }
body.portal-app .dashboard-panels { gap: 18px; align-items: stretch; }
body.portal-app .dashboard-panel { padding: 22px; border-color: var(--border); box-shadow: 0 5px 18px rgba(15, 23, 42, .045); }
body.portal-app .dashboard-panel .section-title { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
body.portal-app .dashboard-panel .section-title h3 { margin: 0; font-size: 18px; }
body.portal-app .dashboard-panel-subtitle { margin: 5px 0 0; font-size: 13px; }
body.portal-app .dashboard-row-list { gap: 8px; }
body.portal-app .dashboard-row-item { min-height: 58px; align-items: center; padding: 13px 15px; border: 1px solid transparent; background: var(--surface-soft, #f8fafc); }
body.portal-app .dashboard-row-label { font-size: 14px; }
body.portal-app .dashboard-row-hint { margin-top: 3px; font-size: 12px; }
body.portal-app .dashboard-row-value { font-size: 16px; }
body.portal-app .dashboard-table { min-width: 560px; }
html[data-theme="dark"] body.portal-app .dashboard-hero { background: linear-gradient(112deg, #c95416 0%, #a94212 100%); }
html[data-theme="dark"] body.portal-app .dashboard-focus,
html[data-theme="dark"] body.portal-app .dashboard-stat,
html[data-theme="dark"] body.portal-app .dashboard-panel { background-color: var(--surface-raised); }
html[data-theme="dark"] body.portal-app .dashboard-stat-value { color: var(--ink); }
html[data-theme="dark"] body.portal-app .dashboard-row-item { background: var(--surface-soft); }
@media (max-width: 980px) {
  body.portal-app .dashboard-hero { align-items: flex-start; flex-direction: column; }
  body.portal-app .dashboard-hero-actions { max-width: none; justify-content: flex-start; }
}
@media (max-width: 720px) {
  body.portal-app .dashboard-hero { min-height: 0; padding: 21px 18px; }
  body.portal-app .dashboard-hero::after { right: -200px; }
  body.portal-app .dashboard-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  body.portal-app .dashboard-hero-actions .btn { width: 100%; }
  body.portal-app .dashboard-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.portal-app .dashboard-stat { min-height: 124px; padding: 16px 15px; }
  body.portal-app .dashboard-panel { padding: 17px; }
}
.operations-form-panel{max-width:1050px}.operations-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.operations-field{display:flex;flex-direction:column;gap:7px;min-width:0}.operations-field.wide{grid-column:1/-1}.operations-field label{font-weight:750}.operations-field small{color:var(--muted)}
.check-row{display:flex;align-items:center;gap:10px;min-height:44px}.field-error,.alert-error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:9px;padding:8px 10px}.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.approval-list{display:grid;gap:14px}.approval-card{padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-raised)}.approval-main{display:flex;justify-content:space-between;gap:20px}.approval-main h3{margin:3px 0 8px}.approval-main p{margin:0 0 10px;color:var(--muted)}.approval-status{display:flex;flex-direction:column;align-items:flex-end;gap:10px;white-space:nowrap}.approval-status strong{font-size:20px}.approval-decision{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.approval-decision textarea{min-height:44px}.decision-note{padding:12px;border-radius:10px;background:var(--surface-soft)}
.amount-negative{color:#b91c1c;font-weight:750}.page-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.project-smart-buttons{margin:0 0 16px}.project-smart-buttons strong{font-size:22px}
@media(max-width:1050px){.operations-hero,.project-smart-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.operations-hero,.profitability-grid,.project-smart-buttons,.operations-form-grid{grid-template-columns:1fr}.operations-field.wide{grid-column:auto}.approval-main{flex-direction:column}.approval-status{align-items:flex-start}.approval-decision{grid-template-columns:1fr}.page-actions .btn{width:100%}}
.sla-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}.sla-strip>div{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border:1px solid var(--border);border-radius:13px;background:var(--surface-raised)}.sla-strip span{color:var(--muted);font-size:12px;font-weight:750;text-transform:uppercase}.sla-strip strong{font-size:15px}
@media(max-width:850px){.sla-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.sla-strip{grid-template-columns:1fr}}
.mobile-day-section{margin-bottom:22px}.mobile-sync-status{display:inline-flex;align-items:center;margin-top:7px;padding:5px 9px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px;font-weight:700}.mobile-sync-status[data-connection="online"]{color:#166534;background:#f0fdf4;border-color:#bbf7d0}.mobile-sync-status[data-connection="offline"]{color:#9a3412;background:#fff7ed;border-color:#fed7aa}.mobile-day-section.warning{padding:16px;border:1px solid #fed7aa;border-radius:16px;background:#fffaf5}.mobile-workorder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}.mobile-workorder-card{display:flex;flex-direction:column;gap:13px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface-raised);box-shadow:var(--shadow-sm)}.mobile-workorder-card header{display:flex;justify-content:space-between;gap:12px}.mobile-workorder-card h3{margin:3px 0 0}.mobile-address{margin:0;color:var(--muted);line-height:1.55}.mobile-progress>div:first-child{display:flex;justify-content:space-between;margin-bottom:7px;font-size:13px}.mobile-alert{margin:0;padding:8px 10px;border-radius:9px;background:#fff7ed;color:#9a3412;font-weight:700}.mobile-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.mobile-completed summary{cursor:pointer;font-size:18px;font-weight:800}.mobile-completed .mobile-workorder-grid{margin-top:16px}
@media(max-width:560px){.mobile-workorder-grid{grid-template-columns:1fr}.mobile-workorder-card{padding:16px}.mobile-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-card-actions .btn:last-child{grid-column:1/-1}}

/* Final dark-mode pass: kept last so legacy light-mode declarations cannot
   reintroduce white surfaces on internal pages. */
html[data-theme="dark"] body.portal-app .portal-sidebar { background: rgba(15,23,42,.98); }
html[data-theme="dark"] body.portal-app .topbar { background: rgba(15,23,42,.94); }
html[data-theme="dark"] body.portal-app {
  --surface-raised: #1f2937;
  --surface-soft: #273449;
  --border-strong: #526174;
  --text: #f8fafc;
  background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
}
html[data-theme="dark"] body.portal-app .table tbody tr:nth-child(even) { background: #222e41; }
html[data-theme="dark"] body.portal-app .table tbody tr:hover { background: #303d52; }
html[data-theme="dark"] body.portal-app .quote-option-picker,
html[data-theme="dark"] body.portal-app .quote-option,
html[data-theme="dark"] body.portal-app .measurement-quick-form .form-actions,
html[data-theme="dark"] body.portal-app .mobile-alert { background: var(--surface-soft); color: var(--ink); border-color: var(--border); }
html[data-theme="dark"] body.portal-app .mobile-sync-status[data-connection="online"] { background: #143225; color: #bbf7d0; border-color: #276749; }
html[data-theme="dark"] body.portal-app .mobile-sync-status[data-connection="offline"] { background: #3b2618; color: #fed7aa; border-color: #9a5b24; }
html[data-theme="dark"] body.portal-app .mobile-queue-status[data-pending="0"] { background: #143225; color: #bbf7d0; border-color: #276749; }
html[data-theme="dark"] body.portal-app .mobile-queue-status[data-pending]:not([data-pending="0"]) { background: #3b2618; color: #fed7aa; border-color: #9a5b24; }
html[data-theme="dark"] body.portal-app .operations-kpi.attention,
html[data-theme="dark"] body.portal-app .profitability-card.primary { background: #352817; border-color: #a16207; }
html[data-theme="dark"] body.portal-app .side-nav a:hover,
html[data-theme="dark"] body.portal-app .side-nav a.active { background: #352817; border-color: #9a5b2b; color: #fdba74; }
html[data-theme="dark"] body.portal-app .dashboard-row-link:hover { background: #352817; }
html[data-theme="dark"] body.portal-app .measurement-tabs { background: rgba(15,23,42,.96); }
html[data-theme="dark"] body.portal-app .measurement-start { background: #2a211c; border-color: #9a5b2b; }
html[data-theme="dark"] body.portal-app .notice-warning,
html[data-theme="dark"] body.portal-app .form-errors,
html[data-theme="dark"] body.portal-app .field-error,
html[data-theme="dark"] body.portal-app .alert-error { background: #3a2024; border-color: #99454b; color: #fecaca; }
html[data-theme="dark"] body.portal-app .customer-attention,
html[data-theme="dark"] body.portal-app .customer-attention-item,
html[data-theme="dark"] body.portal-app .customer-notification.is-unread { background: #2a211c; border-color: #9a5b2b; }

/* Older detail components used literal light colours. Keep them readable in
   dark work mode without affecting the public calculator. */
html[data-theme="dark"] body.portal-app .dossier-grid > div,
html[data-theme="dark"] body.portal-app .project-photo-card,
html[data-theme="dark"] body.portal-app .status-step,
html[data-theme="dark"] body.portal-app .check-button,
html[data-theme="dark"] body.portal-app .checklist-row {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--ink);
}
html[data-theme="dark"] body.portal-app .project-note,
html[data-theme="dark"] body.portal-app .restpoint-card,
html[data-theme="dark"] body.portal-app .mobile-day-section.warning,
html[data-theme="dark"] body.portal-app .measurement-quick-link {
  background: #352817;
  border-color: #a16207;
  color: #fed7aa;
}
html[data-theme="dark"] body.portal-app .dossier-financial-grid > div,
html[data-theme="dark"] body.portal-app .measurement-quick-form .form-actions {
  background: #2a211c;
  border-color: #9a5b2b;
}
html[data-theme="dark"] body.portal-app .checklist-missing {
  background: #3a2024;
  border-color: #99454b;
}
html[data-theme="dark"] body.portal-app .status-step:hover,
html[data-theme="dark"] body.portal-app .status-step:focus-visible,
html[data-theme="dark"] body.portal-app .check-button:focus-visible {
  border-color: #fb923c;
}
html[data-theme="dark"] body.portal-app .badge.status-concept { background: #334155; color: #e2e8f0; }
html[data-theme="dark"] body.portal-app .badge.status-uitgevoerd,
html[data-theme="dark"] body.portal-app .badge.status-gecontroleerd,
html[data-theme="dark"] body.portal-app .badge.status-goedgekeurd { background: #14532d; color: #bbf7d0; }
html[data-theme="dark"] body.portal-app .badge.status-bezig,
html[data-theme="dark"] body.portal-app .badge.status-ingepland { background: #1e3a8a; color: #bfdbfe; }
html[data-theme="dark"] body.portal-app .badge.status-geannuleerd { background: #7f1d1d; color: #fecaca; }
html[data-theme="dark"] body.portal-app a:not(.btn):not(.button):not(.button-secondary) { color: #fdba74; }
html[data-theme="dark"] body.portal-app code { color: #fed7aa; }

/* Contract detail: readable facts, signature evidence, and compact actions. */
.contract-detail-grid { align-items: start; }
.record-subtitle { color: var(--muted); }
.record-facts { display: grid; gap: 0; margin: 0; }
.record-facts > div { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.record-facts > div:last-child { border-bottom: 0; }
.record-facts dt { color: var(--muted); font-weight: 650; }
.record-facts dd { margin: 0; overflow-wrap: anywhere; }
.signature-proof { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 12px; background: var(--surface-soft); }
.signature-proof h3 { margin: 0 0 8px; font-size: 1rem; }
.signature-hash dd { min-width: 0; }
.signature-hash code { overflow-wrap: anywhere; word-break: break-word; }
.contract-action-list { display: flex; flex-wrap: wrap; gap: 9px; }
.contract-action-list form { margin: 0; }
.contract-signing-note { margin: 14px 0 0; }
.contract-document-panel { margin-top: 16px; }
.contract-document-body, .contract-email-log { white-space: pre-line; line-height: 1.7; overflow-wrap: anywhere; }
.portal-app .workorder-correction-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 0; }
.portal-app .workorder-correction-form label { display: grid; gap: 5px; min-width: min(280px, 100%); margin: 0; }
.portal-app .workorder-correction-form input { min-height: 42px; }
@media (max-width: 600px) {
  .record-facts > div { grid-template-columns: 1fr; gap: 3px; }
  .contract-action-list > *, .contract-action-list form, .contract-action-list form .btn { width: 100%; }
  .portal-app .workorder-correction-form, .portal-app .workorder-correction-form label, .portal-app .workorder-correction-form .btn { width: 100%; }
}
html[data-theme="dark"] body.portal-app .signature-proof { background: var(--surface-soft); border-color: var(--border); border-left-color: var(--brand); }

/* Internal task summaries and pagination: intentionally scoped away from public calculator pages. */
body.portal-app .task-summary-link { display: block; color: inherit; text-decoration: none; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
body.portal-app .task-summary-link:hover, body.portal-app .task-summary-link:focus-visible { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20, 30, 45, .08); }
body.portal-app .task-summary-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
body.portal-app .pagination { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 4px; color: var(--muted); }
body.portal-app .pagination .btn { min-height: 42px; }
body.portal-app .planning-list-table { width: 100%; border-collapse: collapse; }
body.portal-app .planning-list-table th, body.portal-app .planning-list-table td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
@media (max-width: 700px) {
  body.portal-app .planning-list-panel { padding: 12px; }
  body.portal-app .planning-list-table, body.portal-app .planning-list-table tbody { display: block; width: 100%; }
  body.portal-app .planning-list-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  body.portal-app .planning-list-table tr { display: grid; gap: 7px; padding: 13px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  body.portal-app .planning-list-table td { display: grid; grid-template-columns: minmax(94px, .38fr) minmax(0, 1fr); gap: 10px; padding: 3px 0; border: 0; overflow-wrap: anywhere; }
  body.portal-app .planning-list-table td::before { content: attr(data-label); color: var(--muted); font-weight: 650; }
  body.portal-app .planning-list-table td[colspan] { display: block; }
  body.portal-app .planning-list-table td[colspan]::before { content: none; }
}
html[data-theme="dark"] body.portal-app .task-summary-link { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] body.portal-app .task-summary-link:hover, html[data-theme="dark"] body.portal-app .task-summary-link:focus-visible { border-color: var(--brand); }

/* Respect system motion preferences without disabling essential state changes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}