/* Letro-thema bovenop Bootstrap 5.3, in de stijl van Adminator
   (vaste zijbalk, witte topbalk, lichtgrijze achtergrond, platte kaarten met dunne rand) */
:root, [data-bs-theme=light] {
  --letro: #0084e8;
  --letro-rgb: 0, 132, 232;
  --letro-soft: #e6f3fd;
  --app-bg: #f9fafb;
  --app-surface: #fff;
  --app-border: #e6ecf5;
  --app-text: #313435;
  --app-muted: #72777a;
  --app-hover: #f5f7fa;
  --app-filled: #fffdf5;
  --app-total-bg: #212529;
  --sidebar-w: 280px;
  --sidebar-w-collapsed: 70px;
  --header-h: 65px;
  --bs-primary: var(--letro);
  --bs-primary-rgb: var(--letro-rgb);
  --bs-link-color: var(--letro);
  --bs-link-color-rgb: var(--letro-rgb);
  --bs-link-hover-color: #006bbd;
  --bs-body-font-size: .875rem;
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-surface);
  --bs-border-color: var(--app-border);
  --bs-font-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
[data-bs-theme=dark] {
  --letro-soft: rgba(0, 132, 232, .18);
  --app-bg: #111827;
  --app-surface: #1f2937;
  --app-border: #374151;
  --app-text: #e5e7eb;
  --app-muted: #9ca3af;
  --app-hover: #273244;
  --app-filled: rgba(255, 214, 102, .07);
  --app-total-bg: #0b111c;
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-surface);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-bg: #18212f;
  --bs-border-color: var(--app-border);
  --bs-link-color: #4db3ff;
  --bs-link-color-rgb: 77, 179, 255;
  --bs-link-hover-color: #80c8ff;
}
body { background: var(--app-bg); color: var(--app-text); font-weight: 400; }
h1, h2, h3, .h4, .h5, .h6 { color: var(--app-text); font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--letro); --bs-btn-border-color: var(--letro);
  --bs-btn-hover-bg: #0074cc; --bs-btn-hover-border-color: #0074cc;
  --bs-btn-active-bg: #006bbd; --bs-btn-active-border-color: #006bbd;
  --bs-btn-disabled-bg: var(--letro); --bs-btn-disabled-border-color: var(--letro);
  --bs-btn-focus-shadow-rgb: var(--letro-rgb);
}
.btn-link { --bs-btn-color: var(--letro); --bs-btn-hover-color: #006bbd; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: rgba(var(--letro-rgb), .5);
  box-shadow: 0 0 0 .2rem rgba(var(--letro-rgb), .15);
}
.form-check-input:checked { background-color: var(--letro); border-color: var(--letro); }
.btn.armed { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.min-w-0 { min-width: 0; }
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }

/* kaarten: plat, dunne rand (Adminator "bd bgc-white") */
.card { --bs-card-border-color: var(--app-border); --bs-card-bg: var(--app-surface); --bs-card-cap-bg: var(--app-surface); border: 1px solid var(--app-border); border-radius: 4px; box-shadow: none; }
.card-header { background: var(--app-surface); padding: .85rem 1.1rem; }
.card-header h2, .card-header h3 { font-weight: 500; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--app-hover); --bs-table-border-color: var(--app-border); }

/* ---------- zijbalk ---------- */
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040; width: var(--sidebar-w); background: var(--app-surface); border-right: 1px solid var(--app-border); display: flex; flex-direction: column; transition: width .2s ease, transform .2s ease; overflow: hidden; }
.sidebar-logo { height: var(--header-h); flex: none; display: flex; align-items: center; padding: 0 1.1rem; border-bottom: 1px solid var(--app-border); }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--app-text); white-space: nowrap; }
.brand .logo, .auth-brand .logo { width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--letro); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.brand-text { line-height: 1.1; }
.brand-text strong { display: block; font-weight: 700; font-size: 16px; }
.brand-text small { color: var(--app-muted); }
.sidebar-menu { padding: 1rem 0; overflow-y: auto; flex: 1; }
.sidebar-menu .menu-label { padding: .9rem 1.6rem .4rem; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); white-space: nowrap; }
.sidebar-menu a { display: flex; align-items: center; gap: .9rem; padding: .55rem 1.1rem; margin: 1px .6rem; border-radius: 4px; color: var(--app-text); text-decoration: none; white-space: nowrap; font-size: 14px; }
.sidebar-menu a:hover { background: var(--app-hover); }
.sidebar-menu a.active { background: var(--letro-soft); color: var(--letro); font-weight: 500; }
[data-bs-theme=dark] .sidebar-menu a.active { color: #80c8ff; }
.menu-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 17px; }
.menu-icon.c-red { color: #e4002b; } .menu-icon.c-blue { color: #2196f3; } .menu-icon.c-green { color: #4caf50; }
.menu-icon.c-orange { color: #ff9800; } .menu-icon.c-purple { color: #9c27b0; } .menu-icon.c-teal { color: #009688; }
.menu-badge { margin-left: auto; }
.sidebar-backdrop { display: none; }

/* ---------- pagina & topbalk ---------- */
.page-container { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.header { position: sticky; top: 0; z-index: 1030; height: var(--header-h); background: var(--app-surface); border-bottom: 1px solid var(--app-border); display: flex; align-items: center; gap: .5rem; padding: 0 1rem; }
.header-btn { border: 0; background: none; color: var(--app-muted); width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 20px; flex: none; }
.header-btn:hover { background: var(--app-hover); color: var(--app-text); }
.header-search { display: flex; align-items: center; gap: .5rem; flex: 1; max-width: 460px; color: var(--app-muted); padding: 0 .5rem; margin: 0; }
.header-search-icon { display: inline-flex; font-size: 18px; }
.header-search input { border: 0; background: transparent; outline: 0; width: 100%; color: var(--app-text); padding: .5rem 0; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: .6rem; border: 0; background: none; color: var(--app-text); padding: .3rem .6rem; border-radius: 4px; }
.user-btn:hover { background: var(--app-hover); }
.user-btn .avatar { width: 34px; height: 34px; font-size: 13px; margin: 0; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .4rem 0; display: none; }
.user-dropdown.show { display: block; }
.user-dropdown .dd-head { padding: .5rem 1rem .6rem; border-bottom: 1px solid var(--app-border); margin-bottom: .3rem; }
.user-dropdown a, .user-dropdown button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem 1rem; border: 0; background: none; color: var(--app-text); text-decoration: none; text-align: left; font-size: 14px; }
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--app-hover); }
.main-content { flex: 1; padding: 1.5rem 1.25rem; width: 100%; max-width: 1600px; }
.footer { border-top: 1px solid var(--app-border); padding: 1.1rem 1.25rem; text-align: center; color: var(--app-muted); font-size: 12px; background: var(--app-surface); }
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.page-title h1 { font-size: 1.35rem; margin: 0; }
.page-title .crumb { color: var(--app-muted); font-size: 13px; }

/* ingeklapte zijbalk (desktop) */
html.is-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
html.is-collapsed .page-container { margin-left: var(--sidebar-w-collapsed); }
html.is-collapsed .sidebar .brand-text, html.is-collapsed .sidebar .menu-text, html.is-collapsed .sidebar .menu-badge, html.is-collapsed .sidebar .menu-label { display: none; }
html.is-collapsed .sidebar-menu a { justify-content: center; padding: .55rem 0; }
html.is-collapsed .sidebar-logo { justify-content: center; padding: 0; }

.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--letro); color: #fff; font-size: 11px; font-weight: 700; margin-right: 4px; vertical-align: middle; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--app-border); }

/* ---------- KPI-widgets ---------- */
.kpi .card-body { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; }
.kpi-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: none; }
.kpi-icon.c-blue { background: rgba(33,150,243,.12); color: #2196f3; }
.kpi-icon.c-grey { background: rgba(114,119,122,.12); color: var(--app-muted); }
.kpi-icon.c-orange { background: rgba(255,152,0,.14); color: #f57c00; }
.kpi-icon.c-green { background: rgba(76,175,80,.14); color: #43a047; }
.kpi-icon.c-purple { background: rgba(156,39,176,.12); color: #9c27b0; }
.kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); }
.kpi-value { font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.kpi-sub { font-size: 12px; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.kpi-pill { display: inline-block; padding: 1px 8px; border-radius: 50rem; font-size: 11px; font-weight: 500; }
.kpi-pill.c-blue { background: rgba(33,150,243,.12); color: #1976d2; }
.kpi-pill.c-grey { background: rgba(114,119,122,.12); color: var(--app-muted); }
.kpi-pill.c-orange { background: rgba(255,152,0,.14); color: #e65100; }
.kpi-pill.c-green { background: rgba(76,175,80,.14); color: #2e7d32; }
[data-bs-theme=dark] .kpi-pill.c-blue { color: #64b5f6; } [data-bs-theme=dark] .kpi-pill.c-orange { color: #ffb74d; } [data-bs-theme=dark] .kpi-pill.c-green { color: #81c784; }

/* ---------- loginpagina (Adminator "sign in": beeldvlak links, formulier rechts) ---------- */
body.auth-page .sidebar, body.auth-page .sidebar-backdrop, body.auth-page .header, body.auth-page .footer { display: none; }
body.auth-page .page-container { margin-left: 0; }
body.auth-page .main-content { padding: 0; max-width: none; }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 440px; }
.auth-visual { background: linear-gradient(135deg, #0084e8 0%, #0059a0 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 4rem; position: relative; overflow: hidden; }
.auth-visual::after { content: ''; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.07); }
.auth-visual h2 { color: #fff; font-size: 2rem; font-weight: 300; max-width: 460px; }
.auth-visual p { color: rgba(255,255,255,.8); max-width: 420px; }
.auth-panel { background: var(--app-surface); display: flex; flex-direction: column; justify-content: center; padding: 3rem 2.5rem; border-left: 1px solid var(--app-border); }
.auth-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 2rem; }
.auth-brand .logo { background: #fff; color: var(--letro); }
.auth-panel .auth-brand .logo { background: var(--letro); color: #fff; }
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { border-left: 0; padding: 2rem 1.25rem; }
}

/* calculatie-kop en tabbladen */
.calc-meta { width: 280px; }
.save-status { color: var(--bs-secondary-color); }
.save-status.saving, .save-status.dirty { color: var(--bs-warning-text-emphasis); }
.save-status.saved::before { content: '✓ '; color: var(--bs-success); }
.save-status.error { color: var(--bs-danger); font-weight: 600; }
.calc-tabs { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 4px; padding: 0 .25rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom-color: var(--bs-border-color); }
.calc-tabs .nav-link { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; color: var(--bs-secondary-color); padding: .45rem .85rem; }
.calc-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin: 0; }
.calc-tabs .nav-link.active { color: var(--bs-body-color); font-weight: 500; background: transparent; border-bottom-color: var(--letro); }
.tab-total { font-size: 11px; color: var(--letro); min-height: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
fieldset.calc-body { min-width: 0; }
fieldset.calc-body:disabled .num, fieldset.calc-body:disabled .txt { background-color: transparent !important; border-color: transparent; }
fieldset.calc-body:disabled .link, fieldset.calc-body:disabled .icon, fieldset.calc-body:disabled [data-act="reset-calc"] { display: none; }

/* dashboard */
.dash-table tbody tr { cursor: pointer; }
.dash-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; }
.dash-search { max-width: 300px; }
.waiting-row { color: inherit; border-top: 1px solid var(--bs-border-color-translucent); }
.waiting-row:first-of-type { border-top: 0; }
.waiting-row:hover { background: var(--bs-warning-bg-subtle); }

/* geschiedenis */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 .7rem 1.1rem; border-left: 2px solid var(--bs-border-color); margin-left: .3rem; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--letro); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline .when { color: var(--bs-secondary-color); font-size: 12px; margin-right: .3rem; }

/* dialoog & meldingen */
.app-dialog { border: 0; border-radius: .6rem; padding: 0; width: min(480px, calc(100vw - 2rem)); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.app-dialog::backdrop { background: rgba(17, 19, 24, .45); }
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1100; width: min(420px, calc(100vw - 2rem)); }

/* ---------- indeling ---------- */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 1.25rem; align-items: start; }
@media (max-width: 1280px) { .calc-grid { grid-template-columns: minmax(0, 1fr) 380px; } }
.col-main { display: flex; flex-direction: column; gap: 1rem; }
.col-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.card-header { border-bottom-color: var(--app-border); flex-wrap: wrap; }
.col-main, .col-main > .card { min-width: 0; }
.card-total { display: flex; align-items: center; gap: .6rem; }
.note { color: var(--bs-secondary-color); font-size: 12px; font-weight: 400; }
.muted { color: var(--bs-secondary-color); }
.strong { font-weight: 700; }
.pos { color: var(--bs-success); }
.neg { color: var(--bs-danger); }
output { font-variant-numeric: tabular-nums; }

/* materiaalgroepen */
.group { border-top: 1px solid var(--bs-border-color-translucent); padding: .6rem 0; }
.group:first-child { border-top: 0; padding-top: 0; }
.group-h, details.group > summary { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.gt { font-weight: 600; }
.spacer { flex: 1; }
.unit { color: var(--bs-secondary-color); font-size: 12px; display: inline-flex; align-items: center; gap: .35rem; }
.unit .num { width: 72px; }
details.group > summary { cursor: pointer; list-style: none; padding: .15rem 0; }
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary::before { content: '▸'; color: var(--bs-secondary-color); transition: transform .15s; display: inline-block; }
details.group[open] > summary::before { transform: rotate(90deg); }

/* rijen (eigen grid; neutraliseert Bootstrap's .row) */
.grid { margin-top: .35rem; }
.grid .row { display: grid; align-items: center; gap: .6rem; padding: 2px 0; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.grid .row > * { width: auto; max-width: none; padding: 0; margin: 0; }
.grid .row.head { color: var(--bs-secondary-color); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 0; }
.grid .row.head span:last-child, .grid .row > output { text-align: right; }
.g-len .row { grid-template-columns: 120px 1fr 120px; }
.g-area .row { grid-template-columns: 110px 110px 80px 1fr; }
.g-bands .row { grid-template-columns: 1fr 130px 80px 120px; }
.g-bands .row:not(.head):hover { background: var(--bs-tertiary-bg); }
.g-banner .row { grid-template-columns: 24px 100px 100px 70px 70px 1fr 32px; }
.g-qty .row, .g-rate .row { grid-template-columns: 1fr 130px 80px 120px; }
/* prijskolom overal links uitgelijnd, zoals bij werkuren en rollend materieel */
.g-rate .row > output:nth-child(2) { text-align: left; }
.g-extra .row { grid-template-columns: 1fr 120px 32px; }
.g-amount .row { grid-template-columns: 120px 160px; }
.g-hours .row { grid-template-columns: 1fr 90px 90px 90px; }
.g-hours .row > * { text-align: right; }
.g-hours .row > :first-child { text-align: left; }
.g-banner .row.head span:nth-child(n+2):nth-child(-n+6), .g-area .row.head span, .g-len .row.head span:first-child { text-align: right; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.num:not(:placeholder-shown):not([value="0"]) { background-color: var(--app-filled); }
.icon { font-size: 18px; line-height: 1; padding: 2px 6px; }
.icon:hover { color: var(--letro) !important; background: var(--letro-soft); }

/* samenvatting */
.summary dl { display: grid; grid-template-columns: 1fr auto; margin: 0; row-gap: .35rem; }
.summary dt { color: var(--bs-secondary-color); font-weight: 400; display: flex; align-items: center; gap: .35rem; }
.summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summary .sep { border-top: 1px solid var(--bs-border-color); padding-top: .5rem; margin-top: .25rem; color: var(--bs-body-color); font-weight: 600; }
.summary h4 { margin: 1.1rem 0 .35rem; font-size: 13px; color: var(--bs-secondary-color); font-weight: 600; }
.pct { display: inline-flex; align-items: center; gap: 2px; }
.pct .num { width: 54px; padding: 1px 6px; }
.total { margin-top: .9rem; background: var(--app-total-bg); color: #fff; border-radius: .5rem; padding: .9rem 1rem; display: flex; justify-content: space-between; align-items: baseline; }
.total small { color: var(--bs-gray-500); font-size: 11px; }
.total output { font-size: 1.4rem; font-weight: 700; }

/* overzicht & prijzen */
.overview td:not(:first-child), .overview th:not(:first-child) { text-align: right; }
.overview th, .prices th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; }
.overview tr.zero td { color: var(--bs-secondary-color); }
.overview tfoot td { font-weight: 700; border-bottom: 0; }
.overview tfoot tr.sub td { font-weight: 400; color: var(--bs-secondary-color); padding-top: 2px; padding-bottom: 2px; border: 0; }
.overview a { text-decoration: none; }
.table-wrap { overflow-x: auto; }
.prices tr.grp th { background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 12px; padding-top: .8rem; }
.prices td { white-space: nowrap; }
.prices td:first-child { white-space: normal; }
.prices td .num { width: 90px; display: inline-block; }
.prices .cur { color: var(--bs-secondary-color); margin-right: 4px; }

.print-head { display: none; }
.mobile-bar { display: none; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; width: var(--sidebar-w) !important; }
  .page-container { margin-left: 0 !important; }
  html.sidebar-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  html.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(17, 19, 24, .45); }
  html.is-collapsed .sidebar .brand-text, html.is-collapsed .sidebar .menu-text, html.is-collapsed .sidebar .menu-badge, html.is-collapsed .sidebar .menu-label { display: revert; }
  html.is-collapsed .sidebar-menu a { justify-content: flex-start; padding: .55rem 1.1rem; }
  html.is-collapsed .sidebar-logo { justify-content: flex-start; padding: 0 1.1rem; }
}
@media (max-width: 1000px) {
  .calc-grid { grid-template-columns: 1fr; }
  .col-side { position: static; }
  .mobile-bar:not([hidden]) { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bs-dark); color: #fff; padding: .75rem 1.25rem; justify-content: space-between; z-index: 1030; }
  main { padding-bottom: 70px !important; }
}
@media (max-width: 640px) {
  .user-btn .user-name { display: none; }
  .main-content { padding: 1rem .75rem; }
  .calc-meta { width: 100%; }
  .g-bands .row, .g-qty .row, .g-rate .row { grid-template-columns: 1fr 80px 64px 96px; font-size: 13px; }
  .g-banner .row { grid-template-columns: 16px 1fr 1fr 48px 0 84px 28px; }
  .g-banner .row > output.muted { display: none; }
}

@media print {
  /* Lege paginamargevakken: de browser drukt dan geen eigen datum, titel, url en paginanummer af */
  @page {
    size: A4; margin: 14mm 12mm;
    @top-left { content: ""; } @top-center { content: ""; } @top-right { content: ""; }
    @bottom-left { content: ""; } @bottom-center { content: ""; } @bottom-right { content: ""; }
  }
  :root { --bs-body-font-size: 11.5px; }
  body { background: #fff !important; }
  .sidebar, .header, .footer, .sidebar-backdrop { display: none !important; }
  .page-container { margin-left: 0 !important; }
  .calc-tabs { display: none !important; }
  .group { border-top: 0; }
  .calc-head, #calc-tabs, .toasts, .history, .prices-note, .mobile-bar, .link, .icon, .is-empty,
  .card.internal, .opt-foot .small, [data-act="reset-calc"] { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
  :root { --app-surface: #fff; --app-border: #ddd; --app-text: #000; --app-total-bg: #212529; }
  .print-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: 0 0 .75rem; padding-bottom: .6rem; border-bottom: 2px solid var(--letro); }
  fieldset.calc-body:disabled .num { color: #000; }
  .print-head h2 { margin: 0; font-size: 18px; white-space: nowrap; }
  .print-head > div:last-child { max-width: 55%; }
  .print-head span { color: var(--bs-secondary-color); }
  .calc-grid { display: block; }
  .col-main { gap: .6rem; }
  .col-side { position: static; margin-top: .6rem; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .card-header { padding: .5rem .9rem; }
  .card-body { padding: .5rem .9rem; }
  .summary { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
  .summary h3 { grid-column: 1 / -1; }
  .summary .total { margin-top: 0; }
  .summary h4 { margin-top: .6rem; }
  .summary .parts a { color: inherit; }
  details.group > summary::before { content: none; }
  .grid .row { padding: 0; }
  .num, .txt { border: 0 !important; background: none !important; padding: 1px 0 !important; box-shadow: none !important; }
  .txt::placeholder { color: transparent; }
  .total { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* overzicht: verwijderknop per rij */
.dash-table .col-actions { width: 1%; padding-left: 0; text-align: right; }
.row-delete { padding: .15rem .35rem; line-height: 1; }
.row-delete:hover { color: var(--bs-danger) !important; background: var(--bs-danger-bg-subtle); }

/* ---------- opties per onderdeel (accordeon) ---------- */
.opt-list { display: flex; flex-direction: column; gap: .6rem; }
.opt { overflow: visible; }
.opt-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .9rem; cursor: pointer; border-radius: inherit; }
.opt-head:hover { background: var(--bs-tertiary-bg); }
.opt-head:focus-visible { outline: 2px solid var(--letro); outline-offset: -2px; }
.opt-chev { color: var(--bs-secondary-color); display: grid; place-items: center; width: 22px; }
.opt-chev svg { transition: transform .15s; }
.opt.open .opt-chev svg { transform: rotate(90deg); }
.opt-no { font-size: 12px; color: var(--bs-secondary-color); white-space: nowrap; font-variant-numeric: tabular-nums; }
.opt-title { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.opt-name { font-weight: 500; max-width: 380px; border-color: transparent; background: transparent; padding: .1rem .35rem; margin-left: -.35rem; }
.opt-name:hover:not(:disabled) { border-color: var(--bs-border-color); }
.opt-name:focus { background: var(--bs-body-bg); }
.opt-name:disabled { background: transparent; border-color: transparent; color: inherit; }
.opt-facts { font-size: 12px; color: var(--bs-secondary-color); }
.opt-right { display: flex; align-items: center; gap: .15rem; }
.opt-total { font-weight: 700; min-width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.opt-btn { color: var(--bs-secondary-color); padding: .25rem .4rem; line-height: 1; }
.opt-btn:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.opt-btn.del:hover { color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.opt-btn.armed { color: #fff; }
.opt-body { border-top: 1px solid var(--bs-border-color-translucent); padding: 1rem; }
.opt-add { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: baseline; width: 100%; text-align: left; padding: .7rem .9rem; border: 1px dashed var(--bs-border-color); border-radius: .5rem; background: transparent; color: var(--bs-body-color); }
.opt-add span { color: var(--bs-secondary-color); font-size: 12px; }
.opt-add:hover { border-color: var(--letro); }
.opt-add:hover strong { color: var(--letro); }
.opt-count { font-size: 10px; margin-left: .35rem; padding: 0 .4rem; border-radius: 99px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-weight: 500; vertical-align: 1px; }
@media (max-width: 640px) {
  .opt-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .opt-no { display: none; }
  .opt-body { padding: .6rem; }
}

/* ---------- wijzigingslog ---------- */
.ev-change .changes { font-size: 12.5px; margin-top: .4rem; }
.ev-change .changes th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; }
.ev-change .changes td:nth-child(2), .ev-change .changes td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chg-add { color: var(--bs-success); font-weight: 600; }
.chg-del { color: var(--bs-danger); font-weight: 600; }
.log-link { display: inline-flex; align-items: center; gap: 3px; margin-left: .35rem; padding: 1px 6px; border-radius: 99px; font-size: 11px; font-weight: 600; text-decoration: none; color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); vertical-align: middle; }
.log-link:hover { background: var(--bs-warning-border-subtle); }

@media print {
  .opt:not(.open), .opt-head, .opt-add { display: none !important; }
  .opt { border: 0 !important; }
  .opt-body { border: 0; padding: 0; }
}

/* label "Gewijzigd na goedkeuring" */
.changed-badge { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border: 1px solid var(--bs-warning-border-subtle); }
.lock-note { font-size: .9em; }
@media print { .lock-note { display: none !important; } }

/* reisafstand bij Reistijd */
.route-note { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .6rem; padding: .5rem .7rem; border-radius: .4rem; background: var(--bs-tertiary-bg); font-size: 12.5px; }
.route-note .route-icon { color: var(--bs-secondary-color); display: grid; place-items: center; }
.route-note > span:not(.route-icon) { flex: 1 1 320px; }
.route-note .route-fill { margin-left: auto; padding: .1rem .5rem; font-size: 12px; }
@media print { .route-note { background: none; padding: 0; } .route-fill { display: none !important; } }

/* configuratie: vrije tekstvelden formaat en opmerkingen */
.prices td .price-txt { min-width: 140px; }
.prices td:nth-child(7) .price-txt { min-width: 180px; }

/* ---------- relaties ---------- */
.rel-pill { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 1px 8px; white-space: nowrap; vertical-align: 1px; }
.rel-pill.concept { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.rel-pill.land-nl { background: var(--bs-primary-bg-subtle, #e8f0fb); color: #1d5fb8; }
.rel-pill.land-be, .rel-pill.land-de { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--app-border); }
.rel-pill.verlegd { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.rel-pill.tarief { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--app-border); }
[data-bs-theme=dark] .rel-pill.land-nl { background: #1b2a44; color: #8cb8ff; }

/* klantkiezer */
.kp { position: relative; }
.kp-field { position: relative; }
.kp-field > .ico { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--bs-secondary-color); pointer-events: none; }
.kp-field > input { padding-left: 2.1rem; }
.kp-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.14); overflow: hidden; max-height: 340px; overflow-y: auto; }
.kp-opt { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; text-align: left; border: 0; background: none; padding: .55rem .8rem; border-top: 1px solid var(--app-border); color: var(--bs-body-color); }
.kp-opt:first-child { border-top: 0; }
.kp-opt small { color: var(--bs-secondary-color); }
.kp-opt:hover, .kp-opt.hl { background: var(--app-hover, var(--bs-tertiary-bg)); }
.kp-add { color: var(--letro); font-weight: 500; justify-content: flex-start; }
.kp-add .ico { width: 16px; height: 16px; }
.kp-dup { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-radius: 6px; padding: .45rem .65rem; font-size: 12.5px; margin-top: .4rem; }

/* klantkaart (nieuwe calculatie) */
.klant-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; padding: .8rem 1rem; border: 1px solid var(--app-border); border-radius: 6px; background: var(--bs-tertiary-bg); }
.kc-name { font-weight: 700; font-size: 15px; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.kc-addr { color: var(--bs-secondary-color); }
.kc-ids { font-size: 12px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.kc-act { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; font-size: 13px; }
.new-calc { max-width: 760px; }
@media (max-width: 575.98px) { .klant-card { grid-template-columns: 1fr; } .kc-act { flex-direction: row; align-items: center; flex-wrap: wrap; } }

/* klant in de calculatiekop */
.klant-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.kl-name { font-weight: 700; font-size: 15px; }
.kl-name a { color: inherit; text-decoration: none; }
.kl-name a:hover { color: var(--letro); }
.klant-empty { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.calc-onderwerp { width: 340px; }
.calc-btw { width: auto; }
.calc-btw .form-select { min-width: 190px; }
.klant-link { color: inherit; font-weight: 500; text-decoration: none; }
.klant-link:hover { color: var(--letro); text-decoration: underline; }
.concept-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-top: 1px solid var(--app-border); color: inherit; text-decoration: none; }
.concept-row:hover span:first-child { color: var(--letro); }

/* btw in de samenvatting */
.btw-lines { display: grid; grid-template-columns: 1fr auto; row-gap: .3rem; margin: .7rem 0 0; font-size: 13px; }
.btw-lines dt { color: var(--bs-secondary-color); font-weight: 400; }
.btw-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.btw-lines .sep { border-top: 1px solid var(--app-border); padding-top: .35rem; font-weight: 700; color: var(--bs-body-color); }
.verlegd-note { margin-top: .5rem; font-size: 12px; background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-radius: 5px; padding: .35rem .55rem; }

/* ---------- dashboard: actietegels ---------- */
/* dashboard: drie kolommen in werkvolgorde (relatie → calculatie → offerte) */
.dash-flow { display: grid; grid-template-columns: repeat(var(--flow-cols, 4), minmax(0, 1fr)); gap: 1.25rem; }
.dash-flow { grid-auto-rows: auto; }
/* elke kolom deelt de rijen (kop, knop, cijfers) met de andere kolommen: alles lijnt uit */
.dash-flow .flow-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: .6rem; }
.dash-flow .action-tile { padding: 1rem 1.1rem; gap: .85rem; height: 100%; }
.dash-flow .at-text { flex: 1 1 auto; }
.fs-label span, .fs-label small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-flow .at-icon { width: 48px; height: 48px; }
.dash-flow .at-text strong { font-size: 15px; }
.flow-col { --tile: #7c3aed; position: relative; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.flow-col.flow-calc { --tile: #e4002b; }
.flow-col.flow-quote { --tile: #009688; }
.flow-col.flow-wo { --tile: #f57c00; }
.flow-col:not(:last-child)::after { content: ''; position: absolute; top: 4.1rem; right: -.95rem; width: .6rem; height: .6rem; border-top: 2px solid var(--app-border); border-right: 2px solid var(--app-border); transform: rotate(45deg); }
.flow-h { display: flex; align-items: center; gap: .5rem; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--bs-secondary-color); padding-left: 2px; }
.flow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tile); }
.flow-stats { overflow: hidden; }
.flow-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: .75rem; align-items: center; padding: .7rem 1rem; color: inherit; text-decoration: none; border-top: 1px solid var(--app-border); transition: background .15s ease; }
.flow-stat:first-child { border-top: 0; }
.flow-stat:hover, .flow-stat:focus-visible { background: var(--bs-tertiary-bg); color: inherit; }
.fs-label { display: flex; flex-direction: column; min-width: 0; }
.fs-label span { font-weight: 500; }
.fs-label small { color: var(--bs-secondary-color); font-size: 12px; }
.fs-num { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; line-height: 1.1; }
.fs-num.attn { color: var(--bs-warning-text-emphasis); }
.fs-num.good { color: var(--bs-success-text-emphasis); }
.fs-chev { color: var(--bs-secondary-color); opacity: .6; transition: transform .15s ease; }
.flow-stat:hover .fs-chev { transform: translateX(2px); opacity: 1; }
/* smaller: 2 × 2 (de pijl loopt dan alleen binnen een rij), telefoon: onder elkaar */
@media (max-width: 1399.98px) { .dash-flow { grid-template-columns: repeat(var(--flow-cols-md, 2), minmax(0, 1fr)); } .flow-col:nth-child(2n)::after { display: none; } }
@media (max-width: 767.98px) { .dash-flow { grid-template-columns: 1fr; } .flow-col::after { display: none; } }
.action-tile { --tile: #7c3aed; position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; border-radius: 8px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--bs-body-color); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.action-tile.tile-calc { --tile: #e4002b; }
.action-tile.tile-quote { --tile: #009688; }
.action-tile.tile-wo { --tile: #f57c00; }
.action-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--tile) 9%, transparent) 50%, transparent 70%); transform: translateX(-100%); transition: transform .6s ease; }
.action-tile:hover, .action-tile:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tile) 45%, var(--app-border)); box-shadow: 0 10px 24px color-mix(in srgb, var(--tile) 18%, transparent); color: var(--bs-body-color); }
.action-tile:hover::before, .action-tile:focus-visible::before { transform: translateX(100%); }
.at-icon { position: relative; flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; color: var(--tile); background: color-mix(in srgb, var(--tile) 12%, transparent); }
.at-icon .ico { width: 28px; height: 28px; }
.at-icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--tile); opacity: 0; transform: scale(1); }
.action-tile:hover .at-icon::after { animation: at-ping 1.1s ease-out infinite; }
.action-tile .ico-plus { transform-box: fill-box; transform-origin: center; transition: transform .35s ease; }
.action-tile:hover .ico-plus { transform: rotate(90deg) scale(1.15); }
.at-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.at-text strong { font-size: 16px; font-weight: 600; }
.at-text small { color: var(--bs-secondary-color); }
.at-arrow { margin-left: auto; color: var(--tile); opacity: .35; transition: transform .2s ease, opacity .2s ease; }
.at-arrow .ico { width: 20px; height: 20px; }
.action-tile:hover .at-arrow { opacity: 1; transform: translateX(4px); }
/* eenmalige binnenkomst bij het openen van het dashboard */
.action-tile { animation: at-in .45s ease both; }
.action-tile.tile-calc { animation-delay: .08s; }
.action-tile.tile-quote { animation-delay: .16s; }
.action-tile.tile-wo { animation-delay: .24s; }
@keyframes at-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes at-ping { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .action-tile, .action-tile::before, .at-icon::after, .ico-plus, .at-arrow { animation: none !important; transition: none !important; }
}
@media print { .calc-btw, .klant-line .btn { display: none !important; } }

/* klikbare kerncijfers op het dashboard */
.kpi-link { color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.kpi-link:hover, .kpi-link:focus-visible { color: inherit; transform: translateY(-2px); border-color: color-mix(in srgb, var(--letro) 30%, var(--app-border)); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
@media (prefers-reduced-motion: reduce) { .kpi-link { transition: none; } .kpi-link:hover { transform: none; } }

/* ---------- producten ---------- */
.tagbar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tagfilter { border: 1px solid var(--app-border); background: var(--app-surface); color: var(--bs-body-color); border-radius: 99px; padding: .15rem .65rem; font-size: 12.5px; }
.tagfilter:hover { border-color: var(--bs-secondary-color); }
.tagfilter[aria-pressed="true"] { background: #1d5fb8; border-color: #1d5fb8; color: #fff; }
.tagfilter .n { opacity: .6; margin-left: 2px; font-variant-numeric: tabular-nums; }
.tag-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 500; border-radius: 99px; padding: 1px 8px; background: #e8f0fb; color: #1d5fb8; white-space: nowrap; }
[data-bs-theme=dark] .tag-pill { background: #1b2a44; color: #8cb8ff; }
.tag-pill button { border: 0; background: none; color: inherit; padding: 0 0 0 2px; font-size: 14px; line-height: 1; opacity: .7; }
.tag-pill button:hover { opacity: 1; }
.tag-editor { position: relative; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; border: 1px solid var(--app-border); border-radius: 6px; padding: .35rem; background: var(--app-surface); }
.tag-editor:focus-within { border-color: rgba(var(--letro-rgb), .5); box-shadow: 0 0 0 .2rem rgba(var(--letro-rgb), .12); }
.tag-editor input { border: 0; outline: none; background: transparent; flex: 1; min-width: 120px; padding: .15rem .25rem; color: var(--bs-body-color); }
.tag-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.14); overflow: hidden; }
.tag-sug button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .65rem; border-top: 1px solid var(--app-border); color: var(--bs-body-color); }
.tag-sug button:first-child { border-top: 0; }
.tag-sug button:hover { background: var(--app-hover, var(--bs-tertiary-bg)); }
.tag-sug .new-tag { color: var(--letro); font-weight: 500; }
.gb-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.prod-tabs .nav-link { color: var(--bs-secondary-color); }
.prod-tabs .nav-link.active { color: var(--bs-body-color); font-weight: 500; }

/* productpaneel (lade rechts) */
.drawer-back { position: fixed; inset: 0; background: rgba(15, 17, 22, .45); z-index: 1050; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 1055; background: var(--app-surface); border-left: 1px solid var(--app-border); box-shadow: -12px 0 32px rgba(0,0,0,.2); display: flex; flex-direction: column; animation: drawer-in .2s ease; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer header { display: flex; align-items: center; gap: .5rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--app-border); }
.drawer header h2 { font-size: 16px; margin: 0; font-weight: 500; }
.drawer-x { margin-left: auto; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--bs-secondary-color); padding: .1rem .45rem; border-radius: 4px; }
.drawer-x:hover { background: var(--app-hover, var(--bs-tertiary-bg)); }
.drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .9rem; }
.drawer footer { display: flex; gap: .5rem; justify-content: flex-end; padding: .75rem 1.1rem; border-top: 1px solid var(--app-border); }
.kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.kpi-mini { border: 1px solid var(--app-border); border-radius: 6px; padding: .45rem .6rem; }
.kpi-mini small { display: block; color: var(--bs-secondary-color); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.kpi-mini b { font-size: 15px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }

/* omzet per grootboekrekening */
.gb-detail td { background: var(--bs-tertiary-bg); }
.gb-calc { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border-top: 1px solid var(--app-border); color: inherit; text-decoration: none; }
.gb-calc:first-child { border-top: 0; }
.gb-calc:hover span:first-child { color: var(--letro); }
.gb-calc span:last-child { font-variant-numeric: tabular-nums; }
.calc-preview table td, .calc-preview table th { font-size: 13px; }

/* meldingen mogen nooit knoppen afdekken (bijv. Opslaan in het productpaneel): klikken gaan erdoorheen */
.toasts, .toasts .alert { pointer-events: none; }

/* projectkosten en projectsamenvatting (rechterkolom) */
.g-side .row { grid-template-columns: minmax(0, 1fr) 72px 96px; }
.g-side .row > span:first-child { display: flex; flex-direction: column; line-height: 1.25; }
.g-side .row > span small { color: var(--bs-secondary-color); font-size: 11px; }
.g-side .row.head span:nth-child(2) { text-align: right; }
.col-side .route-note > span:not(.route-icon) { flex-basis: 200px; }
.summary .parts { margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--bs-border-color); }
.summary .parts dt a { color: var(--bs-body-color); text-decoration: none; }
.summary .parts dt a:hover { color: var(--letro); text-decoration: underline; }
.summary .parts dt.grp { color: var(--bs-body-color); font-weight: 600; margin-top: .15rem; }
.summary .parts dt.ind { padding-left: .8rem; }
.summary .parts dt.alt a { color: var(--bs-secondary-color); }
.summary .parts dd.alt { color: var(--bs-secondary-color); text-decoration: line-through; }
.alt-tag { font-size: 10px; padding: 0 .4rem; border-radius: 99px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); white-space: nowrap; }
.overview tr.alt td:last-child { color: var(--bs-secondary-color); text-decoration: line-through; }
.overview td:nth-child(2) { font-size: 12px; color: var(--bs-secondary-color); }

/* optie: meetellen in projecttotaal */
.opt-incl { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; color: var(--bs-secondary-color); margin-right: .5rem; cursor: pointer; white-space: nowrap; }
.opt-incl .form-check-input { margin: 0; }
.opt.not-counted .opt-total { color: var(--bs-secondary-color); text-decoration: line-through; font-weight: 500; }
.opt.not-counted .opt-name { color: var(--bs-secondary-color); }
.opt-cards { display: flex; flex-direction: column; gap: 1rem; }
.opt-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .5rem .25rem 0; }
.opt-sub { display: inline-flex; gap: .6rem; align-items: baseline; }
@media (max-width: 640px) { .opt-incl span { display: none; } }
@media print { .opt-foot { padding: 0; } }

/* ---------- offertes ---------- */
.kpi-icon.c-teal { background: rgba(0,150,136,.12); color: #009688; }
.dev-badge { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); font-weight: 500; }
.q-fieldset { min-width: 0; }
.q-lines { display: flex; flex-direction: column; }
.q-line { display: grid; grid-template-columns: 22px minmax(0, 1fr) 220px; gap: .75rem; padding: .9rem 1rem; border-top: 1px solid var(--bs-border-color-translucent); }
.q-line:first-child { border-top: 0; }
.q-line.optional { background: var(--bs-tertiary-bg); }
.q-line.text { background: color-mix(in srgb, var(--bs-tertiary-bg) 50%, transparent); }
.q-grip { display: grid; place-items: center; align-self: start; width: 22px; height: 30px; margin-top: 1px; border-radius: .3rem; color: var(--bs-secondary-color); cursor: grab; touch-action: none; user-select: none; }
.q-grip:hover, .q-grip:focus-visible { color: var(--letro); background: var(--letro-soft); outline: none; }
.q-line.dragging { position: relative; z-index: 5; background: var(--bs-body-bg); box-shadow: 0 10px 28px rgba(0,0,0,.22); border-radius: .4rem; outline: 2px solid var(--letro); outline-offset: -2px; }
.q-line.dragging .q-grip { cursor: grabbing; color: var(--letro); }
body.q-dragging, body.q-dragging * { cursor: grabbing !important; user-select: none !important; }
.q-noklant { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 420px); gap: .9rem; align-items: center; padding: .8rem 1rem; border: 1px dashed var(--bs-warning-border-subtle); background: var(--bs-warning-bg-subtle); border-radius: .5rem; }
.q-noklant-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bs-body-bg); color: var(--bs-warning-text-emphasis); }
.q-noklant-ico .ico { width: 22px; height: 22px; }
.q-noklant-txt { display: flex; flex-direction: column; gap: 2px; color: var(--bs-warning-text-emphasis); }
.q-noklant-txt small { color: var(--bs-body-color); opacity: .8; }
.q-noklant-pick { position: relative; min-width: 0; }
@media (max-width: 900px) { .q-noklant { grid-template-columns: auto minmax(0, 1fr); } .q-noklant-pick { grid-column: 1 / -1; } }
.q-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.q-src { font-size: 12px; }
.src-chip { display: inline-block; padding: 0 .5rem; border-radius: 99px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.src-chip.gone { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.q-price { display: flex; flex-direction: column; gap: .35rem; }
.q-qty { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.q-unitprice { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; font-size: 12px; color: var(--bs-secondary-color); margin: 0; }
.q-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-total.struck { color: var(--bs-secondary-color); text-decoration: line-through; font-weight: 500; }
.q-dev { text-align: right; font-size: 12px; color: var(--bs-warning-text-emphasis); }
.q-dev:empty { display: none; }
.q-dev .btn { font-size: 12px; }
.q-opt { display: flex; gap: .35rem; align-items: center; justify-content: flex-end; font-size: 12px; color: var(--bs-secondary-color); margin: 0; }
.q-opt .form-check-input { margin: 0; }
.q-del { align-self: flex-end; font-size: 12px; text-decoration: none; }
.q-add { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--bs-border-color-translucent); }
.q-dashed { border-style: dashed; }
.picker-wrap { position: relative; }
.q-picker { position: absolute; left: 0; bottom: calc(100% + 6px); width: min(440px, 85vw); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: .5rem; z-index: 20; display: flex; flex-direction: column; gap: .4rem; }
.q-picker ul { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.q-picker li button { width: 100%; text-align: left; border: 0; background: none; padding: .45rem .5rem; border-radius: .35rem; display: grid; grid-template-columns: 1fr auto; gap: 2px .6rem; color: inherit; }
.q-picker li button:hover, .q-picker li button:focus-visible { background: var(--bs-tertiary-bg); }
.q-picker .pn { font-weight: 500; }
.q-picker .pp { text-align: right; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); font-size: 13px; }
.q-picker .pt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.q-picker .pt span { font-size: 10.5px; padding: 0 .4rem; border-radius: 99px; background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.q-picker .empty { padding: .5rem; font-size: 13px; color: var(--bs-secondary-color); }
.q-note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 1rem .75rem; padding: .55rem .75rem; border-radius: .5rem; background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); font-size: 13px; }
.q-note.warn { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.q-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.q-img { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.q-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.q-img .btn { align-self: flex-start; font-size: 12px; }
.q-img-add { background: transparent; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 4 / 3; border: 1px dashed var(--bs-border-color); border-radius: .4rem; cursor: pointer; color: var(--bs-secondary-color); margin: 0; }
.q-img-add:hover { border-color: var(--letro); color: var(--letro); }
.q-img-add small { font-size: 11px; }
.q-claus { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.q-claus .form-check-input { margin: 0; }
.q-korting { display: inline-block; width: auto; padding-top: 0; padding-bottom: 0; font-size: 12px; }
.q-showtotal { display: flex; gap: .55rem; align-items: flex-start; margin: .8rem 0 0; padding: .6rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; font-size: 13px; cursor: pointer; }
.q-showtotal .form-check-input { margin-top: .2rem; flex: none; }
.q-cmp { margin-top: .6rem; padding: .55rem .7rem; border-radius: .5rem; font-size: 13px; }
.q-cmp.same { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.q-cmp.diff { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.qs-logo { max-height: 48px; max-width: 180px; object-fit: contain; }
@media (max-width: 760px) { .q-line { grid-template-columns: 22px minmax(0, 1fr); } .q-price { grid-column: 2; } }

/* klantweergave: A4-vel, altijd licht */
.q-paper-wrap { overflow-x: auto; padding: .25rem 0 1rem; }
.q-paper { width: 794px; min-height: 1123px; margin: 0 auto; background: #fff; color: #22262b; box-shadow: 0 2px 14px rgba(0,0,0,.14); padding: 56px 60px; display: flex; flex-direction: column; gap: 20px; font-size: 12.5px; line-height: 1.45; }
.q-paper .muted { color: #6b7178; }
.q-paper h2 { font-size: 21px; font-weight: 500; margin: 0; color: #22262b; }
.q-paper .p-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.q-paper .p-logo { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 20px; }
.q-paper .p-logo img { max-height: 56px; max-width: 240px; object-fit: contain; }
.q-paper .p-mark { width: 36px; height: 36px; border-radius: 8px; background: #0084e8; color: #fff; display: grid; place-items: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.q-paper .p-co { text-align: right; color: #6b7178; font-size: 11px; line-height: 1.55; }
.q-paper .p-co strong { color: #22262b; }
.q-paper .p-addr { display: flex; justify-content: space-between; gap: 20px; }
.q-paper .p-meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: 11.5px; margin: 0; }
.q-paper .p-meta dt { color: #6b7178; font-weight: 400; }
.q-paper .p-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.q-paper .p-pre { white-space: pre-line; max-width: 72ch; }
.q-paper .p-table { width: 100%; border-collapse: collapse; }
.q-paper .p-table th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6b7178; font-weight: 500; text-align: left; padding: 6px 0; border-bottom: 1.5px solid #22262b; }
.q-paper .p-table td { padding: 9px 0; border-bottom: 1px solid #e3e5e8; vertical-align: top; }
.q-paper .p-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 14px; }
.q-paper .p-table .t { font-weight: 700; }
.q-paper .p-table .d { color: #6b7178; margin-top: 3px; max-width: 60ch; white-space: pre-line; }
.q-paper .p-textrow td { padding-top: 14px; border-bottom-color: transparent; }
.q-paper .p-tot { align-self: flex-end; width: 310px; display: grid; grid-template-columns: 1fr auto; row-gap: 4px; margin: 0; }
.q-paper .p-tot dt { color: #6b7178; font-weight: 400; }
.q-paper .p-tot dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.q-paper .p-tot .big { border-top: 1.5px solid #22262b; padding-top: 6px; font-weight: 700; font-size: 14px; color: #22262b; }
.q-paper .p-note { color: #6b7178; font-size: 11.5px; }
.q-paper .p-h { font-weight: 700; font-size: 13px; }
.q-paper .p-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.q-paper .p-images figure { margin: 0; break-inside: avoid; }
.q-paper .p-images img { width: 100%; max-height: 420px; object-fit: contain; border: 1px solid #e3e5e8; }
.q-paper .p-images figcaption { font-size: 11px; color: #6b7178; margin-top: 3px; }
.q-paper .p-claus { margin: 4px 0 0; padding-left: 18px; }
.q-paper .p-cond { display: grid; grid-template-columns: 130px 1fr; gap: 3px 14px; font-size: 11.5px; margin: 0; }
.q-paper .p-cond dt { color: #6b7178; font-weight: 400; }
.q-paper .p-cond dd { margin: 0; }
.q-paper .p-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: auto; padding-top: 24px; font-size: 11.5px; break-inside: avoid; }
.q-paper .p-sign div { border-top: 1px solid #22262b; padding-top: 6px; color: #6b7178; min-height: 70px; }

@media print {
  .quote-page .q-head, .quote-page .q-tabs, .quote-page .q-edit { display: none !important; }
  .quote-page .q-paper-wrap { display: block !important; overflow: visible; padding: 0; }
  .quote-page .q-paper { width: 100%; box-sizing: border-box; min-height: 0; box-shadow: none; padding: 0 3px 0 1px; }
  .quote-page .p-table tr { break-inside: avoid; }
}

.unreviewed-badge { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border: 1px solid var(--bs-warning-border-subtle); font-weight: 500; }

/* ---------- werkbonnen ---------- */
.wo-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem 1rem; }
.wo-date { display: flex; flex-direction: column; line-height: 1.15; }
.wo-date strong { font-size: 13px; }
.wo-date small, .wo-main small { color: var(--bs-secondary-color); font-size: 11.5px; }
.wo-main { display: flex; flex-direction: column; min-width: 0; }
.wo-main strong, .wo-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-people { display: flex; flex-wrap: wrap; gap: .5rem; }
.w-person { position: relative; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--bs-border-color); border-radius: 99px; padding: .2rem .7rem .2rem .25rem; cursor: pointer; margin: 0; }
.w-person input { position: absolute; opacity: 0; pointer-events: none; }
.w-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.w-person:has(input:checked) { border-color: #f57c00; background: rgba(245,124,0,.12); }
.w-person:has(input:checked) .w-av { background: #f57c00; color: #fff; }
.w-person:has(input:focus-visible) { outline: 2px solid var(--letro); outline-offset: 2px; }
.w-lines { display: flex; flex-direction: column; }
.w-line { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: .6rem; align-items: center; padding: .6rem 1rem; border-top: 1px solid var(--bs-border-color-translucent); }
.w-line:first-child { border-top: 0; }
.w-line.dragging { position: relative; z-index: 5; background: var(--bs-body-bg); box-shadow: 0 10px 28px rgba(0,0,0,.22); border-radius: .4rem; outline: 2px solid var(--letro); outline-offset: -2px; }
.w-line .q-grip { margin-top: 0; }
.w-mee { display: flex; flex-direction: column; gap: .35rem; }
.w-mee-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.w-mee-row .q-grip { margin: 0; height: 28px; }
.w-mee-row.dragging { position: relative; z-index: 5; background: var(--bs-body-bg); box-shadow: 0 10px 28px rgba(0,0,0,.22); border-radius: .4rem; outline: 2px solid var(--letro); outline-offset: 2px; }
@media (max-width: 760px) { .w-line { grid-template-columns: 22px minmax(0, 1fr) auto; } .w-line > input:nth-of-type(2) { grid-column: 2; } .w-line .src-chip { display: none; } }

/* afdrukversie werkbon: A4, altijd licht */
.w-paper-wrap { overflow-x: auto; padding: .25rem 0 1rem; }
.w-paper { width: 794px; min-height: 1123px; margin: 0 auto; background: #fff; color: #22262b; box-shadow: 0 2px 14px rgba(0,0,0,.14); padding: 44px 48px; display: flex; flex-direction: column; gap: 16px; font-size: 11.5px; line-height: 1.45; }
.w-paper h2, .w-paper h4 { color: #22262b; }
.w-paper .p-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #22262b; padding-bottom: 10px; }
.w-paper .p-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.w-paper .p-logo img { max-height: 48px; max-width: 220px; object-fit: contain; }
.w-paper .p-mark { width: 30px; height: 30px; border-radius: 7px; background: #0084e8; color: #fff; display: grid; place-items: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.w-paper .p-title { text-align: right; }
.w-paper .p-title h2 { font-size: 20px; letter-spacing: .02em; margin: 0; font-weight: 700; }
.w-paper .p-title .nr { font-size: 13px; font-weight: 700; }
.w-paper .p-title .ref { color: #6b7178; font-size: 11px; }
.w-paper .p-boxes { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #22262b; }
.w-paper .p-box { padding: 8px 10px; border-left: 1px solid #22262b; }
.w-paper .p-box:first-child { border-left: 0; }
.w-paper .p-box strong { font-size: 12.5px; }
.w-paper h4 { margin: 0 0 5px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #6b7178; font-weight: 700; }
.w-paper .p-work { width: 100%; border-collapse: collapse; }
.w-paper .p-work td { padding: 6px 0; border-bottom: 1px solid #d9dce0; vertical-align: top; color: #22262b; }
.w-paper .p-work td.box { width: 22px; }
.w-paper .p-work .t { font-weight: 700; }
.w-paper .p-work .sub { color: #4b5057; }
.w-paper .sq { display: inline-block; width: 12px; height: 12px; border: 1.5px solid #22262b; border-radius: 2px; margin-top: 1px; flex: none; }
.w-paper .p-pre { white-space: pre-line; border: 1px solid #d9dce0; border-radius: 4px; padding: 8px 10px; }
.w-paper .p-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.w-paper .p-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.w-paper .p-list li { display: flex; gap: 8px; align-items: flex-start; }
.w-paper .p-hours { width: 100%; border-collapse: collapse; }
.w-paper .p-hours th { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #6b7178; font-weight: 700; text-align: left; padding: 4px 6px; border: 1px solid #22262b; background: #f3f4f6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.w-paper .p-hours td { height: 26px; border: 1px solid #22262b; padding: 0 6px; color: #22262b; }
.w-paper .p-lines { display: flex; flex-direction: column; }
.w-paper .p-lines div { height: 24px; border-bottom: 1px solid #b9bdc3; }
.w-paper .p-sign { max-width: 55%; margin-top: auto; }
.w-paper .p-sign > div { border: 1px solid #22262b; padding: 8px 10px; min-height: 110px; display: flex; flex-direction: column; gap: 6px; }
.w-paper .p-sign .ln { border-bottom: 1px solid #b9bdc3; height: 18px; font-size: 10px; color: #6b7178; display: flex; align-items: flex-end; }
.w-paper .p-sign .ln.sig { height: 54px; }
.w-paper .p-sign .akkoord { font-size: 10px; color: #6b7178; }
.w-paper .p-remind { color: #22262b; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.w-paper .p-remind svg { flex: none; }
.w-paper .p-foot { display: flex; justify-content: space-between; font-size: 9.5px; color: #6b7178; border-top: 1px solid #d9dce0; padding-top: 6px; }
@media print {
  .wo-page .w-head, .wo-page .w-tabs, .wo-page .w-edit { display: none !important; }
  .wo-page .w-paper-wrap { display: block !important; overflow: visible; padding: 0; }
  /* een paar pixels speling, zodat de rechterrand van vakken en tabel niet op de grens van het printbare gebied valt */
  .wo-page .w-paper { width: 100%; box-sizing: border-box; min-height: calc(297mm - 28mm); box-shadow: none; padding: 0 3px 0 1px; }
}

#wf-adres::placeholder, #wf-eindklant::placeholder, [data-k="meta.locatie"]::placeholder { color: var(--bs-secondary-color); opacity: .8; }

/* uren per persoon: regel met −/+ onder montage en reistijd */
.mult-row { font-size: 12px; padding-top: 0 !important; }
.mult-label { display: inline-flex; align-items: center; gap: .4rem; color: var(--bs-secondary-color); padding-left: .1rem; }
.mult-label svg { flex: none; opacity: .85; }
/* in de smalle projectkolom staan naam en prijs onder elkaar; het label van monteurs/ritten juist naast het icoon */
.g-side .row > span.mult-label { flex-direction: row; align-items: center; justify-content: flex-start; gap: .4rem; }
.mult-total { color: var(--bs-secondary-color); font-size: 12px; white-space: nowrap; }
.stepper { display: inline-grid; grid-template-columns: 22px minmax(0, 1fr) 22px; align-items: stretch; height: 26px; border: 1px solid var(--bs-border-color); border-radius: 99px; overflow: hidden; background: var(--bs-body-bg); }
.stepper button { border: 0; background: transparent; color: var(--bs-secondary-color); font-size: 14px; line-height: 1; padding: 0; }
.stepper button:hover { background: var(--letro-soft); color: var(--letro); }
.stepper .num { border: 0 !important; border-radius: 0; height: 100%; padding: 0 2px !important; text-align: center; font-size: 12px; box-shadow: none !important; background: transparent !important; min-width: 0; }
.stepper:focus-within { border-color: rgba(var(--letro-rgb), .5); box-shadow: 0 0 0 .15rem rgba(var(--letro-rgb), .15); }
@media print { .stepper { border: 0; } .stepper button { display: none; } }

/* controlepunten */
.cp-count { font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 99px; background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.cp-count.clear { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.cp-list { display: flex; flex-direction: column; }
.cp { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .6rem; padding: .65rem 1rem; border-top: 1px solid var(--bs-border-color-translucent); }
.cp:first-child { border-top: 0; }
.cp-ico { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.cp.warn .cp-ico { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.cp.tip .cp-ico { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.cp.done { opacity: .65; }
.cp.done .cp-ico { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.cp-t { font-weight: 500; font-size: 13px; }
.cp-d { color: var(--bs-secondary-color); font-size: 12px; }
.cp-a { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .3rem; align-items: center; }
.cp-a .btn-link { font-size: 12px; font-weight: 500; text-decoration: none; }
.cp-note { font-size: 12px; color: var(--bs-secondary-color); font-style: italic; }
.cp-reason { margin-top: .4rem; font-size: 12px; }
.cp-empty { padding: .75rem 1rem; color: var(--bs-success-text-emphasis); font-size: 13px; }
.cp-flag { border-color: #f0ad4e !important; box-shadow: 0 0 0 .2rem rgba(240, 173, 78, .25) !important; }
@media print { .checks-card, #calc-bijlagen { display: none !important; } }

/* tekeningen en foto's */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.bl-file { position: relative; border: 1px solid var(--bs-border-color); border-radius: .4rem; overflow: hidden; background: var(--bs-tertiary-bg); display: flex; flex-direction: column; }
.bl-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bl-thumb.pdf { color: #c2410c; font-weight: 700; font-size: 13px; letter-spacing: .05em; }
.bl-name { font-size: 11px; padding: 3px 6px; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--bs-border-color); }
.bl-del { position: absolute; top: 2px; right: 2px; background: var(--bs-body-bg) !important; border-radius: 4px; padding: 0 5px !important; }
.bl-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 4 / 3; border: 1px dashed var(--bs-border-color); border-radius: .4rem; color: var(--bs-secondary-color); font-size: 12px; text-align: center; padding: .3rem; cursor: pointer; margin: 0; }
.bl-add:hover { border-color: var(--letro); color: var(--letro); }
.bl-add span { font-size: 11px; }

/* Beheer › Calculaties */
.cs-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.cs-row .form-switch { padding-top: .15rem; }
.cs-set { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .4rem; font-size: 13px; }

/* knoppen met alleen een icoon */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding-left: .45rem; padding-right: .45rem; }
.btn-icon svg { flex: none; }
.btn-icon.armed { min-width: 0; }

/* autobelettering: voertuig- en pakkettegels */
.ab-group { display: flex; flex-direction: column; gap: .5rem; }
.ab-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); font-weight: 600; }
.ab-tiles { display: grid; gap: .6rem; }
.ab-tiles.v { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ab-tiles.p { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-tile { position: relative; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-body-bg); color: var(--bs-body-color); padding: .7rem .4rem .6rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ab-tile:hover { border-color: rgba(var(--letro-rgb), .5); transform: translateY(-1px); }
.ab-tile[aria-pressed="true"] { border-color: var(--letro); box-shadow: 0 0 0 .2rem rgba(var(--letro-rgb), .15); }
.ab-tile[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 4px; right: 7px; font-size: 11px; font-weight: 700; color: var(--letro); }
.ab-tile svg { width: 100%; max-width: 88px; height: auto; }
.ab-tile .nm { font-weight: 500; font-size: 13px; }
.ab-tile .sub { font-size: 11px; color: var(--bs-secondary-color); line-height: 1.3; }
.ab-tile .pr { font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-tile[aria-pressed="true"] .pr { color: var(--letro); }
.veh-body { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.veh-wheel { fill: var(--bs-body-bg); stroke: currentColor; stroke-width: 1.4; }
.veh-fill { fill: var(--letro); opacity: .85; }
.ab-nac { display: flex; gap: .5rem; align-items: flex-start; padding-top: .5rem; margin: .25rem 0 0; border-top: 1px solid var(--bs-border-color-translucent); font-size: 13px; cursor: pointer; }
.ab-nac .form-check-input { margin-top: .2rem; flex: none; }
.ab-nac small { display: block; color: var(--bs-secondary-color); font-size: 11.5px; }
.ab-print { display: none; }
@media (max-width: 1399.98px) { .ab-tiles.p { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .ab-tiles.v { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ab-tiles.v, .ab-tiles.p { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .ab-tiles, .ab-label, .ab-nac { display: none !important; } .ab-print { display: block; font-weight: 500; } }
@media (prefers-reduced-motion: reduce) { .ab-tile { transition: none; } .ab-tile:hover { transform: none; } }

/* Verjaardag in de kopbalk */
.bday-pill { display: inline-flex; align-items: center; gap: .45rem; margin-right: .5rem; padding: .35rem .8rem .35rem .6rem; border-radius: 999px;
  background: #fde7f3; color: #c2185b; font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px #f8bbd9; }
.bday-pill .ico { width: 20px; height: 20px; animation: bday-wiggle 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
[data-bs-theme="dark"] .bday-pill { background: rgba(236, 64, 122, .16); color: #f48fb1; box-shadow: inset 0 0 0 1px rgba(244, 143, 177, .35); }
@keyframes bday-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(7deg); } 95% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .bday-pill .ico { animation: none; } }
@media (max-width: 767.98px) { .bday-pill { padding: .35rem; } .bday-pill .bday-text { display: none; } }
@media print { .bday-pill { display: none; } }

/* ---------- Uren en verlof ---------- */
.u-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; vertical-align: middle; flex: none; }
.u-dot.on { background: #16a34a; } .u-dot.leave { background: var(--letro); } .u-dot.sick { background: #db2777; }
.u-dot.off, .u-dot.muted { background: #cbd5e1; } [data-bs-theme=dark] .u-dot.off, [data-bs-theme=dark] .u-dot.muted { background: #4b5563; }
.u-dot.danger { background: #dc2626; } .u-dot.warn { background: #f59e0b; } .u-dot.info { background: var(--letro); }

.u-klokcard .card-body { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.4rem; }
.u-hello { font-size: 1.35rem; font-weight: 500; }
.u-date { color: var(--app-muted); margin-top: -.45rem; }
.u-rooster, .u-today { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--app-border); padding-top: .55rem; }
.u-rooster span, .u-today span { color: var(--app-muted); }
.u-today strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.u-status { display: flex; align-items: center; gap: .5rem; }
.u-klok { width: 100%; padding: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; border: 0; border-radius: 12px; }
.u-klok.in { background: #16a34a; } .u-klok.in:hover { background: #15803d; color: #fff; }
.u-klok.out { background: #dc2626; } .u-klok.out:hover { background: #b91c1c; color: #fff; }
.u-saldi-mini { display: flex; gap: .5rem; border-top: 1px solid var(--app-border); padding-top: .55rem; }
.u-saldi-mini a { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: .35rem .5rem; border-radius: 8px; }
.u-saldi-mini a:hover { background: var(--app-hover); }
.u-saldi-mini span { font-size: 12px; color: var(--app-muted); } .u-saldi-mini strong { font-variant-numeric: tabular-nums; }
.u-klokcard.compact .u-hello { font-size: 1.1rem; }
.u-klokcard.compact .u-klok { padding: .6rem; }

.u-saldi { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.u-saldi > div { display: flex; flex-direction: column; min-width: 120px; }
.u-saldi span { color: var(--app-muted); font-size: 12px; } .u-saldi strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; } .u-saldi small { color: var(--app-muted); }
.u-prob + .u-prob { border-top: 1px solid var(--app-border); }
.u-weektot { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 13px; color: var(--app-muted); }
.u-weektot strong { color: var(--app-text); font-variant-numeric: tabular-nums; }
.u-week td, .u-rep td { font-variant-numeric: tabular-nums; }
.u-week tr.u-warn td { background: rgba(220, 38, 38, .05); }
.u-week tr.u-todayrow td:first-child { box-shadow: inset 3px 0 0 var(--letro); }
.u-week tr.u-future td { color: var(--app-muted); }
.u-plus { color: #16a34a; font-weight: 600; } .u-min { color: #dc2626; font-weight: 600; }
.u-tag { display: inline-block; font-size: 11px; padding: 0 .4rem; border-radius: 999px; background: var(--app-hover); color: var(--app-muted); white-space: nowrap; }
.u-tag.warn { background: #fef3c7; color: #92400e; } .u-tag.ok { background: #dcfce7; color: #166534; } .u-tag.no { background: #fee2e2; color: #991b1b; }
[data-bs-theme=dark] .u-tag.warn { background: rgba(245, 158, 11, .18); color: #fcd34d; } [data-bs-theme=dark] .u-tag.ok { background: rgba(22, 163, 74, .2); color: #86efac; } [data-bs-theme=dark] .u-tag.no { background: rgba(220, 38, 38, .2); color: #fca5a5; }
.u-type { display: inline-block; font-size: 12px; padding: .05rem .5rem; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; }
.u-big { font-size: 2rem; font-weight: 500; font-variant-numeric: tabular-nums; } .u-big small { font-size: 1rem; color: var(--app-muted); }
.u-dl { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; margin: .5rem 0; font-size: 13px; }
.u-dl dt { font-weight: 400; color: var(--app-muted); } .u-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.u-preview { background: var(--app-hover); border-radius: 8px; padding: .6rem .8rem; }
.u-preview:empty { display: none; }

.u-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.u-tile { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface); text-decoration: none; color: inherit; }
.u-tile strong { font-size: 1.6rem; font-weight: 500; line-height: 1.1; }
.u-tile span { font-size: 13px; color: var(--app-muted); display: flex; align-items: center; gap: .4rem; }
.u-tiles.sm .u-tile { padding: .55rem .75rem; } .u-tiles.sm .u-tile strong { font-size: 1.3rem; }
a.u-tile:hover { background: var(--app-hover); }
@media (max-width: 767.98px) { .u-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.u-actie { display: flex; align-items: center; gap: .75rem; }
.u-actie .u-a-main { flex: 1; min-width: 0; }
.u-a-btns { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.u-acties { max-height: 560px; overflow-y: auto; }
.u-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.u-chips > span { padding: .35rem .75rem; border: 1px solid var(--app-border); border-radius: 999px; font-size: 13px; color: var(--app-muted); background: var(--app-surface); }
.u-chips > span strong { color: var(--app-text); margin-left: .25rem; }
.u-chips > span.warn { border-color: #f59e0b; }
tr.u-old td { color: var(--app-muted); text-decoration: line-through; }
tr.u-old td:last-child { text-decoration: none; }
.u-savebar { position: sticky; bottom: 0; padding: .75rem 0; margin-top: 1rem; background: linear-gradient(to top, var(--app-bg) 70%, transparent); max-width: 1200px; display: flex; justify-content: flex-end; }

/* ---------- Planning ---------- */
.main-content:has(.pl-module) { max-width: none; padding-bottom: .75rem; }
.pl-module { display: flex; flex-direction: column; gap: .75rem; height: calc(100vh - var(--header-h) - 2.25rem); min-height: 520px; }
.pl-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; --pl-h: 40px; }
.pl-top > .form-select, .pl-top .form-control { height: var(--pl-h); }
.pl-tools { display: flex; gap: .4rem; }
.pl-ibtn { position: relative; width: var(--pl-h); height: var(--pl-h); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); border-radius: 10px; }
.pl-ibtn:hover { background: var(--app-hover); }
.pl-ibtn.primary { background: var(--letro); border-color: var(--letro); color: #fff; }
.pl-ibtn.primary:hover { background: #006fc4; }
.pl-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--letro); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--app-surface); }
.pl-badge[hidden] { display: none; }
.pl-pop-wrap { position: relative; }
.pl-popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050; width: 280px; padding: .75rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; box-shadow: 0 14px 40px rgba(15,23,42,.18); display: flex; flex-direction: column; gap: .3rem; }
.pl-popover[hidden] { display: none; }
.pl-fp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .25rem; }
.pl-fl { font-size: 12px; color: var(--app-muted); margin: .25rem 0 0; }
.pl-boardsel { width: auto; min-width: 150px; max-width: 240px; font-weight: 500; }
.pl-views { display: inline-flex; align-items: stretch; height: var(--pl-h); background: var(--app-hover); border-radius: 10px; padding: 3px; gap: 2px; }
.pl-views a { display: inline-flex; align-items: center; }
.pl-views a { padding: .35rem .9rem; border-radius: 8px; color: var(--app-muted); text-decoration: none; font-weight: 500; }
.pl-views a.active { background: var(--app-surface); color: var(--app-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pl-top-right { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.pl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .75rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; }
.pl-filters .form-select, .pl-filters .form-control { width: auto; max-width: 190px; }
.pl-filters .pl-date { width: 140px; }
.pl-search { position: relative; flex: 0 1 240px; min-width: 140px; margin-left: auto; }
.pl-search .ico { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--app-muted); }
.pl-search input { padding-left: 1.9rem; max-width: none !important; width: 100% !important; }
.pl-count { margin-left: auto; font-size: 13px; color: var(--app-muted); white-space: nowrap; }
.pl-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* tegel */
.pl-card { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .6rem .7rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; cursor: pointer; box-shadow: 0 1px 1px rgba(15,23,42,.04); transition: box-shadow .12s, border-color .12s; }
.pl-card:hover { border-color: #b9c6d6; box-shadow: 0 2px 6px rgba(15,23,42,.08); }
.pl-card:focus-visible { outline: 2px solid var(--letro); outline-offset: 1px; }
.pl-card.is-open { border-color: var(--letro); box-shadow: 0 0 0 2px var(--letro-soft); }
.pl-card.is-late { border-left: 3px solid #dc2626; }
.pl-title { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.pl-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-label { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pl-label.sm { font-size: 11px; padding: 0 7px; }
.pl-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: 12.5px; color: var(--app-muted); }
.pl-meta .ico { width: 13px; height: 13px; vertical-align: -2px; }
.pl-date.late { color: #dc2626; font-weight: 500; }
.pl-city { display: inline-flex; align-items: center; gap: 2px; }
.pl-city svg { flex: none; opacity: .8; }
.pl-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pl-avs { display: flex; }
.pl-av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--c, #64748b); border: 2px solid var(--app-surface); flex: none; }
.pl-av.sm { width: 24px; height: 24px; font-size: 10px; }
.pl-avs .pl-av + .pl-av { margin-left: -6px; }
.pl-av.more { background: #94a3b8; }
.pl-com { font-size: 12px; color: var(--app-muted); display: inline-flex; align-items: center; gap: 3px; }

/* Kanban */
.pl-kanban { display: flex; gap: .75rem; align-items: flex-start; overflow-x: auto; padding-bottom: .75rem; flex: 1; min-height: 0; scroll-snap-type: x proximity; }
.pl-col { flex: 0 0 290px; display: flex; flex-direction: column; max-height: 100%; background: var(--app-hover); border-radius: 12px; border-top: 3px solid var(--lc); scroll-snap-align: start; }
.pl-colhead { position: relative; display: flex; align-items: center; gap: .5rem; padding: .6rem .6rem .4rem .75rem; }
.pl-colhead h2 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-coldot { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); flex: none; display: inline-block; }
.pl-colcount { font-size: 12px; color: var(--app-muted); background: var(--app-surface); border-radius: 999px; padding: 0 8px; }
.pl-colbtn { border: 0; background: none; width: 28px; height: 28px; border-radius: 6px; color: var(--app-muted); font-size: 18px; line-height: 1; }
.pl-colbtn:hover { background: var(--app-surface); color: var(--app-text); }
.pl-colmenu { position: absolute; right: .5rem; top: 2.3rem; z-index: 20; min-width: 210px; padding: .35rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.15); display: flex; flex-direction: column; }
.pl-colmenu[hidden] { display: none; }
.pl-colmenu button { display: flex; align-items: center; gap: .5rem; border: 0; background: none; text-align: left; padding: .45rem .6rem; border-radius: 6px; font-size: 14px; color: var(--app-text); }
.pl-colmenu button:hover { background: var(--app-hover); }
.pl-colmenu .ico { width: 16px; height: 16px; color: var(--app-muted); }
.pl-cards { display: flex; flex-direction: column; gap: .5rem; padding: .15rem .6rem .5rem; overflow-y: auto; min-height: 36px; }
.pl-empty { padding: .5rem .75rem 0; font-size: 13px; color: var(--app-muted); }
.pl-addwrap { padding: .25rem .6rem .6rem; }
.pl-add { width: 100%; display: flex; align-items: center; gap: .35rem; border: 0; background: none; color: var(--app-muted); padding: .4rem .35rem; border-radius: 8px; font-size: 14px; }
.pl-add:hover { background: var(--app-surface); color: var(--app-text); }
.pl-add .ico { width: 16px; height: 16px; }
.pl-ghost { opacity: .4; }
.pl-chosen { box-shadow: 0 8px 24px rgba(15,23,42,.18); }
.pl-card.locked { cursor: pointer; }

/* Planning (split) en kaart */
.pl-split { flex: 1; display: grid; grid-template-columns: var(--pl-left, 32%) 10px minmax(0, 1fr); gap: .25rem; min-height: 0; }
.pl-resizer { cursor: col-resize; border-radius: 6px; position: relative; touch-action: none; }
.pl-resizer::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; transform: translate(-50%, -50%); border-radius: 4px; background: var(--app-border); transition: background .15s; }
.pl-resizer:hover::after, .pl-split.is-resizing .pl-resizer::after { background: var(--letro); }
.pl-split.is-resizing { user-select: none; cursor: col-resize; }
.pl-split.is-resizing iframe, .pl-split.is-resizing #pl-map { pointer-events: none; }
.pl-left { display: flex; flex-direction: column; min-height: 0; background: var(--app-hover); border-radius: 12px; padding: .6rem; gap: .5rem; }
.pl-lefttabs { display: flex; gap: 4px; }
.pl-lefttabs button { flex: 1; border: 0; background: none; padding: .4rem .5rem; border-radius: 8px; font-weight: 500; color: var(--app-muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-lefttabs button.active { background: var(--app-surface); color: var(--app-text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pl-lefttabs span { font-size: 12px; opacity: .7; }
.pl-hint { margin: 0; font-size: 12.5px; color: var(--app-muted); padding: 0 .25rem; }
.pl-leftlist { overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .1rem; }
.pl-group { display: flex; flex-direction: column; gap: .4rem; }
.pl-grouphead { display: flex; align-items: center; gap: .4rem; font-size: 12.5px; font-weight: 600; color: var(--app-muted); text-transform: uppercase; letter-spacing: .03em; padding: .25rem .25rem 0; }
.pl-grouphead span:last-child { font-weight: 400; }
.pl-calwrap, .pl-mapwrap { min-height: 0; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; padding: .6rem; display: flex; flex-direction: column; }
#pl-cal { flex: 1; min-height: 0; }
#pl-map { flex: 1; min-height: 320px; border-radius: 8px; z-index: 0; }
.pl-split.is-full { position: fixed; inset: 0; z-index: 1060; height: auto; grid-template-columns: 1fr; padding: .75rem; background: var(--app-bg); }
.pl-split.is-full .pl-left, .pl-split.is-full .pl-resizer { display: none; }
body.pl-fullscreen { overflow: hidden; }
.fc { --fc-border-color: var(--app-border); --fc-page-bg-color: var(--app-surface); --fc-neutral-bg-color: var(--app-hover); --fc-today-bg-color: var(--letro-soft); --fc-button-bg-color: var(--app-surface); --fc-button-border-color: var(--app-border); --fc-button-text-color: var(--app-text); --fc-button-hover-bg-color: var(--app-hover); --fc-button-hover-border-color: var(--app-border); --fc-button-active-bg-color: var(--letro); --fc-button-active-border-color: var(--letro); --fc-event-border-color: transparent; font-size: 13px; }
.fc .fc-button { font-size: 13px; padding: .3rem .6rem; box-shadow: none !important; text-transform: none; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 500; }
.fc .fc-event { cursor: pointer; font-weight: 500; }
.fc .pl-ev-late { box-shadow: inset 3px 0 0 #dc2626; }
.fc .fc-day-sat, .fc .fc-day-sun { background: rgba(148, 163, 184, .1); }
.fc .fc-event.pl-ev-leave { background: #fce7f3; border-color: #f9a8d4; color: #9d174d; cursor: default; font-weight: 500; }
.fc .fc-event.pl-ev-leave .fc-event-main, .fc .fc-event.pl-ev-leave .fc-event-title { color: #9d174d; }
[data-bs-theme=dark] .fc .fc-event.pl-ev-leave { background: rgba(236, 72, 153, .18); border-color: rgba(236, 72, 153, .4); }
[data-bs-theme=dark] .fc .fc-event.pl-ev-leave .fc-event-main, [data-bs-theme=dark] .fc .fc-event.pl-ev-leave .fc-event-title { color: #f9a8d4; }
.fc .fc-volledig-button { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .5rem; }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--app-text); text-decoration: none; }
.pl-maplist .pl-leftlist { flex: 1; }
.pl-mapbar { display: flex; align-items: center; gap: .5rem; padding: 0 .25rem; }
.pl-legend { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: 12px; color: var(--app-muted); padding: 0 .25rem; }
.pl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.pl-pop { display: flex; flex-direction: column; gap: .2rem; font: 13px/1.4 var(--bs-font-sans-serif); }
.pl-pop strong { font-size: 14px; }
#pl-map { background: #f2f3f0; }
[data-bs-theme=dark] #pl-map { background: #1b1f24; }
.pl-pin { cursor: pointer; width: 30px; height: 36px; display: flex; align-items: flex-start; justify-content: center; }
.pl-pin span { display: block; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(15,23,42,.35); transition: transform .12s; }
.pl-pin:hover span { transform: rotate(-45deg) scale(1.15); }
.maplibregl-popup-content { border-radius: 12px; padding: .75rem .9rem; box-shadow: 0 12px 32px rgba(15,23,42,.22); background: var(--app-surface); color: var(--app-text); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--app-surface); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--app-surface); }
.maplibregl-ctrl-group { border-radius: 10px !important; overflow: hidden; box-shadow: 0 4px 14px rgba(15,23,42,.15) !important; }
.pl-minimap { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--app-border); }

/* kalender: monteurs vóór de titel */
.pl-evc { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; padding: 3px 4px; }
.pl-evav { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; background: var(--c, #64748b); color: #fff; font-size: 8.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 1.5px var(--app-surface); }
.pl-evav + .pl-evav { margin-left: -6px; }
.pl-evav.more { background: rgba(15,23,42,.55); }
.pl-evtime { flex: 0 0 auto; font-weight: 600; margin-left: 2px; }
.pl-evtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 2px; }
.fc-timegrid-event .pl-evc { flex-wrap: wrap; align-items: flex-start; }

/* tegelvenster: compacte regels */
.pl-mline { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .4rem; min-height: 30px; margin-bottom: .15rem; }
.pl-micon { display: inline-flex; color: var(--app-muted); width: 20px; justify-content: center; }
.pl-plus { width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--app-border); background: transparent; color: var(--app-muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all .12s; }
.pl-plus:hover { border-style: solid; border-color: var(--bs-primary); color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }
.pl-popwrap { position: relative; display: inline-flex; }
.pl-mpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px; max-height: 280px; overflow-y: auto; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: .3rem; }
.pl-mpop-item { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; text-align: left; padding: .4rem .55rem; border-radius: 7px; font-size: 14px; color: var(--app-text); }
.pl-mpop-item:hover { background: var(--app-hover, rgba(15,23,42,.06)); }
.pl-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.pl-mlink { border: 0; background: none; padding: 0 .2rem; font-size: 13px; color: var(--bs-primary); }
.pl-mlink:hover { text-decoration: underline; }
.pl-iconlink { border: 0; background: none; padding: .2rem; border-radius: 6px; color: var(--app-muted); display: inline-flex; }
.pl-iconlink:hover { color: var(--bs-primary); background: rgba(15,23,42,.05); }
.pl-min { width: auto !important; max-width: none !important; }
.pl-mtime { width: 7rem !important; }
.pl-sep { font-size: 13px; color: var(--app-muted); }
.pl-mloc1 { flex: 1 1 240px; max-width: none !important; }
.pl-mdesc { margin: .5rem 0 .8rem; }


/* tegelvenster (pop-up, zoals Trello) */
.pl-modal-backdrop { position: fixed; inset: 0; z-index: 1070; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto; }
.pl-modal { width: min(920px, 100%); background: var(--app-surface); border-radius: 14px; box-shadow: 0 24px 70px rgba(15,23,42,.35); animation: pl-pop .16s ease-out; }
@keyframes pl-pop { from { transform: translateY(10px) scale(.985); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .pl-modal { animation: none; } }
.pl-mhead { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; padding: 1rem 1.25rem .5rem; }
.pl-mhead .pl-dtitle { grid-column: 1; grid-row: 2; }
.pl-mhead .pl-mtools { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .35rem; align-self: start; }
.pl-mhead .btn-close { margin-left: .15rem; }
.pl-mtool { display: inline-flex; align-items: center; gap: .3rem; height: 30px; min-width: 30px; justify-content: center; padding: 0 .4rem; border: 0; border-radius: 8px; background: none; color: var(--app-muted); font-size: 12px; text-decoration: none; }
.pl-mtool:hover { background: rgba(15,23,42,.06); color: var(--bs-primary); }
.pl-mtool.has { color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 8%, transparent); font-weight: 500; }
.pl-mlist { grid-column: 1; display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; color: var(--app-muted); }
.pl-mlistsel { border: 1px solid var(--app-border); background: var(--app-hover); color: var(--app-text); border-radius: 999px; padding: 1px 22px 1px 9px; font-size: 12.5px; font-weight: 500; appearance: auto; }
.pl-dtitle { width: 100%; border: 0; resize: none; font-size: 1.35rem; font-weight: 600; line-height: 1.3; padding: .15rem .35rem; margin-left: -.35rem; border-radius: 6px; background: transparent; color: var(--app-text); overflow: hidden; }
.pl-dtitle:hover:not(:disabled), .pl-dtitle:focus { background: var(--app-hover); outline: none; }
.pl-mlate { margin: 0 1.25rem .5rem; padding: .4rem .7rem; border-radius: 8px; background: rgba(220,38,38,.1); color: #b91c1c; font-size: 13px; }
.pl-mgrid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 1.25rem; padding: .25rem 1.25rem 1.25rem; }
.pl-mmain { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pl-mbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; padding: .6rem .75rem; background: var(--app-hover); border-radius: 10px; }
.pl-mfield { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 130px; }
.pl-mfield.wide { flex: 2 1 260px; }
.pl-mlabel { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); }
.pl-mrow { display: flex; align-items: center; gap: .35rem; }
.pl-mrow .form-control { min-width: 0; }
.pl-sep { font-size: 12px; color: var(--app-muted); }
.pl-msec h3, .pl-mside h3 { display: flex; align-items: center; gap: .4rem; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--app-muted); margin: 0 0 .45rem; }
.pl-mloc { display: grid; grid-template-columns: 1fr 1fr 110px; gap: .4rem; }
.pl-mloc input:first-child { grid-column: 1 / -1; }
.pl-assignees { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pl-addperson { width: auto; min-width: 130px; border-radius: 999px; }
.pl-person { display: inline-flex; align-items: center; gap: .35rem; padding: 2px 8px 2px 2px; border: 1px solid var(--app-border); border-radius: 999px; font-size: 13px; }
.pl-person button { border: 0; background: none; color: var(--app-muted); padding: 0 2px; font-size: 16px; line-height: 1; }
.pl-person button:hover { color: #dc2626; }
.pl-labelpick { display: flex; flex-wrap: wrap; gap: .35rem; }
.pl-labelopt { display: inline-flex; align-items: center; gap: .3rem; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); }
.pl-labelopt:has(input:checked), .pl-labelopt.on { background: color-mix(in srgb, var(--c) 16%, transparent); font-weight: 500; }
.pl-labelopt input { accent-color: var(--c); margin: 0; }
.pl-mfoot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 12.5px; color: var(--app-muted); border-top: 1px solid var(--app-border); padding-top: .6rem; }
.pl-mside { border-left: 1px solid var(--app-border); padding-left: 1rem; min-width: 0; }
.pl-activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; font-size: 12.5px; }
.pl-activity.is-clipped { max-height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.pl-more { display: block; margin: .35rem auto 0; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-muted); border-radius: 999px; padding: 0 .9rem; font-size: 13px; letter-spacing: .12em; line-height: 1.6; }
.pl-more:hover { color: var(--app-text); background: var(--app-hover); }
@media (max-width: 767.98px) {
  .pl-modal-backdrop { padding: 0; }
  .pl-modal { border-radius: 0; min-height: 100%; }
  .pl-mgrid { grid-template-columns: 1fr; }
  .pl-mside { border-left: 0; padding-left: 0; border-top: 1px solid var(--app-border); padding-top: .75rem; }
  .pl-mloc { grid-template-columns: 1fr 110px; }
}
.ps-grip { cursor: grab; color: var(--app-muted); letter-spacing: -2px; }

@media (max-width: 991.98px) {
  .pl-module { height: auto; }
  .pl-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pl-resizer { display: none; }
  .pl-left { max-height: 38vh; }
  .pl-calwrap, .pl-mapwrap { min-height: 70vh; }
  .pl-col { flex-basis: 82vw; max-width: 320px; max-height: none; }
  .pl-count { margin-left: 0; }
}
@media (max-width: 575.98px) { .pl-filters .form-select, .pl-filters .form-control { max-width: none; flex: 1 1 45%; } .pl-top-right { margin-left: 0; } }
.pl-mgeo { margin: -.35rem 0 .55rem 1.85rem; }

/* kalender: doffe tinten, zoals de labels in Kanban */
.fc .fc-event.pl-ev { border-width: 1px; border-radius: 6px; }
.fc .fc-event.pl-ev .fc-event-main { color: inherit; }
.fc .fc-event.pl-ev:hover { filter: brightness(.97); }
.fc .fc-event.pl-ev.pl-ev-late { border-left-width: 3px; }
.fc .fc-daygrid-event.pl-ev { margin-top: 2px; }

/* tegelvenster: locatie onderaan (kaartje met adres eronder) */
.pl-mlocblock { margin-bottom: .6rem; }
.pl-mlocblock .pl-minimap { margin-bottom: .45rem; }
.pl-maddr { display: flex; align-items: center; gap: .4rem; font-size: 14px; }
.pl-maddr-t { min-width: 0; overflow-wrap: anywhere; }
.pl-maddr .pl-iconlink { margin-left: auto; }
.pl-mlocblock .pl-mgeo { margin: .25rem 0 0 1.85rem; }
.pl-x { border: 0; background: none; padding: 3px; border-radius: 50%; color: var(--app-muted); display: inline-flex; }
.pl-x:hover { color: var(--bs-danger); background: rgba(220,38,38,.08); }

/* adressuggesties onder een locatieveld */
.pl-sughost { position: relative; }
.pl-suggest { position: absolute; z-index: 30; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: .3rem; max-height: 300px; overflow-y: auto; }
.pl-sug { display: flex; align-items: flex-start; gap: .5rem; padding: .45rem .55rem; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1.3; color: var(--app-text); }
.pl-sug:hover, .pl-sug.on { background: color-mix(in srgb, var(--bs-primary) 9%, transparent); }
.pl-sug-ico { color: var(--app-muted); display: inline-flex; padding-top: 1px; }
.pl-sug-t { display: flex; flex-direction: column; min-width: 0; }
.pl-sug-t small { color: var(--app-muted); font-size: 12px; }

/* hint: vergelijkbare tegels bij een nieuwe tegel */
.pl-similar { display: flex; gap: .35rem; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--app-muted); }
.pl-sim-ico { color: #d97706; display: inline-flex; padding-top: 1px; }
.pl-sim-item { border: 0; background: none; padding: 0; color: var(--app-text); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.pl-sim-item:hover { color: var(--bs-primary); }

/* Beheer › Rollen */
.rl-table th[scope=row] { font-weight: 500; min-width: 220px; }
.rl-table th[scope=row] span { display: block; }
.rl-table th[scope=row] small { display: block; font-weight: 400; color: var(--app-muted); font-size: 12px; }
.rl-table .rl-role { min-width: 120px; vertical-align: top; }
.rl-name { font-weight: 600; white-space: nowrap; }
.rl-count, .rl-desc { font-weight: 400; font-size: 12px; color: var(--app-muted); }
.rl-desc { max-width: 160px; margin: 0 auto; white-space: normal; }
.rl-edit { border: 0; background: none; padding: 0 2px; color: var(--app-muted); vertical-align: -2px; }
.rl-edit svg { width: 14px; height: 14px; }
.rl-edit:hover { color: var(--bs-primary); }
.rl-table .form-check-input { width: 1.15em; height: 1.15em; cursor: pointer; }
.rl-table .form-check-input:disabled { cursor: default; }
.rl-fixed th[scope=row] span, .rl-fixed th[scope=row] small { opacity: .7; }
.rl-sep th { background: var(--app-bg, rgba(15,23,42,.03)); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); font-weight: 600; }

.header-search[hidden] { display: none; }
.header-search[hidden] + .header-right { margin-left: auto; }