@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --bc-bg: #f6f6f4;
    --bc-border: #e5e4e0;
    --bc-text-muted: #6b6d72;

    /* Extra grens-/oppervlaktetinten (redesign, sept. 2026) - de vorige
       tokenset had er maar één grenskleur voor alles; kaarten/tabelkoppen/
       koplijnen in het nieuwe platte ontwerp hebben net iets van elkaar
       verschillende, steeds iets donkerdere randtinten nodig. */
    --bc-border-2: #e8e7e3;
    --bc-border-3: #eeede9;
    --bc-border-4: #f1f0ec;
    --bc-border-5: #f4f3ef;
    --bc-surface-2: #fbfbfa;
    --bc-text: #16181c;
    --bc-text-2: #33363b;

    /* Single source of truth for the app's accent color — overridden per
       install via an inline <style> block (see shell.php) driven by
       Instellingen's color picker. Every other primary-ish color below is
       derived from this one with color-mix(), so changing it re-themes the
       whole app instead of leaving half the UI on the old hardcoded blue. */
    --bc-primary: #2563eb;
    --bc-primary-light: color-mix(in oklch, var(--bc-primary) 88%, white);
    --bc-primary-lighter: color-mix(in oklch, var(--bc-primary) 78%, white);
    --bc-primary-dark: color-mix(in oklch, var(--bc-primary) 82%, black);
    --bc-primary-darker: color-mix(in oklch, var(--bc-primary) 65%, black);
    --bc-primary-tint: color-mix(in oklch, var(--bc-primary) 10%, white);
    --bc-primary-tint-strong: color-mix(in oklch, var(--bc-primary) 20%, white);

    /* Zijbalk is met de redesign een vaste, platte bijna-zwarte kleur i.p.v.
       een gradient afgeleid van --bc-primary - een klant-eigen accentkleur
       (zie hierboven) verandert nu dus alleen nog knoppen/links/actieve
       status, niet meer de zijbalk zelf. */
    --bc-sidebar-bg: #0c0d10;
    --bc-sidebar-bg-hover: #17191d;
    --bc-sidebar-bg-active: #1b1d22;
    --bc-sidebar-border: #1d1f24;
    --bc-sidebar-text-muted: #8b8d93;
    --bc-sidebar-text-inactive: #a2a4aa;

    /* Neutrale "inkt"-knop voor de Leads/Projecten-detailpanelen (pipeline
       card v2) - bewust los van --bc-primary: acties als "Contact loggen"/
       "Plaatsen"/volgende fase horen bij het paneel zelf, niet bij het per-
       install instelbare accent (dat blijft voor links/actieve status). */
    --bc-ink: #16181c;
    --bc-ink-hover: #2a2d33;
}

body {
    margin: 0;
    background: var(--bc-bg);
    font-family: 'Archivo', sans-serif;
}

h1, h2, h3, .bc-heading-font {
    font-family: 'Archivo', sans-serif;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: oklch(0.85 0.005 260); border-radius: 4px; }

a { color: var(--bc-primary); text-decoration: none; }
a:hover { color: var(--bc-primary-darker); text-decoration: underline; }

/* --- Global polish: cards, buttons, tables, focus states --- */
.card {
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    box-shadow: none;
}
/* Bootstrap's .list-group-flush hard-codes border-radius:0 on itself and its
   items, so it pokes square corners out past the (rounded) .card wrapping it
   — .card has no overflow:hidden of its own (scoped here, not globally, so
   dropdowns/popovers elsewhere in a plain .card aren't clipped). */
.card > .list-group.list-group-flush {
    border-radius: inherit;
    overflow: hidden;
}
a[data-route].card, .bc-task-open.card, button.card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a[data-route].card:hover, .bc-task-open.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px oklch(0 0 0 / 0.08), 0 2px 6px oklch(0 0 0 / 0.04);
    border-color: oklch(0.88 0.01 260);
}
.btn { border-radius: 8px; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease; }
.btn:active { transform: translateY(1px); }
/* Platte "inkt"-knop i.p.v. de vorige --bc-primary-gradient - de mockup
   gebruikt het accent (--bc-primary) uitsluitend voor links/actieve status,
   nooit voor gevulde knoppen; elke primaire actie (Opslaan e.d.) is overal
   dezelfde neutrale near-black knop. Zelfde tokens als .bc-pcard-btn-dark. */
.btn-primary {
    background: var(--bc-ink); border-color: var(--bc-ink); color: #fff; box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--bc-ink-hover); border-color: var(--bc-ink-hover); color: #fff; box-shadow: none;
}
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.btn-outline-secondary:hover, .btn-outline-primary:hover { box-shadow: 0 2px 8px oklch(0 0 0 / 0.06); }
.form-control, .form-select { border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease; }
.form-control:focus, .form-select:focus {
    border-color: var(--bc-primary-lighter); box-shadow: 0 0 0 .2rem color-mix(in oklch, var(--bc-primary) 15%, transparent);
}
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; padding: .38em .65em; }
.badge.rounded-pill { border-radius: 50rem; }
.table > :not(caption) > * > * { padding: 10px 12px; }
.table-hover > tbody > tr:hover > * { background-color: oklch(0.97 0.006 260); }
.list-group-item { transition: background-color .12s ease; }
.list-group-item.bc-task-open:hover, .list-group-item[role="button"]:hover { background-color: oklch(0.97 0.006 260); }
.nav-tabs .nav-link { font-weight: 600; border: none; border-bottom: 2px solid transparent; color: var(--bc-text-muted); text-decoration: none; transition: color .12s ease, border-color .12s ease; }
/* Bootstrap's eigen .nav-tabs .nav-link:hover zet border-color naar een grijze
   "doosje"-tint (--bs-nav-tabs-link-hover-border-color) - zelfde specificiteit
   als onze eigen regel hierboven, dus zonder deze override kwam die grijze
   rand bij hover toch nog door. transparent houden zolang niet .active. Als
   het tabblad een <a> is (bv. klanten/tabs.php) zorgt de globale a:hover
   { text-decoration:underline } anders ook nog voor een lelijke tweede streep
   onder de tekst naast de border-bottom-lijn - text-decoration hier expliciet
   uitzetten. */
.nav-tabs .nav-link:hover { border-color: transparent; text-decoration: none; }
.nav-tabs .nav-link.active { color: var(--bc-ink); border-bottom-color: var(--bc-primary); background: transparent; }
/* Facturatie heeft geen per-klant primary-kleur-override zoals Klant-detail's
   per-tab kleur, maar wel zijn eigen vaste modulekleur (paars) - de onderlijn
   hoort die te volgen i.p.v. de generieke --bc-primary (blauw). */
.bc-facturatie-tabs .nav-link.active { border-bottom-color: #7c3aed; }
/* Sub-tabs (Per maand/Per inkoper) binnen Creditcard-afschriften horen de
   neutrale inkt-kleur te gebruiken i.p.v. de paarse module-kleur - die is
   voorbehouden aan de hoofd-tabs erboven (zie mockup se facSubs vs facTabs). */
.bc-cc-subtabs .nav-link.active { border-bottom-color: var(--bc-ink); }
.nav-tabs { border-bottom: 1px solid var(--bc-border); }

h1.h4, h2.h6 { letter-spacing: -.01em; }
.modal-content { border: none; border-radius: 18px; box-shadow: 0 24px 60px oklch(0 0 0 / 0.18); }
.modal-header { border-bottom-color: var(--bc-border); }
.modal-footer { border-top-color: var(--bc-border); }

/* --- Login --- */
.bc-login-body { background: var(--bc-bg); }
.bc-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px; }
.bc-login-card { width: 400px; border-radius: 16px; border-color: var(--bc-border); }
.bc-ms-logo { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: 22px; height: 22px; }
.bc-ms-logo-sm { width: 16px; height: 16px; }
.bc-ms-logo span { display: block; }

.bc-login-shell {
    display: flex;
    width: 100%;
    max-width: 860px;
    min-height: 540px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 60px -24px oklch(0.2 0.05 260 / 0.35), 0 4px 18px oklch(0.2 0.05 260 / 0.08);
}

.bc-login-brand {
    flex: 0 0 42%;
    position: relative;
    background: var(--bc-sidebar-bg);
    color: #fff;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.bc-login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 12%, oklch(1 0 0 / 0.14), transparent 55%);
    pointer-events: none;
}

.bc-login-brand-logo { max-width: 150px; max-height: 48px; object-fit: contain; position: relative; }
.bc-login-brand-mark { font-size: 20px; font-weight: 700; position: relative; }
.bc-login-brand-title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0; position: relative; }
.bc-login-brand-sub { font-size: .875rem; color: oklch(1 0 0 / 0.7); margin: 10px 0 0; position: relative; }
.bc-login-brand-foot { font-size: .8rem; color: oklch(1 0 0 / 0.55); margin: 0; position: relative; }

.bc-login-panel {
    flex: 1;
    min-width: 0;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 760px) {
    .bc-login-brand { display: none; }
    .bc-login-shell { max-width: 420px; min-height: 0; }
    .bc-login-panel { padding: 40px 32px; }
}

/* --- App shell --- */
:root { --bc-mobile-bar-h: 54px; }

.bc-logo-mark {
    width: 28px; height: 28px; border-radius: 9px;
    background: linear-gradient(135deg, var(--bc-primary-lighter), var(--bc-primary-dark)); flex-shrink: 0;
    box-shadow: 0 2px 6px color-mix(in oklch, var(--bc-primary) 60%, transparent);
}
.bc-avatar {
    width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace;
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.15), inset 0 0 0 1px oklch(1 0 0 / 0.25);
}

/* Slim bar shown only below 900px, purely so the hamburger has somewhere to
   live once the app no longer has a persistent top bar on desktop. */
.bc-mobile-bar {
    display: none; align-items: center; gap: 10px; height: var(--bc-mobile-bar-h); flex-shrink: 0;
    padding: 0 16px; background: #fff; border-bottom: 1px solid var(--bc-border);
    position: sticky; top: 0; z-index: 60;
}
.bc-mobile-bar-logo { width: 24px; height: 24px; border-radius: 7px; object-fit: contain; flex-shrink: 0; }
.bc-hamburger {
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px;
    width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.bc-hamburger div { width: 16px; height: 2px; background: oklch(0.3 0.01 260); border-radius: 2px; }
.bc-overlay { display: none; }

.bc-app-body { display: flex; flex: 1; min-height: 0; }
.bc-sidebar {
    width: 232px; flex-shrink: 0; background: var(--bc-sidebar-bg);
    position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column;
}
.bc-sidebar-header {
    display: flex; align-items: center; justify-content: center; padding: 26px 16px 22px; flex-shrink: 0;
    border-bottom: 1px solid var(--bc-sidebar-border);
}
.bc-sidebar-logo { width: 100%; max-width: 168px; height: 68px; border-radius: 12px; object-fit: contain; flex-shrink: 0; }
.bc-sidebar-header .bc-logo-mark { width: 68px; height: 68px; border-radius: 16px; }
.bc-sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 12px 16px; display: flex; flex-direction: column; }
.bc-nav-group { margin-bottom: 16px; }
.bc-nav-group-label {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 500; line-height: 1;
    letter-spacing: .18em; text-transform: uppercase; color: var(--bc-sidebar-text-muted);
    padding: 0 10px 9px;
}
.bc-nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none;
    background: transparent; color: var(--bc-sidebar-text-inactive); padding: 8px 10px; margin-bottom: 2px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; font-family: 'Archivo', sans-serif;
    transition: background-color .12s ease, color .12s ease;
}
.bc-nav-item:hover { background: var(--bc-sidebar-bg-hover); color: #fff; }
.bc-nav-item.active { background: var(--bc-sidebar-bg-active); color: #fff; }
.bc-nav-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.bc-sidebar-account { flex-shrink: 0; padding: 12px; border-top: 1px solid var(--bc-sidebar-border); }
.bc-sidebar-account-btn {
    border: none; border-radius: 9px; padding: 8px 10px; color: var(--bc-sidebar-text-inactive);
    font-size: 13.5px; font-weight: 600; transition: background-color .12s ease;
}
.bc-sidebar-account-btn:hover, .bc-sidebar-account-btn:focus { background: var(--bc-sidebar-bg-hover); color: #fff; }
.bc-sidebar-account .dropdown-menu { min-width: 200px; }

.bc-sidebar-bottom-row { flex-shrink: 0; padding: 12px; padding-right: 6px; border-top: 1px solid var(--bc-sidebar-border); }
.bc-sidebar-bottom-row .bc-sidebar-account { padding: 0; border-top: none; }

.bc-notif-bell-btn {
    position: relative; border: none; background: transparent; color: var(--bc-sidebar-text-muted);
    width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    transition: background-color .12s ease, color .12s ease;
}
.bc-notif-bell-btn:hover, .bc-notif-bell-btn:focus { background: var(--bc-sidebar-bg-hover); color: #fff; }
.bc-notif-badge {
    position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
    background: #dc3545; color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
    box-shadow: 0 0 0 2px var(--bc-sidebar-bg);
}
/* De strategy:'fixed'-Popper-config (zie notifications.js) laat dit paneel al
   los van .bc-sidebar's overflow-y:auto positioneren, maar .bc-sidebar is
   zelf position:sticky - dat maakt het altíjd een eigen stacking-context
   (ongeacht z-index), dus zonder een EIGEN, expliciet hoge z-index bleef dit
   paneel bij het tekenen toch "onder" latere pagina-content vallen op
   pagina's die zelf ook een stacking-context aanmaken (sticky koppen,
   metastrips, etc.). Zelfde reden voor de accountmenu-dropdown hieronder.*/
.bc-notif-panel { width: 340px; padding: 0; overflow: hidden; z-index: 3000; }
.bc-sidebar-account .dropdown-menu { z-index: 3000; }
.bc-notif-panel-header {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
    font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--bc-border); color: oklch(0.25 0.01 260);
}
.bc-notif-panel-list { max-height: 380px; overflow-y: auto; }
.bc-notif-panel-footer { border-top: 1px solid var(--bc-border); }
.bc-notif-item, .bc-notif-list-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px 10px 11px;
    border-bottom: 1px solid var(--bc-border); border-left: 3px solid transparent;
    cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.bc-notif-item:hover, .bc-notif-list-item:hover { background: var(--bc-bg); }
.bc-notif-item-unread { border-left-color: var(--bc-primary); background: color-mix(in oklch, var(--bc-primary) 5%, transparent); }
.bc-notif-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.bc-notif-icon svg { width: 15px; height: 15px; }
.bc-notif-body-wrap { min-width: 0; flex: 1; }
.bc-notif-item-title { font-size: 13px; font-weight: 600; color: oklch(0.25 0.01 260); }
.bc-notif-item-body { font-size: 12.5px; color: oklch(0.45 0.01 260); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-notif-item-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.bc-notif-item-time { font-size: 11px; color: oklch(0.6 0.01 260); }
.bc-notif-item-actor { font-size: 11px; color: oklch(0.5 0.01 260); font-weight: 600; }
.bc-notif-full-list .bc-notif-list-item:last-child { border-bottom: none; }

.bc-content { flex: 1; min-width: 0; overflow: auto; padding: 36px 40px; background: var(--bc-bg); }
.bc-pending-card { width: 440px; background: #fff; border: 1px solid var(--bc-border); border-radius: 16px; padding: 36px 32px; text-align: center; }

@media (max-width: 900px) {
    .bc-mobile-bar { display: flex; }
    .bc-content { padding: 22px 18px; }
    .bc-sidebar {
        position: fixed !important; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 95;
        transform: translateX(-100%); transition: transform .22s ease; box-shadow: 8px 0 28px oklch(0 0 0 / 0.18);
    }
    .bc-sidebar.bc-open { transform: translateX(0); }
    .bc-overlay.bc-open { display: block; position: fixed; inset: 0; background: oklch(0 0 0 / 0.32); z-index: 90; }
}

/* --- Admin: users & permissions --- */
.bc-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--bc-text-muted); border-bottom-width: 1px; }
.bc-permission-matrix { font-size: 13.5px; }
.bc-permission-matrix th { vertical-align: bottom; }
.bc-module-row td { background: oklch(0.95 0.004 260); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--bc-text-muted); padding: 6px 12px; }
.bc-role-save-bar { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bc-bg) 70%, transparent); }
.bc-coming-soon { max-width: 640px; }

.bc-toast-stack { position: fixed; top: 16px; right: 16px; z-index: 1080; display: flex; flex-direction: column; gap: 8px; }
.toast { border: none; border-radius: 12px; box-shadow: 0 12px 28px oklch(0 0 0 / 0.14); }

/* --- Klanten / projecten --- */
.bc-client-card { transition: box-shadow .15s ease; }
.bc-client-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.min-w-0 { min-width: 0; }

/* One outer card, flat divided rows inside — replaces "every item is its own
   bordered/shadowed card" (project lists, etc), which is what actually reads
   as cluttered once there's more than 2-3 of them. */
.bc-flat-list {
    background: #fff; border: 1px solid var(--bc-border); border-radius: 12px;
    box-shadow: none; overflow: hidden;
}
.bc-flat-list > * { padding: 12px 16px; border-bottom: 1px solid var(--bc-border); transition: background-color .12s ease; }
.bc-flat-list > *:last-child { border-bottom: none; }
.bc-flat-list > [role="button"]:hover { background: oklch(0.98 0.004 260); cursor: pointer; }
/* Rows with a dropdown menu (e.g. klantportaal-acties) need the menu to escape
   the list's rounded-corner clip instead of being cut off underneath. */
.bc-flat-list-dropdown-safe { overflow: visible; }

/* Grid instead of flex: with flex-basis, two sibling rows with different-length
   content (a long email vs a short one) end up with different actual column
   widths because flex-grow redistributes space per row independently — the
   "columns" drift out of alignment down the list. Grid tracks are sized once
   from the container width, identically for every row, so columns line up
   like a real table regardless of content length. */
.bc-accounts-row {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 92px 96px;
    align-items: center; gap: 16px;
}
.bc-accounts-row .badge { justify-self: start; }
@media (max-width: 700px) {
    .bc-accounts-row { grid-template-columns: minmax(0, 1fr) 96px; }
    .bc-accounts-row > *:nth-child(2), .bc-accounts-row > *:nth-child(3) { display: none; }
}

/* Same alignment reasoning as .bc-accounts-row - one name column + 4 fixed
   product-status badge columns. */
.bc-boostcenter-row {
    display: grid; grid-template-columns: minmax(0, 1.4fr) 120px 120px 100px 120px;
    align-items: center; gap: 12px;
}
.bc-boostcenter-row .bc-pill { justify-self: start; }
@media (max-width: 800px) {
    .bc-boostcenter-row { grid-template-columns: minmax(0, 1fr) 120px; }
    .bc-boostcenter-row > *:nth-child(2), .bc-boostcenter-row > *:nth-child(3), .bc-boostcenter-row > *:nth-child(4) { display: none; }
}

/* Same rounded-card treatment as .bc-flat-list, for real <table>s (line-item
   grids like "Werkzaamheden") that should look consistent with the rest of
   the app instead of a bare Bootstrap table. */
.bc-table-card { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; box-shadow: none; overflow: hidden; }
.bc-table-card .table { margin-bottom: 0; }

.bc-project-flat-row { transition: background-color .12s ease; }

/* Compact single-line metric strip (Klant/Project-detail headers) — lighter
   weight than a row of stat cards, and reads as one unit instead of three
   disconnected blocks repeating numbers already visible elsewhere. */
.bc-klant-metastrip {
    display: flex; flex-wrap: wrap; gap: 20px 32px; padding: 14px 18px;
    background: #fff; border: 1px solid var(--bc-border); border-radius: 12px;
    box-shadow: none;
}
.bc-klant-meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-klant-meta-value { font-size: 19px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; line-height: 1.1; }
.bc-klant-meta-label { font-size: 12px; color: var(--bc-text-muted); }

/* Secondary-content column (contactpersonen etc.) — tinted so it visually
   separates from the primary column instead of everything reading as the
   same flat white. */
.bc-klant-sidebar {
    background: oklch(0.965 0.006 260); border: 1px solid var(--bc-border); border-radius: 14px; padding: 16px;
}
.bc-klant-sidebar-item { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--bc-border); }

/* --- SharePoint documents: drag & drop + selection feedback --- */
.bc-sp-file-row { cursor: grab; }
.bc-sp-file-row.bc-dragging { opacity: 0.4; }
.bc-sp-folder-row { cursor: pointer; transition: background-color .1s ease, box-shadow .1s ease; }
.bc-sp-folder-row.bc-drop-target { background-color: var(--bc-primary-tint-strong) !important; box-shadow: inset 0 0 0 2px var(--bc-primary); }
.bc-sp-crumb.bc-drop-target { background-color: var(--bc-primary-tint-strong); box-shadow: inset 0 0 0 2px var(--bc-primary); border-radius: 4px; padding: 0 4px; }
.bc-sp-file-row.bc-selected { background-color: var(--bc-primary-tint); }
.bc-sp-bulkbar { position: sticky; top: 0; z-index: 5; }

/* --- Kanban (Mijn taken / Kanbanbord / Project Taken) --- */

/* De bovenbalk (titel/tabs/filters) blijft altijd zichtbaar en het bord
   eronder krijgt een vaste hoogte (resterende viewport-hoogte) i.p.v. de
   hele pagina te laten meescrollen - elke kolom scrollt vervolgens ZELF
   verticaal (net als Trello). Dat is bewust robuuster dan twee losse
   position:sticky-lagen met een JS-gemeten offset tussen bovenbalk en
   kolomkop op elkaar af proberen te stemmen (bleek in de praktijk niet
   betrouwbaar) - de kolomkop kan hier helemaal niet "over" de kaarten
   heen schuiven, want hij scrollt domweg nooit mee: alleen de kaartenlijst
   ONDER de kop heeft zijn eigen scrollbalk.
   72px = de top+bottom padding van .bc-content (2x 36px). */
.bc-kanbanbord { display: flex; flex-direction: column; height: calc(100vh - 72px); min-height: 420px; }
.bc-kb-topbar { flex-shrink: 0; margin-bottom: 18px; }

#kbBoard { flex: 1; min-height: 0; overflow-y: auto; }
.bc-kanban-board, .bc-pipeline-board {
    height: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
}

.bc-kanban-column-wrap, .bc-pipeline-column-wrap { display: flex; height: 100%; }
.bc-kanban-column, .bc-pipeline-column {
    display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
    background: #fff; border: 1px solid var(--bc-border);
    border-radius: 12px; transition: box-shadow .15s ease;
}
/* Geen overflow:hidden op de kolom zelf (zou het "..."-kolommenu hieronder
   afsnijden, zoals eerder deze sessie ook al bij andere dropdown-in-afgeronde-
   kaart-gevallen gebeurde) - de afronding komt in plaats daarvan van de kop/
   het lijf zelf, elk met hun eigen halve rand. */
.bc-kanban-column-head {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 12px 14px; border-bottom: 1px solid var(--bc-border-3);
    border-top-left-radius: 11px; border-top-right-radius: 11px;
}
.bc-kanban-column-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bc-kanban-column-title {
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 10.5px; letter-spacing: .11em;
    text-transform: uppercase; color: var(--bc-text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.bc-kanban-column-count {
    margin-left: auto; flex-shrink: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; color: var(--bc-text-muted);
    background: var(--bc-border-5); border-radius: 6px; padding: 2px 7px;
}
.bc-kanban-column-body, .bc-pipeline-column-body {
    flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px;
    padding: 11px; background: var(--bc-surface-2);
    border-bottom-left-radius: 11px; border-bottom-right-radius: 11px;
}
/* Ring op de kolom zelf i.p.v. een achtergrondtint - de kolom is nu wit met
   een apart-gekleurd (grijs) kaartenvak erin, dus een tint op de kolom zelf
   zou alleen achter de koprand zichtbaar zijn. */
.bc-kanban-column.bc-drop-target, .bc-pipeline-column.bc-drop-target { box-shadow: inset 0 0 0 2px var(--bc-primary); }
.bc-kanban-column.bc-drop-target .bc-kanban-column-body, .bc-pipeline-column.bc-drop-target .bc-pipeline-column-body { background: var(--bc-primary-tint); }

/* Kolombeheer (rename/verwijderen/verplaatsen) - alleen zichtbaar met projects.pipeline.manage/leads.pipeline.manage, zie partials/pipeline-column-menu.php */
.bc-kanban-column-move { display: inline-flex; flex-shrink: 0; gap: 2px; }
.bc-kanban-column-move-btn {
    width: 18px; height: 18px; border: none; background: transparent; border-radius: 5px;
    color: var(--bc-text-muted); font-size: 11px; line-height: 1; display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.bc-kanban-column-move-btn:hover:not(:disabled) { background: var(--bc-border-4); color: var(--bc-text); }
.bc-kanban-column-move-btn:disabled { opacity: .3; cursor: default; }
.bc-kanban-column-menu { flex-shrink: 0; }
.bc-kanban-column-menu-btn {
    width: 20px; height: 20px; padding: 0; border: none !important; background: transparent !important;
    color: var(--bc-text-muted); font-size: 13px; line-height: 1; box-shadow: none !important;
}
.bc-kanban-column-menu-btn:hover { color: var(--bc-text); background: var(--bc-border-4) !important; border-radius: 5px; }

.bc-pipeline-add-column {
    width: 100%; height: 100%; min-height: 64px; border: 1.5px dashed var(--bc-border-2); border-radius: 12px;
    background: transparent; color: var(--bc-text-muted); font-weight: 600; font-size: 12.5px; font-family: 'Archivo', sans-serif;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bc-pipeline-add-column:hover { border-color: var(--bc-border); color: var(--bc-text-2); background: var(--bc-surface-2); }

@media (max-width: 900px) {
    .bc-kanbanbord { height: auto; min-height: 0; }
    #kbBoard { overflow-y: visible; }
    .bc-kanban-board, .bc-pipeline-board { height: auto; }
    .bc-kanban-column-wrap, .bc-pipeline-column-wrap { height: auto; }
    .bc-kanban-column, .bc-pipeline-column { height: auto; }
    .bc-kanban-column-body, .bc-pipeline-column-body { overflow-y: visible; }
}

/* --- Tickets-bord (klant-detail tab) ---
   Anders dan het Projecten-/Leads-bord staat dit bord IN een klant-detail-tab
   (gewone paginascroll), niet op een eigen fullscreen Kanbanbord-scherm - dus
   bewust een simpele horizontaal-scrollende rij met natuurlijke hoogte i.p.v.
   de calc(100vh)-truc + onafhankelijke kolom-scroll hierboven. */
.bc-ticket-board { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 8px; }
.bc-ticket-column-wrap { width: 292px; flex-shrink: 0; }
.bc-ticket-column {
    background: oklch(0.975 0.003 260 / 0.6); border: 1px solid var(--bc-border);
    border-top: 3px solid var(--col-accent, var(--bc-border));
    border-radius: 14px; padding: 6px 10px 12px; min-height: 100px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.bc-ticket-column-head { display: flex; align-items: center; gap: 10px; padding: 12px 6px 14px; }
.bc-ticket-column-title {
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12.5px; letter-spacing: .04em;
    text-transform: uppercase; color: oklch(0.3 0.01 260);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.bc-ticket-column-count {
    margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--bc-text-muted);
    background: oklch(0.92 0.005 260); border-radius: 4px;
    min-width: 22px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center;
}
.bc-ticket-column-body { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; min-height: 30px; }
.bc-ticket-column.bc-drop-target { background-color: color-mix(in oklch, var(--bc-primary) 6%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--bc-primary) 45%, transparent); }

.bc-ticket-card {
    cursor: grab; background: #fff; border-radius: 8px;
    border-left: 4px solid var(--bc-primary); box-shadow: 0 1px 2px oklch(0 0 0 / 0.09), 0 0 1px oklch(0 0 0 / 0.16);
    padding: 13px 14px;
    transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.bc-ticket-card:hover {
    transform: translateY(-1px); box-shadow: 0 4px 10px oklch(0 0 0 / 0.12), 0 0 1px oklch(0 0 0 / 0.2);
}
.bc-ticket-card.bc-dragging { opacity: 0.5; transform: rotate(-1.5deg) scale(0.98); cursor: grabbing; }
.bc-ticket-card:active { cursor: grabbing; }
.bc-ticket-card-title { font-size: 14.5px; font-weight: 500; line-height: 1.4; margin-bottom: 12px; color: oklch(0.25 0.01 260); }
.bc-ticket-card-bottom { display: flex; align-items: center; gap: 7px; }
.bc-ticket-card-key { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; flex-shrink: 0; color: var(--bc-text-muted); }
.bc-ticket-card-key.is-done { text-decoration: line-through; opacity: .7; }
.bc-ticket-card-avatar { width: 20px; height: 20px; font-size: 9px; margin-left: auto; }
.bc-avatar-empty { background: oklch(0.85 0.005 260) !important; color: oklch(0.5 0.01 260); }

/* --- Cross-klant Kanbanbord "Tickets" - eigen klassen (i.p.v. .bc-ticket-*)
   zodat dit niet de bestaande per-klant-bord drag/drop-handlers in
   tickets-board.js raakt, die single-client-semantiek aannemen. Zelfde
   visuele taal, drie vaste buckets i.p.v. klant-specifieke kolommen. --- */
.bc-tkx-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; }
.bc-tkx-column-wrap { width: 274px; flex-shrink: 0; }
.bc-tkx-column {
    display: flex; flex-direction: column; height: 100%; min-height: 340px;
    background: #fff; border: 1px solid var(--bc-border);
    border-radius: 12px; overflow: hidden; transition: box-shadow .15s ease;
}
.bc-tkx-column-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 14px; border-bottom: 1px solid var(--bc-border-3); }
.bc-tkx-column-title {
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 10.5px; letter-spacing: .11em;
    text-transform: uppercase; color: var(--bc-text-2);
}
.bc-tkx-column-count {
    margin-left: auto; flex-shrink: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; color: var(--bc-text-muted);
    background: var(--bc-border-5); border-radius: 6px; padding: 2px 7px;
}
.bc-tkx-column-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 11px; background: var(--bc-surface-2); }
.bc-tkx-column.bc-drop-target { box-shadow: inset 0 0 0 2px var(--bc-primary); }
.bc-tkx-column.bc-drop-target .bc-tkx-column-body { background: var(--bc-primary-tint); }

.bc-tkx-card {
    cursor: grab; background: #fff; border: 1px solid var(--bc-border);
    border-left: 3px solid var(--bc-primary); border-radius: 10px;
    padding: 11px 12px;
    transition: border-color .14s ease, opacity .14s ease;
}
.bc-tkx-card:hover { border-color: #c9c8c3; }
.bc-tkx-card.bc-dragging { opacity: 0.5; transform: rotate(-1.5deg) scale(0.98); cursor: grabbing; }
.bc-tkx-card:active { cursor: grabbing; }
.bc-tkx-card-client {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--bc-primary); margin-bottom: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-tkx-card-title { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin-bottom: 8px; color: var(--bc-text); }
.bc-tkx-card-bottom { display: flex; align-items: center; gap: 7px; }
.bc-tkx-card-key { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; flex-shrink: 0; color: var(--bc-text-muted); }
.bc-tkx-card-avatar { width: 22px; height: 22px; font-size: 8.5px; margin-left: auto; box-shadow: none; }

.bc-ticket-add-column {
    width: 100%; min-height: 64px; border: 1.5px dashed var(--bc-border-2); border-radius: 12px;
    background: transparent; color: var(--bc-text-muted); font-weight: 600; font-size: 12.5px; font-family: 'Archivo', sans-serif;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bc-ticket-add-column:hover { border-color: var(--bc-border); color: var(--bc-text-2); background: var(--bc-surface-2); }

.bc-task-card, .bc-pipeline-card {
    cursor: grab; background: #fff; border: 1px solid var(--bc-border); border-radius: 10px !important;
    box-shadow: none;
    transition: border-color .14s ease, opacity .14s ease;
}
.bc-task-card:hover, .bc-pipeline-card:hover {
    border-color: #c9c8c3;
}
.bc-task-card.bc-dragging, .bc-pipeline-card.bc-dragging { opacity: 0.5; transform: rotate(-1.5deg) scale(0.98); cursor: grabbing; }
.bc-task-card:active, .bc-pipeline-card:active { cursor: grabbing; }

.bc-kb-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 48px 20px; color: var(--bc-text-muted); text-align: center;
}
.bc-kb-empty-ring {
    width: 44px; height: 44px; border-radius: 50%; border: 2px dashed var(--bc-border);
    display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: .6;
}

/* Segmented tab/toggle control (Taken/Projecten/Leads, Kanban/Lijst) */
.bc-kb-segmented {
    display: inline-flex; gap: 2px; padding: 3px; background: var(--bc-border-4); border: 1px solid var(--bc-border-2); border-radius: 9px;
}
.bc-kb-segmented .btn {
    border: 1px solid transparent !important; border-radius: 7px !important; font-weight: 600; font-size: 12.5px; font-family: 'Archivo', sans-serif;
    color: var(--bc-text-muted); background: transparent !important; box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bc-kb-segmented .btn.bc-kb-active {
    background: #fff !important; border-color: var(--bc-border) !important; color: var(--bc-text) !important;
}

/* --- Projectenbord / Leads-bord (tabs onder Kanbanbord) --- */
/* .bc-pipeline-column(-body) zelf staat nu bij de gedeelde Kanban-regels
   hierboven (samen met .bc-kanban-column) - één plek voor de hoogte-/
   scrollgedrag dat beide borden identiek nodig hebben. */

.bc-pill {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
    padding: 3px 9px 3px 8px; border-radius: 999px; line-height: 1.5; white-space: nowrap;
}
.bc-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.bc-pill-success { color: oklch(0.5 0.13 155); background: oklch(0.93 0.06 155); }
.bc-pill-warning { color: oklch(0.52 0.14 65); background: oklch(0.93 0.08 80); }
.bc-pill-danger { color: oklch(0.5 0.16 25); background: oklch(0.93 0.07 25); }
.bc-pill-muted { color: var(--bc-text-muted); background: oklch(0.94 0.004 260); }
.bc-pill-primary { color: var(--bc-primary-darker); background: var(--bc-primary-tint-strong); }
.bc-pill-info { color: oklch(0.48 0.14 300); background: oklch(0.93 0.05 300); }

.bc-role-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 999px; background: oklch(0.96 0.004 260); border: 1px solid var(--bc-border); color: oklch(0.38 0.01 260);
}
.bc-role-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Herbruikbaar "sectiekop"-patroon (redesign, sept. 2026): mono-caps label +
   dunne lijn + optioneel een telling/actie-knop rechts - komt overal terug
   waar een pagina meerdere blokken groepeert (Home, Klant-detail-tabs, etc.).
   Geen PHP-partial, gewoon een vaste 3-regelige markup-conventie + deze klasse. */
.bc-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.bc-section-head-label {
    margin: 0; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--bc-text-muted); white-space: nowrap;
}
.bc-section-head-count { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--bc-text-muted); }
.bc-section-head-rule { flex: 1; height: 1px; background: var(--bc-border-2); min-width: 20px; }
.bc-mono { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; }

/* Gedeelde paginakop (partials/page-header.php, redesign sept. 2026) - één
   opbouw/hoogte voor Home/Klanten/Klant-detail (en later de rest), i.p.v. dat
   elk scherm zijn eigen kop-markup hand-rolt. Twee varianten: de gewone
   (dot+mono-label eyebrow, 26px titel) en .bc-page-header-hero (Home: grotere
   titel, geen bolletje-eyebrog, uitlijning onderaan i.p.v. bovenaan). */
.bc-page-header {
    background: var(--bc-surface-2); border-bottom: 1px solid var(--bc-border-2);
    padding: 30px 40px 0; margin: -36px -40px 26px;
}
.bc-page-header-no-tabs { padding-bottom: 22px; }
/* Vaste hoogte voor de titelrij ZELF, los van wat er toevallig naast de titel
   staat (niets, een knop, of een statstrip) - anders varieert de totale
   headerhoogte per scherm net iets, wat naast elkaar bekeken slordig oogt. */
.bc-page-header-row { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; min-height: 77px; }
/* Zelfde 77px-vloer als hierboven, ook voor de hero-variant (Home) - anders
   is een "geen submenu"-header zónder subtitel (Home) net iets lager dan
   eentje mét (bv. Boost Bundel-detail), terwijl ze qua opbouw (geen tabs)
   hetzelfde horen te ogen. */
.bc-page-header-hero .bc-page-header-row { align-items: flex-end; gap: 32px; min-height: 77px; }
.bc-page-header-main { flex: 1; min-width: 220px; }
.bc-page-header-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.bc-page-header-hero .bc-page-header-eyebrow { margin-bottom: 9px; }
/* .bc-section-head-label is elders bewust nowrap (korte kop-labels), maar een
   broodkruimelpad van 2-3 segmenten (klant-/bundelnamen zijn vrije tekst) mag
   best doorlopen op een tweede regel i.p.v. buiten de kop af te snijden. */
.bc-page-header-eyebrow .bc-section-head-label { white-space: normal; }
.bc-page-header-title {
    margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 26px;
    line-height: 1.15; letter-spacing: -.03em; color: var(--bc-text);
}
.bc-page-header-hero .bc-page-header-title { font-size: 30px; line-height: 1.1; }
.bc-page-header-subtitle { font-size: 13px; color: var(--bc-text-muted); margin-top: 5px; }
.bc-page-header-side { flex: 0 0 auto; }
/* min-height = de hoogte MET een knop ernaast (zie .btn-regel hieronder) - zo
   is de tabsrow altijd even hoog, met of zonder zo'n knop, i.p.v. dat een
   tabblad-zonder-knop (bv. Klanten) net iets lager uitvalt dan een
   tabblad-mét-knop (bv. Klant-detail, Account-detail). */
.bc-page-header-tabsrow { display: flex; align-items: flex-end; gap: 16px; margin-top: 22px; flex-wrap: wrap; min-height: 43px; }
.bc-page-header-tabsrow .nav-tabs { flex: 1; min-width: 0; border-bottom: 0; margin-bottom: 0 !important; flex-wrap: wrap; }
.bc-page-header-tabsrow .nav-tabs .nav-link { padding: 0 0 12px; margin-right: 26px; }
/* De rij lijnt zichzelf uit op de ONDERKANT (align-items:flex-end) - een tab
   heeft daar zelf 12px onzichtbare padding-bottom onder de tekst staan (voor
   de actieve-lijn-ruimte), maar een knop ernaast (bv. "Sync met Simplicate",
   "Account deactiveren") heeft die niet en zakt daardoor zichtbaar lager dan
   de tab-tekst. Dezelfde 12px als marge terugzetten trekt 'm weer gelijk. */
.bc-page-header-tabsrow > .btn { margin-bottom: 12px; }
@media (max-width: 640px) {
    .bc-page-header { margin: -22px -18px 20px; padding-left: 18px; padding-right: 18px; }
}

/* Klanten-lijst als tabelrijen i.p.v. een kaarten-grid (redesign, sept. 2026)
   - CSS grid i.p.v. een echte <table> zodat elke rij nog steeds een simpele
   klikbare div kan zijn (data-route, zelfde als de rest van de app). */
.bc-klant-table { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; overflow: hidden; }
.bc-klant-table-row {
    display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) 100px 110px 92px;
    gap: 14px; padding: 11px 20px; align-items: center;
    font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 400; color: var(--bc-text-2);
}
.bc-klant-table-row:not(.bc-klant-table-head):not(:last-child) { border-bottom: 1px solid var(--bc-border-4); }
.bc-klant-table-head {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bc-text-muted); background: var(--bc-surface-2);
    border-bottom: 1px solid var(--bc-border-2);
}
.bc-klant-table-body-row { cursor: pointer; transition: background-color .1s ease; }
.bc-klant-table-body-row:hover { background: var(--bc-surface-2); }
.bc-klant-table-name { display: flex; align-items: center; gap: 11px; min-width: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--bc-text); }
/* Design: platte avatars zonder schaduw - klant-avatars afgeronde vierkantjes
   (8px), account-avatars rond (blijft .bc-avatar's eigen 50%-default). */
.bc-avatar-flat { box-shadow: none; }
.bc-avatar-sq { border-radius: 8px; box-shadow: none; }
/* Accounts-tab (Klanten > Accounts) heeft 4 kolommen i.p.v. de 5 van de
   Bedrijven-tab - eigen kolombreedtes, verder dezelfde .bc-klant-table-rij-chrome. */
.bc-accounts-table-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) 110px 110px; }

/* Generieke "detail-tab"-tabel - zelfde rij-chrome (rand/hover/mono-koptekst)
   als .bc-klant-table, maar met een kolombreedte-modifier per tabblad i.p.v.
   een vaste kolomset, want elk tabblad op Klant-detail (en straks Project-
   detail) heeft zijn eigen set kolommen. */
.bc-dtab-table { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; overflow: hidden; }
.bc-dtab-table.bc-dtab-scroll { overflow-x: auto; }
.bc-dtab-row { display: grid; gap: 14px; padding: 13px 20px; align-items: center; }
.bc-dtab-row:not(.bc-dtab-head):not(:last-child) { border-bottom: 1px solid var(--bc-border-4); }
.bc-dtab-head {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bc-text-muted); background: var(--bc-surface-2);
    border-bottom: 1px solid var(--bc-border-2); padding: 11px 20px;
}
.bc-dtab-row-link { cursor: pointer; transition: background-color .1s ease; }
.bc-dtab-row-link:hover { background: var(--bc-surface-2); }
.bc-dtab-row--projecten { grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) 150px 88px 110px; min-width: 780px; }
.bc-dtab-row--abonnementen { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.6fr) 130px 170px; min-width: 720px; }
.bc-dtab-row--brandsites { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) 130px 100px; }
.bc-dtab-row--insights { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 140px; }
.bc-dtab-row--gm-editions { grid-template-columns: minmax(0, 1.6fr) 100px minmax(0, 1fr) 270px; min-width: 640px; }
.bc-dtab-row--cc-inkoper { grid-template-columns: 100px minmax(0, 2fr) 110px minmax(0, 1fr) 120px; padding: 10px 20px; }
.bc-dtab-row--bundels { grid-template-columns: minmax(0, 2.2fr) 190px minmax(0, 1fr) 70px; min-width: 700px; }
.bc-dtab-row--bundels .bc-dtab-bar-track { flex: 1; height: 6px; margin-bottom: 0; }
.bc-dtab-row--bundels .bc-dtab-bar-fill { height: 6px; }
.bc-dtab-name { font-weight: 600; letter-spacing: -.01em; font-size: 13.5px; }
.bc-dtab-mono { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--bc-text-2); }
/* Inkoopfacturen-logboek (Facturatie): één lettergrootte voor alle cellen - hiërarchie via kleur en gewicht i.p.v. via maat - en rustige actieknoppen. */
.bc-zv-table .bc-dtab-row:not(.bc-dtab-head) { font-size: 13px; line-height: 1.4; padding-top: 14px; padding-bottom: 14px; color: var(--bc-text); }
.bc-zv-date { font-family: 'IBM Plex Mono', monospace; color: var(--bc-text-muted); }
.bc-zv-company { font-weight: 600; letter-spacing: -.01em; }
.bc-zv-muted { color: var(--bc-text-muted); }
.bc-zv-attachments { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-zv-attach { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--bc-text-2); text-decoration: none; }
.bc-zv-attach:hover { color: var(--bc-text); text-decoration: underline; }
.bc-zv-attach svg { flex: none; color: var(--bc-text-muted); }
.bc-zv-attach span { min-width: 0; }
.bc-zv-actions { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.bc-zv-actions .btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; font-size: 12.5px; font-weight: 600; line-height: 1; }
.bc-zv-actions .btn svg { flex: none; }
.bc-dtab-bar-track { height: 5px; border-radius: 9px; background: var(--bc-border-3); overflow: hidden; margin-bottom: 5px; }
.bc-dtab-bar-fill { height: 5px; border-radius: 9px; }
.bc-dtab-actions { text-align: right; display: flex; gap: 10px; justify-content: flex-end; }
.bc-dtab-actions a { font-weight: 600; font-size: 12px; }
/* Paginering als voettand-rij VAN de tabelkaart (design), i.p.v. losse
   gecentreerde Bootstrap-.pagination eronder. */
.bc-dtab-table-foot { display: flex; align-items: center; gap: 12px; padding: 13px 20px; }
.bc-dtab-table-foot-nav { margin-left: auto; display: flex; gap: 7px; }

/* Statuspil zoals in het design: mono font, dun kader, geen bolletje ervoor -
   ander uiterlijk dan .bc-pill (die IS al overal in gebruik voor andere
   badges) maar specifiek dit uiterlijk komt letterlijk terug op elke
   Klant-detail-tabtabel (Projecten/Abonnementen/Boost Bundels/etc). */
.bc-status-pill {
    display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500;
    padding: 3px 8px; border-radius: 6px; border: 1px solid; white-space: nowrap;
}
.bc-status-pill-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.bc-status-pill-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.bc-status-pill-info { background: #eff4ff; color: #1d4ed8; border-color: #dbe6ff; }
.bc-status-pill-muted { background: var(--bc-border-4); color: #52525b; border-color: var(--bc-border-2); }
.bc-status-pill-danger { background: #fff; color: #b91c1c; border-color: #f0c8c8; }

/* Bundel-/tegelkaarten (Boost Bundels-tab e.d.) - kaartgrid met eigen
   voortgangsbalk + groot mono-percentage, zoals in het design. */
.bc-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.bc-tile-card { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; padding: 18px 20px; }
.bc-tile-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.bc-tile-card-pct { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.bc-tile-card-bar-track { height: 7px; border-radius: 9px; background: var(--bc-border-3); overflow: hidden; margin-bottom: 16px; }
.bc-tile-card-bar-fill { height: 7px; border-radius: 9px; }
.bc-tile-card-foot { display: flex; align-items: center; gap: 10px; }

/* "Instellingenkaart" - kop met titel+uitleg, body met velden, voettand met
   Opslaan-knop op een lichte achtergrond. Terugkerend patroon op Brand
   Center-/Boost Insights-/Boost Center-tabblad. */
.bc-setting-card { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; overflow: hidden; }
.bc-setting-card-head { padding: 17px 22px; border-bottom: 1px solid var(--bc-border-3); display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.bc-setting-card-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.015em; }
.bc-setting-card-desc { font-size: 12.5px; line-height: 1.55; color: var(--bc-text-muted); margin-top: 6px; max-width: 720px; }
.bc-setting-card-body { padding: 20px 22px; }
.bc-setting-card-foot {
    padding: 14px 22px; border-top: 1px solid var(--bc-border-3); background: var(--bc-surface-2);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bc-setting-card-foot .bc-setting-card-desc { margin-top: 0; }
.bc-setting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.bc-setting-label { display: block; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 12.5px; margin-bottom: 7px; }
/* Zelfde reden als .bc-flat-list-dropdown-safe - een rij met een "..."-
   dropdownmenu (bv. Accounts-lijst) moet dat menu niet laten afsnijden door
   de kaart se eigen overflow:hidden-radiusclip. */
.bc-setting-card-dropdown-safe { overflow: visible; }

/* Account-detail "Toegang per klant" - per-klant blok met een tegel-grid i.p.v.
   losse schakelaars-in-een-rij (ander patroon dan klant-detail's eigen
   Accounts-lijst, want hier kijk je vanuit 1 account naar N klanten i.p.v.
   andersom). checkbox blijft een echte checkbox (voor de bestaande change-
   handlers) maar wordt via :has() visueel als hele tegel gestyled. */
.bc-access-block { padding: 16px 22px; }
.bc-access-block:not(:last-child) { border-bottom: 1px solid var(--bc-border-4); }
.bc-access-block-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.bc-access-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 9px; align-items: stretch; }
.bc-access-tile {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 11px;
    border: 1px solid var(--bc-border-2); border-radius: 9px; background: #fff; cursor: pointer; transition: border-color .12s ease;
}
.bc-access-tile:hover { border-color: #c9c8c3; }
.bc-access-tile input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bc-access-tile-mark {
    flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--bc-border-2);
    background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff;
}
.bc-access-tile-label { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 12px; color: var(--bc-text-2); }
.bc-access-tile:has(input:checked) { border-color: #bbf7d0; background: #f0fdf4; }
.bc-access-tile:has(input:checked) .bc-access-tile-mark { background: #16a34a; border-color: #16a34a; }
.bc-access-tile:has(input:checked) .bc-access-tile-mark::after { content: '\2713'; }
.bc-access-tile:has(input:checked) .bc-access-tile-label { color: #166534; }
.bc-access-tile:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.bc-access-tile-select {
    display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 5px 9px 5px 11px;
    border: 1px solid var(--bc-border-2); border-radius: 9px; background: var(--bc-surface-2);
}
.bc-access-tile-select select { flex: 1; min-width: 0; }

/* Bundel-detailpagina: brede statkaart (4 cellen + aangesloten voortgangsbalk
   eronder) - ander patroon dan .bc-klant-metastrip (die is een compacte
   koprij-strip), dit is de volle-breedte variant met eigen kaartrand. */
.bc-stats-card { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
.bc-stats-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bc-stats-card-cell { padding: 15px 24px; box-shadow: inset -1px 0 0 var(--bc-border-3), inset 0 -1px 0 var(--bc-border-3); }
.bc-stats-card-value { font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--bc-text); }
.bc-stats-card-label { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 500; color: var(--bc-text-muted); margin-top: 6px; }
.bc-stats-card-bar-track { height: 8px; background: var(--bc-border-3); }
.bc-stats-card-bar-fill { height: 8px; }

/* Inline kop-stat (bv. "8,00 / Totaal uren") náást een statuspil in de
   pagina-header se side-slot, i.p.v. de volle .bc-klant-metastrip-doos - voor
   headers met maar 1 kerngetal (Rapportage-detail). */
.bc-header-inline-stat { text-align: right; }
.bc-header-inline-stat-value { font-family: 'IBM Plex Mono', monospace; font-size: 19px; font-weight: 600; line-height: 1; color: var(--bc-text); }
.bc-header-inline-stat-label { font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 500; color: var(--bc-text-muted); margin-top: 5px; }

/* A-Z-snelfilter boven de Klanten-tabel */
.bc-klant-letterbar {
    display: flex; gap: 1px; flex-wrap: wrap; margin-bottom: 16px;
    background: #fff; border: 1px solid var(--bc-border); border-radius: 8px; padding: 5px;
}
.bc-klant-letter-btn {
    min-width: 26px; padding: 4px 6px; border: 0; border-radius: 6px; cursor: pointer; background: transparent;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--bc-text-muted);
    transition: background-color .12s ease, color .12s ease;
}
.bc-klant-letter-btn:hover { background: var(--bc-border-5); }
.bc-klant-letter-btn.active { background: var(--bc-ink); color: #fff; }

/* Categorie-chips (bv. Logs-tabblad) - zelfde idee als de letterbar hierboven
   maar met tekstlabels van wisselende breedte i.p.v. vaste letter-cellen. */
.bc-chip-filter { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.bc-chip-filter-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--bc-border);
    border-radius: 999px; cursor: pointer; background: #fff; font-family: 'Archivo', sans-serif; font-size: 12.5px;
    font-weight: 600; color: var(--bc-text-2); transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.bc-chip-filter-btn:hover { background: var(--bc-surface-2); }
.bc-chip-filter-btn.active { background: var(--bc-ink); border-color: var(--bc-ink); color: #fff; }
.bc-chip-filter-count { font-family: 'IBM Plex Mono', monospace; font-weight: 500; opacity: .65; }

/* Gestapelde teamavatars (Projectenbord) - alleen de avatar, volledige naam + rol via title-tooltip */
.bc-avatar-wrap { position: relative; display: inline-flex; margin-left: -7px; }
.bc-avatar-wrap:first-child { margin-left: 0; }
.bc-avatar-wrap .bc-avatar { border: 2px solid #fff; }
.bc-avatar-role-dot {
    position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%;
    border: 2px solid #fff; box-sizing: content-box;
}

/* Compact key/value-tabelletje voor bijzonderheden op een Projecten-kaart (livegang-datums, content vullen) */
.bc-pipeline-meta { border-top: 1px solid oklch(0.94 0.004 260); margin-top: 8px; padding-top: 6px; }
.bc-pipeline-meta-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 3px 0; font-size: 11.5px;
}
.bc-pipeline-meta-label { color: var(--bc-text-muted); }
.bc-pipeline-meta-value { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: oklch(0.35 0.01 260); }
.bc-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.bc-status-dot-success { background: oklch(0.6 0.14 155); }
.bc-status-dot-warning { background: oklch(0.65 0.14 80); }
.bc-status-dot-danger { background: oklch(0.6 0.16 25); }
.bc-status-dot-info { background: oklch(0.55 0.14 300); }
.bc-status-dot-primary { background: var(--bc-primary); }

#ppAddResults, #leadFormOrgResults { max-height: 220px; overflow-y: auto; border-radius: 8px; margin-top: 6px; }
#ppAddResults:not(:empty), #leadFormOrgResults:not(:empty) { border: 1px solid var(--bc-border); }

/* --- Fase-stepper (Projecten-kaart detail, "Fase"-sectie) - géén echte
   stepper: elke fase blijft vrij aanklikbaar (zie ProjectController::
   movePipelineStage(), geen opeenvolgingscheck), dus visueel bewust een rij
   losse pil-chips i.p.v. een lineaire voortgangsbalk die dat zou suggereren. */
.bc-stage-stepper { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-stage-btn {
    border: 1px solid var(--bc-border); border-radius: 17px; background: #fff;
    height: 33px; padding: 0 13px; font-size: 13px; font-weight: 500; color: var(--bc-text-muted);
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.bc-stage-btn:hover:not(:disabled) { border-color: color-mix(in oklch, var(--bc-primary) 40%, var(--bc-border)); color: oklch(0.25 0.01 260); }
.bc-stage-btn:active:not(:disabled) { transform: scale(0.96); }
.bc-stage-btn:disabled { cursor: default; opacity: .7; }
.bc-stage-btn.is-done { background: oklch(0.94 0.05 155); border-color: transparent; color: oklch(0.4 0.09 155); }
.bc-stage-btn.is-done::before { content: '✓'; font-size: 11px; }
.bc-stage-btn.is-current {
    background: var(--bc-ink); border-color: transparent; color: #fff; font-weight: 600;
}
.bc-stage-btn.is-upcoming { color: var(--bc-text-muted); }

.bc-pipeline-card-detail { font-size: 14px; }
.bc-pipeline-card-detail .bc-drawer-section { padding: 20px 0; border-top: 1px solid var(--bc-border); }
.bc-pipeline-card-detail .bc-drawer-section:first-of-type { border-top: none; padding-top: 4px; }
.bc-pipeline-card-detail .bc-drawer-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bc-text-muted); margin-bottom: 10px;
}
.bc-pipeline-card-detail .form-control, .bc-pipeline-card-detail .form-select { border-radius: 9px; }
.bc-pipeline-card-detail .btn { border-radius: 9px; }
.bc-pipeline-card-detail .btn-sm { border-radius: 8px; }

/* --- Pipeline card v2: herontwerp van het Leads-/Projecten-detailpaneel
   (drawer). Vaste kop + opvolgingsbalk, alleen de sectie-inhoud eronder
   scrollt - .bc-drawer zelf is standaard zelf de scroll-container met eigen
   padding (zie hierboven bij "Slide-over drawer"), dus zodra 'm dit paneel
   host wordt die opzet hier bewust overschreven i.p.v. een tweede, geneste
   scrollbar te krijgen. De eigen ✕-knop in de kop hergebruikt de generieke
   .bc-drawer-close-klasse (zelfde close-handler, drawer.js), dus de losse
   overlay-knop van de shell wordt hier verborgen. */
.bc-drawer:has(> #drawerContent > .bc-pcard) {
    padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.bc-drawer:has(> #drawerContent > .bc-pcard) > .bc-drawer-close { display: none; }
.bc-drawer:has(> #drawerContent > .bc-pcard) > #drawerContent {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
}

.bc-pcard { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; font-size: 14px; color: oklch(0.25 0.01 260); }

.bc-pcard-header { flex: 0 0 auto; padding: 22px 26px 18px; border-bottom: 1px solid var(--bc-border); }
.bc-pcard-header-top { display: flex; align-items: flex-start; gap: 14px; }
.bc-pcard-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bc-pcard-eyebrow { font-size: 13px; color: var(--bc-text-muted); }
.bc-pcard-title { font-size: 23px; line-height: 1.15; letter-spacing: -.015em; font-weight: 700; color: oklch(0.16 0.01 260); margin: 0; overflow-wrap: anywhere; }
.bc-pcard-sub { font-size: 12.5px; color: var(--bc-text-muted); }
.bc-pcard-header-tools { display: flex; gap: 4px; flex: 0 0 auto; }
.bc-pcard-iconbtn {
    width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px;
    color: var(--bc-text-muted); font-size: 16px; cursor: pointer; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .12s ease;
}
.bc-pcard-iconbtn:hover { background: oklch(0.95 0.004 260); }
/* De ✕ hier hergebruikt .bc-drawer-close puur voor de klik-handler (drawer.js)
   - die klasse zet elders position:absolute (voor de oude, kopvrije panelen),
   wat deze knop dan bovenop de ···-knop zou laten vallen i.p.v. gewoon in de
   flex-rij mee te lopen. Compound-selector nodig: gelijke specificiteit als
   .bc-drawer-close zelf zou verliezen op brondvolgorde (die regel staat verderop). */
.bc-pcard-header-tools .bc-drawer-close { position: static; top: auto; right: auto; z-index: auto; }

.bc-pcard-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.bc-pcard-btn-dark {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border: 0; border-radius: 8px;
    background: var(--bc-ink); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background-color .12s ease;
}
.bc-pcard-btn-dark:hover { background: var(--bc-ink-hover); color: #fff; }
.bc-pcard-btn-dark:disabled { opacity: .55; cursor: default; }

.bc-pcard-dd-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border: 1px solid var(--bc-border); border-radius: 8px;
    background: #fff; font-size: 13.5px; color: oklch(0.2 0.01 260); cursor: pointer;
    transition: border-color .12s ease;
}
.bc-pcard-dd-btn:hover { border-color: color-mix(in oklch, var(--bc-primary) 35%, var(--bc-border)); }
.bc-pcard-dd-btn .bc-pcard-chev { color: var(--bc-text-muted); font-size: 11px; margin-left: 2px; }

/* Statusselect (fase/stage) in de kop-actiebalk - een gewone <select> i.p.v.
   een custom dropdown, zodat je in één klik naar élke status kan springen
   (niet alleen "volgende") en het meteen herkenbaar bedienbaar is. */
.bc-pcard-dd-select {
    height: 36px; padding: 0 30px 0 13px; border: 1px solid var(--bc-border); border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px; font-size: 13.5px; font-weight: 600; color: oklch(0.2 0.01 260); cursor: pointer;
    appearance: none; -webkit-appearance: none; font-family: inherit; max-width: 220px;
    transition: border-color .12s ease;
}
.bc-pcard-dd-select:hover:not(:disabled) { border-color: color-mix(in oklch, var(--bc-primary) 35%, var(--bc-border)); }
.bc-pcard-dd-select:disabled { cursor: default; opacity: .7; }
.bc-pcard-dd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: oklch(0.6 0.14 155); }
.bc-pcard-dd-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%;
    color: #fff; font-size: 9.5px; font-weight: 700; flex-shrink: 0;
}
.bc-pcard-menu { min-width: 210px; padding: 6px; border-radius: 10px; border-color: var(--bc-border); box-shadow: 0 12px 32px oklch(0 0 0 / 0.14); }
.bc-pcard-menu .dropdown-item { border-radius: 7px; padding: 9px 10px; font-size: 13.5px; }
.bc-pcard-menu .dropdown-item.text-danger:hover, .bc-pcard-menu .dropdown-item.text-danger:focus { background: oklch(0.95 0.03 25); }
.bc-pcard-menu-heading { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--bc-text-muted); font-weight: 700; padding: 7px 10px 6px; display: block; }

.bc-pcard-info { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; background: oklch(0.97 0.003 260); border-bottom: 1px solid var(--bc-border); }
.bc-pcard-info-col { padding: 15px 26px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bc-pcard-info-col + .bc-pcard-info-col { border-left: 1px solid oklch(0.94 0.004 260); }
.bc-pcard-info-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--bc-text-muted); font-weight: 700; }
.bc-pcard-info-value { display: flex; align-items: center; gap: 8px; font-size: 14px; color: oklch(0.2 0.01 260); min-width: 0; }
.bc-pcard-info-value-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-pcard-info-sub { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--bc-text-muted); flex-wrap: wrap; }
.bc-pcard-info-sub a { font-size: 13px; font-weight: 600; }
.bc-pcard-info-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bc-pcard-info-dot-success { background: oklch(0.6 0.14 155); }
.bc-pcard-info-dot-warning { background: oklch(0.65 0.14 80); }
.bc-pcard-info-dot-danger { background: oklch(0.6 0.16 25); }
.bc-pcard-info-dot-muted { background: oklch(0.8 0.004 260); }

.bc-pcard-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }

.bc-pcard-section { border-bottom: 1px solid var(--bc-border); }
.bc-pcard-section-head { display: flex; align-items: center; gap: 12px; padding: 17px 26px 14px; }
.bc-pcard-section-head-btn {
    display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left;
}
.bc-pcard-section-label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: oklch(0.35 0.01 260); font-weight: 700; }
.bc-pcard-section-chev { color: var(--bc-text-muted); font-size: 10px; flex-shrink: 0; }
.bc-pcard-section-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
    background: oklch(0.94 0.004 260); color: var(--bc-text-muted); font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.bc-pcard-section-action { border: 0; background: transparent; padding: 0; font-size: 13px; font-weight: 600; color: var(--bc-primary); cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.bc-pcard-section-body { padding: 0 26px 22px; }
.bc-pcard-section-empty { font-size: 14px; color: oklch(0.6 0.01 260); }

.bc-pcard-grid { display: grid; grid-template-columns: auto 1fr; gap: 11px 22px; align-items: baseline; }
.bc-pcard-grid-label { font-size: 12.5px; color: var(--bc-text-muted); }
.bc-pcard-grid-value { font-size: 14px; color: oklch(0.2 0.01 260); overflow-wrap: anywhere; }
.bc-pcard-grid-value.bc-pcard-muted { color: oklch(0.62 0.01 260); }

.bc-pcard-edit-grid { display: grid; grid-template-columns: auto 1fr; gap: 11px 22px; align-items: center; }
.bc-pcard-edit-grid label { font-size: 12.5px; color: var(--bc-text-muted); }
.bc-pcard-field, .bc-pcard-edit-grid input {
    height: 36px; border: 1px solid var(--bc-border); border-radius: 8px; padding: 0 11px; font-size: 14px;
    color: oklch(0.2 0.01 260); background: #fff; width: 100%; box-sizing: border-box; font-family: inherit;
}
.bc-pcard-field:focus, .bc-pcard-edit-grid input:focus {
    outline: none; border-color: color-mix(in oklch, var(--bc-primary) 45%, var(--bc-border));
    box-shadow: 0 0 0 3px var(--bc-primary-tint);
}
textarea.bc-pcard-field { min-height: 74px; padding: 10px 11px; resize: vertical; }
.bc-pcard-edit-actions { display: flex; gap: 9px; margin-top: 13px; }
.bc-pcard-btn-outline {
    height: 34px; padding: 0 14px; border: 1px solid var(--bc-border); border-radius: 8px; background: #fff;
    color: var(--bc-text-muted); font-size: 13px; cursor: pointer;
}
.bc-pcard-btn-outline:hover { border-color: color-mix(in oklch, var(--bc-primary) 30%, var(--bc-border)); color: oklch(0.3 0.01 260); }
.bc-pcard-btn-dark-sm { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--bc-ink); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.bc-pcard-btn-dark-sm:hover { background: var(--bc-ink-hover); color: #fff; }

/* Gesegmenteerde toggle (Projecten: "Wie vult de website?") */
.bc-pcard-segmented { display: flex; align-items: center; border: 1px solid var(--bc-border); border-radius: 8px; overflow: hidden; height: 36px; }
.bc-pcard-segmented button { height: 34px; padding: 0 13px; border: 0; background: #fff; color: oklch(0.25 0.01 260); font-size: 13px; cursor: pointer; }
.bc-pcard-segmented button:hover:not(.active) { background: oklch(0.96 0.004 260); }
.bc-pcard-segmented button.active { background: var(--bc-ink); color: #fff; font-weight: 600; }

.bc-pcard-team-pill {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--bc-border); border-radius: 999px; padding: 5px 8px 5px 5px;
}
.bc-pcard-doc-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--bc-border); border-radius: 10px; padding: 12px 14px; }
.bc-pcard-doc-row-title { font-size: 13.5px; color: oklch(0.2 0.01 260); font-weight: 600; }
.bc-pcard-doc-row-meta { font-size: 12.5px; color: var(--bc-text-muted); }

/* Activiteit: hergebruikt de bestaande .bc-ticket-activity-tab(s)-mechaniek
   (tabs.js) en .bc-pcard-feed draagt ook .bc-ticket-comment-thread zodat
   $tabs.next('.bc-ticket-comment-thread') het blijft vinden - alleen de
   layout eromheen (label + tabs in één rij) en de feed-iteminhoud zelf zijn
   hier nieuw. */
.bc-pcard-activity-head { display: flex; align-items: flex-end; gap: 18px; padding: 18px 26px 0; }
.bc-pcard-activity-head .bc-pcard-section-label { padding-bottom: 9px; }
.bc-pcard-activity-head .bc-ticket-activity-tabs { border-bottom: none; margin-bottom: 0; margin-left: auto; }
.bc-pcard-divider { height: 1px; background: var(--bc-border); }
.bc-pcard-comment-box { padding: 16px 26px; border-bottom: 1px solid var(--bc-border); background: oklch(0.98 0.002 260); display: flex; gap: 11px; align-items: flex-start; }
.bc-pcard-comment-box-avatar { flex-shrink: 0; margin-top: 3px; }
.bc-pcard-comment-box-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.bc-pcard-comment-box-footer { display: flex; align-items: center; gap: 12px; }
.bc-pcard-comment-box-caption { font-size: 12.5px; color: var(--bc-text-muted); }

/* Kleine WYSIWYG op het reactieveld - zelfde aanpak als de dashboard-
   introtekst-editor (admin-instellingen.js): contenteditable-div + toolbar,
   gesynchroniseerd naar een verborgen <textarea class="bc-pipeline-comment-
   input"> die de bestaande @-mention- en submit-logica (pipeline-boards.js)
   ongewijzigd blijft uitlezen. */
.bc-pcard-comment-toolbar { display: flex; gap: 2px; margin-bottom: 6px; }
.bc-pcard-comment-toolbar-btn {
    width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent;
    color: var(--bc-text-muted); font-size: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .12s ease, color .12s ease;
}
.bc-pcard-comment-toolbar-btn:hover { background: oklch(0.93 0.004 260); color: oklch(0.25 0.01 260); }
.bc-pcard-comment-editor {
    /* Bewust geen .bc-pcard-field (die zet een vaste height:36px - een
       contenteditable moet juist vanzelf meegroeien met de inhoud i.p.v. na
       amper 2 regels al intern te scrollen), losse, vergelijkbare styling
       hier. Groeit vrij mee tot 45vh, pas daarna een eigen scrollbalk. */
    min-height: 80px; max-height: 45vh; overflow-y: auto; cursor: text;
    border: 1px solid var(--bc-border); border-radius: 8px; padding: 9px 11px;
    font-size: 14px; line-height: 1.5; color: oklch(0.2 0.01 260); background: #fff;
}
.bc-pcard-comment-editor:focus {
    outline: none; border-color: color-mix(in oklch, var(--bc-primary) 45%, var(--bc-border));
    box-shadow: 0 0 0 3px var(--bc-primary-tint);
}
.bc-pcard-comment-editor:empty:before { content: attr(data-placeholder); color: oklch(0.68 0.006 260); }
.bc-pcard-comment-editor p { margin: 0 0 .6em; }
.bc-pcard-comment-editor p:last-child { margin-bottom: 0; }
.bc-pcard-comment-editor ul, .bc-pcard-comment-editor ol { margin: 0 0 .6em; padding-left: 1.2em; }
.bc-pcard-hidden-moves {
    display: flex; align-items: center; gap: 10px; padding: 13px 26px; background: oklch(0.98 0.002 260);
    border-bottom: 1px solid oklch(0.95 0.003 260); font-size: 13px; color: var(--bc-text-muted);
}
.bc-pcard-hidden-moves button { border: 0; background: transparent; padding: 0; font-size: 13px; font-weight: 600; color: var(--bc-primary); cursor: pointer; }

.bc-pcard-feed { padding: 18px 26px 26px; display: flex; flex-direction: column; gap: 16px; }
.bc-pcard-feed[data-hide-moves="1"][data-active-tab="all"] .bc-pcard-move { display: none; }

.bc-pcard-feed-event { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--bc-text-muted); padding: 0; }
.bc-pcard-feed-event-dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.85 0.004 260); flex-shrink: 0; transform: translateY(-3px); }
.bc-pcard-feed-event-text { flex: 1; min-width: 0; }
.bc-pcard-feed-event-actor { color: oklch(0.2 0.01 260); font-weight: 600; }
.bc-pcard-feed-event-date { margin-left: auto; flex-shrink: 0; font-size: 12.5px; color: oklch(0.65 0.005 260); }
.bc-pcard-feed-comment { border: 1px solid var(--bc-border); border-radius: 12px; overflow: hidden; }
.bc-pcard-feed-comment-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: oklch(0.97 0.003 260); border-bottom: 1px solid oklch(0.94 0.004 260); }
.bc-pcard-feed-comment-authorwrap { flex: 1; min-width: 0; }
.bc-pcard-feed-comment-author { font-size: 13.5px; color: oklch(0.2 0.01 260); font-weight: 600; }
.bc-pcard-feed-comment-meta { font-size: 12px; color: var(--bc-text-muted); }
.bc-pcard-feed-comment-date { font-size: 12.5px; color: oklch(0.65 0.005 260); flex-shrink: 0; }
.bc-pcard-feed-comment-body { padding: 16px; font-size: 13.5px; line-height: 1.62; color: oklch(0.25 0.01 260); overflow-wrap: anywhere; }
.bc-pcard-feed-comment-body p { margin: 0 0 .85em; }
.bc-pcard-feed-comment-body p:last-child { margin-bottom: 0; }
.bc-pcard-feed-comment-body ul, .bc-pcard-feed-comment-body ol { margin: 0 0 .85em; padding-left: 1.3em; }
.bc-pcard-feed-comment-body a { font-weight: 600; }

@media (max-width: 640px) {
    .bc-pcard-info { grid-template-columns: 1fr; }
    .bc-pcard-info-col + .bc-pcard-info-col { border-left: none; border-top: 1px solid oklch(0.94 0.004 260); }
    .bc-pcard-header, .bc-pcard-section-head, .bc-pcard-section-body, .bc-pcard-info-col,
    .bc-pcard-activity-head, .bc-pcard-comment-box, .bc-pcard-hidden-moves, .bc-pcard-feed {
        padding-left: 18px; padding-right: 18px;
    }
    .bc-pcard-title { font-size: 20px; }
}

/* --- Ticket-drawer "Details"-lijst (Jira-achtige label/waarde-rijen i.p.v. een los formulier-grid) --- */
.bc-ticket-detail-list { display: flex; flex-direction: column; }
.bc-ticket-detail-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid oklch(0.95 0.003 260);
}
.bc-ticket-detail-row:last-child { border-bottom: none; }
.bc-ticket-detail-label {
    width: 100px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--bc-text-muted);
}
.bc-ticket-detail-row .form-select, .bc-ticket-detail-row .form-control { flex: 1; min-width: 0; }
.bc-ticket-assignee-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

/* --- Bijlagenlijst als nette bestandsrijen --- */
.bc-ticket-file-list { display: flex; flex-direction: column; gap: 2px; }
.bc-ticket-file-row {
    display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 9px;
    transition: background-color .12s ease;
}
.bc-ticket-file-row:hover { background: oklch(0.97 0.003 260); }
.bc-ticket-file-link {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 0;
    text-decoration: none; color: inherit;
}
.bc-ticket-file-link:hover { color: inherit; }
.bc-ticket-file-icon { font-size: 15px; flex-shrink: 0; }
.bc-ticket-file-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bc-ticket-file-meta { margin-left: auto; font-size: 11.5px; color: var(--bc-text-muted); flex-shrink: 0; white-space: nowrap; }
.bc-ticket-file-delete {
    flex-shrink: 0; font-size: 16px; line-height: 1; padding: 2px 4px !important; opacity: .55;
    transition: opacity .12s ease;
}
.bc-ticket-file-row:hover .bc-ticket-file-delete { opacity: 1; }

/* --- Generieke sleep-hierheen-zone voor bestandsuploads (Bijlagen-secties Tickets/Projecten/Leads) --- */
.bc-file-dropzone { position: relative; }
.bc-file-dropzone-overlay {
    display: none; position: absolute; inset: -4px; align-items: center; justify-content: center;
    background: var(--bc-primary-tint); border: 2px dashed var(--bc-primary); border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--bc-primary); pointer-events: none; z-index: 1;
}
.bc-file-dropzone.bc-drop-active .bc-file-dropzone-overlay { display: flex; }

/* --- Reactie-thread: rustiger ritme dan de generieke .bc-flat-list-rijen --- */
.bc-ticket-comment-thread { display: flex; flex-direction: column; gap: 18px; }
.bc-ticket-comment { display: flex; gap: 10px; }
.bc-ticket-comment-body { min-width: 0; flex: 1; }
.bc-ticket-comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.bc-ticket-comment-author { font-size: 13px; font-weight: 700; }
.bc-ticket-comment-text { font-size: 13.5px; line-height: 1.5; }
.bc-ticket-comment-attachment {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--bc-primary); background: var(--bc-primary-tint); border-radius: 8px; padding: 5px 10px; text-decoration: none;
}
.bc-ticket-comment-attachment:hover { color: var(--bc-primary); filter: brightness(.95); }

/* --- Activiteit: Alles/Reacties/Geschiedenis-tabs + geschiedenisregels + drag&drop-bijlagezone --- */
.bc-ticket-activity-tabs { display: flex; margin-bottom: 14px; border-bottom: 1px solid var(--bc-border); }
.bc-ticket-activity-tab {
    border: none; background: transparent; padding: 8px 4px; margin-right: 18px; font-size: 12.5px; font-weight: 600;
    color: var(--bc-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .14s ease, border-color .14s ease;
}
.bc-ticket-activity-tab:hover { color: oklch(0.3 0.01 260); }
.bc-ticket-activity-tab.active { color: var(--bc-primary); border-bottom-color: var(--bc-primary); }

.bc-ticket-comment-thread[data-active-tab="comment"] [data-kind="history"] { display: none; }
.bc-ticket-comment-thread[data-active-tab="history"] [data-kind="comment"] { display: none; }

.bc-ticket-history-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bc-text-muted); padding: 6px 0; }
.bc-ticket-history-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bc-border); flex-shrink: 0; }

.bc-ticket-comment-dropzone { position: relative; }
.bc-ticket-comment-dropzone-overlay {
    display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
    background: var(--bc-primary-tint); border: 2px dashed var(--bc-primary); border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--bc-primary); pointer-events: none;
}
.bc-ticket-comment-dropzone.bc-drop-active .bc-ticket-comment-dropzone-overlay { display: flex; }
.bc-ticket-comment-input { resize: vertical; }

@media (max-width: 640px) {
    .bc-kanban-board { scroll-snap-type: x mandatory; }
    .bc-kanban-column-wrap { width: calc(100vw - 64px) !important; scroll-snap-align: start; }
}

/* --- Slide-over drawer (task detail etc.) --- */
.bc-drawer-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: oklch(0 0 0 / 0.35);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 200;
}
.bc-drawer-overlay.bc-open { opacity: 1; pointer-events: auto; }
.bc-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 92vw;
    background: #fff; box-shadow: -12px 0 32px oklch(0 0 0 / 0.18);
    transform: translateX(100%); transition: transform .25s ease; z-index: 201;
    overflow-y: auto; padding: 24px 28px;
}
.bc-drawer.bc-open { transform: translateX(0); }
.bc-drawer-close { position: absolute; top: 18px; right: 22px; z-index: 1; }
@media (max-width: 900px) {
    .bc-drawer { top: var(--bc-mobile-bar-h); }
    .bc-drawer-overlay { top: var(--bc-mobile-bar-h); }
}
@media (max-width: 640px) {
    .bc-drawer { width: 100vw; max-width: 100vw; top: 0; }
    .bc-drawer-overlay { top: 0; }
}

/* Bredere variant voor contentrijke detailpanelen (Licenties leverancier/
   product) — de standaard 560px las te krap voor een financieel overzicht +
   een volledige producten-/afschriftenlijst ernaast. Alleen boven de mobiele
   drempel: onder 900px valt dit sowieso al terug op volledige breedte. */
@media (min-width: 901px) {
    .bc-drawer.bc-drawer-wide { width: 900px; max-width: 88vw; }
}
/* Tussenmaat voor Tickets/Projecten/Leads-kaarten - meer secties (Opvolging,
   Acties, Gegevens, Bijlagen, Activiteit) dan de standaard 560px comfortabel
   toelaat, maar geen tabel-zware financiële schermen zoals Licenties. */
@media (min-width: 821px) {
    .bc-drawer.bc-drawer-wide-md { width: 720px; max-width: 90vw; }
}

/* --- Mijn taken --- */
.bc-mt-banner {
    background: linear-gradient(120deg, var(--bc-primary-tint-strong), oklch(0.97 0.02 200));
    border-radius: 16px; padding: 22px 26px; position: relative; overflow: hidden;
}
.bc-mt-banner::after {
    content: ""; position: absolute; top: -40px; right: -30px; width: 160px; height: 160px;
    border-radius: 50%; background: oklch(0.9 0.06 250 / 0.5);
    z-index: 0; pointer-events: none;
}
.bc-mt-banner h1, .bc-mt-banner p, .bc-mt-banner > div { position: relative; z-index: 1; }
.bc-mt-inline-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.bc-mt-inline-stat .fw-bold { font-size: 18px; font-family: 'IBM Plex Mono', monospace; }
.bc-mt-task-row { transition: background-color .1s ease; border-left: 3px solid transparent; }
.bc-mt-task-row:hover { background: oklch(0.97 0.006 260); border-left-color: var(--bc-primary); }
.bc-mt-section-title { display: flex; align-items: center; gap: 8px; }
.bc-mt-section-title .bc-mt-dot { width: 9px; height: 9px; border-radius: 50%; }

/* Home dashboard — zes gelijkwaardige widget-kaarten, gegroepeerd onder twee
   sectiekoppen ("Vraagt aandacht"/"Jouw werk", zie mijn-taken/index.php) i.p.v.
   één platte grid. Elke kaart draagt zijn eigen accenttint alleen via het
   icoon-badge (--accents-map in de template) - de kaartrand zelf blijft
   neutraal, vlak, zonder schaduw (redesign, sept. 2026). */
.bc-home-widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 18px; }
.bc-home-widget {
    background: #fff; border: 1px solid var(--bc-border); border-radius: 12px;
    padding: 18px 20px; box-shadow: none;
}
.bc-home-widget-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bc-home-widget-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.bc-home-widget-icon svg { width: 18px; height: 18px; }
.bc-home-widget-count { font-size: 24px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; line-height: 1; }
.bc-home-widget-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--bc-border); transition: background-color .1s ease;
}
.bc-home-widget-row:last-child { border-bottom: none; }
.bc-home-widget-row[role="button"]:hover { background: oklch(0.97 0.006 260); cursor: pointer; }
.bc-home-widget-link {
    display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700;
    color: var(--bc-primary); text-decoration: none; padding-top: 12px;
}
.bc-home-widget-link:hover { text-decoration: underline; color: var(--bc-primary); }

/* --- Workflows --- */
.bc-wf-row { transition: box-shadow .15s ease; }
.bc-wf-row:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.bc-wf-row-overdue { border-color: oklch(0.75 0.14 25); }

/* --- Searchable select (client pickers etc.) --- */
.bc-ss-wrap { position: relative; max-width: 100%; }
.bc-ss-menu {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px; z-index: 2000;
    max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid var(--bc-border);
    border-radius: 8px; box-shadow: 0 8px 24px oklch(0 0 0 / 0.14); padding: 4px;
}
.bc-ss-option { padding: 6px 10px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.bc-ss-option:hover, .bc-ss-option.bc-ss-active { background: var(--bc-primary-tint); }
.bc-ss-option.bc-ss-clear { color: var(--bc-text-muted); border-bottom: 1px solid var(--bc-border); margin-bottom: 2px; border-radius: 0; }

/* --- Capaciteitsplanning: truncated entry labels, click or 2s-hover for the full text --- */
.bc-cap-entry-label { cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--bc-border); text-underline-offset: 2px; }
.bc-cap-entry-label:hover { text-decoration-color: var(--bc-primary); }
.popover { max-width: 280px; }

/* Witte kaart met gekleurde linkerrand voor korte meldingen/waarschuwingen -
   vervangt de kale Bootstrap .alert-* waar een iets steviger, op-merk-baarder
   uiterlijk gewenst is (zie mockup se Facturatie-scherm). */
.bc-notice { background: #fff; border: 1px solid var(--bc-border); border-left: 3px solid var(--bc-border); border-radius: 10px; padding: 12px 16px; font-size: 12.5px; line-height: 1.5; color: var(--bc-text-2); }
.bc-notice-warning { border-left-color: #d97706; }
.bc-notice-danger { border-left-color: #dc2626; }

/* --- Intercompany uren drill-down tree --- */
.bc-ic-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 8px; border-radius: 6px; cursor: pointer; list-style: none;
}
.bc-ic-row::-webkit-details-marker { display: none; }
.bc-ic-row:hover { background: var(--bc-surface-2); }
.bc-ic-row-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bc-ic-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--bc-border);
    background: #fff; color: var(--bc-text-muted); font-weight: 700; font-size: 13px; line-height: 1;
}
.bc-ic-toggle::before { content: "+"; }
details[open] > summary .bc-ic-toggle::before { content: "\2212"; }
.bc-ic-client-name { font-weight: 600; }
.bc-ic-level-1 { padding-left: 8px; }
.bc-ic-level-2 { padding-left: 12px; }
.bc-ic-level-3 { padding-left: 12px; }
.bc-ic-entries-wrap { padding: 4px 0 10px 12px; overflow-x: auto; }

/* Horizontal dividers between siblings at the same level, so consecutive rows read as separate. */
.bc-ic-tree { border-top: 1px solid var(--bc-border); }
.bc-ic-client { border-bottom: 1px solid var(--bc-border); }
.bc-ic-children { margin-left: 24px; border-left: 2px solid var(--bc-border); }
.bc-ic-children > .bc-ic-project:not(:last-child),
.bc-ic-children > .bc-ic-service:not(:last-child) { border-bottom: 1px solid var(--bc-border); }

/* Licenties: leverancier-rij in de samenvattingstabel opent de detail-drawer
   (supplier-detail.php) — zelfde klik-opent-drawer patroon als producten en
   creditcard-afschriften elders in de app. */
.bc-lic-supplier-item, .bc-lic-product-row { cursor: pointer; }

/* Licenties dashboard: revenue-vs-cost grouped bar chart. Fixed two-color
   categorical pair (blue=verkoop, amber=inkoop) independent of the
   user-set --bc-primary theme color, since these two colors carry a fixed
   semantic meaning across every install — validated CVD-safe via the
   dataviz skill's validate_palette.js (light + dark, both ALL CHECKS PASS). */
:root {
    --bc-chart-revenue: #3B6FD6;
    --bc-chart-cost: #D97706;
}
/* Horizontale staafjes: rijen stapelen naar beneden i.p.v. kolommen die bij
   veel categorieën steeds smaller geperst worden — schaalt netjes naar
   willekeurig veel rijen en geeft lange labels ruimte zonder draaien. */
.bc-chart-cat { display: flex; flex-direction: column; gap: 10px; }
.bc-chart-cat-axis {
    display: flex; justify-content: space-between; margin-left: 132px;
    font-size: 11px; color: var(--bc-text-muted); padding-bottom: 4px; border-bottom: 1px solid var(--bc-border);
}
.bc-chart-cat-row { display: flex; align-items: center; gap: 12px; }
.bc-chart-cat-row:hover { background: color-mix(in oklch, var(--bc-primary) 4%, transparent); border-radius: 6px; }
.bc-chart-cat-row-label { width: 120px; flex-shrink: 0; font-size: 12px; color: var(--bc-text-muted); }
.bc-chart-cat-row-rest .bc-chart-cat-row-label { font-style: italic; }
.bc-chart-cat-row-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
.bc-chart-cat-bar-track { height: 9px; border-radius: 5px; background: color-mix(in oklch, var(--bc-border) 60%, transparent); position: relative; }
.bc-chart-cat-bar { height: 100%; min-width: 3px; border-radius: 5px; transition: opacity .12s ease; }
.bc-chart-cat-bar-revenue { background: var(--bc-chart-revenue); }
.bc-chart-cat-bar-cost { background: var(--bc-chart-cost); }
.bc-chart-cat-row:hover .bc-chart-cat-bar { opacity: 0.85; }
.bc-chart-cat-legend { display: flex; gap: 16px; font-size: 12px; color: var(--bc-text-muted); }
.bc-chart-cat-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* Creditcard afschriften: per-maand accordeon (jaar-filter toont alle
   maanden ingeklapt met een samenvatting, zodat je in één oogopslag ziet
   welke maanden nog aandacht nodig hebben zonder ze allemaal te openen). */
.bc-cc-months { display: flex; flex-direction: column; gap: 10px; }
.bc-cc-month { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; overflow: hidden; }
.bc-cc-month-toggle {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px;
    background: none; border: none; text-align: left; cursor: pointer;
}
.bc-cc-month-toggle:hover { background: var(--bc-surface-2); }
.bc-cc-month-chevron { flex-shrink: 0; color: var(--bc-text-muted); transition: transform .15s ease; }
.bc-cc-month-toggle[aria-expanded="true"] .bc-cc-month-chevron { transform: rotate(90deg); }
.bc-cc-month-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.02em; min-width: 160px; flex-shrink: 0; }
.bc-cc-month-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--bc-text-muted); }
.bc-cc-month-stat-value { font-weight: 600; color: var(--bc-text, #16181c); }
.bc-cc-month-badge { display: inline-flex; align-items: center; gap: 4px; }
.bc-cc-month-inner { padding: 0 18px 18px; border-top: 1px solid var(--bc-border); padding-top: 16px; }
@media (max-width: 768px) {
    .bc-cc-month-toggle { flex-wrap: wrap; }
    .bc-cc-month-stats { margin-left: 0; }
}


.bc-lic-subtab-btn {
    border: 1px solid var(--bc-border); background: #fff; color: var(--bc-text-muted);
    border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 600;
}
.bc-lic-subtab-btn.active { background: var(--bc-primary); border-color: var(--bc-primary); color: #fff; }

.bc-cc-row-open { cursor: pointer; }
.bc-cc-assign-trigger { color: inherit; }
.bc-cc-assign-trigger:hover { color: var(--bc-primary); }

.bc-cc-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 8px; border: 1px solid var(--bc-border); background: #fff; margin-left: 4px;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.bc-cc-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.bc-cc-icon-btn-check { color: var(--bs-success, #198754); }
.bc-cc-icon-btn-check:hover:not(:disabled) { background: var(--bs-success, #198754); border-color: var(--bs-success, #198754); color: #fff; }
.bc-cc-icon-btn-cross { color: var(--bs-danger, #dc3545); }
.bc-cc-icon-btn-cross:hover:not(:disabled) { background: var(--bs-danger, #dc3545); border-color: var(--bs-danger, #dc3545); color: #fff; }
.bc-cc-icon-btn-undo { color: var(--bc-text-muted); }
.bc-cc-icon-btn-undo:hover:not(:disabled) { background: var(--bc-text-muted); border-color: var(--bc-text-muted); color: #fff; }
.bc-cc-cell-truncate { overflow: hidden; overflow-wrap: anywhere; }

.bc-domains-expiry-wrap { max-height: 480px; overflow-y: auto; border: 1px solid oklch(0.94 0.004 260); border-radius: 10px; }
.bc-domains-expiry-wrap table { margin-bottom: 0; }
.bc-domains-expiry-wrap thead th { position: sticky; top: 0; background: #fff; z-index: 1; }

.bc-cc-inkoper-group { background: #fff; border: 1px solid var(--bc-border); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.bc-cc-inkoper-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px;
    background: none; border: none; text-align: left; cursor: pointer;
}
.bc-cc-inkoper-toggle:hover { background: var(--bc-surface-2); }
.bc-cc-inkoper-toggle[aria-expanded="true"] .bc-cc-month-chevron { transform: rotate(90deg); }
.bc-cc-inkoper-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: -.015em; }
.bc-cc-inkoper-stats { display: flex; align-items: center; gap: 14px; margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--bc-text-muted); font-weight: 500; }

.bc-cc-drawer-header { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--bc-border); }
.bc-cc-drawer-section { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--bc-border); }
.bc-cc-drawer-section:last-child { border-bottom: none; margin-bottom: 0; }
.bc-cc-drawer-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bc-text-muted); margin-bottom: 10px; }
.bc-cc-reactie { display: flex; gap: 10px; align-items: flex-start; }

.bc-cc-mention-suggestions {
    position: absolute; bottom: calc(100% + 4px); left: 0; width: 240px; max-width: 90%;
    background: #fff; border: 1px solid var(--bc-border); border-radius: 10px;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12); overflow: hidden; z-index: 5;
}
.bc-cc-mention-option { padding: 7px 12px; font-size: 13px; cursor: pointer; }
.bc-cc-mention-option:hover, .bc-cc-mention-option.bc-cc-mention-active { background: var(--bc-bg); }

/* --- Wiki --- */

.bc-wiki-screen { display: flex; gap: 20px; align-items: flex-start; }

.bc-wiki-rail {
    width: 220px; flex-shrink: 0; position: sticky; top: 20px;
    background: #fff; border: 1px solid var(--bc-border); border-radius: 12px;
    padding: 12px 10px; box-shadow: 0 1px 2px oklch(0 0 0 / 0.04);
}
.bc-wiki-rail-header {
    display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px;
    margin-bottom: 8px; border-bottom: 1px solid var(--bc-border); cursor: pointer;
}
.bc-wiki-rail-logo { font-size: 18px; line-height: 1; }
.bc-wiki-rail-title { font-weight: 700; font-size: 15px; }
.bc-wiki-rail-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 240px); overflow-y: auto; }
.bc-wiki-rail-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--bc-text); transition: background .1s ease; }
.bc-wiki-rail-item:hover { background: var(--bc-bg); }
.bc-wiki-rail-item.active { background: color-mix(in oklch, var(--bc-primary) 12%, transparent); color: var(--bc-primary); font-weight: 600; }
.bc-wiki-rail-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.bc-wiki-rail-dot { width: 9px; height: 9px; border-radius: 50%; }
.bc-wiki-rail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-wiki-rail-add {
    margin-top: 8px; width: 100%; border: 1px dashed var(--bc-border); background: none;
    border-radius: 8px; padding: 7px; font-size: 13px; color: var(--bc-text-muted); cursor: pointer;
}
.bc-wiki-rail-add:hover { border-color: var(--bc-primary); color: var(--bc-primary); }

.bc-wiki-main { flex: 1; min-width: 0; }
.bc-wiki-topbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.bc-wiki-topbar .form-control { width: 280px; }

.bc-wiki-space-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bc-wiki-space-icon {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
}
.bc-wiki-space-card { cursor: pointer; transition: box-shadow .12s ease, transform .12s ease; }
.bc-wiki-space-card:hover { box-shadow: 0 4px 16px oklch(0 0 0 / 0.08); transform: translateY(-1px); }

.bc-wiki-search-results, #wikiSearchResults {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 340px; overflow-y: auto;
    background: #fff; border: 1px solid var(--bc-border); border-radius: 10px;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12); z-index: 20;
}
.bc-wiki-search-result { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--bc-border); }
.bc-wiki-search-result:last-child { border-bottom: none; }
.bc-wiki-search-result:hover { background: var(--bc-bg); }

.bc-wiki-workspace { display: flex; gap: 20px; align-items: flex-start; }
.bc-wiki-tree-col { width: 260px; flex-shrink: 0; position: sticky; top: 20px; }
.bc-wiki-detail-col { flex: 1; min-width: 0; }

.bc-wiki-tree { font-size: 13px; }
.bc-wiki-tree-item {
    display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 8px; min-width: 0;
}
.bc-wiki-tree-item:hover { background: var(--bc-bg); }
.bc-wiki-tree-item.active { background: color-mix(in oklch, var(--bc-primary) 10%, transparent); }
.bc-wiki-tree-item.active .bc-wiki-tree-link { color: var(--bc-primary); font-weight: 600; }
.bc-wiki-tree-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.bc-wiki-tree-actions { display: none; flex-shrink: 0; gap: 2px; }
.bc-wiki-tree-item:hover .bc-wiki-tree-actions { display: flex; }
.bc-wiki-tree-btn {
    width: 20px; height: 20px; border: none; background: transparent; border-radius: 5px;
    font-size: 11px; color: var(--bc-text-muted); line-height: 20px; padding: 0; cursor: pointer;
}
.bc-wiki-tree-btn:hover { background: #fff; color: var(--bc-primary); }

.bc-wiki-tree-caret {
    width: 16px; height: 16px; flex-shrink: 0; border: none; background: transparent; padding: 0;
    font-size: 9px; color: var(--bc-text-muted); cursor: pointer; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
}
.bc-wiki-tree-caret:hover { background: #fff; color: var(--bc-primary); }
.bc-wiki-tree-caret-spacer { width: 16px; flex-shrink: 0; }

.bc-wiki-tree-handle { display: none; flex-shrink: 0; cursor: grab; color: var(--bc-text-muted); font-size: 11px; letter-spacing: -2px; }
.bc-wiki-tree-item:hover .bc-wiki-tree-handle { display: inline-block; }
.bc-wiki-tree-item.bc-dragging { opacity: 0.4; }
.bc-wiki-tree-item.bc-drop-target { background: color-mix(in oklch, var(--bc-primary) 16%, transparent); outline: 1px dashed var(--bc-primary); outline-offset: -1px; }
.bc-wiki-tree-root-drop {
    font-size: 12px; color: var(--bc-text-muted); text-align: center; padding: 0; margin-bottom: 0;
    border: 1px dashed transparent; border-radius: 8px; height: 0; overflow: hidden; opacity: 0; transition: all .15s ease;
}
.bc-wiki-tree-root-drop.bc-wiki-tree-root-drop-visible { height: auto; opacity: 1; padding: 10px 6px; margin-bottom: 6px; border-color: var(--bc-border); }
.bc-wiki-tree-root-drop.bc-drop-target { border-color: var(--bc-primary); background: color-mix(in oklch, var(--bc-primary) 10%, transparent); color: var(--bc-primary); font-weight: 600; }

.bc-wiki-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; margin-bottom: 4px;
    background: var(--bc-bg); border: 1px solid var(--bc-border); border-radius: 10px 10px 0 0;
    position: sticky; top: 0; z-index: 15;
}
.bc-wiki-tb-btn {
    min-width: 30px; height: 30px; padding: 0 8px; border: none; background: transparent; border-radius: 6px;
    font-size: 13px; cursor: pointer;
}
.bc-wiki-tb-btn:hover { background: #fff; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08); }
.bc-wiki-tb-sep { width: 1px; height: 20px; background: var(--bc-border); margin: 0 4px; }
.bc-wiki-mention-box {
    position: absolute; top: 100%; left: 6px; width: 240px; max-width: 90%; margin-top: 2px;
    background: #fff; border: 1px solid var(--bc-border); border-radius: 10px;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12); overflow: hidden; z-index: 5;
}

.bc-wiki-title {
    font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--bc-text);
}

.bc-wiki-content {
    font-size: 15px; line-height: 1.7; min-height: 80px; padding: 4px 2px; border-radius: 0 0 10px 10px;
    max-width: 760px;
}
.bc-wiki-content.bc-wiki-editing {
    outline: 2px solid color-mix(in oklch, var(--bc-primary) 40%, transparent); outline-offset: 4px; padding: 12px; border-radius: 8px;
}
.bc-wiki-content h2 { font-size: 20px; font-weight: 700; margin: 20px 0 10px; }
.bc-wiki-content h3 { font-size: 16px; font-weight: 700; margin: 16px 0 8px; }
.bc-wiki-content h4 { font-size: 14px; font-weight: 700; margin: 12px 0 6px; }
.bc-wiki-content p { margin: 0 0 10px; }
.bc-wiki-content ul, .bc-wiki-content ol { margin: 0 0 10px; padding-left: 22px; }
.bc-wiki-content blockquote {
    margin: 0 0 10px; padding: 8px 14px; border-left: 3px solid var(--bc-primary);
    background: var(--bc-bg); color: var(--bc-text-muted); border-radius: 0 8px 8px 0;
}
.bc-wiki-content code { background: var(--bc-bg); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.bc-wiki-content pre { background: var(--bc-bg); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.bc-wiki-content pre code { background: none; padding: 0; }
.bc-wiki-content img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
.bc-wiki-content hr { border: none; border-top: 1px solid var(--bc-border); margin: 16px 0; }
.bc-wiki-content table { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.bc-wiki-content th, .bc-wiki-content td { border: 1px solid var(--bc-border); padding: 6px 10px; font-size: 13px; text-align: left; }
.bc-wiki-content th { background: var(--bc-bg); font-weight: 600; }
.bc-wiki-content a { color: var(--bc-primary); }
.bc-wiki-content-preview { background: var(--bc-bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; }

.wiki-mention {
    display: inline-block; background: color-mix(in oklch, var(--bc-primary) 14%, transparent);
    color: var(--bc-primary); border-radius: 5px; padding: 0 5px; font-weight: 600; font-size: 13px;
}
.wiki-todo { display: inline-flex; align-items: center; gap: 6px; background: var(--bc-bg); border-radius: 8px; padding: 6px 10px; margin: 4px 0; }
.bc-wiki-content .wiki-columns { display: flex; gap: 20px; margin: 0 0 10px; align-items: flex-start; }
.bc-wiki-content .wiki-column { flex: 1; min-width: 0; min-height: 32px; border-radius: 8px; transition: outline-color .1s ease; }
.bc-wiki-content .wiki-column p:last-child { margin-bottom: 0; }
.bc-wiki-content.bc-wiki-content-drop-target { outline: 2px dashed var(--bc-primary); outline-offset: 4px; background: color-mix(in oklch, var(--bc-primary) 5%, transparent); }

.bc-wiki-content [class^="wiki-panel-"] {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 12px; padding: 10px 14px; border-radius: 0 8px 8px 0;
    border-left: 4px solid; font-size: 14px;
}
.bc-wiki-content [class^="wiki-panel-"] p:last-child { margin-bottom: 0; }
.bc-wiki-content [class^="wiki-panel-"]::before { flex-shrink: 0; line-height: 1.5; }
.bc-wiki-content .wiki-panel-info { background: color-mix(in oklch, #4c9aff 12%, transparent); border-color: #4c9aff; }
.bc-wiki-content .wiki-panel-info::before { content: "\2139\FE0F"; }
.bc-wiki-content .wiki-panel-tip { background: color-mix(in oklch, #57d9a3 14%, transparent); border-color: #2ba374; }
.bc-wiki-content .wiki-panel-tip::before { content: "\1F4A1"; }
.bc-wiki-content .wiki-panel-note { background: color-mix(in oklch, #998dd9 14%, transparent); border-color: #6b5fc4; }
.bc-wiki-content .wiki-panel-note::before { content: "\1F4DD"; }
.bc-wiki-content .wiki-panel-warning { background: color-mix(in oklch, #ffab00 16%, transparent); border-color: #cc8b00; }
.bc-wiki-content .wiki-panel-warning::before { content: "\26A0\FE0F"; }

.bc-wiki-content .wiki-toc {
    background: var(--bc-bg); border: 1px solid var(--bc-border); border-radius: 8px;
    padding: 12px 16px; margin: 0 0 16px; max-width: 360px;
}
.bc-wiki-content .wiki-toc p { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--bc-text-muted); }
.bc-wiki-content .wiki-toc ul { list-style: none; margin: 0; padding: 0; }
.bc-wiki-content .wiki-toc li { margin: 0; padding-top: 3px; padding-bottom: 3px; }
.bc-wiki-content .bc-wiki-toc-link { color: var(--bc-text); font-size: 13px; text-decoration: none; }
.bc-wiki-content .bc-wiki-toc-link:hover { color: var(--bc-primary); text-decoration: underline; }
.bc-wiki-content .bc-wiki-toc-lvl2 { padding-left: 14px; }
.bc-wiki-content .bc-wiki-toc-lvl3 { padding-left: 28px; }
.bc-wiki-content .bc-wiki-toc-lvl2 .bc-wiki-toc-link,
.bc-wiki-content .bc-wiki-toc-lvl3 .bc-wiki-toc-link { font-size: 12.5px; color: var(--bc-text-muted); }

#wlFormResults, #wlbFormResults { max-height: 220px; overflow-y: auto; border-radius: 8px; margin-top: 6px; }
#wlFormResults:not(:empty), #wlbFormResults:not(:empty) { border: 1px solid var(--bc-border); }
.bc-wiki-link-result { padding: 7px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--bc-border); }
.bc-wiki-link-result:last-child { border-bottom: none; }
.bc-wiki-link-result:hover, .bc-wiki-link-result-active { background: color-mix(in oklch, var(--bc-primary) 10%, transparent); }
.bc-wiki-link-result .text-muted { display: block; font-size: 11px; }

.bc-wiki-section { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--bc-border); }

#wikiPageTitle[contenteditable="true"] { outline: 2px solid color-mix(in oklch, var(--bc-primary) 40%, transparent); outline-offset: 3px; border-radius: 6px; padding: 0 4px; }

.bc-wiki-version-row { border-bottom: 1px solid var(--bc-border); }
.bc-wiki-version-row:last-child { border-bottom: none; }
.bc-wiki-version-toggle { padding: 10px 0; cursor: pointer; }
.bc-wiki-version-preview { padding: 0 0 12px; }

.bc-wiki-favorite-btn { border: none; background: none; font-size: 20px; line-height: 1; padding: 2px 4px; color: var(--bc-text-muted); }
.bc-wiki-favorite-btn:hover { color: #f5a623; }
.bc-wiki-favorite-btn.bc-wiki-favorite-active { color: #f5a623; }

.bc-wiki-watch-btn.bc-wiki-watch-active { background: color-mix(in oklch, var(--bc-primary) 12%, transparent); border-color: var(--bc-primary); color: var(--bc-primary); }

.bc-wiki-labels { min-height: 26px; }
.bc-wiki-label {
    display: inline-flex; align-items: center; gap: 4px;
    background: color-mix(in oklch, var(--bc-primary) 12%, transparent);
    color: var(--bc-text); font-weight: 500; font-size: 12px;
    padding: 4px 8px; border-radius: 999px; cursor: pointer;
}
.bc-wiki-label:hover { background: color-mix(in oklch, var(--bc-primary) 20%, transparent); }
.bc-wiki-label-remove {
    border: none; background: none; padding: 0; margin: 0; line-height: 1;
    font-size: 14px; color: inherit; opacity: .6;
}
.bc-wiki-label-remove:hover { opacity: 1; }

.bc-wiki-diff { font-size: 13px; line-height: 1.7; }
.bc-wiki-diff-ins { background: color-mix(in oklch, #2ba374 20%, transparent); color: #1a6b48; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.bc-wiki-diff-del { background: color-mix(in oklch, #e5484d 18%, transparent); color: #a4292c; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }

.bc-wiki-content pre { position: relative; }
.bc-wiki-content pre code.hljs { background: none; padding: 0; }

.bc-wiki-block-handle {
    position: absolute; width: 22px; height: 26px; display: flex; align-items: center; justify-content: center;
    cursor: grab; touch-action: none; user-select: none; color: var(--bc-text-muted); font-size: 13px;
    background: #fff; border: 1px solid var(--bc-border); border-radius: 6px; z-index: 20;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
}
.bc-wiki-block-handle:hover { color: var(--bc-primary); border-color: var(--bc-primary); }
.bc-wiki-block-dragging { box-shadow: 0 18px 40px oklch(0 0 0 / 0.22); opacity: .96; pointer-events: none; cursor: grabbing; background: #fff; }
.bc-wiki-block-placeholder { border: 2px dashed var(--bc-primary); border-radius: 8px; background: color-mix(in oklch, var(--bc-primary) 7%, transparent); margin: 4px 0; }
.wiki-column.bc-wiki-column-droptarget { outline: 2px dashed var(--bc-primary); outline-offset: 4px; }
body.bc-wiki-drag-active { cursor: grabbing !important; user-select: none; }

.bc-wiki-row-toolbar {
    position: absolute; z-index: 20; display: flex; gap: 4px; background: #fff; border: 1px solid var(--bc-border);
    border-radius: 8px; padding: 3px; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
}
.bc-wiki-row-tb-btn { border: none; background: none; font-size: 12px; padding: 4px 7px; border-radius: 6px; color: var(--bc-text); cursor: pointer; white-space: nowrap; }
.bc-wiki-row-tb-btn:hover { background: var(--bc-bg); }
.bc-wiki-row-tb-btn.bc-wiki-row-tb-danger:hover { background: color-mix(in oklch, #e5484d 15%, transparent); color: #a4292c; }

@media (max-width: 900px) {
    .bc-wiki-screen { flex-direction: column; }
    .bc-wiki-rail { width: 100%; position: static; }
    .bc-wiki-rail-list { max-height: 220px; }
    .bc-wiki-workspace { flex-direction: column; }
    .bc-wiki-tree-col { width: 100%; position: static; }
}

/* Kleine WYSIWYG voor de klant-Home-introtekst (admin/producten-prijzen.php)
   - eigen, lichte toolbar (execCommand) i.p.v. de zware wiki-editor, want
   HtmlSanitizer staat hier toch alleen basale opmaak toe (zie ALLOWED_TAGS). */
.bc-intro-toolbar { display: flex; flex-wrap: wrap; gap: 4px; }
.bc-intro-editor {
    min-height: 90px; padding: 10px 12px; font-size: 14px; line-height: 1.5;
    border-radius: 0 0 6px 6px;
}
.bc-intro-editor:focus { outline: none; box-shadow: 0 0 0 .2rem color-mix(in oklch, var(--bc-primary) 25%, transparent); border-color: var(--bc-primary); }
.bc-intro-editor p:last-child { margin-bottom: 0; }