/* GEGENEREERD door frontend/build.sh uit frontend/css/*.css — niet direct bewerken. */
/* Aanvullingen voor de React-app. Basisstijl komt uit ../styles.css (gedeeld met de klassieke app). */
#root { min-height: 100vh; }
.rx-boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: var(--bg); }
.rx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rx-skip { position: absolute; left: -9999px; top: 8px; z-index: 100000; background: var(--surface); color: var(--accent); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.rx-skip:focus { left: 8px; }
a.nav-item, a.mob-item, a.btn-sm, a.btn-accent { text-decoration: none; }
a.btn-sm, a.btn-accent { display: inline-flex; align-items: center; gap: 6px; }
button.avatar { padding: 0; color: #fff; font-weight: 800; }
.client-hero h1 { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -1px; margin-bottom: 4px; }
.rx-card-btn { width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; transition: background .15s; }
.rx-card-btn:hover { background: var(--surface2); }
.rx-more { padding: 13px; background: var(--surface); border-radius: 12px; margin-bottom: 14px; }
.rx-fb-count { cursor: pointer; font-size: 11px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); border-radius: 6px; padding: 3px 8px; color: #92400e; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 600px) { .rx-hdr-name { display: none; } }
/* ═══════════════════════════════════════════════════════════════════════════
   NIEUW ONTWERP (26-09-2026) — geldt alleen in de ingelogde React-app
   (Layout zet class "rx-ui" op <html>). Landing/inlogscherm
   houden de oude stijl. Alles is gebaseerd op CSS-variabelen, dus licht én donker.
   ═══════════════════════════════════════════════════════════════════════════ */
:root.rx-ui {
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface2: #f1f5f2;
  --border: #e3e9e5;
  --accent: #1f7a4d;
  --accent-deep: #17613c;
  --accent-soft: #e4f2ea;
  --accent2: #e08552;
  --text: #15241b;
  --muted: #5f6e65;        /* WCAG AA: ≥4.5:1 op bg/surface/surface2 (was #69786f) */
  --danger: #c93c35;       /* ≥4.5:1 als tekst én met witte tekst erop (was #d6453d) */
  --on-accent: #ffffff;    /* tekst op een vlak in accentkleur */
  --accent-hover: #17613c;
  --on-danger: #ffffff;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 20, 0.04), 0 1px 3px rgba(16, 24, 20, 0.05);
  --shadow-md: 0 4px 16px rgba(16, 24, 20, 0.06);
  --shadow-lg: 0 20px 50px rgba(16, 24, 20, 0.14);
  --tone-green-bg: #e4f2ea; --tone-green-fg: #1f7a4d;
  --tone-blue-bg: #e6effb;  --tone-blue-fg: #2f63b6;
  --tone-amber-bg: #fdf3dc; --tone-amber-fg: #955a0a;
  --tone-red-bg: #fde8e7;   --tone-red-fg: #c2362f;
  --tone-purple-bg: #efe9fb; --tone-purple-fg: #6a45b8;
  --tone-grey-bg: #eef1ef;  --tone-grey-fg: #5d6b63;
  --side-w: 232px;
}
:root.rx-ui[data-theme="dark"] {
  --bg: #0f1511;
  --surface: #161e19;
  --surface2: #1d2721;
  --border: #29352e;
  --accent: #46b57f;
  --accent-deep: #2f8f60;
  --accent-soft: rgba(70, 181, 127, 0.14);
  --text: #e6eee9;
  --muted: #98a89f;
  --danger: #f07c75;
  --on-accent: #0b1a12;    /* wit op #46b57f haalt maar 2.6:1; donkere tekst 7:1 */
  --accent-hover: #5fc792;
  --on-danger: #1f0a08;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
  --tone-green-bg: rgba(70, 181, 127, 0.15); --tone-green-fg: #6fd3a0;
  --tone-blue-bg: rgba(96, 150, 235, 0.16);  --tone-blue-fg: #8fb6f5;
  --tone-amber-bg: rgba(230, 170, 60, 0.16); --tone-amber-fg: #f0c064;
  --tone-red-bg: rgba(240, 110, 100, 0.16);  --tone-red-fg: #f59a93;
  --tone-purple-bg: rgba(160, 120, 240, 0.16); --tone-purple-fg: #c2a8f7;
  --tone-grey-bg: rgba(255, 255, 255, 0.06); --tone-grey-fg: #a9b6ae;
}
:root.rx-ui body { font-family: var(--font-ui); background: var(--bg); font-feature-settings: "cv11", "ss01"; }

/* ── Schil: zijbalk + bovenbalk ─────────────────────────────────────────── */
.rx-shell { display: flex; min-height: 100vh; }
.rx-side {
  position: sticky; top: 0; height: 100vh; width: var(--side-w); flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; overflow-y: auto; z-index: 20;
}
.rx-side.collapsed { width: 76px; }
.rx-side.collapsed .nav-label { display: none; }
.rx-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 20px; letter-spacing: -0.4px; }
.rx-brand img { border-radius: 8px; object-fit: cover; }
.rx-side-group { display: flex; flex-direction: column; gap: 2px; }
.rx-side-bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
:root.rx-ui .rx-side .nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; margin: 0;
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; border: 0; background: none;
  width: 100%; cursor: pointer; font-family: var(--font-ui); text-align: left;
}
:root.rx-ui .rx-side .nav-item:hover { background: var(--surface2); color: var(--text); }
:root.rx-ui .rx-side .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
:root.rx-ui .rx-side .nav-item .icon { display: inline-flex; width: 20px; justify-content: center; }
.rx-collapse { font-size: 13px !important; }
.rx-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rx-top {
  position: sticky; top: 0; z-index: 15; height: 64px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 28px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.rx-top-left { min-width: 0; }
.rx-top-right { display: flex; align-items: center; gap: 14px; }
.rx-brand-mobile { display: none; padding: 0; font-size: 18px; }
.rx-main { flex: 1; padding: 28px 32px 48px; width: 100%; min-width: 0; outline: none; }   /* volle breedte naast het menu */
:root.rx-ui .rx-main > .view { display: block; }

/* Gebruikersmenu */
.rx-usermenu { position: relative; }
.rx-user { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 12px; color: var(--text); font-family: var(--font-ui); }
.rx-user:hover { background: var(--surface2); }
.rx-user-av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; }
.rx-user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.rx-user-name { font-size: 13px; font-weight: 600; }
.rx-user-role { font-size: 12px; color: var(--muted); }
.rx-user-chev { color: var(--muted); font-size: 12px; }
.rx-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; }
.rx-menu > button, .rx-menu > a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 0; background: none; font: 500 14px var(--font-ui); color: var(--text); text-decoration: none; cursor: pointer; text-align: left; }
.rx-menu > button:hover, .rx-menu > a:hover { background: var(--surface2); }
.rx-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.rx-menu .rx-menu-danger { color: var(--danger); }

/* ── Paginakop, kaarten, KPI's, pillen, stappen ─────────────────────────── */
.rx-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.rx-crumbs { font-size: 12px; color: var(--muted); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.rx-crumbs a { color: var(--muted); text-decoration: none; }
.rx-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.rx-crumb-sep { margin-right: 6px; }
.rx-title { font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; color: var(--text); font-family: var(--font-display); }
.rx-subtitle { font-size: 14px; color: var(--muted); margin-top: 4px; }
.rx-pagehead-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.rx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.rx-card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.rx-card-action a, .rx-card-action button { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; background: none; border: 0; cursor: pointer; font-family: var(--font-ui); }
.rx-card-body { padding: 16px 20px 20px; }
.rx-grid { display: grid; gap: 20px; }
.rx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rx-grid-2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.rx-stat { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.rx-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rx-stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
.rx-stat-label { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rx-tone-green { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.rx-tone-blue { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.rx-tone-amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.rx-tone-red { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.rx-tone-purple { background: var(--tone-purple-bg); color: var(--tone-purple-fg); }
.rx-tone-grey { background: var(--tone-grey-bg); color: var(--tone-grey-fg); }
.rx-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.rx-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.rx-dot { width: 10px; height: 10px; border-radius: 50%; }
.rx-dot.is-done { background: #2e9d62; }
.rx-dot.is-late { background: #e5534b; }
.rx-dot.is-open { background: var(--border); }
.rx-stepper { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 24px; flex-wrap: wrap; }
.rx-step { display: flex; align-items: center; gap: 8px; }
.rx-step + .rx-step::before { content: ""; width: 40px; height: 1px; background: var(--border); }
.rx-step button { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 2px; font: 500 13px var(--font-ui); color: var(--muted); cursor: pointer; }
.rx-step button:disabled { cursor: default; }
.rx-step-num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); }
.rx-step-current .rx-step-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rx-step-current button { color: var(--text); font-weight: 600; }
.rx-step-done .rx-step-num { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* ── Bestaande componenten in de nieuwe stijl ───────────────────────────── */
:root.rx-ui .view-header { margin-bottom: 24px; align-items: flex-end; }
:root.rx-ui .view-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.6px; }
:root.rx-ui .view-sub { font-size: 14px; color: var(--muted); }
:root.rx-ui .btn-accent, :root.rx-ui .btn-save, :root.rx-ui .btn-primary {
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; padding: 10px 16px; min-height: 40px;
  font: 600 14px var(--font-ui); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 20, 0.12); transition: background 0.15s; opacity: 1;
}
:root.rx-ui .btn-accent:hover, :root.rx-ui .btn-save:hover, :root.rx-ui .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); opacity: 1; }
:root.rx-ui .btn-sm, :root.rx-ui .btn-cancel {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; min-height: 38px;
  padding: 8px 14px; font: 600 13.5px var(--font-ui); box-shadow: var(--shadow-sm);
}
:root.rx-ui .btn-sm:hover, :root.rx-ui .btn-cancel:hover { background: var(--surface2); border-color: var(--border); color: var(--text); }
:root.rx-ui .btn-ghost { border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); border-color: transparent; background: none; padding: 6px 10px; }
:root.rx-ui .btn-ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
:root.rx-ui .btn-danger { border-radius: 8px; font-weight: 600; }
:root.rx-ui .btn-danger-solid { border-radius: 10px; font-weight: 600; color: var(--on-danger); }
:root.rx-ui .rx-main input[type="text"], :root.rx-ui .rx-main input[type="email"], :root.rx-ui .rx-main input[type="password"],
:root.rx-ui .rx-main input[type="search"], :root.rx-ui .rx-main input[type="date"], :root.rx-ui .rx-main input[type="time"],
:root.rx-ui .rx-main input[type="number"], :root.rx-ui .rx-main select, :root.rx-ui .rx-main textarea,
:root.rx-ui .modal input[type="text"], :root.rx-ui .modal input[type="email"], :root.rx-ui .modal input[type="password"],
:root.rx-ui .modal input[type="date"], :root.rx-ui .modal input[type="time"], :root.rx-ui .modal input[type="number"],
:root.rx-ui .modal select, :root.rx-ui .modal textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: 400 14px var(--font-ui); color: var(--text);
}
:root.rx-ui .rx-main input:focus, :root.rx-ui .rx-main select:focus, :root.rx-ui .rx-main textarea:focus,
:root.rx-ui .modal input:focus, :root.rx-ui .modal select:focus, :root.rx-ui .modal textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
:root.rx-ui label { font-size: 13px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
:root.rx-ui .tg-card, :root.rx-ui .template-card, :root.rx-ui .client-route-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
:root.rx-ui .tg-card:hover { transform: none; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-md); }
:root.rx-ui .route-tabs { background: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0; gap: 24px; justify-content: flex-start; margin-bottom: 20px; overflow-x: auto; }
:root.rx-ui .route-tab { flex: 0 0 auto; background: none; border-radius: 0; box-shadow: none; padding: 10px 2px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; font-size: 14px; color: var(--muted); }
:root.rx-ui .route-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: none; box-shadow: none; font-weight: 600; }
:root.rx-ui .route-tab .tab-count { background: var(--surface2); color: var(--muted); font-weight: 600; }
:root.rx-ui .route-tab.active .tab-count { background: var(--accent-soft); color: var(--accent); }
:root.rx-ui .data-table { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13.5px; }
:root.rx-ui .data-table th { background: var(--surface); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 12px 16px; }
:root.rx-ui .data-table td { padding: 12px 16px; }
:root.rx-ui .data-table tbody tr:hover td { background: var(--surface2); }
:root.rx-ui .badge { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; padding: 3px 10px; }
:root.rx-ui .b-gepland { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
:root.rx-ui .b-todo { background: var(--tone-grey-bg); color: var(--tone-grey-fg); }
:root.rx-ui .b-progress { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
:root.rx-ui .b-done { background: var(--tone-green-bg); color: var(--tone-green-fg); }
:root.rx-ui .b-high { background: var(--tone-red-bg); color: var(--tone-red-fg); }
:root.rx-ui .b-med { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
:root.rx-ui .b-low { background: var(--tone-green-bg); color: var(--tone-green-fg); }
:root.rx-ui .b-tpl { background: var(--tone-purple-bg); color: var(--tone-purple-fg); font-size: 11.5px; }
:root.rx-ui .filter-btn { border-radius: 999px; font-weight: 500; font-size: 13px; background: var(--surface); }
:root.rx-ui .filter-btn.active, :root.rx-ui .filter-btn:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
:root.rx-ui .view-toggle { background: var(--surface2); border-radius: 10px; padding: 3px; }
:root.rx-ui .vtbtn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
:root.rx-ui .modal-bg { background: rgba(15, 25, 19, 0.45); backdrop-filter: blur(3px); }
:root.rx-ui .modal { border-radius: 18px; padding: 28px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
:root.rx-ui .modal h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
:root.rx-ui .tag-chip { border-radius: 999px; }
:root.rx-ui .client-hero { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border-radius: var(--radius-lg); }
/* Donker: witte tekst op de lichte accentkleur is te zwak; vaste donkergroene kop (wit ≥5:1). */
:root.rx-ui[data-theme="dark"] .client-hero { background: linear-gradient(135deg, #1f7a4d, #17613c); }
:root.rx-ui .client-hero h1 { font-family: var(--font-display); letter-spacing: -0.6px; }
:root.rx-ui .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
:root.rx-ui .toast { border-radius: 12px; font-family: var(--font-ui); }
:root.rx-ui .notif-bell-btn { width: 40px; height: 40px; border-radius: 10px; }
:root.rx-ui .mini-av, :root.rx-ui .avatar { font-family: var(--font-ui); font-weight: 700; }

/* ── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rx-side { display: none; }
  .rx-brand-mobile { display: flex; }
  .rx-top { padding: 0 16px; height: 58px; }
  .rx-user-text, .rx-user-chev { display: none; }
  .rx-main { padding: 20px 16px 96px; }
  .rx-title, :root.rx-ui .view-title { font-size: 23px; }
  .rx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rx-stat { padding: 14px; gap: 10px; }
  .rx-stat-icon { width: 36px; height: 36px; }
  .rx-step + .rx-step::before { width: 14px; }
  .rx-step-label { display: none; }
  .rx-step-current .rx-step-label { display: inline; }
}
:root.rx-ui #app.rx-shell { display: flex; flex-direction: row; min-height: 100vh; }
/* Zoekbare keuzelijst (UserPicker) in de nieuwe stijl; leesbaar in donker thema. */
:root.rx-ui .cp-trigger { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
:root.rx-ui .cp-trigger-inner, :root.rx-ui .cp-trigger-inner span { color: var(--text); }
:root.rx-ui .cp-placeholder { color: var(--muted) !important; }
:root.rx-ui .cp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
:root.rx-ui .cp-item-name { color: var(--text); }
/* Mobiele onderbalk: altijd passend, lange labels breken netjes af. */
:root.rx-ui .mobile-nav { background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
:root.rx-ui .mobile-nav .mob-item { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 10px; font-weight: 600; text-align: center; line-height: 1.15; text-decoration: none; overflow-wrap: normal; word-break: keep-all; overflow: hidden; text-transform: none; letter-spacing: 0; }
:root.rx-ui .mobile-nav .mob-item.active { color: var(--accent); }
/* ── Toegankelijkheid (26-09-2026) ──────────────────────────────────────── */
/* Tekst op vlakken in accentkleur: var(--on-accent) (donker thema: donkere tekst, wit haalt daar geen 4.5:1).
   Knoppen in client.css/tasks.css gebruiken die variabele zelf. */
:root.rx-ui .tag-chip.active { color: var(--on-accent); }
/* Focus: invoervelden krijgen naast de accentrand een duidelijk zichtbare ring (accent-soft alleen is te zwak). */
:root.rx-ui .rx-main input:focus-visible, :root.rx-ui .rx-main select:focus-visible, :root.rx-ui .rx-main textarea:focus-visible,
:root.rx-ui .modal input:focus-visible, :root.rx-ui .modal select:focus-visible, :root.rx-ui .modal textarea:focus-visible,
:root.rx-ui .gs-input:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Zichtbare focusrand zonder animatie (sommige knoppen hebben "transition: all", waardoor de rand pas later verschijnt). */
:root.rx-ui :focus-visible { transition-property: background-color, color, border-color, opacity, transform; }
:root.rx-ui .rx-side .nav-item:focus-visible, :root.rx-ui .mobile-nav .mob-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Minder beweging: ook animaties/overgangen van de nieuwe onderdelen uit, en geen vloeiend scrollen. */
@media (prefers-reduced-motion: reduce) {
  :root.rx-ui, :root.rx-ui * { scroll-behavior: auto !important; }
  :root.rx-ui *, :root.rx-ui *::before, :root.rx-ui *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
/* ── Laadindicator bij het ophalen van een pagina-chunk (app/pages.tsx) ─────── */
/* Vaste hoogte, zodat de menubalk/onderbalk niet verspringt; spinner verschijnt pas na 150 ms (geen flits). */
:root.rx-ui .rx-pageload { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
:root.rx-ui .rx-pageload-spin {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent);
  opacity: 0; animation: rx-pageload-in 0s linear 150ms forwards, rx-pageload-rot .8s linear infinite;
}
@keyframes rx-pageload-in { to { opacity: 1; } }
@keyframes rx-pageload-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { :root.rx-ui .rx-pageload-spin { animation: none; opacity: 1; } }
/* ═══════════════════════════════════════════════════════════════════════════
   Beheer (gebruikers, organisaties, auditlog, instellingen), notificatiebel,
   handleidingen en profiel — nieuw ontwerp (26-09-2026). Alleen tokens uit 10-design.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Avatars met initialen en pastel icoontegels */
:root.rx-ui .ad-av {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%;
  color: #fff; font-weight: 700; letter-spacing: 0.2px; line-height: 1; font-family: var(--font-ui);
}
:root.rx-ui .ad-av-more { width: 28px; height: 28px; font-size: 11px; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
:root.rx-ui .ad-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 12px; }
:root.rx-ui .ad-stack { display: inline-flex; align-items: center; }
:root.rx-ui .ad-stack > .ad-av { box-shadow: 0 0 0 2px var(--surface); }
:root.rx-ui .ad-stack > .ad-av + .ad-av { margin-left: -6px; }
:root.rx-ui .ad-mini { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
:root.rx-ui .ad-warn {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%;
  background: var(--tone-red-bg); color: var(--tone-red-fg); font-size: 11px; font-weight: 800; vertical-align: middle; flex-shrink: 0;
}

/* Rolpillen in de tone-kleuren */
:root.rx-ui .role-pill { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-top: 0; white-space: nowrap; }
:root.rx-ui .rp-Beheerder { background: var(--tone-purple-bg); color: var(--tone-purple-fg); }
:root.rx-ui .rp-Behandelaar { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
:root.rx-ui .rp-Client { background: var(--tone-green-bg); color: var(--tone-green-fg); }

/* KPI-rij en zoek-/filterbalk */
:root.rx-ui .ad-stats { margin-bottom: 20px; }
:root.rx-ui .ad-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
:root.rx-ui .ad-toolbar .filters { margin: 0; gap: 6px; flex-wrap: wrap; }
:root.rx-ui .ad-toolbar select { width: auto; min-height: 40px; }
:root.rx-ui .ad-search { position: relative; flex: 1 1 240px; min-width: 0; max-width: 420px; }
:root.rx-ui .ad-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: inline-flex; pointer-events: none; }
:root.rx-ui .ad-search input[type="search"] { width: 100%; padding-left: 38px; background: var(--surface2); border-color: transparent; min-height: 40px; }
:root.rx-ui .ad-search input[type="search"]:focus { background: var(--surface); }

/* Lijst als kaart met regels (gebruikers, organisaties) */
:root.rx-ui .ad-rows { list-style: none; margin: 0; padding: 6px 0; }
:root.rx-ui .ad-rows > li + li { border-top: 1px solid var(--border); }
:root.rx-ui .ad-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px; min-height: 64px; cursor: pointer;
  background: none; border: 0; width: 100%; text-align: left; color: var(--text); font: inherit; transition: background 0.15s;
}
:root.rx-ui .ad-row:hover { background: var(--surface2); }
:root.rx-ui .ad-row-static { cursor: default; padding: 0 16px 0 0; }
:root.rx-ui .ad-row-static:hover { background: none; }
:root.rx-ui .ad-row-toggle {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 12px 8px 12px 16px; min-height: 64px;
  background: none; border: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; border-radius: 12px;
}
:root.rx-ui .ad-row-toggle:hover { background: var(--surface2); }
:root.rx-ui .ad-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:root.rx-ui .ad-row-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root.rx-ui .ad-row-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
:root.rx-ui .ad-row-meta { display: flex; flex-direction: column; gap: 3px; width: 200px; flex-shrink: 0; font-size: 12.5px; color: var(--muted); }
:root.rx-ui .ad-row-meta > span { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:root.rx-ui .ad-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
:root.rx-ui .ad-row .role-pill { flex-shrink: 0; width: 112px; text-align: center; }
:root.rx-ui .ad-chev { color: var(--muted); font-size: 20px; line-height: 1; flex-shrink: 0; }
:root.rx-ui .ad-caret { color: var(--muted); font-size: 20px; line-height: 1; width: 12px; transition: transform 0.2s; flex-shrink: 0; }
:root.rx-ui .is-open .ad-caret { transform: rotate(90deg); }
:root.rx-ui .ad-members { padding: 4px 20px 14px 70px; }
:root.rx-ui .ad-member { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--surface2); margin-bottom: 6px; }

/* Kaartweergave gebruikers */
:root.rx-ui .ad-person.person-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px; align-items: flex-start; }
:root.rx-ui .ad-person.person-card:hover { transform: none; box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
:root.rx-ui .ad-person .person-info h4 { font-size: 15px; font-weight: 700; }
:root.rx-ui .ad-person .person-info p { font-size: 12.5px; }

/* Instellingen: e-maillayouts als kaarten */
:root.rx-ui .settings-panel { max-width: 960px; display: flex; flex-direction: column; gap: 20px; }
:root.rx-ui .ad-set-card.settings-purpose-section { margin-bottom: 0; }
:root.rx-ui .ad-set-card .template-card { box-shadow: none; background: var(--surface2); border-color: var(--border); }
:root.rx-ui .ad-set-card .settings-form-row { border-bottom-color: var(--border); }
:root.rx-ui .template-ribbon { background: var(--accent); border-radius: 999px; }

/* Notificatiepaneel (bel) */
:root.rx-ui .notif-panel.ad-notif {
  width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 90px)); padding: 0; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--surface);
}
:root.rx-ui .ad-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
:root.rx-ui .ad-notif-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); }
:root.rx-ui .ad-notif-count { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
:root.rx-ui .ad-notif-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
:root.rx-ui .ad-notif-item { display: flex; align-items: flex-start; gap: 4px; border-radius: 12px; }
:root.rx-ui .ad-notif-item:hover { background: var(--surface2); }
:root.rx-ui .ad-notif-main { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px 10px 10px; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; border-radius: 12px; }
:root.rx-ui .ad-notif-av { position: relative; flex-shrink: 0; }
:root.rx-ui .ad-notif-mark {
  position: absolute; right: -7px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--accent); box-shadow: 0 0 0 1px var(--border); font-size: 11px; line-height: 1;
}
:root.rx-ui .ad-notif-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
:root.rx-ui .ad-notif-task { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
:root.rx-ui .ad-notif-text { display: block; font-size: 13px; color: var(--text); line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; }
:root.rx-ui .ad-notif-date { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
:root.rx-ui .ad-notif-x { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 8px; margin: 8px 6px 0 0; border-radius: 8px; flex-shrink: 0; }
:root.rx-ui .ad-notif-x:hover { background: var(--surface); color: var(--text); }
:root.rx-ui .ad-notif-empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
:root.rx-ui .ad-notif-foot { border-top: 1px solid var(--border); padding: 8px; text-align: center; }
:root.rx-ui .ad-notif-foot .btn-ghost { display: inline-flex; align-items: center; gap: 6px; }

/* Handleidingen */
:root.rx-ui .mn-card { display: flex; flex-direction: column; padding: 20px; gap: 10px; }
:root.rx-ui .mn-card .mn-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
:root.rx-ui .mn-card h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; margin: 0; line-height: 1.3; }
:root.rx-ui .mn-desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root.rx-ui .mn-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
:root.rx-ui .mn-article { max-width: 780px; }

/* Profiel */
:root.rx-ui .profile-layout { max-width: 1120px; gap: 20px; }
:root.rx-ui .pf-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:root.rx-ui .pf-card .rx-card-body { padding: 16px 24px 24px; }
:root.rx-ui .pf-card .rx-card-head { padding: 22px 24px 0; }
:root.rx-ui .pf-title { display: flex; align-items: center; gap: 10px; }
:root.rx-ui .pf-sub { font-size: 13px; color: var(--muted); margin: -4px 0 14px; }
:root.rx-ui .pf-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
:root.rx-ui .pf-hero-name { font-size: 17px; font-weight: 700; }
:root.rx-ui .pf-therapist { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); margin-bottom: 20px; }
:root.rx-ui .pf-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
:root.rx-ui .pf-row:last-child { border-bottom: 0; }
:root.rx-ui label.pf-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-weight: 400; }
:root.rx-ui .pf-label { font-size: 14px; font-weight: 600; color: var(--text); display: block; }
:root.rx-ui .pf-hint { font-size: 12.5px; font-weight: 400; color: var(--muted); display: block; margin-top: 2px; line-height: 1.45; }
:root.rx-ui .pf-check input[type="checkbox"], :root.rx-ui .pf-notif input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; margin-top: 2px; }
:root.rx-ui .pf-notif { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-weight: 500; font-size: 13.5px; }
:root.rx-ui .pf-note { background: var(--surface2); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
:root.rx-ui .pf-danger { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
:root.rx-ui .pf-danger-label { font-size: 12px; font-weight: 700; color: var(--danger); margin-bottom: 10px; }
:root.rx-ui .pf-card .field { margin-bottom: 14px; }
:root.rx-ui .pf-card .field input { width: 100%; }
:root.rx-ui .pf-addr { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }

@media (max-width: 760px) {
  :root.rx-ui .ad-row { padding: 12px 14px; gap: 12px; flex-wrap: wrap; }
  :root.rx-ui .ad-row-meta, :root.rx-ui .ad-chev { display: none; }
  :root.rx-ui .ad-row .role-pill { min-width: 0; }
  :root.rx-ui .ad-row-static { padding: 0 10px 0 0; flex-wrap: nowrap; }
  :root.rx-ui .ad-row-toggle { padding: 12px 6px 12px 12px; gap: 10px; }
  :root.rx-ui .ad-stack { display: none; }
  :root.rx-ui .ad-members { padding: 4px 12px 12px; }
  :root.rx-ui .ad-toolbar { padding: 12px; }
  :root.rx-ui .ad-search { flex-basis: 100%; max-width: none; }
  :root.rx-ui .ad-toolbar .filters { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  :root.rx-ui .ad-toolbar .filter-btn { flex-shrink: 0; }
  :root.rx-ui .pf-card .rx-card-body { padding: 14px 16px 18px; }
  :root.rx-ui .pf-card .rx-card-head { padding: 18px 16px 0; }
  :root.rx-ui .notif-panel.ad-notif { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; }
}

/* Brede tabellen (auditlog): kader om de scrollcontainer, tabel zelf zonder rand */
:root.rx-ui .ad-tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
:root.rx-ui .ad-tablewrap .data-table { border: 0; box-shadow: none; border-radius: 0; }
:root.rx-ui .ad-tablewrap .data-table td { vertical-align: middle; }
/* ═══════════════════════════════════════════════════════════════════════════
   Cliëntportaal (Home, Mijn taken, Mijn routes, feedback-/taakmodals, routekaart)
   — nieuw ontwerp (26-09-2026): rustig, vriendelijk, grote klikvlakken.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Algemeen */
:root.rx-ui .cl-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; }
:root.rx-ui .cl-muted-note { font-size: 13.5px; color: var(--muted); padding: 4px 0 12px; }
:root.rx-ui .cl-section { margin-bottom: 24px; }
:root.rx-ui .cl-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
:root.rx-ui .cl-section-head .cl-section-title { margin-bottom: 0; }
:root.rx-ui .cl-section-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--text); }
:root.rx-ui .cl-section-title svg { color: var(--accent); }
:root.rx-ui .cl-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
:root.rx-ui .cl-link:hover { text-decoration: underline; }
:root.rx-ui .cl-card-title { display: inline-flex; align-items: center; gap: 8px; }
:root.rx-ui .cl-card-title svg { color: var(--accent); }
:root.rx-ui .cl-col { display: flex; flex-direction: column; min-width: 0; }
:root.rx-ui .cl-home-grid { align-items: start; }

/* Hero met begroeting */
:root.rx-ui .client-hero.cl-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; margin-bottom: 20px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: #fff;
  background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, #fff 16%, transparent) 0, transparent 55%), linear-gradient(135deg, var(--accent), var(--accent-deep));
}
:root.rx-ui .cl-hero h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; }
:root.rx-ui .cl-hero p { font-size: 14px; opacity: 0.85; margin-top: 4px; }
:root.rx-ui .cl-hero-icon {
  width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: color-mix(in srgb, #fff 18%, transparent); color: #fff;
}
:root.rx-ui .cl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }

/* Melding (achterstallig) */
:root.rx-ui .cl-note {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 20px; border-radius: var(--radius-md);
  background: var(--tone-amber-bg); color: var(--tone-amber-fg); font-size: 14px;
}
:root.rx-ui .cl-note-icon { display: inline-flex; }
:root.rx-ui .cl-note-link {
  background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; min-height: 32px;
}
:root.rx-ui .cl-note-link.is-on { font-weight: 800; text-decoration-thickness: 2px; }

/* Routekaart op Home */
:root.rx-ui .cl-route { padding: 20px; margin-bottom: 16px; }
:root.rx-ui .cl-route.is-today { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm); }
:root.rx-ui .cl-route.is-past { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
:root.rx-ui .cl-route-top { display: flex; align-items: flex-start; gap: 14px; }
:root.rx-ui .cl-route-date { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
:root.rx-ui .cl-route-date > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
:root.rx-ui .cl-route-name { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; margin: 0; }
:root.rx-ui .cl-route-dist { font-size: 13px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
:root.rx-ui .cl-pct { text-align: center; flex-shrink: 0; padding: 10px 14px; background: var(--surface2); border-radius: 12px; min-width: 84px; }
:root.rx-ui .cl-pct-num { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
:root.rx-ui .cl-pct-lbl { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
:root.rx-ui .cl-bar { height: 8px; background: var(--surface2); border-radius: 999px; margin: 16px 0 6px; overflow: hidden; }
:root.rx-ui .cl-bar > div { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s; }
:root.rx-ui .cl-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 0; margin: 0;
  background: none; border: 0; cursor: pointer; font: 600 14px var(--font-ui); color: var(--accent); text-align: left;
}
:root.rx-ui .cl-caret { display: inline-block; font-size: 20px; line-height: 1; width: 12px; transition: transform 0.2s; }
:root.rx-ui .route-tasks-toggle.open .cl-caret { transform: rotate(90deg); }
:root.rx-ui .rx-card-btn.cl-go {
  width: 100%; min-height: 48px; margin-top: 10px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--accent);
  font: 600 15px var(--font-ui); cursor: pointer;
}
:root.rx-ui .rx-card-btn.cl-go:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
:root.rx-ui .rx-more.cl-go { margin-top: 0; }

/* Takenlijst (Home, kaart "Overige taken") */
:root.rx-ui .cl-tasks { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
:root.rx-ui .cl-task { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface2); min-height: 52px; }
:root.rx-ui .cl-task-chk {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--on-accent); background: var(--surface);
}
:root.rx-ui .cl-task.is-done .cl-task-chk { background: var(--accent); border-color: var(--accent); }
:root.rx-ui .cl-task-title { font-size: 14px; font-weight: 600; color: var(--text); }
:root.rx-ui .cl-task.is-done .cl-task-title { text-decoration: line-through; color: var(--muted); font-weight: 500; }
:root.rx-ui .cl-task-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
:root.rx-ui .cl-task-date { font-size: 12.5px; color: var(--accent); margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
:root.rx-ui .cl-loose { margin-bottom: 16px; }
:root.rx-ui .cl-today-empty {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius-lg); font-size: 14px; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border);
}

/* Mijn taken: kaarten */
:root.rx-ui .cl-page .route-tabs { margin-bottom: 16px; }
:root.rx-ui .cl-filter-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-left: 4px; }
:root.rx-ui .tg-card.cl-tcard { padding: 18px 20px; display: flex; flex-direction: column; border-top-width: 1px; }
:root.rx-ui .cl-tcard-head { display: flex; align-items: flex-start; gap: 12px; }
:root.rx-ui .cl-tcard-title.tg-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; margin: 0; }
:root.rx-ui .cl-tcard-desc.tg-desc { font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.45; }
:root.rx-ui .cl-tcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0; font-size: 12.5px; color: var(--muted); }
:root.rx-ui .cl-tcard-meta > span:not(.badge) { display: inline-flex; align-items: center; gap: 5px; }
:root.rx-ui .tg-footer.cl-tcard-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root.rx-ui .cl-tcard.is-done .cl-tcard-title { color: var(--muted); }
:root.rx-ui .cl-done-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tone-green-fg); }
:root.rx-ui .cl-page .tg-grid.list .tg-card.cl-tcard { flex-direction: column; }

/* Grote, vriendelijke actieknoppen voor cliënten */
:root.rx-ui .cl-page .feedback-btn, :root.rx-ui .cl-page .tg-footer .btn-ghost, :root.rx-ui .cl-rtask-btns .btn-ghost {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; font: 600 13.5px var(--font-ui);
}
:root.rx-ui .cl-page .feedback-btn { padding: 8px 16px; border: 0; background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(16, 24, 20, 0.12); }
:root.rx-ui .cl-page .feedback-btn:hover { background: var(--accent-hover); color: var(--on-accent); border: 0; }
:root.rx-ui .cl-page .feedback-btn.has-feedback { background: var(--tone-amber-bg); color: var(--tone-amber-fg); box-shadow: none; }
:root.rx-ui .cl-page .feedback-btn.has-feedback:hover { background: color-mix(in srgb, var(--tone-amber-fg) 18%, var(--surface)); color: var(--tone-amber-fg); }
:root.rx-ui .cl-page .tg-footer .btn-ghost, :root.rx-ui .cl-rtask-btns .btn-ghost { padding: 8px 12px; }
:root.rx-ui .cl-page .rx-fb-count { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 0; font-size: 13px; font-weight: 600; background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
:root.rx-ui .cl-page .data-table .feedback-btn, :root.rx-ui .cl-page .data-table .btn-ghost { min-height: 36px; }

/* Mijn routes */
:root.rx-ui .client-route-item.cl-ritem { padding: 20px; margin-bottom: 16px; }
:root.rx-ui .client-route-item.cl-ritem.completed { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--surface); }
:root.rx-ui .cl-rhead.client-route-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
:root.rx-ui .cl-rinfo { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 320px; min-width: 0; }
:root.rx-ui .cl-route-name.client-route-name { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
:root.rx-ui .cl-ractions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
:root.rx-ui .cl-ractions .btn-sm, :root.rx-ui .cl-ractions .btn-accent, :root.rx-ui .cl-ractions .btn-danger, :root.rx-ui .cl-ractions .complete-route-btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
:root.rx-ui .cl-ractions .btn-danger { padding: 8px 12px; border-radius: 10px; }
:root.rx-ui .cl-ractions .complete-route-btn {
  padding: 8px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); color: var(--accent); font: 600 13.5px var(--font-ui);
}
:root.rx-ui .cl-ractions .complete-route-btn:hover { background: var(--accent); color: var(--on-accent); }
:root.rx-ui .cl-ractions .complete-route-btn.disabled { opacity: 0.55; cursor: not-allowed; }
:root.rx-ui .cl-ractions .complete-route-btn.disabled:hover { background: var(--accent-soft); color: var(--accent); }
:root.rx-ui .cl-date {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
:root.rx-ui .cl-date.is-late { background: var(--tone-red-bg); color: var(--tone-red-fg); }
:root.rx-ui .cl-date.is-none { background: var(--surface2); color: var(--muted); }
:root.rx-ui .cl-rtasks { margin-top: 4px; }
:root.rx-ui .cl-rtask { margin-bottom: 8px; }
:root.rx-ui .cl-rtask .client-route-task-row { padding: 10px 12px; border-radius: 12px; background: var(--surface2); gap: 12px; flex-wrap: wrap; margin-bottom: 0; }
:root.rx-ui .cl-rtask .client-chk { width: 22px; height: 22px; border-radius: 50%; font-size: 11px; cursor: default; background: var(--surface); }
:root.rx-ui .cl-rtask .client-chk.done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root.rx-ui .cl-rtask-btns { display: flex; gap: 6px; align-items: center; flex-shrink: 0; margin-left: auto; }
:root.rx-ui .cl-page .feedback-bubble { background: var(--tone-amber-bg); color: var(--text); border: 0; border-radius: 12px; padding: 10px 14px; margin: 6px 0 0 34px; font-size: 13px; }
:root.rx-ui .cl-page .feedback-bubble .fb-date { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
:root.rx-ui .cl-page .tab-done-header { color: var(--text); }
:root.rx-ui .cl-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
:root.rx-ui .template-card.cl-tpl { padding: 20px; margin: 0; display: flex; flex-direction: column; }
:root.rx-ui .cl-tpl .template-card-name { font-size: 15.5px; font-weight: 700; }
:root.rx-ui .cl-tpl .template-card-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
:root.rx-ui .cl-tpl .template-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }

/* Modals: feedback, taakweergave, routekaart */
:root.rx-ui .cl-modal-lbl { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
:root.rx-ui .cl-fb-task { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--surface2); margin-bottom: 18px; }
:root.rx-ui .cl-fb-task .cl-tile { width: 40px; height: 40px; }
:root.rx-ui label.cl-fb-check {
  display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text);
}
:root.rx-ui .cl-emojis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
:root.rx-ui .modal .fb-emoji-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 12.5px var(--font-ui); text-align: center;
}
:root.rx-ui .modal .fb-emoji-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--surface2); }
:root.rx-ui .modal .fb-emoji-btn.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
:root.rx-ui .cl-fb { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 8px; border-radius: 12px; background: var(--tone-amber-bg); color: var(--text); line-height: 1.45; }
:root.rx-ui .cl-fb-emoji { font-size: 18px; line-height: 1.2; }
:root.rx-ui .cl-fb-date { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
:root.rx-ui .crm-chip { border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); font-weight: 500; }
:root.rx-ui .crm-chip.pinned { background: var(--tone-amber-bg); color: var(--tone-amber-fg); border-color: transparent; }
:root.rx-ui .crm-chip.done { background: var(--tone-green-bg); color: var(--tone-green-fg); border-color: transparent; }

@media (max-width: 760px) {
  :root.rx-ui .client-hero.cl-hero { padding: 22px 20px; }
  :root.rx-ui .cl-hero h1 { font-size: 22px; }
  :root.rx-ui .cl-hero-icon { width: 48px; height: 48px; }
  :root.rx-ui .cl-stats { gap: 10px; }
  :root.rx-ui .cl-stats .rx-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  :root.rx-ui .cl-stats .rx-stat-icon { width: 32px; height: 32px; border-radius: 10px; }
  :root.rx-ui .cl-stats .rx-stat-value { font-size: 20px; }
  :root.rx-ui .cl-stats .rx-stat-label { font-size: 12px; line-height: 1.3; }
  :root.rx-ui .cl-route, :root.rx-ui .client-route-item.cl-ritem { padding: 16px; }
  :root.rx-ui .cl-route-top { gap: 12px; }
  :root.rx-ui .cl-route-top > .cl-tile, :root.rx-ui .cl-rinfo > .cl-tile { width: 38px; height: 38px; }
  :root.rx-ui .cl-pct { min-width: 0; padding: 8px 10px; }
  :root.rx-ui .cl-pct-num { font-size: 18px; }
  :root.rx-ui .cl-ractions { justify-content: flex-start; width: 100%; }
  :root.rx-ui .cl-rinfo { flex-basis: 100%; }
  :root.rx-ui .cl-rtask-btns { width: 100%; margin-left: 34px; }
  :root.rx-ui .cl-page .feedback-bubble { margin-left: 0; }
  :root.rx-ui .cl-emojis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root.rx-ui .cl-tpl-grid { grid-template-columns: minmax(0, 1fr); }
  :root.rx-ui .cl-page .ad-toolbar .filters { flex-wrap: wrap; overflow: visible; }
  :root.rx-ui .cl-tcard-foot > button { flex: 1 1 auto; }
  :root.rx-ui .cl-page .route-tabs { flex-wrap: nowrap; gap: 18px; }
}

/* Donker thema: hero iets gedempter zodat witte tekst goed leesbaar blijft */
:root.rx-ui[data-theme="dark"] .client-hero.cl-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-deep) 80%, var(--bg)), color-mix(in srgb, var(--accent-deep) 45%, var(--bg)));
}

/* ── Spraakberichten bij feedback (VoiceRecorder, VoicePlayer) ── */
.vr { display: flex; flex-direction: column; gap: 8px; }
.vr-start { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 12px 16px; border-radius: 12px; border: 2px dashed var(--accent); background: transparent; color: var(--accent);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.vr-start:hover:not(:disabled) { background: var(--accent-soft); }
.vr-start:disabled { opacity: .6; cursor: default; }
.vr-live { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 8px 8px 16px; border-radius: 12px;
  background: var(--tone-red-bg); }
.vr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: vr-pulse 1.2s ease-in-out infinite; flex-shrink: 0; }
@keyframes vr-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .vr-dot { animation: none; } }
.vr-time { flex: 1; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-max { font-size: 13px; font-weight: 400; color: var(--muted); }
.vr-stop { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 10px;
  background: var(--danger); color: var(--on-danger); font: inherit; font-weight: 700; cursor: pointer; }
.vr-done { display: flex; flex-direction: column; gap: 6px; }
.vr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vr-len { flex: 1; font-size: 13px; color: var(--muted); }
.vr-note { font-size: 13px; color: var(--muted); }
.vr-err, .vp-err { font-size: 13px; color: var(--danger); }
.vp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.vp-open { display: flex; }
.vp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.vp-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vp-btn.vp-sm { padding: 2px 8px; font-size: 11px; gap: 4px; }
.vp-dur { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-audio { width: 100%; max-width: 360px; height: 40px; }
.vp-audio.vp-sm { max-width: 240px; height: 32px; }
/* ── Cliëntenlijst en cliëntpagina (features/staff/clients) ─────────────────── */
:root.rx-ui .rx-cl-muted { color: var(--muted); }
:root.rx-ui .rx-cl-num { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
:root.rx-ui .rx-cl-av {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #fff; font-weight: 700; letter-spacing: 0.3px; font-family: var(--font-ui);
}

/* Filterbalk */
:root.rx-ui .rx-cl-filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 20px; overflow: hidden; }
:root.rx-ui .rx-cl-filters-main { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; }
:root.rx-ui .rx-cl-filters-adv { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface2); }

/* Lijst: kaart met rijen */
:root.rx-ui .rx-cl-list { overflow: hidden; }
:root.rx-ui .rx-cl-row {
  display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr) 44px;
  gap: 16px; align-items: center; padding: 14px 20px; font-size: 13.5px;
}
:root.rx-ui .rx-cl-head { padding-top: 12px; padding-bottom: 12px; font-size: 12.5px; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border); }
:root.rx-ui .rx-cl-item { border-bottom: 1px solid var(--border); }
:root.rx-ui .rx-cl-item:last-child { border-bottom: 0; }
:root.rx-ui .rx-cl-item > .rx-cl-row { cursor: pointer; transition: background 0.12s; }
:root.rx-ui .rx-cl-item > .rx-cl-row:hover, :root.rx-ui .rx-cl-item.open > .rx-cl-row { background: var(--surface2); }
:root.rx-ui .rx-cl-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
:root.rx-ui .rx-cl-name { font-weight: 600; font-size: 14.5px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
:root.rx-ui .rx-cl-name:hover { color: var(--accent); text-decoration: underline; }
:root.rx-ui .rx-cl-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root.rx-ui .rx-cl-cell { min-width: 0; white-space: nowrap; }
:root.rx-ui .rx-cl-prog { display: flex; align-items: center; gap: 10px; }
:root.rx-ui .rx-cl-only-m { display: none; }
:root.rx-ui .rx-cl-actions { display: flex; justify-content: flex-end; }
:root.rx-ui .rx-cl-chev {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
:root.rx-ui .rx-cl-chev:hover { color: var(--accent); border-color: var(--accent); }
:root.rx-ui .rx-cl-body { padding: 4px 20px 20px; background: var(--surface2); }
:root.rx-ui .rx-cl-body .vg-route-block { background: var(--surface); }

/* Route- en takenblokken (bestaande vg-*-markup) in de nieuwe stijl */
:root.rx-ui .vg-route-block { border-radius: var(--radius-md); background: var(--surface); }
:root.rx-ui .vg-route-header { background: var(--surface); }
:root.rx-ui .vg-route-name { font-weight: 700; }
:root.rx-ui .vg-route-meta { font-size: 12px; margin-top: 2px; }
:root.rx-ui .vg-task-table { font-size: 13px; }
:root.rx-ui .vg-task-table tr:hover td { background: var(--surface2); }

/* Cliëntpagina: kop */
:root.rx-ui .rx-cl-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
:root.rx-ui .rx-cl-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
:root.rx-ui .rx-cl-id { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 320px; }
:root.rx-ui .rx-cl-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
:root.rx-ui .rx-cl-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
:root.rx-ui .rx-cl-live { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
:root.rx-ui .rx-cl-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
:root.rx-ui .rx-cl-kpis { margin-bottom: 8px; }

/* Cliëntpagina: kaarten */
:root.rx-ui .rx-cl-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:root.rx-ui .rx-cl-ul { list-style: none; margin: 0; padding: 0; }
:root.rx-ui .rx-cl-ul > li + li { border-top: 1px solid var(--border); }
:root.rx-ui .rx-cl-li {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 4px; background: none; border: 0; text-align: left;
  cursor: pointer; color: var(--text); font-family: var(--font-ui); border-radius: 10px;
}
:root.rx-ui .rx-cl-li:hover { background: var(--surface2); }
:root.rx-ui .rx-cl-li-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
:root.rx-ui .rx-cl-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root.rx-ui .rx-cl-li-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
:root.rx-ui .rx-cl-li-meta { font-size: 12.5px; color: var(--muted); }
:root.rx-ui .rx-cl-fb { align-items: flex-start; }
:root.rx-ui .rx-cl-emoji { width: 44px; height: 44px; border-radius: 12px; background: var(--tone-amber-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
:root.rx-ui .rx-cl-quote { font-size: 13.5px; color: var(--text); margin-top: 4px; line-height: 1.45; overflow-wrap: anywhere; }
:root.rx-ui .rx-cl-empty { color: var(--muted); font-size: 13.5px; margin: 4px 0; }
:root.rx-ui .rx-cl-donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
:root.rx-ui .rx-cl-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
:root.rx-ui .rx-cl-legend li { display: flex; align-items: center; gap: 10px; }
:root.rx-ui .rx-cl-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
:root.rx-ui .rx-cl-tabs .route-tabs { flex-wrap: nowrap; }
:root.rx-ui .rx-cl-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

@media (max-width: 1100px) {
  :root.rx-ui .rx-cl-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 44px; }
  :root.rx-ui .rx-cl-row > .rx-cl-last, :root.rx-ui .rx-cl-head > div:nth-child(5) { display: none; }
}
@media (max-width: 760px) {
  :root.rx-ui .rx-cl-row.rx-cl-head { display: none; }
  :root.rx-ui .rx-cl-row { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 14px 16px; }
  :root.rx-ui .rx-cl-row > .rx-cl-who { flex: 1 1 calc(100% - 60px); order: 1; }
  :root.rx-ui .rx-cl-row > .rx-cl-actions { order: 2; }
  :root.rx-ui .rx-cl-row > .rx-cl-cell { order: 3; font-size: 13px; }
  :root.rx-ui .rx-cl-row > .rx-cl-prog { gap: 6px; }
  :root.rx-ui .rx-cl-row > .rx-cl-last { display: block; order: 4; flex-basis: 100%; font-size: 12.5px; }
  :root.rx-ui .rx-cl-tabs .route-tabs { gap: 16px; }
  :root.rx-ui .rx-cl-only-m { display: inline; }
  :root.rx-ui .rx-cl-body { padding: 4px 12px 16px; }
  :root.rx-ui .rx-cl-id { gap: 14px; }
  :root.rx-ui .rx-cl-id .rx-cl-av { width: 56px !important; height: 56px !important; font-size: 21px !important; }
  :root.rx-ui .rx-cl-hero-actions > * { flex: 1 1 auto; }
  :root.rx-ui .rx-cl-filters-main > input, :root.rx-ui .rx-cl-filters-main > select { max-width: none !important; flex-basis: 100% !important; }
}
:root.rx-ui .vg-task-table th { padding: 8px 16px; }
:root.rx-ui .vg-task-table .badge { white-space: nowrap; }

/* Spraakbericht onder een feedbackregel op de cliëntpagina */
:root.rx-ui .rx-cl-voice { padding: 0 12px 10px 62px; }
@media (max-width: 560px) { :root.rx-ui .rx-cl-voice { padding-left: 12px; } }
/* Dashboard (behandelaar/beheerder) — nieuw ontwerp, paneel 1. Alle regels onder :root.rx-ui. */
:root.rx-ui .rx-dash .rx-dash-tiles { margin-bottom: 16px; }
:root.rx-ui .rx-dash .rx-dash-tiles + .rx-grid:not(.rx-dash-tiles) { margin-top: 24px; }
:root.rx-ui .rx-dash .rx-dash-row2 { margin-bottom: 20px; align-items: start; }
:root.rx-ui .rx-dash .rx-dash-grid-eq { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; align-items: start; }
:root.rx-ui .rx-dash-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:root.rx-ui .rx-dash .rx-stat-label .info-tip { margin-left: 4px; }
:root.rx-ui .rx-dash .rx-card-title .info-tip { margin-left: 6px; }
:root.rx-ui .rx-dash-date::first-letter { text-transform: uppercase; }

/* Initialen-avatar */
:root.rx-ui .rx-dash-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; flex-shrink: 0; letter-spacing: .2px; }

/* Tabellen in kaarten: geen eigen rand/schaduw */
:root.rx-ui .rx-dash-table { width: 100%; border: 0; box-shadow: none; border-radius: 0; background: transparent; margin-top: 8px; border-collapse: collapse; }
:root.rx-ui .rx-dash-table th { text-align: left; border-bottom: 1px solid var(--border); padding: 10px 20px; }
:root.rx-ui .rx-dash-table td { border-bottom: 1px solid var(--border); padding: 12px 20px; vertical-align: middle; }
:root.rx-ui .rx-dash-table tbody tr:last-child td { border-bottom: 0; }
:root.rx-ui .rx-dash-table .num { text-align: right; font-variant-numeric: tabular-nums; }
:root.rx-ui .rx-dash-scroll { overflow-x: auto; }
:root.rx-ui .rx-dash-clients .rx-dash-act { text-align: right; white-space: nowrap; }
:root.rx-ui .rx-dash-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
:root.rx-ui .rx-dash-name { font-weight: 600; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
:root.rx-ui .rx-dash-sub { font-size: 12.5px; color: var(--muted); }
:root.rx-ui .rx-dash-muted { color: var(--muted); font-size: 13px; white-space: nowrap; }
:root.rx-ui .rx-dash-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
:root.rx-ui .rx-dash-link { color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; padding: 6px 8px; border-radius: 8px; }
:root.rx-ui .rx-dash-link:hover, :root.rx-ui .rx-dash-link:focus-visible { background: var(--accent-soft); }
:root.rx-ui .rx-dash-more { padding: 10px 20px 16px; font-size: 12.5px; font-weight: 600; }
:root.rx-ui .rx-dash-more a { color: var(--accent); text-decoration: none; }
:root.rx-ui .rx-dash-count { display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 6px; border-radius: 999px; background: var(--tone-grey-bg); color: var(--tone-grey-fg); font-size: 12px; font-weight: 600; text-align: center; }
:root.rx-ui .rx-dash-show-sm { display: none; }

/* Recente feedback */
:root.rx-ui .rx-dash-fb { list-style: none; margin: 0; padding: 0; }
:root.rx-ui .rx-dash-fb li + li { border-top: 1px solid var(--border); }
:root.rx-ui .rx-dash-fb-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; color: inherit; text-decoration: none; border-radius: 10px; }
:root.rx-ui .rx-dash-fb li:first-child .rx-dash-fb-item { padding-top: 2px; }
:root.rx-ui button.rx-dash-fb-item { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
:root.rx-ui a.rx-dash-fb-item:hover .rx-dash-name, :root.rx-ui a.rx-dash-fb-item:focus-visible .rx-dash-name,
:root.rx-ui button.rx-dash-fb-item:hover .rx-dash-name, :root.rx-ui button.rx-dash-fb-item:focus-visible .rx-dash-name { color: var(--accent); }
:root.rx-ui .rx-dash-fb-text { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text); background: var(--surface2); border-radius: 10px; padding: 7px 10px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root.rx-ui .rx-dash-emoji { font-size: 15px; line-height: 1; }

/* Lijsten "Mijn taken" en "Recente routes" */
:root.rx-ui .rx-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
:root.rx-ui .rx-dash-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; margin: 0 -10px; width: calc(100% + 20px); background: none; border: 0; border-radius: 10px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
:root.rx-ui .rx-dash-row:hover, :root.rx-ui .rx-dash-row:focus-visible { background: var(--surface2); }
:root.rx-ui .rx-dash-row .badge { white-space: nowrap; }

/* Trendgrafiek */
:root.rx-ui .rx-dash-chart { position: relative; height: 130px; margin: 18px 0 6px; }
:root.rx-ui .rx-dash-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:root.rx-ui .rx-dash-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
:root.rx-ui .rx-dash-area { fill: var(--accent); opacity: .12; }
:root.rx-ui .rx-dash-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
:root.rx-ui .rx-dash-pt { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent); transform: translate(-50%, -50%); box-sizing: border-box; }
:root.rx-ui .rx-dash-pt-val { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
:root.rx-ui .rx-dash-axis { display: grid; text-align: center; font-size: 10.5px; color: var(--muted); }

@media (max-width: 700px) {
  :root.rx-ui .rx-dash .rx-dash-grid-eq { grid-template-columns: minmax(0, 1fr); }
  :root.rx-ui .rx-dash-hide-sm { display: none; }
  :root.rx-ui .rx-dash-show-sm { display: block; }
  :root.rx-ui .rx-dash-table th, :root.rx-ui .rx-dash-table td { padding-left: 14px; padding-right: 14px; }
  /* Cliëntentabel als compacte lijst: naam + voortgang links, pijl rechts */
  :root.rx-ui .rx-dash-clients thead { display: none; }
  :root.rx-ui .rx-dash-clients, :root.rx-ui .rx-dash-clients tbody { display: block; }
  :root.rx-ui .rx-dash-clients tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--border); padding: 10px 14px; }
  :root.rx-ui .rx-dash-clients tbody tr:last-child { border-bottom: 0; }
  :root.rx-ui .rx-dash-clients td { display: block; border: 0; padding: 0; }
  :root.rx-ui .rx-dash-clients td.rx-dash-hide-sm { display: none; }
  :root.rx-ui .rx-dash-clients td:nth-child(3) { grid-column: 1; grid-row: 2; padding: 6px 0 0 46px; }
  :root.rx-ui .rx-dash-clients td.rx-dash-act { grid-column: 2; grid-row: 1 / span 2; }
  :root.rx-ui .rx-dash-clients .rx-dash-name { white-space: nowrap; }
  :root.rx-ui .rx-dash .rx-pagehead-actions { width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Kennisitems (features/knowledge): pagina, lees-/bewerkvenster, koppelveld, "Lees ook" (cliënt).
   Alleen eigen kn-klassen; volgorde t.o.v. de andere css-bestanden maakt niet uit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pagina en kaarten */
:root.rx-ui .kn-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
:root.rx-ui .kn-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-width: 0; }
:root.rx-ui .kn-card-head { display: flex; align-items: flex-start; gap: 12px; }
:root.rx-ui .kn-card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
:root.rx-ui .kn-card-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
:root.rx-ui .kn-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root.rx-ui .kn-card-meta, :root.rx-ui .kn-view-sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
:root.rx-ui .kn-card-meta span, :root.rx-ui .kn-view-sub span { display: inline-flex; align-items: center; gap: 4px; }
:root.rx-ui .kn-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
:root.rx-ui .kn-card-foot .btn-danger { margin-left: auto; }
:root.rx-ui .kn-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
:root.rx-ui .kn-linkbtn:hover, :root.rx-ui .kn-linkbtn:focus-visible { color: var(--accent); text-decoration: underline; }
:root.rx-ui .kn-labels { display: inline-flex; flex-wrap: wrap; gap: 4px; }
:root.rx-ui .kn-chip { font-size: 11px; padding: 2px 8px; }

/* Leesweergave medewerker */
:root.rx-ui .kn-view-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -8px 0 10px; }
:root.rx-ui .kn-view-sub { margin-bottom: 18px; }
:root.rx-ui .kn-readonly-note { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }

/* Opgemaakte tekst (Md) */
:root.rx-ui .kn-body { font-size: 15px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
:root.rx-ui .kn-body p { margin: 0 0 12px; }
:root.rx-ui .kn-body h3 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
:root.rx-ui .kn-body h4 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; }
:root.rx-ui .kn-body ul, :root.rx-ui .kn-body ol { margin: 0 0 12px; padding-left: 22px; }
:root.rx-ui .kn-body li { margin-bottom: 4px; }
:root.rx-ui .kn-body code { font-size: 0.9em; background: var(--surface2); border-radius: 5px; padding: 1px 5px; }
:root.rx-ui .kn-body a { color: var(--accent); text-decoration: underline; }
:root.rx-ui .kn-body > :last-child { margin-bottom: 0; }
:root.rx-ui .kn-body-lg { font-size: 18px; line-height: 1.8; }
:root.rx-ui .kn-body-lg h3 { font-size: 20px; }
:root.rx-ui .kn-body-lg h4 { font-size: 18px; }
:root.rx-ui .kn-empty-text { color: var(--muted); font-style: italic; margin: 0; }

/* Bewerken */
:root.rx-ui .kn-desc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
:root.rx-ui .kn-desc-head label { margin-bottom: 0; }
:root.rx-ui .kn-seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
:root.rx-ui .kn-seg button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); padding: 5px 12px; border-radius: 999px; cursor: pointer; min-height: 30px; }
:root.rx-ui .kn-seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
:root.rx-ui .kn-textarea { min-height: 200px; font-family: var(--font-ui); font-size: 14px; line-height: 1.6; }
:root.rx-ui .kn-preview { min-height: 200px; max-height: 50vh; overflow-y: auto; border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface2); }
:root.rx-ui .kn-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
:root.rx-ui .kn-hint code { font-size: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 0 4px; white-space: nowrap; }
:root.rx-ui .kn-switch { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; margin-bottom: 4px; }
:root.rx-ui .kn-switch input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
:root.rx-ui .kn-switch-title { display: block; font-weight: 600; font-size: 14px; }
:root.rx-ui .kn-switch-hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* Koppelveld (wizard, sets, programma's) */
:root.rx-ui .kn-picker { position: relative; }
:root.rx-ui .kn-picker-search { max-width: none; }
:root.rx-ui .kn-picked { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
:root.rx-ui .kn-picked-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--text); font-size: 13px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
:root.rx-ui .kn-picked-chip svg { color: var(--accent); flex-shrink: 0; }
:root.rx-ui .kn-picked-chip.is-off { background: var(--tone-amber-bg); border-color: transparent; }
:root.rx-ui .kn-picked-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:root.rx-ui .kn-picked-chip button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; }
:root.rx-ui .kn-picked-chip button:hover, :root.rx-ui .kn-picked-chip button:focus-visible { background: var(--surface); color: var(--danger); }
:root.rx-ui .kn-off-note { font-size: 11px; font-weight: 600; color: var(--tone-amber-fg); background: var(--tone-amber-bg); border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
:root.rx-ui .kn-picked-chip .kn-off-note { margin-left: 0; background: transparent; padding: 0; }
:root.rx-ui .kn-hits { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-md); }
:root.rx-ui .kn-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); min-height: 40px; }
:root.rx-ui .kn-hit:hover, :root.rx-ui .kn-hit:focus-visible { background: var(--accent-soft); outline: none; }
:root.rx-ui .kn-hit-title { font-size: 13.5px; font-weight: 600; }
:root.rx-ui .kn-hit-labels { font-size: 11.5px; color: var(--muted); }
:root.rx-ui .kn-hits-none { padding: 8px 10px; font-size: 12.5px; color: var(--muted); }

/* Icoon op taakkaarten/-lijsten */
:root.rx-ui .kn-mark { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--tone-amber-fg); vertical-align: middle; }

/* Medewerker: blok in de taakweergave */
:root.rx-ui .kn-taskblock { margin-top: 16px; }
:root.rx-ui .kn-taskblock-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
:root.rx-ui .kn-taskblock ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
:root.rx-ui .kn-taskblock li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface2); }
:root.rx-ui .kn-taskblock .kn-linkbtn { font-weight: 600; font-size: 14px; }
:root.rx-ui .kn-readstate { margin-left: auto; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
:root.rx-ui .kn-readstate.is-read { color: var(--tone-green-fg); font-weight: 600; }

/* Cliënt: "Lees ook" */
:root.rx-ui .kn-readalso { margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--tone-amber-bg); }
:root.rx-ui .kn-readalso-lbl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--tone-amber-fg); margin-bottom: 8px; }
:root.rx-ui .kn-readalso ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
:root.rx-ui .kn-readalso-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
:root.rx-ui .kn-readalso-btn:hover, :root.rx-ui .kn-readalso-btn:focus-visible { border-color: var(--accent); }
:root.rx-ui .kn-readalso-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
:root.rx-ui .kn-read-tick { color: var(--tone-green-fg); font-weight: 800; }
:root.rx-ui .kn-readalso-arrow { color: var(--muted); font-size: 20px; line-height: 1; }
:root.rx-ui .kn-readalso.is-compact { margin: 8px 0 2px; padding: 8px 10px; }
:root.rx-ui .kn-readalso.is-compact .kn-readalso-lbl { font-size: 12px; margin-bottom: 6px; }
:root.rx-ui .kn-readalso.is-compact .kn-readalso-btn { min-height: 40px; font-size: 13.5px; padding: 6px 10px; }

/* Cliënt: leesvenster */
:root.rx-ui .kn-reader-kicker { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--tone-amber-fg); letter-spacing: .3px; text-transform: uppercase; margin-bottom: 4px; }
:root.rx-ui .kn-reader { max-width: 62ch; }
:root.rx-ui .kn-reader-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
:root.rx-ui .kn-reader-foot .btn-cancel { margin-left: auto; }
:root.rx-ui .kn-read-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; min-height: 48px; padding: 12px 20px; }
:root.rx-ui .kn-read-done { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--tone-green-fg); background: var(--tone-green-bg); padding: 10px 16px; border-radius: 999px; }
:root.rx-ui .kn-err { font-size: 13px; color: var(--danger); margin-top: 12px; }

@media (max-width: 600px) {
  :root.rx-ui .kn-grid { grid-template-columns: 1fr; }
  :root.rx-ui .kn-card { padding: 16px; }
  :root.rx-ui .kn-reader-foot > * { flex: 1 1 100%; justify-content: center; margin-left: 0; }
  :root.rx-ui .kn-reader-foot .btn-cancel { margin-left: 0; }
  :root.rx-ui .kn-readstate { margin-left: 0; flex-basis: 100%; }
  :root.rx-ui .kn-body-lg { font-size: 17px; }
}
/* Programma's (features/staff/programs): tweekoloms-indeling, compacte kaarten, detail en zijkaart. */
:root.rx-ui .prg-split { display: grid; grid-template-columns: minmax(260px, 310px) minmax(0, 1fr); gap: 20px; align-items: start; }
:root.rx-ui .prg-list { padding: 18px; }
:root.rx-ui .prg-toolbar { display: flex; flex-direction: column; gap: 12px; }
:root.rx-ui .prg-search { position: relative; display: flex; align-items: center; }
:root.rx-ui .prg-search .icon, :root.rx-ui .prg-search svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
:root.rx-ui .rx-main .prg-search input[type="search"] { width: 100%; box-sizing: border-box; padding-left: 38px; background: var(--surface2); border-color: transparent; }
:root.rx-ui .rx-main .prg-search input[type="search"]:focus { background: var(--surface); border-color: var(--accent); }
:root.rx-ui .prg-list .route-tabs, :root.rx-ui .prg-main .route-tabs { gap: 14px; flex-wrap: nowrap; }
:root.rx-ui .prg-list .route-tab { font-size: 13px; }
:root.rx-ui .prg-items { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
:root.rx-ui .prg-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-ui); cursor: pointer;
  transition: border-color .15s, background .15s;
}
:root.rx-ui .prg-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--surface2); }
:root.rx-ui .prg-item.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
:root.rx-ui .prg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root.rx-ui .prg-item-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
:root.rx-ui .prg-item-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
:root.rx-ui .prg-globe { color: var(--tone-purple-fg); }
:root.rx-ui .prg-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
:root.rx-ui .prg-icon-lg { width: 48px; height: 48px; border-radius: 14px; }

:root.rx-ui .prg-detail { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
:root.rx-ui .prg-main { padding: 22px 24px 24px; }
:root.rx-ui .prg-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
:root.rx-ui .prg-title { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
:root.rx-ui .prg-meta { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
:root.rx-ui .prg-actions { flex-shrink: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
:root.rx-ui .prg-actions .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
:root.rx-ui .prg-actions .btn-danger { min-height: 38px; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; }
:root.rx-ui .prg-back { margin: -6px 0 10px -8px; }
:root.rx-ui .prg-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
:root.rx-ui .prg-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
:root.rx-ui .prg-empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
:root.rx-ui .prg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
:root.rx-ui .prg-stats .rx-stat { padding: 14px 16px; box-shadow: none; }
:root.rx-ui .prg-stats .rx-stat-icon { width: 38px; height: 38px; }
:root.rx-ui .prg-bars { display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
:root.rx-ui .prg-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 34px; flex: 1; }
:root.rx-ui .prg-bar { width: 100%; max-width: 36px; border-radius: 6px 6px 3px 3px; background: var(--accent); opacity: .85; }
:root.rx-ui .prg-bar-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
:root.rx-ui .prg-bar-lbl { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
:root.rx-ui .prg-table-wrap { overflow-x: auto; }
:root.rx-ui .prg-table { width: 100%; box-shadow: none; }
:root.rx-ui .prg-table td { vertical-align: top; }
:root.rx-ui .prg-clients { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
:root.rx-ui .prg-clients li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
:root.rx-ui .prg-clients li:last-child { border-bottom: 0; }
:root.rx-ui .prg-client-name { font-weight: 600; font-size: 14px; color: var(--text); text-decoration: none; }
:root.rx-ui a.prg-client-name:hover { color: var(--accent); text-decoration: underline; }
:root.rx-ui .prg-progress { display: flex; align-items: center; gap: 8px; }
:root.rx-ui .prg-progress-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
:root.rx-ui .prg-progress-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
:root.rx-ui .prg-side { display: flex; flex-direction: column; gap: 16px; }
:root.rx-ui .prg-copy { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
:root.rx-ui .prg-copy .prg-icon { width: 34px; height: 34px; background: var(--surface); }
:root.rx-ui .prg-copy .btn-sm { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 1280px) {
  :root.rx-ui .prg-detail { grid-template-columns: minmax(0, 1fr); }
  :root.rx-ui .prg-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  :root.rx-ui .prg-side { grid-template-columns: minmax(0, 1fr); }
  :root.rx-ui .prg-main { padding: 18px 16px 20px; }
  :root.rx-ui .prg-list { padding: 14px; }
}
@media (max-width: 600px) {
  /* Takentabel als gestapelde rijen: geen horizontaal scrollen */
  :root.rx-ui .prg-table, :root.rx-ui .prg-table tbody { display: block; border: 0; box-shadow: none; background: none; }
  :root.rx-ui .prg-table thead { display: none; }
  :root.rx-ui .prg-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; padding: 12px 0; border-bottom: 1px solid var(--border); }
  :root.rx-ui .prg-table tr:last-child { border-bottom: 0; }
  :root.rx-ui .prg-table td { display: block; border: 0; padding: 0 8px 0 0; }
  :root.rx-ui .prg-table tbody tr:hover td { background: none; }
  :root.rx-ui .prg-table td:first-child { width: 40px; }
  :root.rx-ui .prg-table td:nth-child(2) { flex: 1 1 calc(100% - 40px); min-width: 0; }
  :root.rx-ui .prg-table td:nth-child(3) { margin-left: 40px; }
  :root.rx-ui .prg-table td:nth-child(4) { flex: 1 1 0; min-width: 140px; }
  :root.rx-ui .prg-table td:nth-child(4) > div { display: inline; margin-right: 6px; }
}
@media (max-width: 520px) {
  :root.rx-ui .prg-hide-sm { display: none; }
  :root.rx-ui .prg-head .prg-actions { width: 100%; }
  :root.rx-ui .prg-progress-bar { width: 56px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Rechten (#/rechten): machtigingensets-matrix, gebruikers met set-chips,
   plus kleine delen in gebruikersmodal en auditlog. Alleen tokens (licht/donker).
   ═══════════════════════════════════════════════════════════════════════════ */
:root.rx-ui .rg-muted { color: var(--muted); font-size: 13px; }
:root.rx-ui .rg-hint { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
:root.rx-ui .rg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
:root.rx-ui .rg-footnote { display: flex; gap: 6px; align-items: flex-start; margin-top: 12px; }

/* Melding bij een geweigerde actie (harde regels) */
:root.rx-ui .rg-alert {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 14px; border-radius: var(--radius-md);
  background: var(--tone-red-bg); color: var(--tone-red-fg); font-size: 13.5px; font-weight: 600;
}
:root.rx-ui .rg-alert span { flex: 1; }
:root.rx-ui .rg-user .rg-alert { margin: 0 16px 12px 66px; }

/* Kleine icoonknoppen in kolomkoppen */
:root.rx-ui .rg-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; padding: 0; font: inherit;
}
:root.rx-ui .rg-icon-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
:root.rx-ui .rg-icon-btn.rg-danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
:root.rx-ui .rg-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
:root.rx-ui .rg-actions { display: inline-flex; gap: 4px; margin-top: 8px; }
:root.rx-ui .rg-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; }
:root.rx-ui .rg-badges .rx-pill { font-size: 10.5px; padding: 2px 7px; }

/* Matrix */
:root.rx-ui .rg-matrix-wrap { overflow: auto; max-height: calc(100vh - 230px); border-radius: var(--radius-lg); }
:root.rx-ui .rg-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
:root.rx-ui .rg-matrix th, :root.rx-ui .rg-matrix td { border-bottom: 1px solid var(--border); padding: 8px 10px; background: var(--surface); }
:root.rx-ui .rg-matrix td { text-align: center; }
:root.rx-ui .rg-matrix thead th { position: sticky; top: 0; z-index: 2; vertical-align: top; }
:root.rx-ui .rg-sticky { position: sticky; left: 0; z-index: 1; text-align: left; }
:root.rx-ui .rg-matrix thead th.rg-corner { z-index: 3; vertical-align: bottom; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
:root.rx-ui .rg-rowhead { min-width: 250px; max-width: 340px; font-weight: 400; border-right: 1px solid var(--border); }
:root.rx-ui .rg-colhead { min-width: 120px; text-align: center; border-left: 1px solid var(--border); }
:root.rx-ui .rg-colname { font-weight: 700; font-size: 13.5px; display: flex; gap: 4px; align-items: center; justify-content: center; }
:root.rx-ui .rg-colmeta { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
:root.rx-ui .rg-matrix td { border-left: 1px solid var(--border); }
:root.rx-ui .rg-grouprow th {
  background: var(--surface2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); padding: 7px 12px;
}
:root.rx-ui .rg-matrix tbody tr:not(.rg-grouprow):hover td, :root.rx-ui .rg-matrix tbody tr:not(.rg-grouprow):hover th { background: var(--accent-soft); }
:root.rx-ui .rg-perm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:root.rx-ui .rg-perm span { font-weight: 600; color: var(--text); line-height: 1.3; }
:root.rx-ui .rg-perm code { font-size: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

/* Vinkje (echte checkbox, visueel vervangen) */
:root.rx-ui .rg-cell { position: relative; display: inline-flex; cursor: pointer; }
:root.rx-ui .rg-cell input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
:root.rx-ui .rg-box {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--on-accent); font-size: 14px; font-weight: 800; transition: background .12s, border-color .12s;
}
:root.rx-ui .rg-cell.is-on .rg-box { background: var(--accent); border-color: var(--accent); }
:root.rx-ui .rg-cell:hover:not(.is-locked) .rg-box { border-color: var(--accent); }
:root.rx-ui .rg-cell input:focus-visible + .rg-box { outline: 2px solid var(--accent); outline-offset: 2px; }
:root.rx-ui .rg-cell.is-locked { cursor: not-allowed; }
:root.rx-ui .rg-cell.is-locked .rg-box { opacity: 0.45; }
:root.rx-ui .rg-cell input[aria-busy="true"] + .rg-box { opacity: 0.6; }

/* Smal scherm: één set als lijst */
:root.rx-ui .rg-sethead-m { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 6px 0 14px; border-bottom: 1px solid var(--border); }
:root.rx-ui .rg-sethead-m .rg-badges { justify-content: flex-start; }
:root.rx-ui .rg-sethead-m .rg-actions { margin-top: 0; }
:root.rx-ui .rg-mgroup { padding-top: 12px; }
:root.rx-ui .rg-group-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 6px; }
:root.rx-ui .rg-mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }

/* Setformulier */
:root.rx-ui .rg-fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px 12px; margin: 0 0 14px; }
:root.rx-ui .rg-fieldset legend { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 4px; }
:root.rx-ui .rg-fieldset:disabled { opacity: 0.7; }
:root.rx-ui .rg-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-size: 14px; cursor: pointer; }
:root.rx-ui .rg-radio input, :root.rx-ui .rg-check input { width: 16px; height: 16px; accent-color: var(--accent); }
:root.rx-ui .rg-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; cursor: pointer; font-size: 14px; }
:root.rx-ui .rg-check input { margin-top: 2px; flex-shrink: 0; }

/* Gebruikers */
:root.rx-ui .rg-users { list-style: none; margin: 0; padding: 0; }
:root.rx-ui .rg-user { border-bottom: 1px solid var(--border); }
:root.rx-ui .rg-user:last-child { border-bottom: 0; }
:root.rx-ui .rg-user.is-open { background: var(--surface2); }
:root.rx-ui .rg-user-main { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; }
:root.rx-ui .rg-user-text { flex: 1; min-width: 0; }
:root.rx-ui .rg-user-name { font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:root.rx-ui .rg-user-sub { overflow-wrap: anywhere; margin-top: 2px; }
:root.rx-ui .rg-expand { flex-shrink: 0; white-space: nowrap; }
:root.rx-ui .rg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
:root.rx-ui .rg-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; min-height: 26px;
}
:root.rx-ui .rg-chip:not(:has(button)) { padding-right: 10px; }
:root.rx-ui .rg-chip button {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; padding: 0;
}
:root.rx-ui .rg-chip button:hover { background: var(--tone-red-bg); color: var(--tone-red-fg); }
:root.rx-ui .rg-chip-muted { background: var(--tone-grey-bg); color: var(--tone-grey-fg); }
:root.rx-ui .rg-chip-perm { background: var(--surface); color: var(--text); border-color: var(--border); font-weight: 500; }
:root.rx-ui select.rg-add {
  width: auto; max-width: 220px; height: 28px; min-height: 0; margin: 0; padding: 0 26px 0 10px; line-height: 1; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px dashed var(--accent); color: var(--accent); background-color: transparent; cursor: pointer;
}
:root.rx-ui .rg-locknote { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; }
:root.rx-ui .rg-eff { padding: 0 16px 16px 68px; display: grid; gap: 10px; }
:root.rx-ui .rg-eff-group .rg-chips { margin-top: 0; }

/* Gebruikersmodal en auditlog */
:root.rx-ui .rg-field-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
:root.rx-ui .rg-manage-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; text-decoration: none; }
:root.rx-ui .rg-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
:root.rx-ui .rg-date input { width: auto; }
:root.rx-ui .rg-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  :root.rx-ui .rg-user-main { flex-wrap: wrap; gap: 10px; }
  :root.rx-ui .rg-expand { margin-left: 50px; }
  :root.rx-ui .rg-eff { padding: 0 14px 14px; }
  :root.rx-ui .rg-user .rg-alert { margin: 0 14px 12px; }
}
/* Routes (features/routes): lijst + kaartpaneel, route- en sjabloonkaarten, route-editor. */
:root.rx-ui .route-tabs.rt-tabs { flex-wrap: nowrap; }
@media (max-width: 760px) { :root.rx-ui .route-tabs.rt-tabs { gap: 18px; } }
:root.rx-ui .rt-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
:root.rx-ui .rt-filters select { flex: 0 1 auto; min-width: 200px; max-width: 280px; }
:root.rx-ui .rt-filters .filters { margin: 0; }
:root.rx-ui .rt-overdue {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; border-radius: 12px;
  background: var(--tone-amber-bg); color: var(--tone-amber-fg); border: 1px solid color-mix(in srgb, var(--tone-amber-fg) 25%, transparent);
}
:root.rx-ui .rt-overdue button { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

:root.rx-ui .rt-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
:root.rx-ui .rt-list { display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 250px); min-height: 300px; overflow-y: auto; padding: 2px 4px 2px 2px; }
:root.rx-ui .route-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; flex-shrink: 0;
}
:root.rx-ui .route-card:hover { transform: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-md); }
:root.rx-ui .route-card.sel { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
:root.rx-ui .route-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root.rx-ui .rt-card-top { display: flex; align-items: flex-start; gap: 12px; }
:root.rx-ui .rt-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
:root.rx-ui .rt-icon-lg { width: 56px; height: 56px; border-radius: 16px; }
:root.rx-ui .route-card-name, :root.rx-ui .template-card-name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; margin: 0 0 2px; overflow-wrap: anywhere; }
:root.rx-ui .route-card-meta, :root.rx-ui .template-card-meta { font-size: 12.5px; color: var(--muted); margin: 0; }
:root.rx-ui .rt-desc { font-size: 13px; color: var(--muted); margin-top: 10px; }
:root.rx-ui .rt-note { font-size: 12.5px; border-radius: 8px; padding: 6px 10px; margin-top: 10px; }
:root.rx-ui .rt-note-amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
:root.rx-ui .rt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
:root.rx-ui .rt-chips:empty { display: none; }
:root.rx-ui .rt-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--surface2); color: var(--text); white-space: nowrap; }
:root.rx-ui .rt-chip > svg:first-child { margin-left: 6px; }
:root.rx-ui .rt-chip .mini-av { flex-shrink: 0; }
:root.rx-ui .rt-chip-done { background: var(--tone-green-bg); color: var(--tone-green-fg); padding-left: 10px; }
:root.rx-ui .route-card-foot, :root.rx-ui .template-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: flex-start; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
:root.rx-ui .route-card-foot .btn-ghost, :root.rx-ui .template-card-foot .btn-ghost { display: inline-flex; align-items: center; gap: 5px; }
:root.rx-ui .route-card-foot .rt-del { margin-left: auto; }
:root.rx-ui .rt-del { min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }

:root.rx-ui .rt-mapcard { overflow: hidden; position: sticky; top: 84px; }
:root.rx-ui .rt-mapcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
:root.rx-ui .rt-mapcard-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
:root.rx-ui .rt-mapbox { height: min(calc(100vh - 330px), 620px); min-height: 380px; background: var(--surface2); }
:root.rx-ui .rt-mapbox #route-map { height: 100%; min-height: 0; }
:root.rx-ui .rt-mapcard .map-ph { min-height: 460px; gap: 14px; }

:root.rx-ui .rt-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
:root.rx-ui .rt-tpl-grid .template-card { margin: 0; padding: 18px; }
:root.rx-ui .template-card:hover { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-md); }
:root.rx-ui .template-card-foot .btn-accent { min-height: 36px; padding: 7px 12px; font-size: 13px; }
:root.rx-ui .rt-map-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Route-editor: stappenbalk en velden */
:root.rx-ui .rt-editor .rx-stepper { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
:root.rx-ui .rt-editor .btn-outline { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; min-height: 38px; padding: 8px 14px; font: 600 13.5px var(--font-ui); cursor: pointer; }
:root.rx-ui .rt-editor .btn-outline:hover { background: var(--surface2); }
:root.rx-ui .rt-panel { padding: 12px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); font-size: 13px; }
:root.rx-ui .rt-panel-accent { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }

@media (max-width: 900px) {
  :root.rx-ui .rt-layout { grid-template-columns: minmax(0, 1fr); }
  :root.rx-ui .rt-list { max-height: none; min-height: 0; overflow: visible; }
  :root.rx-ui .rt-mapcard { position: static; }
  :root.rx-ui .rt-mapcard.is-empty { display: none; }
  :root.rx-ui .rt-mapbox { height: 320px; min-height: 0; }
  :root.rx-ui .rt-filters select { flex: 1 1 100%; max-width: none; }
}
:root.rx-ui .rt-step3 { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
:root.rx-ui .rt-step3-map { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px; background: var(--surface); box-shadow: var(--shadow-sm); }
:root.rx-ui .rt-step3-map [role="region"] { margin-bottom: 10px !important; }
:root.rx-ui .rt-mapbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 2px 6px 4px; }
:root.rx-ui .rt-editor .btn-danger { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  :root.rx-ui .rt-step3 { grid-template-columns: minmax(0, 1fr); }
  :root.rx-ui .rt-step3-map { padding: 6px; }
}

/* Kiesbare routekaart (RouteCard met onPick, taak-wizard "Koppel aan route"): duidelijke rand + vinkje bij gekozen. */
:root.rx-ui .route-card.rt-pick { position: relative; box-shadow: none; padding: 12px 14px; }
:root.rx-ui .route-card.rt-pick.sel { border: 2px solid var(--accent); padding: 11px 13px; background: var(--accent-soft); }
:root.rx-ui .route-card.rt-pick.sel::after {
  content: "✓"; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
:root.rx-ui .route-card.rt-pick-none { font-weight: 600; font-size: 14px; color: var(--muted); }
:root.rx-ui .route-card.rt-pick-none.sel { color: var(--text); }

/* Auto-route: startpunt (gedeeld adres of handmatig postcode/adres). */
:root.rx-ui .ar-start-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: var(--surface2); }
:root.rx-ui .ar-start-hint { font-size: 12px; color: var(--muted); margin-top: 6px; font-family: var(--font-ui); }
:root.rx-ui .ar-start-found { color: var(--tone-green-fg); font-weight: 600; }
@media (max-width: 560px) { :root.rx-ui .route-card.rt-pick .rt-icon { display: none; } :root.rx-ui .route-card.rt-pick .route-card-name { overflow-wrap: normal; word-break: normal; } }
/* Globale zoekbalk in de bovenbalk (features/search/GlobalSearch.tsx). */
:root.rx-ui .rx-top-left { flex: 1; display: flex; align-items: center; gap: 12px; }
:root.rx-ui .gs-root { flex: 1; min-width: 0; display: flex; align-items: center; }
:root.rx-ui .gs-desktop { width: 100%; max-width: 460px; }
:root.rx-ui .gs-box { position: relative; width: 100%; }
:root.rx-ui .gs-field { position: relative; display: flex; align-items: center; }
:root.rx-ui .gs-icon { position: absolute; left: 12px; color: var(--muted); display: inline-flex; pointer-events: none; }
:root.rx-ui .gs-input {
  width: 100%; height: 40px; padding: 0 40px 0 38px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: 400 14px var(--font-ui); outline: none;
}
:root.rx-ui .gs-input::placeholder { color: var(--muted); opacity: 1; }
:root.rx-ui .gs-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root.rx-ui .gs-kbd {
  position: absolute; right: 10px; font: 600 11px var(--font-ui); color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 7px; background: var(--surface2); pointer-events: none;
}
:root.rx-ui .gs-pop {
  position: absolute; top: calc(100% + 6px); left: 0; width: max(100%, 380px); max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60;
}
:root.rx-ui .gs-list, :root.rx-ui .gs-grp { list-style: none; margin: 0; padding: 0; }
:root.rx-ui .gs-grp + .gs-grp { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
:root.rx-ui .gs-group { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; padding: 8px 10px 4px; }
:root.rx-ui .gs-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text); }
:root.rx-ui .gs-opt.is-active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
:root.rx-ui .gs-opt-icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--accent); }
:root.rx-ui .gs-opt-text { display: flex; flex-direction: column; min-width: 0; }
:root.rx-ui .gs-opt-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.rx-ui .gs-opt-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.rx-ui .gs-mark { background: color-mix(in srgb, var(--tone-amber-fg) 24%, transparent); color: inherit; font-weight: 700; border-radius: 3px; padding: 0 1px; }
:root.rx-ui .gs-empty { margin: 0; padding: 14px 10px; font-size: 13.5px; color: var(--muted); }
:root.rx-ui .gs-mobile-btn {
  display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); align-items: center; justify-content: center; cursor: pointer;
}
/* Mobiel: volledig-scherm paneel */
:root.rx-ui .gs-sheet { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; padding: 12px 16px; }
:root.rx-ui .gs-sheet-head { display: flex; align-items: flex-start; gap: 10px; }
:root.rx-ui .gs-sheet .gs-box { flex: 1; }
:root.rx-ui .gs-sheet .gs-input { height: 44px; font-size: 16px; }
:root.rx-ui .gs-sheet .gs-pop { position: fixed; top: 68px; left: 16px; right: 16px; width: auto; max-height: calc(100vh - 84px); }
:root.rx-ui .gs-sheet-close { height: 44px; padding: 0 12px; border: 0; background: none; color: var(--accent); font: 600 14px var(--font-ui); cursor: pointer; }
@media (max-width: 760px) {
  :root.rx-ui .gs-desktop { display: none; }
  :root.rx-ui .gs-mobile-btn { display: inline-flex; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Website-editor (#/website, features/site/editor) — nieuw ontwerp. Alleen tokens uit 10-design.css.
   De landing zelf gebruikt de lp-*-klassen uit styles.css (ook in het voorbeeld).
   ═══════════════════════════════════════════════════════════════════════════ */
:root.rx-ui .site-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
:root.rx-ui .site-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:root.rx-ui .site-col > .rx-card { margin: 0; }
@media (max-width: 960px) { :root.rx-ui .site-grid { grid-template-columns: minmax(0, 1fr); } }
:root.rx-ui .site-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
:root.rx-ui .site-hint { font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* Segmentknoppen (taal, bewerken/voorbeeld) */
:root.rx-ui .site-langtabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); }
:root.rx-ui .site-langtabs button {
  border: 0; background: none; border-radius: 8px; padding: 6px 12px; min-height: 32px; font: 600 13px var(--font-ui);
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
:root.rx-ui .site-langtabs button.is-on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
:root.rx-ui .site-langtabs .site-hint { padding: 0 8px; }
:root.rx-ui .site-errdot {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%;
  background: var(--tone-red-bg); color: var(--tone-red-fg); font-size: 10.5px; font-weight: 800;
}

/* Blokkenlijst */
:root.rx-ui .site-blocks { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
:root.rx-ui .site-block { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding-right: 4px; }
:root.rx-ui .site-block.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root.rx-ui .site-block.is-hidden .site-block-main { opacity: 0.55; }
:root.rx-ui .site-block-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; background: none; border: 0;
  text-align: left; cursor: pointer; color: var(--text); font: inherit; border-radius: 12px;
}
:root.rx-ui .site-block-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: var(--tone-green-bg); color: var(--tone-green-fg); }
:root.rx-ui .site-block-text { display: flex; flex-direction: column; min-width: 0; }
:root.rx-ui .site-block-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
:root.rx-ui .site-block-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root.rx-ui .site-block-btns { display: inline-flex; align-items: center; gap: 0; flex-shrink: 0; }
:root.rx-ui .site-block-btns .btn-ghost, :root.rx-ui .site-item-btns .btn-ghost { min-width: 32px; min-height: 32px; padding: 4px 6px; font-size: 15px; }
:root.rx-ui .btn-ghost:disabled { opacity: 0.35; cursor: default; background: none; }
:root.rx-ui .site-danger { color: var(--danger) !important; }
:root.rx-ui .site-add { display: flex; gap: 8px; flex-wrap: wrap; }
:root.rx-ui .site-add select { flex: 1 1 140px; min-width: 0; }

/* Schakelaar zichtbaar */
:root.rx-ui .site-switch { position: relative; display: inline-flex; width: 38px; height: 22px; margin: 0 6px; cursor: pointer; flex-shrink: 0; }
:root.rx-ui .site-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
:root.rx-ui .site-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background 0.15s; pointer-events: none; }
:root.rx-ui .site-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.15s; }
:root.rx-ui .site-switch input:checked + span { background: var(--accent); }
:root.rx-ui .site-switch input:checked + span::after { transform: translateX(16px); }
:root.rx-ui .site-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Formulier */
:root.rx-ui .site-form { display: flex; flex-direction: column; gap: 14px; }
:root.rx-ui .site-field { display: flex; flex-direction: column; gap: 6px; }
:root.rx-ui .site-field input[type="text"], :root.rx-ui .site-field select, :root.rx-ui .site-field textarea { width: 100%; box-sizing: border-box; }
:root.rx-ui .site-field textarea { resize: vertical; line-height: 1.55; font-family: var(--font-ui); }
:root.rx-ui .site-field-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--muted); }
:root.rx-ui .site-field-meta .is-over, :root.rx-ui .site-field-err { color: var(--danger); }
:root.rx-ui .site-field-err { font-size: 12.5px; }
:root.rx-ui .site-field [aria-invalid="true"] { border-color: var(--danger) !important; }
:root.rx-ui .site-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
:root.rx-ui .site-check input { width: 16px; height: 16px; accent-color: var(--accent); }
:root.rx-ui .site-items { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
:root.rx-ui .site-items legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
:root.rx-ui .site-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface2); display: flex; flex-direction: column; gap: 10px; }
:root.rx-ui .site-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; min-width: 0; }
:root.rx-ui .site-item-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root.rx-ui .site-item-btns { display: inline-flex; flex-shrink: 0; }
:root.rx-ui .site-icon-field { display: grid; grid-template-columns: auto 28px 1fr; align-items: center; gap: 8px; }
:root.rx-ui .site-icon-preview { display: inline-flex; color: var(--accent); }

/* Versies */
:root.rx-ui .site-versions { list-style: none; margin: 0; padding: 0; }
:root.rx-ui .site-versions li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; }
:root.rx-ui .site-versions li + li { border-top: 1px solid var(--border); }

/* Voorbeeld: de landing in een kader; eigen scroll zodat de sticky navigatie binnen het kader blijft. */
:root.rx-ui .site-preview { border: 1px solid var(--border); border-radius: 12px; overflow: auto; max-height: 75vh; background: var(--surface); }
:root.rx-ui .site-preview #landing { min-height: 0; }
:root.rx-ui .site-preview-block { max-height: 860px; zoom: 0.6; }   /* zoom verkleint ook de hoogte: ~520px zichtbaar */
:root.rx-ui .site-preview-block.is-hidden { opacity: 0.5; }
:root.rx-ui .site-preview-legal { padding: 20px 22px; max-width: 720px; }
:root.rx-ui .site-preview-legal-title { font-size: 18px; margin: 0 0 8px; }
:root.rx-ui .site-preview .lp-nav { position: sticky; }
/* ── Taken (staff): takenpagina en stappenpagina "Nieuwe taak" ───────────── */
:root.rx-ui .tk-filters { margin-bottom: 16px; overflow: hidden; }
:root.rx-ui .tk-filters-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; }
:root.rx-ui .tk-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
:root.rx-ui .tk-chip { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:root.rx-ui .tk-chip.is-on { font-weight: 800; text-decoration-thickness: 2px; }

/* Kaarten */
:root.rx-ui .tk-card { padding: 18px 20px; display: flex; flex-direction: column; }
:root.rx-ui .tk-card .tg-name { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
:root.rx-ui .tk-card .tg-footer { margin-top: auto; }
:root.rx-ui .tk-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
:root.rx-ui .tk-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
:root.rx-ui .tk-prio-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
:root.rx-ui .tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--muted); }
:root.rx-ui .tk-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
:root.rx-ui .tg-grid.list .tk-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; }
:root.rx-ui .tg-grid.list .tk-card-top { margin-bottom: 0; order: 2; }
:root.rx-ui .tg-grid.list .tk-card .tg-name { margin: 0; flex: 1 1 200px; order: 1; }
:root.rx-ui .tg-grid.list .tk-meta { margin: 0; order: 3; }
:root.rx-ui .tg-grid.list .tk-card .tg-footer { order: 4; margin-top: 0; }

/* Tabel */
:root.rx-ui .tk-table-wrap { position: relative; overflow-x: auto; border-radius: var(--radius-lg); }
:root.rx-ui .tk-table-wrap .data-table { display: table; min-width: 720px; overflow: visible; white-space: normal; }
:root.rx-ui .tk-row-sel td { background: var(--accent-soft); }
:root.rx-ui .tk-bulk { position: sticky; bottom: 18px; margin-top: 14px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-md);
  padding: 10px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; box-shadow: var(--shadow-lg); z-index: 50; }

/* Stappenpagina */
:root.rx-ui .tw-page .rx-stepper { margin-bottom: 22px; }
:root.rx-ui .tw-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
:root.rx-ui .tw-layout-map { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); }
:root.rx-ui .tw-layout-single { grid-template-columns: minmax(0, 1fr); }
:root.rx-ui .tw-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
:root.rx-ui .tw-main .cp-trigger { color: var(--text); background: var(--surface); }
:root.rx-ui .tw-main .field { margin-bottom: 16px; }
:root.rx-ui .tw-main .field label { display: block; margin-bottom: 6px; }
:root.rx-ui .tw-main .field input, :root.rx-ui .tw-main .field select, :root.rx-ui .tw-main .field textarea { width: 100%; box-sizing: border-box; }
:root.rx-ui .tw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
:root.rx-ui .tw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; margin-top: 20px; position: sticky; bottom: 12px; z-index: 5; }
:root.rx-ui .tw-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); background: var(--surface2); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 12px; }

/* Locatie: keuzerondjes + kaart */
:root.rx-ui .tw-radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; margin-bottom: 10px; background: var(--surface); }
:root.rx-ui .tw-radio.is-on { border-color: var(--accent); background: var(--accent-soft); }
:root.rx-ui .tw-radio input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; }
:root.rx-ui .tw-radio-title { display: block; font-weight: 600; font-size: 14px; }
:root.rx-ui .tw-radio-hint { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
:root.rx-ui .tw-mapcard { padding: 16px; }
:root.rx-ui .tw-mapcard > div { margin-bottom: 0; }
:root.rx-ui .tw-map-empty { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--muted);
  border-radius: var(--radius-md); background: repeating-linear-gradient(45deg, var(--surface2), var(--surface2) 12px, var(--surface) 12px, var(--surface) 24px); padding: 24px; }

/* Voorbeeld voor de cliënt (telefoon) */
:root.rx-ui .tw-preview { padding: 18px 20px 0; background: var(--accent-soft); border-color: transparent; overflow: hidden; }
:root.rx-ui .tw-phone { position: relative; margin: 0 auto; max-width: 300px; min-height: 330px; background: var(--surface); border: 10px solid var(--text); border-bottom: 0;
  border-radius: 36px 36px 0 0; padding: 26px 16px 20px; box-shadow: var(--shadow-md); }
:root.rx-ui .tw-phone-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 70px; height: 6px; border-radius: 6px; background: var(--border); }
:root.rx-ui .tw-phone-brand { text-align: center; font-weight: 800; font-size: 18px; color: var(--accent); letter-spacing: -0.3px; margin-bottom: 12px; }
:root.rx-ui .tw-phone-from { font-size: 12.5px; color: var(--muted); background: var(--surface2); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
:root.rx-ui .tw-phone-body { display: flex; flex-direction: column; gap: 10px; }
:root.rx-ui .tw-phone-title { font-weight: 700; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
:root.rx-ui .tw-phone-line { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
:root.rx-ui .tw-phone-ic { color: var(--accent); flex-shrink: 0; display: inline-flex; padding-top: 1px; }
:root.rx-ui .tw-phone-btn { display: block; text-align: center; margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px; }

/* Samenvatting */
:root.rx-ui .tw-sum-block { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px 6px; margin-bottom: 14px; }
:root.rx-ui .tw-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
:root.rx-ui .tw-sum-head h3 { font-size: 14px; font-weight: 700; margin: 0; }
:root.rx-ui .tw-sum-block dl { margin: 0; }
:root.rx-ui .tw-sum-row { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
:root.rx-ui .tw-sum-row dt { flex: 0 0 150px; color: var(--muted); font-size: 13px; }
:root.rx-ui .tw-sum-row dd { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  :root.rx-ui .tw-sum { grid-template-columns: minmax(0, 1fr); }
  :root.rx-ui .tw-layout, :root.rx-ui .tw-layout-map { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root.rx-ui .tw-two { grid-template-columns: 1fr; gap: 0; }
  :root.rx-ui .tw-actions { padding: 12px 16px; position: static; }
  :root.rx-ui .tw-actions .btn-cancel { order: 5; width: 100%; }
  :root.rx-ui .tw-actions > span { display: none; }
  :root.rx-ui .tw-actions .btn-sm, :root.rx-ui .tw-actions .btn-save { flex: 1; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  :root.rx-ui .tw-page .rx-stepper { gap: 4px; flex-wrap: nowrap; }
  :root.rx-ui .tw-page .rx-step { gap: 4px; }
  :root.rx-ui .tw-page .rx-step + .rx-step::before { width: 8px; }
  :root.rx-ui .tw-sum-row { flex-direction: column; gap: 2px; }
  :root.rx-ui .tw-sum-row dt { flex: none; }
  :root.rx-ui .tw-preview { display: none; }
  :root.rx-ui .tk-filters-row { padding: 12px 14px; }
  :root.rx-ui .tk-filters-row .filters { flex-shrink: 1 !important; min-width: 0; }
  :root.rx-ui .tk-filters-row input[type="search"], :root.rx-ui .tk-filters-row select { max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; }
}

/* Stap 3 "Koppel aan route": lijst met kiesbare routekaarten. */
:root.rx-ui .tw-routes { margin: 12px 0 0 30px; }
:root.rx-ui .tw-routes-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
:root.rx-ui .tw-route-list { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; padding: 10px 10px 4px 2px; }
@media (max-width: 560px) { :root.rx-ui .tw-routes { margin-left: 0; } }