/* 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; }
/* bevestigen (tweede klik): altijd wit op rood, ook bij knoppen met een tekstkleur zoals text-secondary of btn-link */
.btn.armed, .btn.armed[class*="text-"], .btn-link.armed { color: #fff !important; text-decoration: none; border-radius: 6px; padding-left: .45rem; padding-right: .45rem; font-weight: 600; }
.btn.armed:hover, .btn.armed.icon:hover { background: #bb2d3b !important; border-color: #bb2d3b; color: #fff !important; }   /* ook met de muis erboven rood (niet het lichtblauw van icoonknoppen) */
.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); }
/* schakelaar in het gebruikersmenu (eenvoudige weergave) */
.user-dropdown .dd-switch { white-space: nowrap; }
.user-dropdown { min-width: 250px; }
.user-dropdown .dd-toggle { margin-left: auto; width: 30px; height: 17px; border-radius: 9px; background: var(--app-border); position: relative; flex: none; transition: background .15s; }
.user-dropdown .dd-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.user-dropdown .dd-toggle.aan { background: var(--letro); }
.user-dropdown .dd-toggle.aan::after { transform: translateX(13px); }
.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, .rel-pill.land-fr { 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: min(360px, 55vh); overflow-y: auto; }
.q-picker .pp em { font-style: normal; color: var(--bs-warning-text-emphasis); }
.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 auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; margin-bottom: .35rem; }   /* greep · vinkje · tekst · verwijderen */
.q-grip { cursor: grab; color: var(--app-muted); letter-spacing: -2px; user-select: none; touch-action: none; padding: 0 2px; }
.q-claus.sortable-ghost { opacity: .4; }
.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 { height: 48px; width: auto; 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-onderwerp { font-size: 14.5px; font-weight: 500; color: #3a4048; margin-top: 2px; overflow-wrap: break-word; }
.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 { height: 42px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }   /* vaste hoogte: ook een svg zonder afmetingen krijgt dan een breedte */
.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; }   /* inleiding en afsluiting paginabreed */
.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: 7px; font-weight: 700; font-size: 17px; color: #22262b; }   /* excl. btw: het bedrag dat telt */
.q-paper .p-tot .klein { font-size: 11.5px; color: #6b7178; }
.q-paper .p-tot dt.big + dd.big + dt.klein, .q-paper .p-tot dt.big + dd.big + dt.klein + dd.klein { padding-top: 3px; }
.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 { height: 36px; width: auto; max-width: 165px; object-fit: contain; object-position: left center; }
.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-pre.p-instr { background: #eaf4fd; border: 1.5px solid #7fb8e8; color: #10263b; font-weight: 500; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.w-paper .p-instr-vorig, .w-instr-vorig { margin-top: 6px; white-space: pre-line; color: #6b7280; font-weight: 400; }
.w-paper .p-instr-vorig span, .w-instr-vorig span { display: block; font-size: .85em; }
.w-paper .p-instr-vorig del, .w-instr-vorig del { text-decoration-thickness: 1px; }
.w-paper tr.p-al td { color: #374151; background: #f6f7f8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.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; table-layout: fixed; }   /* datum t/m totaal even breed */
.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; }
}

/* placeholders: overal dezelfde lichte grijstint (zie onderaan) */

/* 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: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 24, 39, .55); color: #fff; opacity: 0; transition: opacity .12s, background .12s; cursor: pointer; }
.bl-file:hover .bl-del, .bl-del:focus-visible { opacity: 1; }
.bl-del:hover { background: var(--bs-danger); }
@media (hover: none) { .bl-del { opacity: .9; } }   /* tablet/telefoon: altijd zichtbaar */
/* bevestiging over de miniatuur */
.bl-confirm { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(17, 24, 39, .78); color: #fff; font-size: 13px; font-weight: 600; text-align: center; padding: 6px; backdrop-filter: blur(1.5px); }
.bl-confirm > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bl-confirm .btn { font-size: 12px; padding: 3px 10px; }
.bl-file.vraag .bl-confirm { display: flex; }
.bl-file.vraag .bl-del { display: none; }
.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; flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; align-items: center; }   /* zoeken + knoppen: altijd rechts, ook als ze naar een volgende regel gaan */
.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; }
.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; padding-right: 2rem; max-width: none !important; width: 100% !important; }
.pl-search input::-webkit-search-cancel-button { display: none; }
.pl-qwis { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--app-muted); }
.pl-qwis:hover { background: var(--app-hover); color: var(--app-text); }
.pl-qwis .ico { position: static; transform: none; width: 14px; height: 14px; }
.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: 400; 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-oms { display: inline-flex; align-items: center; color: #16a34a; }   /* tegel heeft een omschrijving */
.pl-oms svg { flex: none; fill: currentColor; fill-opacity: .18; }
.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; }
/* Kanban: lijst inklappen (zoals Trello): smalle kolom met de naam verticaal */
.pl-colinklap { opacity: 0; transition: opacity .12s; }
.pl-col:hover .pl-colinklap, .pl-colinklap:focus-visible { opacity: 1; }
@media (hover: none) { .pl-colinklap { opacity: .7; } }
.pl-col.pl-col-dicht { flex: 0 0 44px; align-items: center; gap: .55rem; padding: .7rem 0 .9rem; min-height: 220px; cursor: pointer; scroll-snap-align: none; transition: background .12s; }
.pl-col.pl-col-dicht:hover { background: var(--bs-tertiary-bg); }
.pl-col.pl-col-dicht:focus-visible { outline: 2px solid rgba(var(--letro-rgb), .6); outline-offset: 2px; }
.pl-col-dicht h2 { margin: 0; writing-mode: vertical-rl; font-size: 14px; font-weight: 600; white-space: nowrap; max-height: 60vh; overflow: hidden; text-overflow: ellipsis; }
.pl-col-dicht .pl-cards { position: absolute; inset: 0; min-height: 0; padding: 0; overflow: hidden; }   /* hele kolom is een sleepdoel */
.pl-col-dicht .pl-cards > * { display: none; }   /* erop gesleepte tegel: niet tonen in de smalle kolom */
.pl-col-dicht { position: relative; }
.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; line-height: 1.25; overflow-wrap: anywhere; }   /* krap: over twee regels i.p.v. afkappen */
.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; }
/* tablet: alleen de kalender, zonder lijst en schuif ernaast */
.pl-split.pl-geenlijst { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
.pl-split.pl-geenlijst .pl-left, .pl-split.pl-geenlijst .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: #831843; cursor: default; font-weight: 500; }
.fc .fc-event.pl-ev-leave .fc-event-main, .fc .fc-event.pl-ev-leave .fc-event-title { color: #831843; }
[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: 4px; min-width: 0; overflow: hidden; padding: 2px 4px; line-height: 1.3; }
.pl-evtime { flex: 0 0 auto; font-weight: 600; }
.pl-evtitle { flex: 1 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* titels in de kalender groter en duidelijker (FullCalendar zet ze standaard op .85em) */
.fc .pl-ev .pl-evc { font-size: 13px; }
.fc .pl-ev .pl-evtitle { font-weight: 500; }
.fc .pl-ev .pl-evtime { font-size: 12px; }
/* verlof en ziekte even groot als de tegels */
.fc .fc-event.pl-ev-leave .fc-event-main { font-size: 13px; }
.fc .fc-event.pl-ev-leave .fc-event-title { font-weight: 500; }
.fc .fc-event.pl-ev-leave .fc-event-time { font-size: 12px; }
/* monteurs: kleine labeltjes in hun kleur onder de titel */
.pl-evc.tall { flex-direction: column; align-items: stretch; gap: 3px; padding: 5px 6px; }
.pl-evc.tall .pl-evline { display: flex; gap: 4px; min-width: 0; }
.pl-evnames { display: flex; gap: 3px; min-width: 0; overflow: hidden; white-space: nowrap; }
.pl-evc.wrap .pl-evnames { flex-wrap: wrap; row-gap: 2px; }
.pl-evn { flex: none; font-size: 10px; line-height: 14px; font-weight: 600; padding: 0 5px; border-radius: 999px;
  color: color-mix(in srgb, var(--c) 78%, #0f172a); background: color-mix(in srgb, var(--c) 16%, var(--app-surface)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
[data-bs-theme=dark] .pl-evn { color: color-mix(in srgb, var(--c) 70%, #fff); }

/* 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); }
.pl-modal.pl-anim { animation: pl-pop .16s ease-out; }   /* alleen bij openen, niet bij opnieuw tekenen */
@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-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; }
.rl-startsel { width: auto; min-width: 120px; margin: 0 auto; display: inline-block; }
.rl-start th, .rl-start td { background: color-mix(in srgb, var(--bs-primary) 4%, transparent); }

/* werkbon › uitvoering (mobiele app) */
.w-exec-sig.sm { height: 40px; max-width: 130px; }
.w-paper .p-eerder { font-size: 10px; color: #6b7178; margin-top: 2px; }
.w-exec-sig { height: 70px; max-width: 220px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); }
.w-exec-lines li { padding: 3px 0; } .w-exec-lines li span { display: inline-block; width: 1.2em; color: var(--app-muted); } .w-exec-lines li.ok span { color: #16a34a; font-weight: 700; }
.w-exec-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.w-exec-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }

/* klokkaart: inklokken alleen op de prikklok */
.u-prikklok { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 10px; background: color-mix(in srgb, var(--bs-primary) 8%, transparent); font-size: 14px; line-height: 1.45; margin: .5rem 0; }
.u-prikklok span { flex: 1; min-width: 0; }
.u-prikklok svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--bs-primary); }

/* weer in de kopbalk */
.wx-menu { position: relative; }
.wx-btn { width: auto; padding: 0 .55rem; gap: .3rem; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--app-text); display: inline-flex; }
.wx-btn:hover { background: var(--app-hover); }
.wx-ico.wx-zon { color: #f59e0b; } .wx-ico.wx-half { color: #f59e0b; } .wx-ico.wx-regen, .wx-ico.wx-onweer { color: #3b82f6; } .wx-ico.wx-wolk, .wx-ico.wx-mist { color: #94a3b8; } .wx-ico.wx-sneeuw { color: #38bdf8; }
.wx-drop { position: absolute; right: 0; top: calc(100% + 8px); width: 330px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: .4rem 0; display: none; z-index: 60; }
.wx-drop.show { display: block; }
.wx-head { padding: .45rem 1rem .55rem; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--app-border); margin-bottom: .2rem; }
.wx-row { display: grid; grid-template-columns: 1fr 22px 70px 64px 52px; align-items: center; gap: .4rem; padding: .35rem 1rem; font-size: 13px; }
.wx-row.today { background: var(--app-hover); }
.wx-d { color: var(--app-muted); } .wx-row.today .wx-d { color: var(--app-text); font-weight: 600; }
.wx-t { text-align: right; color: var(--app-muted); } .wx-t b { color: var(--app-text); }
.wx-w, .wx-r { text-align: right; color: var(--app-muted); font-size: 12px; }
.wx-bron { padding: .45rem 1rem .2rem; font-size: 11px; color: var(--app-muted); border-top: 1px solid var(--app-border); margin-top: .2rem; }
@media (max-width: 575.98px) { .wx-btn span { display: none; } .wx-drop { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; } }

/* planning: suggesties */
.pl-hintbtn { position: relative; }
.pl-badge.soft { background: #f59e0b; }
.pl-module { position: relative; }
.pl-hints { position: fixed; top: 70px; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); z-index: 1050; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,.22); display: flex; flex-direction: column; overflow: hidden; }
.pl-hints[hidden] { display: none; }
.pl-hints-h { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--app-border); color: #d97706; }
.pl-hints-h strong { color: var(--app-text); }
.pl-hints > .pl-hint:first-of-type { margin-top: .6rem; }
.pl-hints { overflow-y: auto; }
.pl-hints .pl-hint { margin: 0 .75rem .6rem; padding: .7rem .8rem; border: 1px solid var(--app-border); border-left: 3px solid var(--c, #94a3b8); border-radius: 10px; font-size: 13.5px; }
.pl-hints .pl-hint.s-rood { --c: #dc2626; } .pl-hints .pl-hint.s-blauw { --c: #3b82f6; } .pl-hints .pl-hint.s-paars { --c: #8b5cf6; } .pl-hints .pl-hint.s-oranje { --c: #ea580c; } .pl-hints .pl-hint.s-grijs { --c: #94a3b8; }
.pl-hint-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; min-width: 0; }
.pl-hint-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c); white-space: nowrap; }
.pl-hint-card { border: 0; background: none; padding: 0; color: var(--app-muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-hint-t { font-weight: 600; }
.pl-hint-x { color: var(--app-muted); margin-top: .1rem; }
.pl-hint-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .5rem; }
.pl-hint-acts .btn-link { padding: 0 .2rem; font-size: 13px; text-decoration: none; color: var(--app-muted); }
.pl-hint-acts .btn-link:hover { color: var(--bs-primary); }
.pl-hint-reden { margin-top: .5rem; }
.pl-hints-leeg { padding: 2rem 1rem; text-align: center; color: var(--app-muted); }
.pl-hints-f { margin-top: auto; padding: .7rem 1rem; font-size: 11.5px; color: var(--app-muted); border-top: 1px solid var(--app-border); }
.pl-hintdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; margin-right: 6px; vertical-align: 2px; }
.pl-hintdot.s-botsing { background: #dc2626; } .pl-hintdot.s-weer { background: #3b82f6; } .pl-hintdot.s-sluimert { background: #94a3b8; }
/* weer in het tegelvenster */
.pl-mwx { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: -.05rem 0 .35rem 1.85rem; font-size: 13px; color: var(--app-muted); }
.pl-wxday { display: inline-flex; align-items: center; gap: .3rem; } .pl-wxday b { color: var(--app-text); font-weight: 500; }

/* beheer: slimme suggesties */
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem 1.5rem; }
.sg-soort { display: flex; gap: .6rem; margin: 0; padding-left: 2.6em; }
.sg-soort .form-check-label { display: flex; flex-direction: column; font-size: 14px; }
.sg-soort small { color: var(--app-muted); font-size: 12.5px; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: 14px; margin-bottom: .5rem; }
.sg-num { width: 78px !important; display: inline-block; }
.sg-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.sg-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px; font-size: 12.5px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); cursor: pointer; white-space: nowrap; }
.sg-chip input { margin: 0; accent-color: var(--c); }
.sg-regels td { vertical-align: top; } .sg-regels .sg-num { width: 70px !important; }


/* slepen naar de kalender: spookbeeld van de tegel op de plek waar hij landt */
.fc .fc-event-mirror.pl-ev-ghost, .fc .fc-event.pl-ev-ghost.fc-event-mirror { opacity: .72; border: 2px dashed color-mix(in srgb, var(--bs-primary) 70%, transparent) !important; box-shadow: 0 6px 18px rgba(15,23,42,.18); }
.fc .fc-highlight { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-primary) 45%, transparent); }
/* eigen spookbeeld: de dag licht op en een doorschijnende kopie van de tegel staat waar hij landt */
.fc .pl-drop-dag { background: color-mix(in srgb, var(--bs-primary) 9%, transparent) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-primary) 40%, transparent); }
.pl-ghost-ev { margin: 2px 2px 0; padding: 2px 4px 3px; border-radius: 6px; background: var(--bg); color: var(--tx); border: 2px dashed var(--bd); opacity: .92; font-size: .85em; font-weight: 500; pointer-events: none; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 6px 16px rgba(15,23,42,.18); animation: pl-ghost-in .12s ease-out; }
.pl-ghost-ev.tijd { position: absolute; left: 2px; right: 2px; margin: 0; z-index: 5; }
.pl-ghost-ev .pl-evline { display: flex; min-width: 0; } .pl-ghost-ev .pl-evnames { display: flex; gap: 3px; overflow: hidden; }
@keyframes pl-ghost-in { from { opacity: 0; transform: scale(.96); } }
/* de zwevende kopie van de kaart klein en doorschijnend, zodat hij de kalender niet bedekt */
.pl-card.fc-event-dragging { opacity: .45 !important; transform: scale(.82); transform-origin: top left; box-shadow: 0 8px 20px rgba(15,23,42,.2); pointer-events: none; }
body.pl-ghosting .pl-card.fc-event-dragging { opacity: 0 !important; }
/* spookbeeld in de maand: zwevend onderin de dag, zonder de rij hoger te maken */
.fc .fc-daygrid-day-frame { position: relative; }
.pl-ghost-ev.over { position: absolute; left: 2px; right: 2px; bottom: 3px; margin: 0; z-index: 6; }
.pl-dnr small { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-primary); margin-right: 4px; }

/* Lijst bewerken */
.le-dlg { min-width: min(400px, 80vw); }
.le-top { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.le-top .form-control-color { width: 48px; height: 38px; padding: 4px; }
.le-sets { border: 1px solid var(--bs-border-color); border-radius: 8px; margin-bottom: 16px; }
.le-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 3em; margin: 0; cursor: pointer; }
.le-row + .le-row { border-top: 1px solid var(--bs-border-color); }
.le-row .form-check-input { margin-top: 3px; flex-shrink: 0; cursor: pointer; }
.le-t { display: block; font-size: 14px; font-weight: 500; }
.le-dlg small { display: block; font-size: 12px; color: var(--app-muted); }
.le-del { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-bottom: 16px; border-top: 1px solid var(--bs-border-color); }
.le-del .le-t { color: var(--bs-danger); }
.le-del .btn { flex-shrink: 0; }

/* Handleiding */
.hl { max-width: 1100px; }
.hl-lead { color: var(--app-muted); max-width: 680px; margin-bottom: 16px; }
.hl-zoek { max-width: 560px; margin-bottom: 24px; }
.hl-zoek input { height: 44px; }
.hl-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.hl-toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.hl-toc a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 14px; }
.hl-toc a:hover { background: var(--bs-tertiary-bg); }
.hl-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; }
.hl-ico .ico { width: 15px; height: 15px; }
.hl-ico.lg { width: 36px; height: 36px; border-radius: 8px; }
.hl-ico.lg .ico { width: 20px; height: 20px; }
.hl-ico.c-blue { background: rgba(33,150,243,.12); color: #2196f3; } .hl-ico.c-purple { background: rgba(156,39,176,.12); color: #ab47bc; }
.hl-ico.c-red { background: rgba(228,0,43,.1); color: #e4002b; } .hl-ico.c-teal { background: rgba(0,150,136,.12); color: #009688; }
.hl-ico.c-orange { background: rgba(255,152,0,.14); color: #f57c00; } .hl-ico.c-green { background: rgba(76,175,80,.12); color: #43a047; }
.hl-body { display: flex; flex-direction: column; gap: 16px; }
.hl-sec { scroll-margin-top: 16px; }
.hl-sec[hidden], .hl-q[hidden], .hl-toc a[hidden] { display: none !important; }
.hl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hl-head h2 { font-size: 18px; margin: 0; }
.hl-intro { color: var(--app-muted); margin-bottom: 12px; }
.hl-q { border-top: 1px solid var(--app-border); }
.hl-q summary { list-style: none; cursor: pointer; padding: 11px 28px 11px 0; font-weight: 500; position: relative; }
.hl-q summary::-webkit-details-marker { display: none; }
.hl-q summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--app-muted); }
.hl-q[open] summary::after { content: '−'; }
.hl-q summary:hover { color: var(--bs-primary); }
.hl-a { padding: 0 0 14px; line-height: 1.6; }
.hl-a ul, .hl-a ol { padding-left: 20px; margin: 6px 0; }
.hl-a li { margin-bottom: 4px; }
.hl-voet { color: var(--app-muted); font-size: 13px; margin: 8px 0 0; }
@media (max-width: 768px) {
  .hl-grid { grid-template-columns: minmax(0, 1fr); }
  .hl-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .hl-toc a { border: 1px solid var(--app-border); padding: 4px 10px 4px 4px; font-size: 13px; }
  .hl-head { flex-wrap: wrap; }
}

/* Tegel op meerdere losse dagen */
.pl-evdeel { flex: 0 0 auto; font-size: 10px; font-weight: 600; line-height: 1; padding: 2px 4px; margin-right: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 14%, transparent); }
.pl-mdag .pl-sep { min-width: 2em; }
.pl-mdag .pl-micon { opacity: .55; }
/* Alt/Option-slepen in de kalender: origineel blijft staan, spookbeeld met + op de doeldag */
body.pl-kopie .fc-event-mirror { opacity: 0 !important; }
body.pl-kopie .fc-daygrid-event-harness, body.pl-kopie .fc-timegrid-event-harness { visibility: visible !important; }
body.pl-kopie, body.pl-kopie * { cursor: copy !important; }
.pl-ghost-ev.kopie { overflow: visible; }
.pl-ghost-ev.kopie::after { content: '+'; position: absolute; top: -7px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: 13px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* "Nog een dag" onder de datum(s) in het tegelvenster */
.pl-madddag { padding-left: calc(20px + .4rem); margin: -.1rem 0 .25rem; }
.pl-madddag .pl-mlink { display: inline-flex; align-items: center; gap: 3px; padding: 0; font-size: 12.5px; color: var(--app-muted); }
.pl-madddag .pl-mlink:hover { color: var(--bs-primary); text-decoration: none; }
.pl-ghost-ev.kopie:not(.over):not(.tijd) { position: relative; }
body.pl-kopie .fc-event.fc-event-dragging { opacity: 0 !important; }
/* Kanban: monteurs als kleine naamlabels onderaan de tegel (zoals in de kalender) */
.pl-foot.pl-cnames { justify-content: flex-start; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.pl-cnames .pl-evn { font-size: 10.5px; line-height: 16px; padding: 0 6px; }

/* Personeel: compacte knoppen voor bewerken en beoordelen (één stijl, kleur per soort) */
.u-btns { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.u-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--app-text); background: transparent; border: 1px solid var(--app-border); text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.u-btn .ico { width: 14px; height: 14px; flex: none; opacity: .75; }
.u-btn:hover { background: var(--bs-tertiary-bg); border-color: color-mix(in srgb, var(--app-text) 25%, transparent); color: var(--app-text); }
.u-btn:disabled { opacity: .5; pointer-events: none; }
.u-btn.ok { color: #15803d; background: color-mix(in srgb, #16a34a 9%, transparent); border-color: color-mix(in srgb, #16a34a 35%, transparent); }
.u-btn.ok:hover { background: color-mix(in srgb, #16a34a 16%, transparent); border-color: color-mix(in srgb, #16a34a 55%, transparent); }
.u-btn.no { color: #b91c1c; border-color: color-mix(in srgb, #dc2626 30%, transparent); }
.u-btn.no:hover { background: color-mix(in srgb, #dc2626 9%, transparent); border-color: color-mix(in srgb, #dc2626 50%, transparent); }
[data-bs-theme=dark] .u-btn.ok { color: #4ade80; }
[data-bs-theme=dark] .u-btn.no { color: #f87171; }
.u-btn.ok .ico, .u-btn.no .ico { opacity: 1; }
.u-tijdin { width: 104px; height: 28px; padding: 0 8px; }
.u-linkbtn { border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--app-muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.u-linkbtn:hover { color: var(--bs-primary); }
/* weekstaat: knoppen pas volledig zichtbaar bij de regel waar je bent (rustiger overzicht) */
@media (hover: hover) { .u-week tbody tr .u-btn:not(.ok) { opacity: .55; } .u-week tbody tr:hover .u-btn { opacity: 1; } }
.app-dialog:has(.u-daydlg) { width: min(720px, calc(100vw - 2rem)); }
.u-daydlg .u-btns { flex-wrap: nowrap; }
/* u-btn: ook buiten Personeel (planning, offertes, beheer); alleen icoon, en de "Zeker?"-stand */
.u-btn.ico-only { width: 28px; padding: 0; justify-content: center; }
.u-btn.armed, .u-btn.armed:hover { width: auto; padding: 0 10px; background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }

/* Knoppen in paginakoppen, de kop van calculatie/offerte/werkbon en pop-ups: zelfde vorm als u-btn */
:is(.page-title, .calc-head, .app-dialog) .btn:not(.btn-close) {
  --bs-btn-padding-y: 0; --bs-btn-padding-x: 12px; --bs-btn-font-size: 13px; --bs-btn-font-weight: 500; --bs-btn-border-radius: 7px; --bs-btn-line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; white-space: nowrap; box-shadow: none;
}
:is(.page-title, .calc-head, .app-dialog) .btn .ico, :is(.page-title, .calc-head, .app-dialog) .btn svg { width: 15px; height: 15px; flex: none; }
:is(.page-title, .calc-head, .app-dialog) .btn-icon { width: 30px; min-width: 30px; padding: 0; }
:is(.page-title, .calc-head, .app-dialog) :is(.btn-outline-secondary, .btn-light, .btn-secondary, .btn-outline-primary) {
  --bs-btn-color: var(--app-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-color: var(--app-text); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: color-mix(in srgb, var(--app-text) 25%, transparent);
  --bs-btn-active-color: var(--app-text); --bs-btn-active-bg: var(--bs-tertiary-bg); --bs-btn-active-border-color: color-mix(in srgb, var(--app-text) 30%, transparent);
}
:is(.page-title, .calc-head, .app-dialog) :is(.btn-success, .btn-outline-success) {
  --bs-btn-color: #15803d; --bs-btn-bg: color-mix(in srgb, #16a34a 9%, transparent); --bs-btn-border-color: color-mix(in srgb, #16a34a 35%, transparent);
  --bs-btn-hover-color: #15803d; --bs-btn-hover-bg: color-mix(in srgb, #16a34a 16%, transparent); --bs-btn-hover-border-color: color-mix(in srgb, #16a34a 55%, transparent);
  --bs-btn-active-color: #15803d; --bs-btn-active-bg: color-mix(in srgb, #16a34a 20%, transparent); --bs-btn-active-border-color: #16a34a;
}
:is(.page-title, .calc-head, .app-dialog) .btn-outline-danger {
  --bs-btn-color: #b91c1c; --bs-btn-bg: transparent; --bs-btn-border-color: color-mix(in srgb, #dc2626 30%, transparent);
  --bs-btn-hover-color: #b91c1c; --bs-btn-hover-bg: color-mix(in srgb, #dc2626 9%, transparent); --bs-btn-hover-border-color: color-mix(in srgb, #dc2626 50%, transparent);
  --bs-btn-active-color: #b91c1c; --bs-btn-active-bg: color-mix(in srgb, #dc2626 14%, transparent); --bs-btn-active-border-color: #dc2626;
}
[data-bs-theme=dark] :is(.page-title, .calc-head, .app-dialog) :is(.btn-success, .btn-outline-success) { --bs-btn-color: #4ade80; --bs-btn-hover-color: #4ade80; --bs-btn-active-color: #4ade80; }
[data-bs-theme=dark] :is(.page-title, .calc-head, .app-dialog) .btn-outline-danger { --bs-btn-color: #f87171; --bs-btn-hover-color: #f87171; --bs-btn-active-color: #f87171; }
/* hoofdactie (blauw) en bevestigen van verwijderen (rood) blijven gevuld, alleen in de nieuwe vorm */
:is(.page-title, .calc-head, .app-dialog) .btn.armed { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-danger); width: auto; padding: 0 12px; }
.u-btn[href] { text-decoration: none; }
.calc-head .u-btn, .page-title .u-btn { height: 30px; font-size: 13px; }
/* Tegels importeren (CSV) */
.app-dialog:has(.imp-dlg) { width: min(640px, calc(100vw - 2rem)); }
.imp-sum { padding: 10px 12px; border: 1px solid var(--app-border); border-radius: 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; }
.imp-lijst { max-height: 220px; overflow: auto; border: 1px solid var(--app-border); border-radius: 8px; }
.imp-lijst > div { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px; gap: 8px; padding: 4px 10px; border-top: 1px solid var(--app-border); }
.imp-lijst > div:first-child { border-top: 0; }
.imp-lijst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filterlabels (werkbonnen): één regel, schuift op de telefoon; aantal in een klein bolletje */
.wl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; flex: 1 1 auto; padding: 1px 0; }
.f-chips::-webkit-scrollbar { display: none; }
.f-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 999px; border: 1px solid var(--app-border); background: transparent; color: var(--app-text); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .12s, border-color .12s; }
.f-chip:hover { background: var(--bs-tertiary-bg); }
.f-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bs-tertiary-bg); color: var(--app-muted); font-size: 11.5px; font-weight: 600; }
.f-chip.on { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.f-chip.on span { background: rgba(255,255,255,.22); color: #fff; }
.f-chip.leeg:not(.on) { color: var(--app-muted); }
.wl-search { width: 260px; flex: none; }
@media (max-width: 768px) {
  .wl-head { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .wl-head > .f-chips { width: 100%; }
  .wl-search { width: 100%; }
  /* werkbonnen als compacte kaartjes in plaats van een brede tabel */
  .wl-table thead { display: none; }
  .wl-table, .wl-table tbody { display: block; }
  .wl-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 16px; border-bottom: 1px solid var(--app-border); }
  .wl-table td { display: block; padding: 0; border: 0; background: none !important; }
  .wl-table .wl-nr { grid-row: 1; grid-column: 1; font-size: 13px; color: var(--app-muted); }
  .wl-table .wl-st { grid-row: 1; grid-column: 2; text-align: right; }
  .wl-table .wl-ond { grid-row: 2; grid-column: 1 / -1; font-weight: 600; font-size: 15px; }
  .wl-table .wl-klant { grid-row: 3; grid-column: 1 / -1; font-size: 13px; }
  .wl-table .wl-klant > div { display: inline; }
  .wl-table .wl-klant > div.text-secondary:not(:empty)::before { content: ' · '; }
  .wl-table .wl-klant > div.small:not(.text-secondary)::before { content: ' · '; }
  .wl-table .wl-klant .klant-link { font-weight: 500; }
  .wl-table .wl-datum { grid-row: 4; grid-column: 1; font-size: 12.5px; color: var(--app-muted); margin-top: 4px; }
  .wl-table .wl-mw { grid-row: 4; grid-column: 2; text-align: right; font-size: 12.5px; color: var(--app-muted); margin-top: 4px; }
  .wl-table .wl-off, .wl-table .wl-door { display: none; }
}
/* Kalender: weekendknop met teller; tegels in de maandweergave iets strakker (alle tegels zichtbaar, geen "+3") */
.fc .fc-weekend-button .pl-wkn { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--bs-warning); color: #111; font-size: 11px; font-weight: 700; }
.fc .fc-daygrid-event.pl-ev { margin-top: 3px; margin-bottom: 0; }
.fc .fc-daygrid-day-events { margin-bottom: 2px; }
.fc .fc-daygrid .pl-evc.tall { padding: 5px 6px; gap: 3px; line-height: 1.25; }
.fc .fc-daygrid .pl-evn { line-height: 13px; padding: 0 4px; }
.fc .fc-daygrid-day-top { margin-bottom: -2px; }
/* Label in het tegelvenster met kruisje om weg te halen */
.pl-label-x { gap: 3px; padding-right: 3px; }
.pl-label-x button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .55; }
.pl-label-x button:hover { opacity: 1; background: color-mix(in srgb, var(--c) 22%, transparent); }
/* Klik op een dag: doorschijnende nieuwe tegel met een klein titelveld */
.fc .fc-event.pl-ev-nieuw { background: color-mix(in srgb, var(--bs-primary) 10%, var(--app-surface)) !important; border: 1.5px dashed color-mix(in srgb, var(--bs-primary) 60%, transparent) !important; color: var(--bs-primary) !important; opacity: .9; }
.pl-dagnieuw { position: fixed; z-index: 1200; width: 280px; padding: 10px; border-radius: 10px; background: var(--app-surface); border: 1px solid var(--app-border); box-shadow: 0 12px 32px rgba(15,23,42,.28); display: flex; flex-direction: column; gap: 6px; animation: pl-pop .12s ease-out; }
.pl-dagnieuw-kop { font-size: 12px; font-weight: 600; color: var(--app-muted); }
.pl-dagnieuw-kop::first-letter { text-transform: uppercase; }
.pl-dagnieuw input { height: 34px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--bs-primary); background: var(--bs-body-bg); color: var(--app-text); font-size: 14px; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 18%, transparent); }
.pl-dagnieuw small { font-size: 11.5px; color: var(--app-muted); }
.fc .fc-daygrid-day, .fc .fc-timegrid-slot-lane { cursor: pointer; }

/* Kalender: doffe tegels zonder rand, rustig raster */
.fc { --fc-border-color: color-mix(in srgb, var(--app-border) 55%, transparent); --fc-today-bg-color: color-mix(in srgb, var(--bs-primary) 7%, transparent); }
.fc .fc-day-sat, .fc .fc-day-sun { background: color-mix(in srgb, var(--app-text) 3%, transparent); }
.fc .fc-daygrid-day-number { color: var(--app-muted); }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--bs-primary); font-weight: 700; }
.fc .fc-event.pl-ev { border: 0 !important; border-radius: 5px; box-shadow: none; }
.fc .fc-event.pl-ev:hover { filter: brightness(.93); }
.fc .fc-event.pl-ev.pl-ev-late { box-shadow: inset 3px 0 0 #dc2626; }
.fc .fc-event.pl-ev-leave { border-color: transparent !important; }
/* Labels kiezen (o.a. bij een nieuwe tegel): altijd een lichte tint in de eigen kleur; aangevinkt effen met witte tekst */
.pl-labelopt { background: color-mix(in srgb, var(--c) 14%, var(--app-surface)); border-color: color-mix(in srgb, var(--c) 45%, transparent); color: color-mix(in srgb, var(--c) 78%, var(--app-text)); font-weight: 500; }
.pl-labelopt:has(input:checked), .pl-labelopt.on { background: var(--c); border-color: var(--c); color: #fff; }
.pl-labelopt:has(input:checked) input { accent-color: #fff; }
/* weeknummers: alleen het getal, klein en niet onderstreept */
.fc .fc-daygrid-week-number { text-decoration: none; font-size: 10.5px; padding: 1px 5px; color: var(--app-muted); background: color-mix(in srgb, var(--app-text) 6%, transparent); border-radius: 0 0 5px 0; }
.fc .fc-timegrid-axis .fc-week-number, .fc a.fc-week-number { text-decoration: none; font-size: 10.5px; }
/* weeknummer in week- en dagweergave: zelfde discrete badge in de hoek als bij de maand */
.fc .fc-col-header .fc-timegrid-axis { position: relative; }
.fc .fc-col-header .fc-timegrid-axis .fc-timegrid-axis-cushion { position: absolute; top: 0; left: 0; text-decoration: none; font-size: 10.5px; line-height: 1.5; padding: 1px 5px; color: var(--app-muted); background: color-mix(in srgb, var(--app-text) 6%, transparent); border-radius: 0 0 5px 0; }
/* dagnummers kleiner */
.fc .fc-daygrid-day-number { font-size: 12px; padding: 3px 6px; }
.fc .pl-dnr small { font-size: 9.5px; }
/* Lijsten naast de kalender inklappen */
button.pl-grouphead { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 6px; padding: .3rem .35rem; }
button.pl-grouphead:hover { background: var(--bs-tertiary-bg); color: var(--app-text); }
.pl-groupchev { display: inline-flex; transition: transform .15s; opacity: .7; }
.pl-group.is-dicht .pl-groupchev { transform: rotate(-90deg); }
.pl-group.is-dicht { margin-bottom: 2px; }
/* verlof en ziekte: dezelfde witruimte als de tegels */
.fc .fc-event.pl-ev-leave .fc-event-main { padding: 3px 6px; line-height: 1.25; }
.fc .fc-daygrid-event.pl-ev-leave { margin-top: 3px; border-radius: 5px; }
/* datumbereik bovenaan de kalender kleiner */
.fc .fc-toolbar-title { font-size: .95rem; font-weight: 500; }
/* labeltekst een tint meer contrast op de doffe labelachtergrond (licht thema donkerder, donker thema lichter) */
.pl-label { color: color-mix(in srgb, var(--c) 72%, #000); }
[data-bs-theme=dark] .pl-label { color: color-mix(in srgb, var(--c) 72%, #fff); }
/* Werkbon: voorbeeldtekst (Titel/Subtitel) duidelijk lichter dan ingevulde tekst */
.w-line input::placeholder { font-weight: 400; }
/* Werkbon › Uitvoering: uren per dag met subtotaal */
.w-urendag td { font-size: 12px; font-weight: 600; color: var(--app-muted); background: var(--bs-tertiary-bg) !important; }
.w-urendag td:first-child::first-letter { text-transform: uppercase; }

/* Afronden: rondje voor de titel (bij aanwijzen), groen met vinkje als afgerond */
.pl-check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; padding: 0; margin: 0 6px 0 0;
  border: 1.5px solid #b4bcc8; border-radius: 50%; background: transparent; color: #b4bcc8; opacity: .6; cursor: pointer; transition: width .12s, margin .12s, opacity .12s, background .12s; }
.pl-check svg { opacity: 0; }
.pl-check:hover { opacity: 1; }
.pl-check:hover svg { opacity: .6; }
.pl-check.on { background: #16a34a; border-color: #16a34a; color: #fff; opacity: 1; }
.pl-check.on svg { opacity: 1; }
.pl-card .pl-check:not(.on), .fc-event .pl-check:not(.on) { width: 0; margin-right: 0; border-width: 0; opacity: 0; }
.pl-card:hover .pl-check:not(.on), .pl-card:focus-within .pl-check:not(.on), .fc-event:hover .pl-check:not(.on) { width: 16px; margin-right: 6px; border-width: 1.6px; opacity: .9; }
.fc .pl-evline .pl-check { align-self: center; }
.pl-card.is-af .pl-title { color: var(--app-muted); }
.fc .fc-event.pl-ev-af { opacity: .7; }
.pl-mtool.pl-afronden { color: #16a34a; background: color-mix(in srgb, #16a34a 10%, transparent); font-weight: 500; }   /* zelfde vorm als de werkbonknop, in groen */
.pl-mtool.pl-afronden:hover { color: #15803d; background: color-mix(in srgb, #16a34a 16%, transparent); }
.pl-mtool[data-pd-act="werkbon"] { color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }   /* nog geen werkbon: al een lichtblauw knopje */
.pl-mtool[data-pd-act="werkbon"]:hover { background: color-mix(in srgb, var(--bs-primary) 14%, transparent); }
.pl-mtool.pl-afronden.has { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); }
/* Gearchiveerde tegels in de kalender: spook (doorschijnend, gestippelde rand) */
.fc .fc-event.pl-ev-archief { opacity: .45; background: transparent !important; border: 1px dashed currentColor !important; box-shadow: none !important; }
.fc .fc-event.pl-ev-archief .pl-evtitle { text-decoration: line-through; }
/* rondje op de eerste regel van de titel, verticaal gecentreerd */
.pl-title { display: flex; align-items: flex-start; }
.pl-title .pl-check { margin-top: calc((1.3em - 16px) / 2); }
.fc .pl-evline { align-items: flex-start; }
.fc .pl-evline .pl-check { align-self: flex-start; margin-top: calc((1.25em - 16px) / 2); }
.fc .pl-evline .pl-evdeel { align-self: center; }

/* Uitschuifpaneel rechts (archief), sluit bij klik ernaast */
.pl-fly-backdrop { position: fixed; inset: 0; z-index: 1150; background: rgba(15, 23, 42, 0); transition: background .18s; }
.pl-fly-backdrop.open { background: rgba(15, 23, 42, .35); }
.pl-fly { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); display: flex; flex-direction: column; background: var(--app-surface);
  box-shadow: -18px 0 50px rgba(15, 23, 42, .3); transform: translateX(100%); transition: transform .18s ease-out; }
.pl-fly-backdrop.open .pl-fly { transform: none; }
.pl-fly-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--app-border); }
.pl-fly-h h2 { font-size: 18px; margin: 0; }
.pl-fly-h small { color: var(--app-muted); }
.pl-fly-zoek { margin: 12px 20px 4px; }
.pl-fly-body { flex: 1; overflow: auto; padding: 8px 12px 20px; }
.pl-fly-item { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--app-border); }
.pl-fly-item[hidden] { display: none; }
.pl-fly-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-fly-main .pl-label { align-self: flex-start; margin-bottom: 2px; }
.pl-fly-main strong { font-weight: 500; }
.pl-fly-main small { font-size: 12.5px; color: var(--app-muted); }
.pl-fly-leeg { padding: 24px 8px; color: var(--app-muted); }
@media (max-width: 560px) { .pl-fly-item { flex-direction: column; align-items: stretch; } }
.pl-title .pl-hintdot { flex: none; margin-top: calc((1.3em - 7px) / 2); }

/* Suggestie op een tegel: klein lampje rechtsboven en een zachte gloed in de kleur van de soort */
.s-botsing { --hc: #dc2626; } .s-weer { --hc: #3b82f6; } .s-werkbon { --hc: #8b5cf6; } .s-buurt { --hc: #f97316; } .s-sluimert { --hc: #94a3b8; }
.pl-card { position: relative; }
.pl-card.has-hint { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hc, #f59e0b) 35%, transparent), 0 0 14px -2px color-mix(in srgb, var(--hc, #f59e0b) 30%, transparent); }
.pl-hoek { position: absolute; top: 7px; right: 8px; display: inline-flex; align-items: center; gap: 5px; }   /* werkbon + lampje rechtsboven */
.pl-hintlamp { display: inline-flex; color: var(--hc, #f59e0b); pointer-events: auto; }
.pl-hintlamp svg { width: 13px; height: 13px; }
.pl-card.hoek-1 .pl-labels, .pl-card.hoek-1 .pl-title { padding-right: 18px; }
.pl-card.hoek-2 .pl-labels, .pl-card.hoek-2 .pl-title { padding-right: 36px; }
.pl-hoek .pl-woicon { margin: 0; }
/* Suggestie in het tegelvenster, onder de omschrijving */
.pl-mhints { display: grid; gap: 6px; margin: calc(-16px - .8rem + 8px) 0 0; } /* 8px onder de omschrijving (kolom heeft 16px gap) */
.pl-mhint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 7px 8px 7px 10px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--hc, #f59e0b) 30%, transparent); background: color-mix(in srgb, var(--hc, #f59e0b) 8%, var(--app-surface)); }
.pl-mhint-ico { color: var(--hc, #f59e0b); display: inline-flex; flex: none; }
.pl-mhint-t { flex: 1 1 180px; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--app-muted); }
.pl-mhint-t strong { color: var(--app-text); font-weight: 600; }
.pl-mhint .u-btns { margin-left: auto; gap: 4px; }
.pl-mhint .u-btn { height: 25px; padding: 0 8px; font-size: 12px; }

/* Vaste monteur nog nergens ingepland: lichte suggestie in de kalender (geen tegel) */
.fc .fc-event.pl-ev-vrij { background: transparent !important; border: 1px dashed color-mix(in srgb, var(--app-muted) 45%, transparent) !important; box-shadow: none; cursor: default; opacity: .85; }
.fc .fc-event.pl-ev-vrij .fc-event-main { color: var(--app-muted); }
.fc .pl-ev-vrij .pl-vrij { display: flex; flex-direction: column; gap: 3px; padding: 3px 2px; }
.fc .pl-ev-vrij .fc-event-main { container-type: inline-size; }
.fc .pl-ev-vrij .pl-vrij-r { display: flex; align-items: center; gap: 4px; min-width: 0; line-height: 1.2; }
/* meerdere mensen in één vak: dun stippellijntje ertussen */
.fc .pl-ev-vrij .pl-vrij-r + .pl-vrij-r { border-top: 1px dashed color-mix(in srgb, var(--app-muted) 45%, transparent); padding-top: 3px; }   /* zelfde streepjes als de rand van het vak */
/* smalle dagcel: bij iedereen "Beschikbaar" onder de naam, zodat niets wordt afgekapt */
@container (max-width: 104px) { .fc .pl-ev-vrij .pl-vrij-r { flex-direction: column; align-items: flex-start; gap: 1px; } }
.fc .pl-ev-vrij .pl-vrij-r .pl-evn { flex: none; padding-left: 3px; padding-right: 3px; }
.fc .pl-ev-vrij .pl-vrij-t { font-size: 10.5px; color: var(--app-muted); white-space: nowrap; }
/* tegelvenster: monteurs wijken af van de werkbon (subtiel) */
.pl-woafw { display: flex; align-items: center; gap: 6px; margin: -.35rem 0 .1rem 28px; font-size: 12.5px; color: var(--app-muted); }
.pl-woafw .ico, .pl-woafw svg { color: #d97706; flex: none; }
.pl-woafw button { border: 0; background: none; padding: 0 2px; color: var(--bs-primary); font-size: 12.5px; }
.pl-woafw button:hover { text-decoration: underline; }

/* Kaart: lijsten aan/uit (markers per lijst) */
.pl-kaartlijsten { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 .25rem .25rem; }
.pl-kl { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 7px; border: 1px solid var(--app-border); border-radius: 999px; background: none; color: var(--app-muted); font-size: 12.5px; line-height: 1.3; }
.pl-kl span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-kl small { font-size: 11px; opacity: .8; }
.pl-kl i { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); background: transparent; }
.pl-kl.on { color: var(--app-text); border-color: color-mix(in srgb, var(--app-text) 22%, transparent); background: var(--app-hover); }
.pl-kl.on i { background: var(--c); }
.pl-kl:hover { border-color: color-mix(in srgb, var(--app-text) 35%, transparent); }

/* Placeholders in alle invoervelden: dezelfde lichte grijstint als "Subtitel" in de werkbon */
input::placeholder, textarea::placeholder, .form-control::placeholder, .form-control-sm::placeholder { color: var(--app-muted); opacity: .55; }


/* Relaties: contactpersonen compact, één regel per persoon; slepen aan de greep (bovenste = hoofdcontact) */
.rel-cp-kop, .rel-cp { display: grid; grid-template-columns: 22px minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .8fr) 30px; gap: 6px; align-items: center; }
.rel-cp-kop { font-size: 12px; color: var(--app-muted); padding-bottom: 4px; }
.rel-cps { display: flex; flex-direction: column; gap: 6px; }
.rel-cp { padding: 2px 0; border-radius: 8px; }
.rel-cp-grip { cursor: grab; color: var(--app-muted); text-align: center; letter-spacing: -2px; user-select: none; touch-action: none; line-height: 30px; }
.rel-cp-grip:active { cursor: grabbing; }
.rel-cp-ghost { opacity: .45; background: var(--app-hover); }
.rel-cp-naamvak { position: relative; min-width: 0; }
.rel-cp.is-hoofd .rel-cp-naam { padding-right: 92px; }
.rel-cp-tag { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--bs-primary) 16%, transparent); color: var(--bs-primary); pointer-events: none; white-space: nowrap; }
.rel-cp-del { width: 30px; height: 30px; }
.rel-cp-meer { font-size: 11.5px; padding: 0 6px; border-radius: 999px; background: var(--app-hover); }
@media (max-width: 767.98px) {
  .rel-cp-kop { display: none; }
  .rel-cps { gap: 10px; }
  .rel-cp { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 30px; padding: 8px 0; border-bottom: 1px solid var(--app-border); border-radius: 0; }
  .rel-cp:last-child { border-bottom: 0; }
  .rel-cp-grip { grid-row: 1 / span 3; align-self: stretch; display: flex; align-items: center; justify-content: center; }
  .rel-cp-naamvak { grid-column: 2 / span 2; }
  .rel-cp-del { grid-column: 4; grid-row: 1; }
  .rel-cp-functie { grid-column: 2 / span 2; }
  .rel-cp-email, .rel-cp-tel { grid-column: auto; }
}
@media (max-width: 400px) { .rel-cp-email, .rel-cp-tel { grid-column: 2 / span 2; } }

/* Offerte en werkbon: de klant duidelijk bovenaan */
.doc-klant { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--letro); }
.doc-klant-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--app-muted); }
.doc-klant-naam { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 20px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.doc-klant-naam a { color: inherit; text-decoration: none; }
.doc-klant-naam a:hover { color: var(--letro); }
.doc-klant-naam .u-btn { font-size: 12.5px; font-weight: 500; }
.doc-klant-vast { font-size: 12.5px; font-weight: 400; color: var(--app-muted); }
.doc-klant-sub { font-size: 13.5px; color: var(--app-muted); overflow-wrap: break-word; }
.doc-sep { margin: 0 6px; opacity: .6; }
@media (max-width: 575.98px) { .doc-klant-naam { font-size: 18px; } }
@media print { .doc-klant .u-btn { display: none !important; } }

/* Werkbon: foto's bij de instructies (kantoor) en als aparte pagina's op de afdrukversie */
.w-bijl { border-top: 1px solid var(--app-border); padding-top: .6rem; margin-top: .25rem; display: flex; flex-direction: column; gap: .5rem; }
.w-bijl-kop { display: flex; align-items: center; gap: 8px; }
.w-bijl-lijst { display: flex; flex-direction: column; gap: 8px; }
.w-bijl-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.w-bijl-item img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; display: block; background: var(--app-hover); }
/* bijlagepagina's: blokniveau (geen flex), zodat elke pagina echt op een nieuw vel begint; 2 × 2 foto's met bijschrift */
.w-bijlpagina { display: block; width: 794px; margin: 24px auto 0; background: #fff; color: #22262b; box-shadow: 0 2px 14px rgba(0,0,0,.14); padding: 44px 48px; font-size: 11.5px; line-height: 1.45; box-sizing: border-box; }
.w-bijlpagina .p-bijlage-kop { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d0d7e2; padding-bottom: 6px; margin-bottom: 12px; font-size: 13px; }
.w-bijlpagina .p-bijlage-kop span { color: #64748b; text-align: right; }
.p-bijl-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.p-bijl-raster.een { grid-template-columns: 1fr; }
.p-bijl-raster figure { margin: 0; break-inside: avoid; page-break-inside: avoid; }
.p-bijl-raster img { display: block; width: 100%; height: 105mm; object-fit: contain; background: #f4f6f8; border-radius: 4px; }
.p-bijl-raster.een img { height: 200mm; }
.p-bijl-raster figcaption { margin-top: 5px; font-size: 12px; color: #22262b; overflow-wrap: break-word; }
@media print {
  .wo-page #w-bijl-paper { display: block !important; }
  body:has(.wo-page) .page-container, body:has(.wo-page) main { display: block !important; }   /* geen flex rond de pagina's: anders geen pagina-einde */
  .wo-page .w-bijlpagina { break-before: page; page-break-before: always; width: 100%; margin: 0; padding: 0 3px 0 1px; box-shadow: none; }
}

/* Slimme suggesties: korte uitleg per onderdeel */
.sg-uitleg { font-size: 13px; color: var(--app-muted); margin: 0 0 .6rem; max-width: 62ch; line-height: 1.5; }

/* Slimme suggesties in Beheer: drie gelijke kolommen, kop / uitleg / velden op dezelfde hoogte (subgrid) */
.sg-blokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 2rem; row-gap: 1.75rem; }
.sg-blok { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: .35rem; align-content: start; min-width: 0; }
.sg-blok h3 { margin: 0; }
.sg-blok .sg-uitleg { margin: 0; }
.sg-velden { display: flex; flex-direction: column; border-top: 1px solid var(--app-border); }
.sg-veld { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--app-border); font-size: 13.5px; }
.sg-veld label { margin: 0; line-height: 1.3; }
.sg-ig { width: 128px; flex-wrap: nowrap; }
.sg-ig .form-control { text-align: right; min-width: 0; }
.sg-ig .input-group-text { min-width: 52px; justify-content: center; font-size: 12px; color: var(--app-muted); }
.sg-leren { margin: .6rem 0 0; font-size: 13px; }
.sg-lijsten { margin-top: 1.5rem; }
.sg-lijsten-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .4rem; }
.sg-lijsttabel { max-width: 720px; }
.sg-lijsttabel th:nth-child(2), .sg-lijsttabel td:nth-child(2) { width: 150px; }
.sg-regels { table-layout: fixed; min-width: 760px; }
.sg-regels .c-aan { width: 48px; } .sg-regels .c-naam { width: 190px; } .sg-regels .c-num { width: 92px; } .sg-regels .c-del { width: 44px; }
.sg-regels th { white-space: nowrap; }
.sg-regels .form-check-input { margin: 0; vertical-align: middle; }
@media (max-width: 575.98px) { .sg-veld { grid-template-columns: minmax(0, 1fr) 118px; } .sg-ig { width: 118px; } }
/* Klant kiezen in een popup: resultaten in de popup zelf (die groeit mee), niet zwevend over de onderrand */
.kp-inline .kp-list { position: static; margin-top: .5rem; box-shadow: none; max-height: min(50vh, 340px); }
.kp-dlg-voet { display: flex; justify-content: flex-end; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--app-border); }
/* Suggesties: klein tijdstempel (sinds wanneer) */
.pl-hint-sinds { margin-left: auto; flex: none; font-size: 11px; color: var(--app-muted); opacity: .8; white-space: nowrap; }
.pl-mhint-t .pl-hint-sinds { margin-left: .25rem; }
.pl-mherstel { --hc: #dc3545; }
/* Werkbon bij een tegel: loskoppelen en kiezen/koppelen */
.pl-mtool.pl-wolos { min-width: 22px; width: 22px; padding: 0; margin-left: -.35rem; opacity: .6; }
.pl-mtool.pl-wolos:hover, .pl-mtool.pl-wolos.armed { opacity: 1; color: #dc2626; }
.pl-mtool.pl-wolos.armed { width: auto; padding: 0 .45rem; margin-left: 0; }
.pl-wokies { border: 1px solid var(--app-border); border-radius: 6px; max-height: min(45vh, 320px); overflow-y: auto; }
.pl-wokies-opt { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--app-border); background: none; padding: .5rem .75rem; color: var(--bs-body-color); }
.pl-wokies-opt:first-child { border-top: 0; }
.pl-wokies-opt:hover { background: var(--app-hover, var(--bs-tertiary-bg)); }
.pl-wokies-opt small { color: var(--bs-secondary-color); }
.pl-wokies-tip { font-size: 11px; font-weight: 500; color: #16a34a; margin-left: .35rem; }
.pl-wokies-st { flex: none; font-size: 11.5px; color: var(--app-muted); }
.pl-wokies-leeg { padding: .75rem; font-size: 13px; color: var(--app-muted); }
#dlg:has(.pl-wokies) { width: min(520px, calc(100vw - 32px)); }

/* Offerte: opmaakknoppen (B, I, U) onder de omschrijving */
.q-src { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.q-fmt { display: inline-flex; margin-left: auto; border: 1px solid var(--app-border); border-radius: 6px; overflow: hidden; }
.q-fmt button { border: 0; background: none; width: 28px; height: 24px; font-size: 13px; line-height: 1; color: var(--bs-secondary-color); font-family: Georgia, 'Times New Roman', serif; }
.q-fmt button + button { border-left: 1px solid var(--app-border); }
.q-fmt button:hover { background: var(--app-hover, var(--bs-tertiary-bg)); color: var(--bs-body-color); }
/* Omschrijving met zichtbare opmaak (bewerkbaar vak), even hoog als 4 regels en groeit mee */
.q-desc { min-height: calc(4 * 1.5em + .5rem); max-height: 24rem; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; cursor: text; }
.q-desc:empty::before { content: attr(data-placeholder); color: var(--bs-secondary-color); opacity: .75; pointer-events: none; }
.q-desc:focus { outline: 0; }
.q-desc:not([contenteditable]) { background: var(--bs-secondary-bg); cursor: default; }
/* Offerte bewerken: zwarte balk met het bedrag excl. btw groot, btw en incl. btw klein eronder */
.total.q-totaal { flex-wrap: wrap; }
.q-totaal-sub { flex-basis: 100%; display: grid; grid-template-columns: 1fr auto; row-gap: 2px; margin-top: .5rem; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; color: var(--bs-gray-500); font-variant-numeric: tabular-nums; }
.q-totaal-sub span:nth-child(even) { text-align: right; }
/* Planning: werkbon-icoontje rechts naast de titel (Kanban en kalender); het suggestielampje staat apart rechtsboven */
.pl-woicon { flex: none; display: inline-flex; align-items: center; margin-left: 5px; color: var(--app-muted); opacity: .85; }
.pl-woicon svg { width: 12px; height: 12px; }
.pl-title .pl-woicon { margin-top: calc((1.3em - 12px) / 2); }
.fc .pl-evline .pl-woicon { align-self: center; margin-left: 3px; color: inherit; opacity: .7; }
.pl-titletxt { min-width: 0; }
/* Beheer › Gebruikers: inactieve collega's onderaan, gedimd */
tr.user-inactief > td { opacity: .6; }
/* Tegelvenster met extra dagen: per dag een blok met datum/tijd en de monteurs van die dag */
.pl-dagen { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; }
.pl-dagblok { border: 1px solid var(--app-border); border-radius: 10px; padding: 6px 10px 4px; background: color-mix(in srgb, var(--app-text) 2.5%, var(--app-surface)); }
.pl-dagkop { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--app-muted); margin-bottom: 2px; }
.pl-dagblok .pl-mline { margin-bottom: 2px; }
.pl-dagblok .pl-mdag .pl-micon { opacity: 1; }
.pl-volgt-t { font-size: 13px; color: var(--app-muted); }
.pl-volgt .pl-mlink, .pl-dagblok .pl-mpeople > .pl-mlink { font-size: 12.5px; padding: 0; }
.pl-dagen .pl-madddag { padding-left: 2px; margin: 0; }

/* Kleurstelling vastzetten: tablets/telefoons in nachtstand mogen de kleuren niet zelf "donker maken" of verkleuren.
   Het portal kiest zelf licht of donker (knop in de bovenbalk). */
html[data-bs-theme="light"] { color-scheme: only light; }
html[data-bs-theme="dark"] { color-scheme: only dark; }

/* Beheer › Export en import: automatische back-ups */
.bk-lijst { display: flex; flex-direction: column; gap: .75rem; }
.bk-rij { display: flex; gap: .75rem; align-items: flex-start; }
.bk-dot { flex: none; width: .7rem; height: .7rem; border-radius: 50%; margin-top: .4rem; background: var(--bs-secondary-color); }
.bk-dot.ok { background: var(--bs-success); }
.bk-dot.fout { background: var(--bs-danger); }

/* kopbalk: back-ups en opslag (beheerders) */
.sys-menu { position: relative; }
.sys-btn { position: relative; }
.sys-dot { position: absolute; right: 5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--app-surface); background: var(--bs-secondary-color); }
.sys-dot.ok { background: var(--bs-success); } .sys-dot.let { background: var(--bs-warning); } .sys-dot.fout { background: var(--bs-danger); }
.sys-drop { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: .4rem 0; display: none; z-index: 60; }
.sys-drop.show { display: block; }
.sys-head { padding: .45rem 1rem .55rem; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--app-border); margin-bottom: .3rem; }
.sys-rij { display: grid; grid-template-columns: .7rem 1fr auto; gap: .6rem; align-items: center; padding: .3rem 1rem; font-size: 13px; }
.sys-rij .bk-dot { margin-top: 0; }
.sys-tijd, .sys-leeg, .sys-extra { color: var(--app-muted); font-size: 12px; }
.sys-leeg { padding: .3rem 1rem; }
.sys-opslag { padding: .5rem 1rem .3rem; font-size: 13px; }
.sys-drop .sys-opslag:first-of-type { border-top: 1px solid var(--app-border); margin-top: .3rem; padding-top: .6rem; }
.sys-opslag-kop { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.sys-opslag-kop span:last-child { color: var(--app-muted); font-size: 12px; } .sys-opslag-kop b { color: var(--app-text); }
.sys-balk { height: 6px; border-radius: 3px; background: var(--app-hover); overflow: hidden; }
.sys-balk span { display: block; height: 100%; border-radius: 3px; background: var(--bs-primary); }
.sys-balk span.let { background: var(--bs-warning); } .sys-balk span.fout { background: var(--bs-danger); }
.sys-extra { margin-top: .25rem; }
.sys-problemen { margin: .4rem 1rem .2rem; padding: .5rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--bs-warning) 14%, transparent); font-size: 12px; display: flex; flex-direction: column; gap: .25rem; }
.sys-link { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .55rem 1rem .35rem; margin-top: .3rem; border-top: 1px solid var(--app-border); font-size: 13px; color: var(--bs-primary); }
.sys-link:hover { text-decoration: underline; }
.bk-opslag .sys-opslag { padding: .4rem 0; font-size: 14px; }
@media (max-width: 575.98px) { .sys-drop { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; } }

/* planningsscherm (tv): geen menu, lichte weergave, balk bovenaan met aanwezigheid, jarigen, weer en klok */
body.scherm-modus .sidebar, body.scherm-modus .sidebar-backdrop, body.scherm-modus .footer,
body.scherm-modus .header [data-act="sidebar-toggle"], body.scherm-modus .header-search { display: none !important; }
body.scherm-modus .page-container { margin-left: 0; }
body.scherm-modus .header { height: auto; min-height: 84px; padding: 10px 24px; }
body.scherm-modus .header-right { flex: 1; margin-left: 0; }
.sch-balk { display: flex; align-items: stretch; gap: 12px; width: 100%; }
.sch-item { background: var(--app-hover); border-radius: 12px; padding: 8px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 120px; line-height: 1.15; }
.sch-item strong { font-size: 26px; font-weight: 700; }
.sch-item small { color: var(--app-muted); font-size: 13px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); display: inline-flex; align-items: center; gap: 4px; }
.sch-l .ico { width: 14px; height: 14px; }
/* personeel vandaag: twee getallen naast elkaar in één vak, zoals op het dashboard */
.sch-pers { display: flex; align-items: center; background: var(--app-hover); border-radius: 12px; padding: 8px 6px; }
.sch-stat { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.sch-stat + .sch-stat { border-left: 1px solid var(--app-border); }
.sch-num { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-width: 1ch; text-align: right; }
.sch-lab { display: flex; flex-direction: column; line-height: 1.25; }
.sch-lab > span { font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.sch-lab small { color: var(--app-muted); font-size: 12.5px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sch-dot.ok { background: var(--bs-success); } .sch-dot.weg { background: #f59e0b; }
.sch-rechts { margin-left: auto; }
.sch-bday { align-self: center; font-size: 16px; }
.sch-wx { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; }
.sch-wx svg { grid-row: span 2; }
.sch-wx small { grid-column: 2; }
.sch-klok { padding: 0 4px 0 10px; text-align: right; display: flex; flex-direction: column; justify-content: center; }
.sch-klok strong { font-size: 40px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.sch-klok small { color: var(--app-muted); font-size: 14px; }

/* opleveringsrapport voor de klant (uitgevoerde werkbon) */
/* werkbalk boven afdrukversie en opleveringsrapport: bedrijf kiezen, onderdelen aan/uit */
.w-printbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; max-width: 794px; margin: 0 auto .9rem; padding: .6rem .9rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-body-bg); }
.w-printbar[hidden] { display: none; }
.w-pb-groep { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.w-pb-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.w-pb-groep .form-check { display: flex; align-items: center; gap: .45rem; padding-left: 0; font-size: 13.5px; }
.w-pb-groep .form-check-input { float: none; margin: 0 0 0 0 !important; width: 2.1em; height: 1.15em; cursor: pointer; }
.w-pb-groep .form-check-label { cursor: pointer; }
.w-pb-hint { flex-basis: 100%; font-size: 12px; color: var(--bs-secondary-color); border-top: 1px solid var(--bs-border-color-translucent); padding-top: .45rem; }
@media print { .wo-page .w-printbar { display: none !important; } }
.w-paper .p-vink { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid #22262b; border-radius: 2px; font-size: 11px; font-weight: 700; line-height: 1; margin-top: 1px; }
.w-exec-fotoset { font-size: .8rem; font-weight: 600; margin: .75rem 0 .35rem; }
.w-exec-fotoset:first-child { margin-top: 0; }
.w-paper .sq.ok { display: inline-grid; place-items: center; background: #16a34a; border-color: #16a34a; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.w-paper .p-vink.ok { background: #16a34a; border-color: #16a34a; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.w-paper .p-open { color: #b45309; font-size: 10.5px; }
.w-paper .p-hours-rap td { height: 22px; }
.w-paper .p-hours-rap tfoot td { background: #f3f4f6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.w-paper .p-handtekening { display: block; max-height: 70px; max-width: 100%; object-fit: contain; object-position: left; }
.w-paper .p-sign-r { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #b9bdc3; padding-top: 4px; font-size: 10.5px; }
@media print {
  /* gewone afdruk: geen rapport; rapport afdrukken: alleen het rapport */
  .wo-page .w-rapport { display: none !important; }
  body.print-rapport .wo-page .w-rapport { display: block !important; }
  body.print-rapport .wo-page .w-paper-wrap:not(.w-rapport-wrap), body.print-rapport .wo-page .w-exec { display: none !important; }
}

/* keuze tussen de twee bedrijven boven afdrukversie en opleveringsrapport: segmentknop (tekst) */
.w-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent); }
.w-seg-optie { border: 0; background: transparent; color: var(--bs-secondary-color); font-size: 13.5px; font-weight: 500; padding: 5px 16px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.w-seg-optie:hover { color: var(--bs-body-color); }
.w-seg-optie.actief { background: var(--letro); color: #fff; font-weight: 600; }
.w-seg-optie:focus-visible { outline: 2px solid rgba(var(--letro-rgb), .6); outline-offset: 1px; }

/* uren van een werkbon aanpassen (kantoor) */
.app-dialog:has(.w-uren-edit) { width: min(760px, calc(100vw - 2rem)); }
.w-uren-edit th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); }
.w-uren-edit td:first-child { min-width: 150px; }
.w-uren-edit input[type=time] { min-width: 92px; }

/* @vermelden in de omschrijving van een tegel */
.pl-mention { position: absolute; z-index: 30; min-width: 220px; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface, var(--bs-body-bg)); box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column; max-width: 320px; }
.pl-mention[hidden] { display: none; }
.pl-mention button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left; padding: 5px 8px; border-radius: 6px; font-size: 13.5px; color: var(--app-text); }
.pl-mention button.on, .pl-mention button:hover { background: rgba(var(--letro-rgb), .1); }
.pl-mav { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--c, #64748b); flex: none; }
/* dashboard: vermeldingen */
.dash-vermeld .vm-at { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(var(--letro-rgb), .12); color: var(--letro); font-weight: 700; font-size: 13px; }
.dash-vermeld .vm-row { display: block; padding: .6rem 1rem; }
.dash-vermeld .vm-frag { color: var(--app-muted); font-size: 13px; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dash-vermeld .vm-frag mark { background: rgba(var(--letro-rgb), .14); color: var(--letro); padding: 0 2px; border-radius: 3px; font-weight: 600; }

/* @namen inkleuren in de omschrijving (kopie onder het tekstveld) */
.pl-hlwrap { position: relative; }
.pl-hlwrap .pl-hl { position: absolute; inset: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; color: transparent; border-style: solid; border-color: transparent; pointer-events: none; background: var(--bs-body-bg); }
.pl-hlwrap .pl-hl mark { color: transparent; background: rgba(var(--letro-rgb), .22); border-radius: 4px; padding: 0; box-shadow: 0 0 0 1px rgba(var(--letro-rgb), .35); }
.pl-hlwrap textarea { position: relative; background: transparent !important; }

/* ---------- eenvoudige startpagina ---------- */
.ev { max-width: 1100px; font-size: 17px; container-type: inline-size; }   /* container queries: werken ook goed met de tekstgrootte (zoom) */
.ev-groet { font-size: 32px; font-weight: 700; margin: .25rem 0 0; }
.ev-sub { color: var(--app-muted); font-size: 18px; margin: .3rem 0 1.4rem; }
.ev-vandaag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; background: linear-gradient(135deg, #0084e8, #0062b0); color: #fff; border-radius: 18px; padding: 1.2rem 1.6rem; margin-bottom: 1.8rem; }
.ev-vandaag div { display: flex; flex-direction: column; min-width: 0; }
.ev-vandaag strong { font-size: 30px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.ev-vandaag span { font-size: 15px; opacity: .9; }
.ev-h { font-size: 22px; font-weight: 700; margin: 0 0 .8rem; }
.ev-taken { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.8rem; }
.ev-taak { display: flex; align-items: center; gap: 1rem; background: var(--app-surface, var(--bs-body-bg)); border: 1px solid var(--app-border); border-left: 6px solid #f59e0b; border-radius: 14px; padding: .9rem 1.1rem; color: var(--app-text); text-decoration: none; }
.ev-taak:hover { border-color: rgba(var(--letro-rgb), .45); border-left-color: #f59e0b; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.ev-n { width: 44px; height: 44px; border-radius: 50%; background: #fff4e0; color: #b45309; font-weight: 700; font-size: 20px; display: grid; place-items: center; flex: none; }
.ev-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 18px; font-weight: 500; }
.ev-t small { color: var(--app-muted); font-size: 15px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev-btn { background: var(--letro); color: #fff; border-radius: 12px; padding: .7rem 1.3rem; font-size: 17px; font-weight: 600; flex: none; }
.ev-leeg { font-size: 18px; color: var(--app-muted); background: var(--app-surface, var(--bs-body-bg)); border: 1px dashed var(--app-border); border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1.8rem; }
.ev-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ev-tile { display: flex; flex-direction: column; gap: .5rem; background: var(--app-surface, var(--bs-body-bg)); border: 1px solid var(--app-border); border-radius: 16px; padding: 1.3rem; min-height: 150px; color: var(--app-text); text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.ev-tile:hover { border-color: rgba(var(--letro-rgb), .5); box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.ev-ico { width: 50px; height: 50px; border-radius: 14px; background: rgba(var(--letro-rgb), .12); color: var(--letro); display: grid; place-items: center; }
.ev-ico svg { width: 26px; height: 26px; }
.ev-tile strong { font-size: 20px; }
.ev-tile small { color: var(--app-muted); font-size: 15px; }
.ev-terug { margin-top: 1.8rem; font-size: 14px; color: var(--app-muted); }
.ev-terug .btn-link { font-size: 14px; }
@container (max-width: 820px) {
  .ev-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .ev-vandaag { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem 1.2rem; }
  .ev-vandaag strong { font-size: 24px; }
  .ev-taak { flex-wrap: wrap; }
  .ev-btn { width: 100%; text-align: center; }
  .ev-groet { font-size: 26px; }
}
@container (max-width: 380px) {
  .ev-tiles { grid-template-columns: 1fr; }
}

/* ---------- Telefoon en tablet: rustiger kop, scrollbare tabbladen, kalender horizontaal scrollen ---------- */
.pl-top h1.pl-boardnaam { font-size: 1.15rem; font-weight: 600; margin: 0; white-space: nowrap; }
.pl-zoekbtn { display: none; }
.page-title-btns { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
/* tabbladen als pillen in één rij, zijwaarts scrollen (telefoon en tablet) */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
  /* tabbladen als pillen in één rij, zijwaarts scrollen */
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; border-bottom: 0; gap: .4rem; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item { flex: none; }
  .nav-tabs .nav-link { white-space: nowrap; margin: 0; border: 1px solid var(--app-border); border-radius: 999px; padding: .4rem .95rem; color: var(--app-muted); background: var(--app-surface); }
  .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover { background: var(--letro); border-color: var(--letro); color: #fff; }
}
@media (max-width: 767.98px) {
  /* zoekbalk bovenaan: alleen het loepje; na een tik over de hele balk */
  .header-search { flex: none; max-width: none; padding: 0; cursor: pointer; }
  .header-search-icon { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; }
  .header-search input { display: none; }
  body.zoek-open .header-search { position: absolute; inset: 0; z-index: 5; background: var(--app-surface); padding: 0 1rem; cursor: auto; }
  body.zoek-open .header-search input { display: block; font-size: 16px; }


  /* paginatitel met knoppen: knoppen onder de titel als het niet past */
  .page-title h1 { margin-right: auto; }

  /* actie vereist: knoppen onder de tekst */
  .u-actie { flex-wrap: wrap; align-items: flex-start; }
  .u-actie .u-dot { margin-top: .45rem; }
  .u-actie .u-a-btns { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; padding-left: calc(10px + .75rem); }

  /* planning: naam + weergaven op één regel, knoppen eronder, zoeken via het loepje */
  .pl-top { gap: .5rem; }
  .pl-boardnaam, .pl-boardsel { order: 1; }
  .pl-top h1.pl-boardnaam { font-size: 1.05rem; }
  .pl-views { order: 2; margin-left: auto; }
  .pl-views a { padding: .3rem .7rem; }
  .pl-top-right { order: 3; flex: 1 1 100%; margin-left: 0; justify-content: flex-start; gap: .5rem; }
  .pl-tools { order: 1; flex: 1 1 100%; }
  .pl-tools .pl-ibtn.primary { margin-left: auto; }
  .pl-zoekbtn { display: inline-flex; }
  .pl-zoekbtn[aria-expanded="true"] { background: var(--app-hover); }
  .pl-search { order: 2; flex: 1 1 100%; display: none; }
  .pl-top.zoek-open .pl-search { display: block; }
  .pl-search input { font-size: 16px; }   /* iOS zoomt anders in */

  /* kalender: niet alles samenpersen; dagen houden hun breedte en je scrolt zijwaarts */
  .pl-calwrap .fc .fc-header-toolbar { flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
  .pl-calwrap .fc .fc-toolbar-chunk { display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem; }
  /* regel 1: periode links, pijlen + Vandaag rechts; regel 2: Maand/Week/Dag, Weekend en volledig scherm over de volle breedte */
  .pl-calwrap .fc .fc-toolbar-chunk:nth-child(2) { order: -1; flex: 1 1 auto; min-width: 0; }
  .pl-calwrap .fc .fc-toolbar-chunk:nth-child(1) { order: 0; margin-left: auto; }
  .pl-calwrap .fc .fc-toolbar-chunk:nth-child(3) { order: 1; flex: 1 1 100%; }
  .pl-calwrap .fc .fc-toolbar-chunk:nth-child(3) .fc-button-group { flex: 1 1 auto; }
  .pl-calwrap .fc .fc-toolbar-chunk:nth-child(3) .fc-button-group .fc-button { flex: 1 1 0; }
  .pl-calwrap .fc .fc-toolbar-chunk:nth-child(3) > .fc-button { flex: none; }
  .pl-calwrap .fc .fc-toolbar-title { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-calwrap .fc .fc-toolbar-chunk .fc-button-group + .fc-button, .pl-calwrap .fc .fc-toolbar-chunk > .fc-button + .fc-button { margin-left: 0; }
  .pl-calwrap .fc .fc-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pl-calwrap .fc .fc-view:not(.fc-timeGridDay-view) .fc-scrollgrid { min-width: 600px; }
  /* week: ruimere dagen dan de maand (tijden en tegels naast elkaar), met weekend nog breder */
  .pl-calwrap .fc .fc-view.fc-dayGridWeek-view .fc-scrollgrid { min-width: 860px; }
  .pl-calwrap .fc .fc-view.fc-dayGridWeek-view .fc-scrollgrid:has(.fc-day-sat) { min-width: 1150px; }
}

/* Tegelvenster op de telefoon: regel 1 status + sluiten, regel 2 de titel over de volle breedte, regel 3 de acties */
.pl-macties { display: flex; align-items: center; gap: .35rem; }
.pl-mtool span { white-space: nowrap; }
.pl-mtool-tel { display: none; }
@media (max-width: 767.98px) {
  .pl-mhead { grid-template-columns: minmax(0, 1fr) auto; padding: .75rem 1rem .6rem; row-gap: .5rem; border-bottom: 1px solid var(--app-border); }
  .pl-mhead .pl-mtools { display: contents; }
  .pl-mhead .pl-mlist { grid-column: 1; grid-row: 1; justify-self: start; }
  .pl-mhead .btn-close { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; padding: .6rem; }
  .pl-mhead .pl-dtitle { grid-column: 1 / -1; grid-row: 2; font-size: 1.25rem; line-height: 1.3; }
  .pl-mhead .pl-macties { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; gap: .5rem; }
  .pl-mhead .pl-macties:empty { display: none; }
  .pl-mhead .pl-mtool { height: 34px; padding: 0 .7rem; font-size: 13px; border: 1px solid var(--app-border); }
  .pl-mhead .pl-mtool.has, .pl-mhead .pl-mtool.pl-afronden, .pl-mhead .pl-mtool[data-pd-act="werkbon"] { border-color: transparent; }
  .pl-mhead .pl-mtool.pl-wolos { width: 34px; min-width: 34px; padding: 0; margin-left: -.35rem; border: 0; }
  .pl-mtool-tel { display: inline; }
}

/* Suggesties gebundeld: één kop per soort en titel, inklapbaar */
.pl-hints-n { font-size: 12px; font-weight: 600; color: #b45309; background: #fff4e0; border-radius: 999px; padding: 0 .45rem; }
.pl-hints > .pl-hgroep:first-of-type { margin-top: .6rem; }
.pl-hgroep { --c: #94a3b8; margin: 0 .75rem .6rem; border: 1px solid var(--app-border); border-left: 3px solid var(--c); border-radius: 10px; }
.pl-hgroep.s-rood { --c: #dc2626; } .pl-hgroep.s-blauw { --c: #3b82f6; } .pl-hgroep.s-paars { --c: #8b5cf6; } .pl-hgroep.s-oranje { --c: #ea580c; }
.pl-hgroep-kop { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem .5rem; color: var(--app-text); font-size: 13.5px; }
.pl-hgroep-t { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-hgroep-n { margin-left: auto; font-size: 12px; color: var(--app-muted); white-space: nowrap; }
.pl-hgroep-lijst { border-top: 1px solid var(--app-border); padding: .35rem 0 .2rem; }
.pl-hints .pl-hgroep .pl-hint.in-groep { margin: 0 .6rem .4rem; padding: .5rem .6rem; border: 0; border-bottom: 1px dashed var(--app-border); border-radius: 0; font-size: 13px; }
.pl-hgroep-acts { display: flex; align-items: center; padding: 0 .6rem .35rem; }
.pl-hgroep-meer { display: inline-flex; align-items: center; gap: .2rem; font-weight: 500; color: var(--bs-primary) !important; }
.pl-hgroep-meer[aria-expanded="true"] svg { transform: rotate(180deg); }
.pl-hgroep-acts .btn-link { padding: 0 .2rem; font-size: 13px; text-decoration: none; color: var(--app-muted); }
.pl-hgroep-acts .btn-link:hover { color: var(--bs-primary); }

/* Flexklussen en autohoogwerker */
.pl-mflex { flex-wrap: wrap; gap: .5rem; }
.pl-msel { width: auto; max-width: 100%; }
.pl-mflexsw { display: inline-flex; align-items: center; gap: .4rem; font-size: 13.5px; padding: .25rem .6rem; border-radius: 8px; background: color-mix(in srgb, #16a34a 8%, transparent); color: #15803d; cursor: pointer; }
.pl-mflexsw span { display: inline-flex; align-items: center; gap: .25rem; }
.pl-mflexsw.uit { background: var(--app-hover); color: var(--app-muted); cursor: default; }
.pl-flexicon, .pl-hwicon { display: inline-flex; flex: none; margin-left: 3px; vertical-align: -1px; }
.pl-flexicon { color: #16a34a; }
.pl-hwicon { color: var(--app-muted); }
.pl-hwicon.gehuurd { color: var(--bs-primary); }
.s-flex { --hc: #16a34a; }
.pl-hints .pl-hint.s-groen, .pl-hgroep.s-groen { --c: #16a34a; }
.pl-hintdot.s-flex { background: #16a34a; }
.pl-pin { position: relative; }
.pl-pin span { display: grid; place-items: center; }
.pl-pin.ico { width: 36px; height: 42px; }
.pl-pin.ico span { width: 31px; height: 31px; }
.pl-pin span i { display: inline-flex; transform: rotate(45deg); color: #fff; }   /* de pin zelf staat 45° gedraaid */
.pl-pinflex { position: absolute; top: -5px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* Suggesties in het tegelvenster: tekst over de volle breedte, knoppen eronder (uitgelijnd met de tekst) */
.pl-mhint { align-items: flex-start; }
.pl-mhint .pl-mhint-ico { margin-top: 1px; }
.pl-mhint .pl-mhint-t { flex: 1 1 calc(100% - 30px); }
.pl-mhint .u-btns, .pl-mhints .pl-mhint .u-btns { flex-basis: 100%; margin-left: 0; padding-left: calc(15px + 10px); display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; }

/* telefoon: de actie (bijv. Toevoegen) op een eigen regel, Niet nu en Bewust zo laten samen eronder */
.pl-mhint-rest { display: contents; }
@media (max-width: 767.98px) { .pl-mhint-rest { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 4px; } }

/* ---------- Productie ---------- */
.pr-voorraad { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.pr-vk { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; padding: .6rem .75rem; }
.pr-vk.laat { border-color: color-mix(in srgb, #dc2626 45%, var(--app-border)); }
.pr-vk-n { font-weight: 600; font-size: 13.5px; margin-bottom: .25rem; }
.pr-vk-c { display: flex; flex-wrap: wrap; gap: .15rem .6rem; font-size: 12.5px; }
.pr-vk-c .laat { color: #dc2626; font-weight: 600; }
.pr-vk-b { font-size: 12px; color: #b45309; margin-top: .15rem; }
.pr-rij { display: grid; grid-template-columns: minmax(0, 1fr) 150px 170px 130px; gap: .4rem 1rem; align-items: center; }
.pr-rij-t { display: flex; flex-direction: column; min-width: 0; }
.pr-rij-t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-rij-b { display: flex; align-items: center; gap: .5rem; }
.pr-rij-s { text-align: right; }
@media (max-width: 767.98px) { .pr-rij { grid-template-columns: minmax(0, 1fr) auto; } .pr-rij-m { grid-column: 1; } .pr-rij-b { grid-column: 1 / -1; } .pr-rij-s { grid-row: 1; grid-column: 2; } }
.pr-balk { flex: 1; display: flex; height: 10px; border-radius: 999px; background: color-mix(in srgb, #3b82f6 22%, var(--app-surface)); overflow: hidden; min-width: 60px; box-shadow: inset 0 0 0 1px color-mix(in srgb, #3b82f6 30%, transparent); }
.pr-balk span { display: block; height: 100%; transition: width .2s; }
.pr-balk span.g { background: #16a34a; } .pr-balk span.z { background: #f59e0b; }
.pr-balk.laat { box-shadow: inset 0 0 0 2px #dc2626; } .pr-balk.krap { box-shadow: inset 0 0 0 2px #f59e0b; }
.pr-balk.klein { height: 5px; min-width: 0; }
.pr-balk-t { color: var(--app-muted); white-space: nowrap; }
.pr-kop-r { min-width: 220px; text-align: right; }
.pr-kop-balk { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.pr-titel { font-size: 1.15rem; font-weight: 600; border-color: transparent; padding-left: 0; background: transparent; }
.pr-titel:hover, .pr-titel:focus { border-color: var(--app-border); padding-left: .5rem; }
.pr-matrix th, .pr-matrix td { vertical-align: middle; }
.pr-matrix .pr-prod { min-width: 220px; }
.pr-matrix th.pr-c { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--app-muted); text-align: center; white-space: nowrap; }
.pr-matrix td.pr-c { text-align: center; padding: .3rem; min-width: 84px; }
.pr-cel { position: relative; width: 100%; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface); padding: .3rem .25rem; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; }
.pr-cel:hover { border-color: var(--letro); }
.pr-cel small { font-size: 11px; color: var(--app-muted); white-space: nowrap; }
.pr-ico { font-size: 15px; font-weight: 700; color: #2563eb; }
.pr-c.open .pr-cel { background: color-mix(in srgb, #3b82f6 9%, var(--app-surface)); border-color: color-mix(in srgb, #3b82f6 35%, var(--app-border)); }
.pr-cel .pr-geschat { color: var(--app-muted); }
.pr-cel .pr-uiterst { font-weight: 600; }
.pr-legenda { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; }
.pr-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: .3rem; }
.pr-legenda i.o { background: #3b82f6; } .pr-legenda i.b { background: #f59e0b; } .pr-legenda i.g { background: #16a34a; }
.pr-c.bezig .pr-cel { background: color-mix(in srgb, #f59e0b 18%, var(--app-surface)); border-color: color-mix(in srgb, #f59e0b 55%, var(--app-border)); }
.pr-c.bezig .pr-ico { color: #b45309; }
.pr-c.gereed .pr-cel { background: color-mix(in srgb, #16a34a 16%, var(--app-surface)); border-color: color-mix(in srgb, #16a34a 50%, var(--app-border)); }
.pr-c.gereed .pr-ico { color: #15803d; }
.pr-c.te_laat .pr-cel { border-color: #dc2626; } .pr-c.te_laat .pr-cel small { color: #dc2626; font-weight: 600; }
.pr-c.krap .pr-cel small { color: #b45309; font-weight: 600; }
.pr-aangepast { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--letro); }
.pr-c.nvt span { color: var(--app-muted); opacity: .5; }
.pr-add { width: 100%; border: 1px dashed var(--app-border); border-radius: 8px; background: transparent; color: var(--app-muted); padding: .35rem 0; }
.pr-add:hover { border-color: var(--letro); color: var(--letro); }
.pr-std td:first-child { white-space: nowrap; }
/* planning: productievoortgang op de tegel en in het tegelvenster */
.pl-prbalk { margin-top: 4px; }
.pl-mprod { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: 13px; }
.pl-mprod a { font-weight: 500; }
.pl-mprod .pr-balk { max-width: 160px; }
.pl-mstap { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--app-hover); color: var(--app-muted); }
.pl-mstap.ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }