:root {
  /* Mapped op tijdrit-tokens.css (LinQiot huisstijl) */
  --bg: var(--color-bg);
  --sidebar: var(--color-sidebar);
  --sidebar-text: #e5e7eb;
  --sidebar-hover: color-mix(in srgb, var(--sidebar) 82%, white);
  --sidebar-rail: 3.5rem;
  --accent: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --accent-bg: var(--color-primary-bg);
  --card: var(--color-white);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-secondary);
  --danger: var(--color-error);
  --danger-bg: var(--color-error-bg);
  --success: var(--color-success);
  --success-bg: var(--color-success-bg);
  --warning: var(--color-warning);
  --warning-bg: var(--color-warning-bg);
  --info: var(--color-info);
  --info-bg: var(--color-info-bg);
  --reports: var(--color-reports);
  --reports-bg: var(--color-reports-bg);
  --billing: var(--color-billing);
  --billing-bg: var(--color-billing-bg);
  --subscription: var(--color-subscription);
  --subscription-bg: var(--color-subscription-bg);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  display: flex;
  min-height: 100vh;
}
body.has-shell {
  flex-direction: column;
}
.shell-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.org-switcher {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.15rem 0.45rem 0.15rem 0.5rem;
  background: var(--color-surface);
  color: var(--text);
}
.org-switcher .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.org-switcher-select {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: inherit;
  padding: 0.35rem 0.15rem;
  min-width: 7rem;
}
.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.topbar-icon-btn .icon { width: 1.1rem; height: 1.1rem; }
.topbar-alert {
  position: relative;
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-bg);
}
.topbar-alert:hover {
  background: var(--danger-bg);
  color: var(--danger);
}
.topbar-alert .icon { color: var(--danger); }
.topbar-alert-count {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--danger);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}
.budget-warn-menu { position: relative; }
.budget-warn-btn {
  position: relative;
  list-style: none;
}
.budget-warn-btn::-webkit-details-marker { display: none; }
.budget-warn-btn.budget-warn-warning {
  color: var(--warning);
  border-color: var(--warning);
}
.budget-warn-btn.budget-warn-warning .icon { color: var(--warning); }
.budget-warn-btn.budget-warn-warning .topbar-alert-count {
  background: var(--warning);
}
.budget-warn-btn.budget-warn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.budget-warn-btn.budget-warn-danger .icon { color: var(--danger); }
.budget-warn-btn.budget-warn-danger .topbar-alert-count {
  background: var(--danger);
}
.budget-warn-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  width: min(36rem, calc(100vw - 1.5rem));
  min-width: min(28rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.85rem 0.8rem;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.budget-warn-panel-title {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.budget-warn-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.budget-warn-table th,
.budget-warn-table td {
  padding: 0.45rem 0.5rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.budget-warn-table th:first-child,
.budget-warn-table td:first-child {
  width: 52%;
  min-width: 12rem;
}
.budget-warn-table th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.budget-warn-table th.num,
.budget-warn-table td.num {
  text-align: right;
  white-space: nowrap;
  width: 16%;
}
.budget-warn-table tbody tr:last-child td { border-bottom: 0; }
.budget-warn-table tr.is-warning td.num { color: var(--warning); font-weight: 600; }
.budget-warn-table tr.is-over td.num { color: var(--danger); font-weight: 600; }
.budget-warn-project-link {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.2rem;
  margin: -0.15rem -0.2rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.budget-warn-project-link:hover { color: var(--accent); }
.budget-warn-status {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warning);
}
.budget-warn-table tr.is-over .budget-warn-status { color: var(--danger); }
.account-menu { position: relative; }
.account-menu-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem 0.15rem 0.15rem;
  background: var(--card);
}
.account-menu-summary::-webkit-details-marker { display: none; }
.account-menu-name { font-size: 0.9rem; font-weight: 600; }
.avatar-img, .avatar-fallback {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--muted);
}
.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.account-menu-panel a,
.account-menu-panel button {
  color: var(--text);
  text-decoration: none;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.account-menu-panel a:hover,
.account-menu-panel button:hover { background: var(--color-surface); }
.account-menu-logout { margin: 0; }
.account-menu-summary.is-impersonating {
  border-color: var(--warning);
  background: var(--warning-bg);
}
.impersonation-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--warning);
  background: var(--card);
  border: 1px solid var(--warning);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}
.account-menu-section {
  padding: 0.35rem 0.45rem 0.55rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0.2rem 0;
}
.account-menu-label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.account-menu-impersonate {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.account-menu-select {
  width: 100%;
  font-size: 0.85rem;
}
.account-menu-start {
  width: 100%;
  justify-content: center;
}
.account-menu-impersonate .btn.btn-primary {
  background: var(--accent);
  color: var(--card);
  border: 1px solid var(--accent);
  font-weight: 600;
}
.account-menu-impersonate .btn.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--card);
}
.account-menu-stop {
  color: var(--warning) !important;
  font-weight: 600;
}
.account-menu-panel {
  min-width: 14.5rem;
}
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.45rem 1rem;
  background: var(--warning-bg);
  color: var(--warning);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.impersonation-banner strong { color: var(--text); }
.impersonation-banner .muted { color: var(--muted); font-weight: 400; }
.impersonation-banner form { margin: 0; }
.impersonation-banner .btn {
  padding: 0.25rem 0.65rem;
  font-size: 0.85rem;
  border-color: var(--warning);
  color: var(--warning);
  background: var(--card);
}
.impersonation-banner .btn:hover {
  background: var(--warning);
  color: var(--card);
}
.role-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.role-checks li { display: flex; align-items: center; gap: 0.45rem; }
.role-matrix { width: 100%; }
.role-matrix th, .role-matrix td { text-align: center; }
.role-matrix th:first-child, .role-matrix td:first-child { text-align: left; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; font-family: var(--font-mono, monospace); }
.week-focus-table textarea { min-height: 3.2rem; width: 100%; }
.week-focus-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  margin: 0 0 0.85rem;
  padding: 0.85rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.week-focus-hint { grid-column: 1 / -1; margin: 0; }
.week-focus-table .time-input { justify-content: flex-end; }
@media (max-width: 900px) {
  .week-focus-head { grid-template-columns: 1fr; }
}
.audit-changes-json {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.65rem;
  max-width: 28rem;
  overflow: auto;
  font-size: 0.8rem;
  background: var(--color-surface, var(--card));
  border: 1px solid var(--border);
  border-radius: 6px;
}

.sidebar {
  width: 220px;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem;
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.18s ease;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0 0.35rem 0.7rem;
  margin-top: -0.4rem;
  color: var(--color-white);
  min-width: 0;
}
.brand-logo {
  display: block;
  height: 3rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.brand-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  flex-shrink: 0;
  display: none;
}
.brand-icon-lg {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  display: block;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
}
.nav-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 1rem 0.75rem 0.35rem;
  white-space: nowrap;
}
.sidebar a,
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--sidebar-text);
  text-decoration: none;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  min-width: 0;
}
.sidebar .nav-link .icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}
.sidebar .nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.sidebar .nav-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.sidebar .nav-badge-alert {
  background: var(--danger);
  color: var(--color-white);
}
.sidebar .nav-badge-mark {
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}
.sidebar .nav-badge-count {
  font-variant-numeric: tabular-nums;
}
.sidebar a:hover,
.sidebar .nav-link:hover { background: var(--sidebar-hover); }
.sidebar-foot {
  margin-top: auto;
  padding: 0.75rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--sidebar-hover);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Ingeklapt: alleen iconen (rail) */
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-rail);
  padding: 0.75rem 0.35rem;
}
body.sidebar-collapsed .brand {
  justify-content: center;
  padding: 0 0 0.65rem;
  margin-top: -0.3rem;
}
body.sidebar-collapsed .brand-logo {
  display: none;
}
body.sidebar-collapsed .brand-icon {
  display: block;
}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-text {
  display: none;
}
body.sidebar-collapsed .sidebar .nav-link {
  position: relative;
  justify-content: center;
  padding: 0.55rem 0.35rem;
}
body.sidebar-collapsed .sidebar .nav-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  margin-left: 0;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.2rem;
  font-size: 0.6rem;
}
body.sidebar-collapsed .sidebar .nav-badge-mark {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

.content { flex: 1; padding: 1.5rem 2rem; }
.content-full { max-width: 420px; margin: 4rem auto; }

h1 { margin-top: 0; font-size: 1.5rem; }
h2 { font-size: 1.05rem; margin-top: 1.5rem; }
.muted { color: var(--muted); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.page-head-hours,
.page-head-trips,
.page-head-dashboard,
.page-head-leave,
.page-head-home-office,
.page-head-reports,
.page-head-billing {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.page-head-hours {
  background: var(--info-bg);
  border-left: 4px solid var(--info);
}
.page-head-trips {
  background: var(--success-bg);
  border-left: 4px solid var(--success);
}
.page-head-dashboard {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  background: var(--color-surface);
  border-left: 4px solid var(--color-secondary);
}
.page-head-leave {
  flex-wrap: wrap;
  background: var(--accent-bg);
  border-left: 4px solid var(--accent);
}
.page-head-home-office {
  flex-wrap: wrap;
  background: var(--info-bg);
  border-left: 4px solid var(--info);
}
.page-head-reports {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  background: var(--reports-bg);
  border-left: 4px solid var(--reports);
}
.page-head-dashboard-row,
.page-head-reports-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.page-head-dashboard-row .toolbar,
.page-head-reports-row .toolbar { margin-left: auto; }
.page-head-title-hours,
.page-head-title-trips,
.page-head-title-dashboard,
.page-head-title-leave,
.page-head-title-home-office,
.page-head-title-reports {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.15rem;
}
.page-head-title-hours .icon,
.page-head-title-trips .icon,
.page-head-title-dashboard .icon,
.page-head-title-leave .icon,
.page-head-title-home-office .icon,
.page-head-title-reports .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.page-head-title-hours .icon { color: var(--info); }
.page-head-title-trips .icon { color: var(--success); }
.page-head-title-dashboard .icon { color: var(--color-secondary); }
.page-head-title-leave .icon { color: var(--accent); }
.page-head-title-home-office .icon { color: var(--info); }
.page-head-title-reports .icon { color: var(--reports); }
.page-head-reports .year-tabs {
  margin: 0;
}
.page-head-title-leave,
.page-head-title-home-office,
.page-head-title-reports {
  flex-wrap: wrap;
  margin-bottom: 0;
  row-gap: 0.2rem;
  column-gap: 0.55rem;
}
.page-head-title-leave .page-head-leave-meta,
.page-head-title-home-office .page-head-home-office-meta,
.page-head-title-reports .page-head-reports-meta {
  font-size: 0.95rem;
  font-weight: 400;
}
.page-head-title-leave .page-head-leave-meta strong,
.page-head-title-home-office .page-head-home-office-meta strong {
  font-weight: 600;
  color: var(--text);
}
.page-head-leave .toolbar,
.page-head-home-office .toolbar {
  align-items: end;
}
.page-head-leave .leave-filter-bar,
.page-head-home-office .leave-filter-bar {
  margin: 0;
  padding: 0;
  gap: 0.5rem;
  align-items: end;
}
.page-head-leave .leave-filter-bar .input[type="number"] {
  width: 5.5rem;
}
.page-head-billing {
  flex-wrap: wrap;
  background: var(--billing-bg);
  border-left: 4px solid var(--billing);
}
.page-head-title-billing {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.15rem;
}
.page-head-title-billing .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--billing);
}
.page-head-billing .toolbar {
  align-items: end;
}
.page-head-billing .billing-filter-bar {
  margin: 0;
  padding: 0;
  gap: 0.5rem;
  align-items: end;
}
.page-head-billing .billing-filter-bar .input[type="number"] {
  width: 5.5rem;
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stat strong { font-size: 1.5rem; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.table th, .table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.table th { background: var(--color-surface); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }

.form { max-width: 520px; display: flex; flex-direction: column; gap: 0.75rem; }
.form.form-wide { max-width: none; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.form .check, .login-card .check { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
[hidden] { display: none !important; }
.input {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
/* Geneste wrappers (address-lookup e.d.) stretchen niet vanzelf mee met .field-flex. */
.form .field .input,
.address-lookup > .input {
  width: 100%;
  box-sizing: border-box;
}
.input-euro {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--color-white);
  box-sizing: border-box;
}
.input-euro-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.65rem;
  color: var(--muted);
  background: var(--color-surface);
  border-right: 1px solid var(--border);
  border-radius: 6px 0 0 6px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.form .field .input-euro .input {
  width: auto;
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: transparent;
}
.input-euro .input:focus {
  outline: none;
}
.input-euro:focus-within {
  border-color: var(--accent);
}
.form-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  flex-shrink: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.btn-primary {
  /* primary-hover als basis: betere WCAG-contrast voor witte tekst op rood */
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}
.btn-primary:hover { background: #b53626; border-color: #b53626; }
.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.btn-success:hover { filter: brightness(0.95); }
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover { filter: brightness(0.95); }
.linkish.danger { color: var(--danger); }
.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 6px;
  color: var(--accent);
  text-decoration: none;
  vertical-align: middle;
}
.action-icon:hover { background: var(--color-primary-muted); color: var(--accent-hover); }
.action-icon.danger,
.action-icon.linkish.danger { color: var(--danger); text-decoration: none; }
.action-icon.danger:hover,
.action-icon.linkish.danger:hover { background: #fef2f2; color: var(--danger); }
.action-icon.linkish { text-decoration: none; }
.sidebar-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
}
.login-card form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

.flashes { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.flash { padding: 0.6rem 0.75rem; border-radius: 6px; font-size: 0.9rem; }
.flash-success { background: #ecfdf5; color: var(--success); }
.flash-danger { background: #fef2f2; color: var(--danger); }
.flash-warning { background: var(--warning-bg); color: var(--warning); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-switch-item {
  padding: 0.45rem 0.85rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  background: #fff;
}
.view-switch-item + .view-switch-item { border-left: 1px solid var(--border); }
.view-switch-item:hover:not(.active) { background: var(--color-surface); }
.view-switch-item.active { background: var(--color-primary-hover); color: #fff; }
button.view-switch-item {
  border: 0;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
}
.kpi-full-weeks-switch {
  flex-shrink: 0;
}
.inline-filter {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end;
  margin: 0.75rem 0 1rem;
}
.inline-filter label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.table-scroll { overflow-x: auto; margin-top: 0.5rem; }
.week-grid th.num, .week-grid td.num, .table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.time-input {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 0.15rem 0.3rem;
}
.time-input .time-part {
  border: 0;
  width: 1.5rem;
  text-align: center;
  padding: 0.2rem 0.1rem;
  font: inherit;
  background: transparent;
}
.time-input .time-part:focus { outline: none; background: #eef2f6; border-radius: 3px; }
.time-input .time-sep { color: var(--muted); padding: 0 0.05rem; }
.week-grid .new-row td { background: #f8fafc; vertical-align: middle; }
.week-form .form-actions { margin-top: 0.75rem; }
.small { font-size: 0.85rem; }
.actions { display: flex; gap: 0.25rem; align-items: center; }
.inline { display: inline; }
.linkish {
  background: none; border: 0; padding: 0; color: var(--accent);
  cursor: pointer; font: inherit; text-decoration: underline;
}
.reg-copy summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
}
.reg-copy summary::-webkit-details-marker { display: none; }
.leave-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 640px;
  margin-top: 1rem;
}
.leave-request-form { margin: 1rem 0 1.25rem; }
.leave-kind-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 0.85rem;
  min-width: 0;
}
.leave-kind-fieldset legend {
  font-weight: 600;
  margin-bottom: 0.4rem;
  padding: 0;
}
.leave-kind-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.leave-kind-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
}
.leave-kind-choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.leave-fields { display: grid; gap: 0.75rem; }
.leave-fields[hidden] { display: none !important; }
.leave-inbox {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.75rem 0 1.25rem;
}
.leave-inbox-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem 1rem;
}
.leave-inbox-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.leave-inbox-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.leave-inbox-period {
  margin: 0.35rem 0 0.65rem;
  color: var(--muted);
}
.leave-decision-form { max-width: none; }
.neg { color: var(--danger); }
.pos { color: var(--success); }
.koppeling-actions { margin-top: 0.75rem; flex-wrap: wrap; }

.field { position: relative; }
.field-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.address-lookup { position: relative; }
.address-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.address-input-row .input {
  flex: 1;
  min-width: 0;
}
.address-lookup-btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 0.45rem 0.7rem;
}
.address-preset-btn {
  flex-shrink: 0;
  width: 2.35rem;
  padding-inline: 0;
}
.address-preset-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.address-preset-btn .icon {
  width: 1.1rem;
  height: 1.1rem;
}
.address-preset-btn .reg-addr-preset-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent); /* LinQiot brand red (--color-primary) */
  letter-spacing: 0;
}
.address-suggestions {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  margin-top: 0.2rem; max-height: 220px; overflow-y: auto;
  box-shadow: 0 4px 10px rgba(16, 42, 67, 0.12);
}
.address-suggestion-item { padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.9rem; }
.address-suggestion-item:hover { background: #f0f4f8; color: var(--accent); }
.address-suggestion-message {
  cursor: default;
  color: var(--muted);
}
.address-suggestion-message:hover { background: transparent; color: var(--muted); }

/* Registratie-werkblad (uren + ritten) — layout/dichtheid */
.reg-chrome {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.reg-chrome-hours,
.reg-chrome-trips {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.reg-chrome-hours {
  background: var(--info-bg);
  border-left: 4px solid var(--info);
}
.reg-chrome-trips {
  background: var(--success-bg);
  border-left: 4px solid var(--success);
}
.reg-chrome-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.reg-chrome-title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.reg-chrome-title-row .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.reg-chrome-hours .reg-chrome-title-row .icon { color: var(--info); }
.reg-chrome-trips .reg-chrome-title-row .icon { color: var(--success); }
.reg-chrome-hours .reg-kicker { color: var(--info); }
.reg-chrome-trips .reg-kicker { color: var(--success); }
.reg-chrome-title h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.reg-kicker {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.reg-chrome-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: end;
}
.reg-user-filter-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.reg-user-filter-caption {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.reg-user-filter-select {
  min-width: 13rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
}
.reg-nav { display: inline-flex; gap: 0.3rem; }

.reg-week-strip {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.35rem 0 0.55rem;
  border-bottom: 1px solid var(--border);
}
.reg-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}
.reg-week-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  padding: 0.45rem 0.4rem 0.55rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 2px solid transparent;
  min-width: 0;
}
.reg-week-tab:hover { color: var(--accent); }
.reg-week-tab.active {
  border-bottom-color: var(--text);
  font-weight: 600;
}
.reg-week-tab.weekend { opacity: 0.72; }
.reg-week-tab.empty .reg-week-value { color: var(--muted); font-weight: 400; }
.reg-week-label { font-size: 0.8rem; color: var(--muted); }
.reg-week-tab.active .reg-week-label { color: var(--text); }
.reg-week-value { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.reg-week-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  border-left: 1px solid var(--border);
  min-width: 5.5rem;
  flex-shrink: 0;
}
.reg-week-total strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Uren-/ritten-weekstrip: info-blauw / success-groen (zelfde taal als facturatie) */
.reg-week-strip-hours,
.reg-week-strip-trips {
  align-items: center;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 1rem;
}
.reg-week-strip-hours {
  background: var(--info-bg);
  border: 1px solid var(--info);
}
.reg-week-strip-trips {
  background: var(--success-bg);
  border: 1px solid var(--success);
}
.reg-week-strip-hours .reg-week-strip-mark,
.reg-week-strip-trips .reg-week-strip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 0.25rem 0 0.1rem;
}
.reg-week-strip-hours .reg-week-strip-mark { color: var(--info); }
.reg-week-strip-trips .reg-week-strip-mark { color: var(--success); }
.reg-week-strip-hours .reg-week-strip-mark .icon,
.reg-week-strip-trips .reg-week-strip-mark .icon {
  width: 1.15rem;
  height: 1.15rem;
}
.reg-week-strip-hours .reg-week-tab:hover { color: var(--info); }
.reg-week-strip-trips .reg-week-tab:hover { color: var(--success); }
.reg-week-strip-hours .reg-week-tab.active { border-bottom-color: var(--info); }
.reg-week-strip-trips .reg-week-tab.active { border-bottom-color: var(--success); }
.reg-week-strip-hours .reg-week-tab.active .reg-week-label { color: var(--info); }
.reg-week-strip-trips .reg-week-tab.active .reg-week-label { color: var(--success); }
.reg-week-strip-hours .reg-week-total {
  border-left-color: color-mix(in srgb, var(--info) 35%, var(--border));
}
.reg-week-strip-trips .reg-week-total {
  border-left-color: color-mix(in srgb, var(--success) 35%, var(--border));
}
.reg-week-strip-hours .reg-week-total strong { color: var(--info); }
.reg-week-strip-trips .reg-week-total strong { color: var(--success); }

.reg-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.65rem;
}
.reg-copy details { position: relative; }
.reg-copy summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  font: inherit;
}
.reg-copy summary::-webkit-details-marker { display: none; }
.reg-copy-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 15;
  min-width: 16rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  box-shadow: 0 6px 18px rgba(16, 42, 67, 0.12);
}
.reg-copy-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}
.reg-copy-menu button:hover { background: #f0f4f8; }
.reg-copy-menu .muted { display: block; margin-top: 0.15rem; }

.reg-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.reg-side-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.05rem;
  position: sticky;
  top: 1rem;
}
.reg-side-form h2 { margin: 0 0 0.85rem; font-size: 1.05rem; }
.reg-side-form .form { max-width: none; gap: 0.65rem; }
.reg-side-form .form-actions { margin-top: 0.85rem; }
.reg-side-form .form-actions .btn-primary { flex: 1; text-align: center; }
.reg-main { min-width: 0; }
.reg-entry-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.35rem; }
.reg-entry {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
/* Ritten-kaartlijst: success-tint parallel aan uren week-grid (info) */
.reg-entry-list-trips .reg-entry {
  border-left: 4px solid var(--success);
  background: color-mix(in srgb, var(--success-bg) 55%, var(--card));
}
.reg-entry-body { min-width: 0; flex: 1; }
.reg-entry-title {
  font-weight: 600;
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}
.reg-entry-meta { font-size: 0.88rem; color: var(--muted); margin: 0.1rem 0; }
.reg-entry-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.reg-tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: #eef2f6;
  color: var(--text);
}
.reg-tag-billable { background: var(--success-bg); color: var(--success); }
.reg-tag-locked { background: var(--warning-bg); color: var(--warning); }
.reg-tag-status { font-weight: 600; }
.reg-tag-status-geregistreerd { background: #eef2f6; color: var(--text); }
.reg-tag-status-gefactureerd { background: #e0f2fe; color: #0369a1; }
.reg-tag-status-afgeboekt { background: #fffbeb; color: var(--warning); }
.reg-tag-status-inbegrepen { background: #eef2f6; color: var(--muted); }
.reg-entry-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}
.reg-entry-amount {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.reg-day-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}
.reg-day-total strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.week-grid.reg-week-grid {
  border-radius: 10px;
  overflow: hidden;
  border-left: 4px solid var(--info);
}
.week-grid.reg-week-grid th,
.week-grid.reg-week-grid td {
  padding: 0.7rem 0.55rem;
  vertical-align: middle;
}
.week-grid.reg-week-grid thead .reg-week-head > th {
  background: var(--info-bg);
  border-bottom: 1px solid var(--border);
}
.week-grid.reg-week-grid .row-project-head .billing-kind {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.week-grid.reg-week-grid th.day-head,
.week-grid.reg-week-grid td.hour-cell {
  font-weight: 600;
  min-width: 5rem;
  width: 5.5rem;
  text-align: center;
  border-left: 1px solid var(--border);
}
.week-grid.reg-week-grid th.day-head {
  vertical-align: bottom;
}
.week-grid.reg-week-grid td.hour-cell {
  font-weight: inherit;
  vertical-align: middle;
}
.week-grid.reg-week-grid th.day-head .day-head-link,
.week-grid.reg-week-grid th.day-head .day-head-stack {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.week-grid.reg-week-grid th.day-head .day-head-link:hover { color: var(--accent); }
.week-grid.reg-week-grid .day-head-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--info);
  white-space: nowrap;
}
.week-grid.reg-week-grid .day-head-total {
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.2;
}
.week-grid.reg-week-grid th.day-head.empty .day-head-total {
  color: var(--muted);
  font-weight: 400;
}
.week-grid.reg-week-grid th.day-head-week,
.week-grid.reg-week-grid tr.hour-row > td.num:not(.hour-cell) {
  border-left: 1px solid var(--border);
  text-align: center;
}
.week-grid.reg-week-grid .hour-cell-controls {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.week-grid.reg-week-grid .hour-static {
  display: inline-block;
  min-width: 4.4rem;
  text-align: center;
}
.week-grid.reg-week-grid thead th.weekend {
  background: color-mix(in srgb, var(--info-bg) 78%, var(--border));
}
.week-grid.reg-week-grid td.weekend { background: var(--color-surface); }
.week-grid .row-project { min-width: 12rem; max-width: 20rem; }
.week-grid .row-project-code-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}
.week-grid .row-project-code { font-weight: 600; }
.row-customer-badge,
.week-grid .row-customer-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #486581;
  background: rgba(72, 101, 129, 0.08);
  color: #334e68;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.week-grid .row-project-activity { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.week-grid .row-project-activity-only {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
  margin-top: 0;
  padding-left: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}
.week-grid tr.project-group-header td {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: none;
}
.week-grid tr.project-group-header-internal td {
  padding: 0.65rem 0.75rem;
  color: #0f4c47;
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.16), rgba(15, 118, 110, 0.05));
  border-left: 4px solid var(--accent);
  border-radius: 6px 0 0 0;
}
.week-grid tr.project-group-header-client td {
  padding: 0.85rem 0.75rem 0.55rem;
  margin-top: 0.5rem;
  color: #334e68;
  background: linear-gradient(90deg, rgba(50, 63, 75, 0.1), rgba(50, 63, 75, 0.02));
  border-left: 4px solid #486581;
  border-top: 10px solid var(--card, #fff);
}
.week-grid tr.hour-row-internal td {
  background: rgba(15, 118, 110, 0.04);
}
.week-grid tr.hour-row-internal td.weekend {
  background: rgba(15, 118, 110, 0.07);
}
.week-grid tr.hour-row-client td.row-project {
  border-left: 4px solid transparent;
}
.week-grid .row-actions-head,
.week-grid .row-actions {
  width: 2.5rem;
  padding-left: 0.25rem;
  padding-right: 0.35rem;
  text-align: center;
  vertical-align: middle;
}
.week-grid .row-actions .action-icon {
  margin: 0 auto;
}
.week-grid .new-row .row-project { display: flex; flex-direction: column; gap: 0.35rem; }
.week-save-status {
  min-height: 1.25rem;
  margin: 0.65rem 0 0.15rem;
}
.week-save-status[data-kind="ok"] { color: var(--success); }
.week-save-status[data-kind="error"] { color: var(--danger); }
.week-save-status[data-kind="pending"] { color: var(--muted); }
.week-save-status[data-kind="warning"] { color: var(--warning); }
.week-grid .new-row .input { font-size: 0.88rem; }
.week-grid.reg-week-grid .time-input {
  border-radius: 8px;
  padding: 0.28rem 0.4rem;
  min-width: 4.4rem;
  justify-content: center;
}
.week-grid.reg-week-grid .time-part { width: 1.65rem; font-variant-numeric: tabular-nums; }
.week-grid.reg-week-grid .row-total {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.week-form .form-actions { margin-top: 0.85rem; }
.week-form .form-actions .btn-primary { min-width: 9rem; }
.week-hint { margin-top: 0.45rem; }

.reg-day-group { margin: 0 0 1rem; }
.reg-day-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.4rem;
}
.reg-day-group-head h3 { margin: 0; font-size: 0.95rem; }
.reg-day-group-head a { color: inherit; text-decoration: none; }
.reg-day-group-head a:hover { color: var(--accent); }
.reg-day-group-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.commute-toggle-bar {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #f3f4f6);
}
.commute-toggle-bar .muted,
.commute-week-hint,
.commute-day-hint { margin: 0.35rem 0 0; }
.commute-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}
.commute-check input:disabled {
  cursor: not-allowed;
}
.commute-check:has(input:disabled) {
  cursor: not-allowed;
  color: var(--muted);
}

@media (max-width: 900px) {
  .reg-workspace { grid-template-columns: 1fr; }
  .reg-side-form { position: static; }
  .reg-week-strip { flex-direction: column; }
  .reg-week-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reg-week-total {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0.25rem;
  }
}

/* Thuiswerken-kalender */
.home-office-cal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}
.home-office-cal-head,
.home-office-cal-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}
.home-office-cal-head { margin-bottom: 0.35rem; }
.home-office-cal-dow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}
.home-office-cal-cell-form { margin: 0; }
.home-office-cal-empty { min-height: 3.25rem; }
.home-office-cal-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.home-office-cal-day:hover {
  border-color: var(--info);
  background: var(--info-bg);
}
.home-office-cal-day.is-weekend {
  background: color-mix(in srgb, var(--muted) 8%, var(--card));
}
.home-office-cal-day.is-today {
  box-shadow: inset 0 0 0 2px var(--info);
}
.home-office-cal-day.is-registered {
  background: var(--info-bg);
  border-color: var(--info);
}
.home-office-cal-num { font-weight: 600; font-size: 0.95rem; }
.home-office-cal-mark {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--info);
}
.home-office-list { margin-top: 1rem; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: end;
  margin: 0.75rem 0 1rem; padding: 0.75rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.filter-bar label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; }
.filter-absence-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  min-width: 10rem;
}
.filter-absence-title { color: var(--muted); font-weight: 600; }
.filter-absence-group .check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin: 0;
}
.filter-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.period-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
}
.period-picker-caption { color: inherit; }
.period-picker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 9.5rem;
  justify-content: space-between;
}
.period-picker-toggle .icon { width: 1rem; height: 1rem; }
.period-picker-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.25rem);
  z-index: 30;
  min-width: 12rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.35rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.period-picker-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.period-picker-option:hover,
.period-picker-option.is-active {
  background: rgba(37, 99, 235, 0.1);
}
.period-picker-option.is-active { font-weight: 600; }

.export-actions {
  display: inline-flex;
  gap: 0.3rem;
  margin-left: 0.25rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--border);
}
.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding-inline: 0.55rem;
}
.export-btn .icon { width: 1.05rem; height: 1.05rem; }
.export-btn-csv { color: var(--color-success); }
.export-btn-csv:hover { color: #047857; border-color: var(--color-success); }
.export-btn-xlsx { color: #217346; }
.export-btn-xlsx:hover { color: #185c37; border-color: #217346; }
.export-btn-pdf { color: var(--color-error); }
.export-btn-pdf:hover { color: #991b1b; border-color: var(--color-error); }
.grid-table th.sortable a { color: inherit; text-decoration: none; }
.grid-table th.sortable a:hover { color: var(--accent); }
.grid-table-resizable {
  table-layout: fixed;
  width: 100%;
}
.grid-table-resizable th {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-table-resizable td {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Defaults zolang er geen opgeslagen breedtes zijn (voorkomt gaten na nieuwe kolommen). */
.grid-table-resizable col[data-col="check"] { width: 2.5rem; }
.grid-table-resizable col[data-col="actions"] { width: 5.5rem; }
.grid-table-resizable col[data-col="number"],
.grid-table-resizable col[data-col="code"] { width: 7rem; }
.grid-table-resizable col[data-col="name"] { width: auto; }
.grid-table-resizable col[data-col="hourly_rate"],
.grid-table-resizable col[data-col="km_rate"],
.grid-table-resizable col[data-col="payment_term"] { width: 8rem; }
.grid-table-resizable col[data-col="status"] { width: 7.5rem; }
.grid-table-resizable col[data-col="notes"] { width: 14rem; }
.grid-table-resizable td[data-col="notes"] { white-space: nowrap; }
.master-filter-bar .filter-actions .column-picker { margin-left: 0.15rem; }
.grid-table .col-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.grid-table .col-resize:hover,
body.col-resizing .grid-table .col-resize {
  background: rgba(37, 99, 235, 0.25);
}
body.col-resizing {
  cursor: col-resize;
  user-select: none;
}
.grid-table .col-hidden {
  display: none !important;
}
.grid-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0.25rem 0 0.5rem;
}
.column-picker {
  position: relative;
}
.column-picker-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
  min-width: 12rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.column-picker-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 4px;
}
.column-picker-item:hover {
  background: #f8fafc;
}
.pager {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; margin-top: 0.75rem;
}

.year-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 1rem; }
.year-tab {
  padding: 0.35rem 0.7rem; border-radius: 6px; border: 1px solid var(--border);
  background: #fff; color: var(--text); text-decoration: none; font-size: 0.9rem;
}
.year-tab.active { background: var(--sidebar); color: #fff; border-color: var(--sidebar); }
.year-tab-amounts {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}
.year-tab.active .year-tab-amounts { color: inherit; opacity: 0.9; }

.report-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem;
}
.report-card {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: inherit;
}
.report-card:hover { border-color: var(--accent); }
.report-card strong {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.report-card strong .icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--reports);
}
.report-card span { color: var(--muted); font-size: 0.88rem; }

.report-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.report-side { display: flex; flex-direction: column; gap: 0.75rem; }
.report-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.report-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.report-panel-head {
  background: var(--color-primary-hover); color: #fff; padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.95rem;
}
/* Paneel levert de chrome; geneste .table niet dubbel omlijsten. */
.report-panel .table {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.report-panel .table-scroll { margin-top: 0; }
.report-matrix th,
.report-matrix td {
  padding: 0.28rem 0.6rem;
  line-height: 1.25;
}
.report-matrix tbody td {
  padding: 0.22rem 0.6rem;
}
.report-matrix th,
.report-matrix td:first-child,
.report-matrix td.num { white-space: nowrap; }
.report-matrix td.num { font-variant-numeric: tabular-nums; }
.report-matrix tbody tr:nth-child(even) { background: var(--color-surface); }
.report-matrix tbody td a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.report-matrix tbody td a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.total-list { list-style: none; margin: 0; padding: 0.5rem 0.75rem; }
.total-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem;
}
.total-list li > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.total-list li > strong {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.total-list li:last-child { border-bottom: 0; }

.report-drill {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--border);
}
.report-drill:hover,
.report-drill:focus-visible {
  color: var(--color-primary-hover, var(--accent));
  text-decoration-color: currentColor;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.report-drill-strong { font-weight: 700; }
.total-list .report-drill { font-weight: 700; }

.report-detail-dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  width: min(72rem, calc(100vw - 2rem));
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}
.report-detail-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}
.report-detail-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}
.report-detail-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.report-detail-dialog-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
}
.report-detail-dialog-body {
  padding: 0.75rem 1.15rem 1.1rem;
  overflow: auto;
  min-height: 4rem;
}
.report-detail-table-wrap { max-height: min(60vh, 32rem); }
.report-detail-table th,
.report-detail-table td {
  white-space: nowrap;
  font-size: 0.88rem;
}
.report-detail-table td:last-child,
.report-detail-table th:last-child {
  white-space: normal;
  min-width: 10rem;
  max-width: 22rem;
}

.report-split { display: flex; flex-direction: column; gap: 1rem; }
.pie-and-table { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; padding: 0.75rem; }
.pie-wrap { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.pie-legend { list-style: none; margin: 0; padding: 0; font-size: 0.78rem; width: 100%; }
.pie-legend li { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.25rem; }
.swatch { width: 0.7rem; height: 0.7rem; border-radius: 2px; flex-shrink: 0; }

.status-badge {
  display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600;
}
.status-badge.running { background: var(--warning-bg); color: var(--warning); }
.status-badge.completed { background: #ecfdf5; color: var(--success); }
.status-badge.failed { background: #fef2f2; color: var(--danger); }
.status-badge.active { background: #ecfdf5; color: var(--success); }
.status-badge.archived,
.status-badge.pending { background: #f1f5f9; color: var(--muted); }
.status-badge.geregistreerd { background: var(--warning-bg); color: var(--warning); }
.status-badge.gefactureerd { background: var(--color-primary-muted); color: var(--color-secondary); }
.status-badge.uitgesteld { background: var(--warning-bg); color: var(--warning); }
.status-badge.jaarafsluiting { background: var(--color-surface); color: var(--success); }
.status-badge.afgeboekt,
.status-badge.inbegrepen { background: var(--color-surface); color: var(--muted); }
.status-badge.over-budget { background: var(--danger-bg); color: var(--danger); }
.status-badge.aangevraagd { background: var(--warning-bg); color: var(--warning); }
.status-badge.goedgekeurd { background: var(--success-bg); color: var(--success); }
.status-badge.afgewezen { background: var(--danger-bg); color: var(--danger); }
.status-badge.geannuleerd { background: var(--color-surface); color: var(--muted); }
.status-badge.hours-budget-almost { background: var(--warning-bg); color: var(--warning); }

.hours-budget-remaining.is-over { color: var(--danger); font-weight: 600; }
.hours-budget-remaining.is-warning { color: var(--warning); font-weight: 600; }
.hours-budget-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hours-budget-bar {
  flex: 1 1 4.5rem;
  min-width: 3.5rem;
  height: 0.45rem;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.hours-budget-bar-fill {
  height: 100%;
  background: var(--success);
  max-width: 100%;
}
.hours-budget-bar-fill.is-warning { background: var(--warning); }
.hours-budget-bar-fill.is-danger { background: var(--danger); }

.master-filter-bar .filter-search { flex: 1 1 220px; min-width: 180px; }
.master-filter-bar .filter-search .input { width: 100%; }
.mono { font-variant-numeric: tabular-nums; font-family: "Cascadia Code", Consolas, monospace; font-size: 0.9em; }
.grid-table tbody td a { color: inherit; font-weight: 600; text-decoration: none; }
.grid-table tbody td a:hover { color: var(--accent); text-decoration: underline; }

/* Canonieke INTERN-rij: vast bovenaan, visueel gescheiden van klantprojecten. */
.grid-table tbody tr.project-row-internal td {
  background: rgba(15, 118, 110, 0.06);
}
.grid-table tbody tr.project-row-internal td:first-child {
  border-left: 4px solid var(--accent);
}
.page-head .toolbar { margin-left: auto; }

.bulk-bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  margin: 0.5rem 0 0.75rem; padding: 0.65rem 0.85rem;
  background: var(--warning-bg); border: 1px solid var(--border); border-radius: 8px;
}
.bulk-bar label {
  display: flex; align-items: center; gap: 0.4rem; margin: 0;
}
.bulk-bar .input { width: auto; min-width: 12rem; }
.col-check { width: 2rem; text-align: center; }
.col-check input { cursor: pointer; }
.log-box {
  background: var(--color-secondary);
  color: var(--color-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 420px;
  overflow-y: auto;
}
.checkbox-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.checkbox-list label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; }

/* Nederlandse gele kentekenplaat */
.license-plate {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  background: #f7c600;
  color: #111;
  border: 2px solid #111;
  border-radius: 4px;
  overflow: hidden;
  font-family: "Din Alternate", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.license-plate-eu {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  background: #003399;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.35rem 0.28rem 0.18rem;
  min-width: 1.15rem;
}
.license-plate-text {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.45rem 0.18rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* —— Dashboard widgets —— */
.page-head-dashboard .dashboard-period-bar {
  margin: 0;
  padding: 0.55rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.dashboard-grid {
  display: grid;
  /* 12-col: quarter=3, third=4, half=6, two_thirds=8, full=12 — keeps existing ratios. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.25rem;
  align-items: stretch;
}
.settings-holiday-block { margin-top: 1.5rem; }

.dashboard-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem 1rem;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  /* Default half-width so shared .dashboard-grid consumers without size-* stay 6/12. */
  grid-column: span 6;
}
.dashboard-widget.size-quarter { grid-column: span 3; }
.dashboard-widget.size-third { grid-column: span 4; }
.dashboard-widget.size-half { grid-column: span 6; }
.dashboard-widget.size-two_thirds { grid-column: span 8; }
.dashboard-widget.size-full { grid-column: 1 / -1; }
.dashboard-widget-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.dashboard-widget-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.dashboard-widget-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dashboard-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.dashboard-week-nav .dashboard-week-label {
  min-width: 11rem;
  max-width: 16rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.25;
}
.dashboard-week-nav .btn {
  padding: 0.2rem 0.45rem;
  line-height: 1;
  min-height: 1.75rem;
}
.dashboard-widget-body { flex: 1; min-height: 0; }
.dashboard-widget-body .stats { margin-top: 0; }
.dashboard-widget-body .stats.kpi-stats {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.stats.kpi-stats .stat.kpi-stat {
  border-left: 4px solid var(--border);
  gap: 0.35rem;
  align-items: center;
  text-align: center;
}
.stats.kpi-stats button.stat.kpi-stat {
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
.stats.kpi-stats button.stat.kpi-stat:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.stats.kpi-stats button.stat.kpi-stat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.stats.kpi-stats .stat.kpi-stat.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.stats.kpi-stats .kpi-stat-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.stats.kpi-stats .kpi-stat-label .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.stat.kpi-stat-hours { border-left-color: var(--info); }
.stat.kpi-stat-hours .kpi-stat-label { color: var(--info); }
.stat.kpi-stat-billable-hours { border-left-color: var(--warning); }
.stat.kpi-stat-billable-hours .kpi-stat-label { color: var(--warning); }
.stat.kpi-stat-non-billable-hours { border-left-color: var(--muted); }
.stat.kpi-stat-non-billable-hours .kpi-stat-label { color: var(--muted); }
.stat.kpi-stat-km { border-left-color: var(--success); }
.stat.kpi-stat-km .kpi-stat-label { color: var(--success); }
.stat.kpi-stat-amount { border-left-color: var(--text); }
.stat.kpi-stat-amount .kpi-stat-label { color: var(--text); }
.stat.kpi-stat-customers { border-left-color: var(--accent); }
.stat.kpi-stat-customers .kpi-stat-label { color: var(--accent); }
.stat.kpi-stat-km-amount { border-left-color: var(--accent-hover); }
.stat.kpi-stat-km-amount .kpi-stat-label { color: var(--accent-hover); }
.kpi-chart-host {
  margin-top: 1rem;
}
.kpi-chart-host .kpi-stacked-chart {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.kpi-stacked-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.kpi-stacked-chart-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.kpi-stacked-chart-plot {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  min-height: 200px;
  height: 220px;
  padding: 0.25rem 0.15rem 0;
  overflow-x: auto;
}
.kpi-stacked-bar-col {
  flex: 1 1 1.75rem;
  min-width: 1.35rem;
  max-width: 3.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.kpi-stacked-bar-track {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}
.kpi-stacked-bar-stack {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}
.kpi-stacked-seg {
  display: block;
  width: 100%;
  min-height: 2px;
  flex-shrink: 0;
}
a.kpi-stacked-seg.is-clickable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
a.kpi-stacked-seg.is-clickable:hover,
a.kpi-stacked-seg.is-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  filter: brightness(1.08);
}
.kpi-stacked-bar-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-stacked-legend {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  font-size: 0.78rem;
  color: var(--text);
}
.kpi-stacked-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.kpi-stacked-legend .swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.dashboard-widget-footnote { margin: 0.5rem 0 0; font-size: 0.85rem; }
.dashboard-norm-scroll {
  max-height: 22rem;
  margin-top: 0;
  overflow-y: auto;
}
.dashboard-norm-table {
  margin: 0;
  font-size: 0.92rem;
}
.dashboard-norm-table th.num,
.dashboard-norm-table td.num {
  white-space: nowrap;
}
.dashboard-rank-list,
.dashboard-recent-list,
.dashboard-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dashboard-rank-list li,
.dashboard-recent-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.dashboard-rank-list li:last-child,
.dashboard-recent-list li:last-child { border-bottom: 0; }
.dashboard-rank-bar {
  display: block;
  height: 4px;
  margin-top: 0.3rem;
  border-radius: 2px;
  background: var(--color-accent, #E64B38);
  opacity: 0.85;
  max-width: 100%;
}
.dashboard-link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.dashboard-link-list a {
  display: block;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface, #f8f8f8);
}
.dashboard-link-list a:hover { border-color: var(--muted); }
.dashboard-leave-stats { grid-template-columns: 1fr 1fr 1fr; max-width: 420px; }
.dashboard-leave-stats .stat {
  align-items: center;
  text-align: center;
}
.dashboard-config {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.dashboard-config-head h2 { margin: 0 0 0.25rem; }
.dashboard-config-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.85rem 0; }
.dashboard-config-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.dashboard-config-row.has-scope {
  grid-template-columns: auto 1fr auto minmax(11rem, auto) auto auto;
}
.dashboard-config-row .widget-title { font-weight: 500; }
.dashboard-config-scope-slot {
  display: block;
  min-width: 11rem;
  visibility: hidden;
  pointer-events: none;
}
.dashboard-config-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 900px) {
  body { flex-direction: column; }
  .shell-body { flex-direction: column; }
  .sidebar { width: 100%; }
  /* Op smalle schermen: menu-knop toont/verbergt de zijbalk (geen rail). */
  body.sidebar-collapsed .sidebar {
    display: none;
  }
  .account-menu-name { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .report-layout, .pie-and-table { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-widget,
  .dashboard-widget.size-quarter,
  .dashboard-widget.size-third,
  .dashboard-widget.size-half,
  .dashboard-widget.size-two_thirds,
  .dashboard-widget.size-full { grid-column: auto; }
  .dashboard-config-row { grid-template-columns: auto 1fr; }
  .dashboard-link-list { grid-template-columns: 1fr; }
  .installment-row { grid-template-columns: 1fr; }
  .fixed-trip-row-grid { grid-template-columns: 1fr; }
  .page-head-billing {
    flex-direction: column;
    align-items: stretch;
  }
  .page-head-billing .toolbar {
    margin-left: 0;
  }
}

/* Uren/omschrijving dialog + klikbare weekcellen */
.time-entry-dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  width: min(28rem, calc(100vw - 2rem));
  max-width: 100%;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}
.time-entry-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}
.time-entry-dialog form {
  padding: 1.1rem 1.15rem 1rem;
  margin: 0;
}
.time-entry-dialog h2 {
  margin: 0 0 0.85rem;
  font-size: 1.1rem;
}
.time-entry-dialog .form-error {
  color: var(--danger);
  font-size: 0.88rem;
  margin: 0.25rem 0 0;
}
.time-entry-dialog .time-input {
  width: 100%;
  justify-content: flex-start;
  min-height: 2.4rem;
  padding: 0.35rem 0.55rem;
}
.hour-cell-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  min-width: 4.4rem;
}
.hour-cell-trigger {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  min-width: 4.4rem;
  padding: 0.28rem 0.4rem;
  cursor: pointer;
  text-align: center;
}
.hour-cell-trigger:hover,
.hour-cell-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #eef2f6;
}
.hour-cell-trigger.muted { color: var(--muted); }
.hour-cell-trigger.has-hours { font-weight: 600; }
button.reg-entry-amount.hour-cell-trigger {
  border: 0;
  background: transparent;
  min-width: 0;
  padding: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  border-radius: 6px;
}
button.reg-entry-amount.hour-cell-trigger:hover,
button.reg-entry-amount.hour-cell-trigger:focus-visible {
  background: var(--color-primary-muted);
  color: var(--accent-hover);
}

.billing-customer {
  margin: 0 0 1.75rem;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.billing-customer + .billing-customer {
  margin-top: 0.35rem;
}
.billing-customer > .dashboard-widget-head {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1rem;
  background: var(--color-secondary);
  color: var(--sidebar-text);
  border-bottom: 1px solid var(--border);
}
.billing-customer-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--color-white);
}
.billing-customer-title .icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-white);
  flex-shrink: 0;
}
.billing-customer-total {
  margin: 0;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
.billing-customer-meta .check {
  color: var(--sidebar-text);
}
.billing-customer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-left: auto;
}
.billing-customer > .dashboard-widget-body {
  padding: 0.65rem 1rem 1rem;
}
.billing-customer-title .billing-group-toggle,
.billing-project summary .billing-group-toggle {
  margin-right: 0.4rem;
  vertical-align: middle;
}
.billing-project { margin: 0.6rem 0; }
.billing-project summary { cursor: pointer; font-weight: 600; }
.billing-collapsible { margin-top: 1.5rem; }
.billing-collapsible > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  cursor: pointer;
}
.billing-collapsible > summary h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
}
.billing-run-bar .billing-run-title {
  flex: 1 1 16rem;
  min-width: 12rem;
}
.billing-run-bar .billing-run-title .input {
  width: 100%;
}
.billing-run-hints {
  margin: -0.35rem 0 1rem;
}
.installment-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.installment-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0.4rem; align-items: end; }
.fixed-trip-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.6rem 0;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fixed-trip-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.billing-hours-km-warning {
  margin: 0.4rem 0;
  color: var(--warning);
}
.billing-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  white-space: nowrap;
}
.billing-kind .icon {
  width: 1rem;
  height: 1rem;
}
.billing-kind-hours { color: var(--info); }
.billing-kind-trips { color: var(--success); }
.billing-kind-subscription { color: var(--subscription); }
.billing-kind-pill {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
}
.billing-kind-hours.billing-kind-pill { background: var(--info-bg); }
.billing-kind-trips.billing-kind-pill { background: var(--success-bg); }
.billing-kind-subscription.billing-kind-pill { background: var(--subscription-bg); }
.billing-block {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.billing-block-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 8px 8px 0 0;
}
.billing-block-label .column-picker {
  margin-left: auto;
  text-transform: none;
  letter-spacing: normal;
}
.billing-block-label .column-picker-toggle {
  font-size: 0.85rem;
  padding: 0.25rem 0.55rem;
}
.billing-block-hours { border-left: 4px solid var(--info); }
.billing-block-hours .billing-block-label { background: var(--info-bg); }
.billing-block-trips { border-left: 4px solid var(--success); }
.billing-block-trips .billing-block-label { background: var(--success-bg); }
.billing-block-mixed { border-left: 4px solid var(--accent); }
.billing-block-mixed .billing-block-label { background: var(--accent-bg); }
.billing-block-subscription { border-left: 4px solid var(--subscription); }
.billing-block-subscription .billing-block-label { background: var(--subscription-bg); }
.billing-block .table {
  border: 0;
  border-radius: 0;
}
.billing-block .table-scroll {
  margin-top: 0;
  border-radius: 0 0 8px 8px;
  overflow-x: auto;
}
.billing-line {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.billing-line .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
}
.billing-line-hours .icon { color: var(--info); }
.billing-line-trips .icon { color: var(--success); }
.billing-line-subscription .icon { color: var(--subscription); }
.stats.billing-stats {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.5rem;
}
.stats.billing-stats .stat {
  padding: 0.5rem 0.65rem;
  gap: 0.15rem;
  min-width: 0;
}
.stats.billing-stats .stat strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats.billing-stats .stat span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  min-width: 0;
}
.stats.billing-stats .stat span .icon {
  width: 0.9rem;
  height: 0.9rem;
}
.stat.billing-stat-customers { border-left: 4px solid var(--accent); }
.stat.billing-stat-customers span { color: var(--accent); }
.stat.billing-stat-hours { border-left: 4px solid var(--info); }
.stat.billing-stat-hours span { color: var(--info); }
.stat.billing-stat-trips { border-left: 4px solid var(--success); }
.stat.billing-stat-trips span { color: var(--success); }
.stat.billing-stat-excl { border-left: 4px solid var(--text); }
.stat.billing-stat-excl span { color: var(--text); }
.stat.billing-stat-incl { border-left: 4px solid var(--accent-hover); }
.stat.billing-stat-incl span { color: var(--accent-hover); }
.stat.billing-stat-invoiced { border-left: 4px solid var(--muted); }
.stat.billing-stat-invoiced span { color: var(--muted); }
.stat.billing-stat-deferred { border-left: 4px solid var(--warning); }
.stat.billing-stat-deferred span { color: var(--warning); }
@media (max-width: 900px) {
  .stats.billing-stats { grid-template-columns: 1fr 1fr; }
}
.billing-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-billing-notice {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.dashboard-billing-notice p { margin: 0; }