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

:root {
    --bc-bg: oklch(0.98 0.003 90);
    --bc-border: oklch(0.9 0.005 260);
    --bc-text-muted: oklch(0.5 0.01 260);

    /* 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: oklch(0.55 0.15 250);
    --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);
    --bc-sidebar-bg: color-mix(in oklch, var(--bc-primary) 22%, black);
    --bc-sidebar-bg-2: color-mix(in oklch, var(--bc-primary) 16%, black);
    --bc-sidebar-bg-hover: color-mix(in oklch, var(--bc-primary) 30%, black);
}

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

h1, h2, h3, .bc-heading-font {
    font-family: 'Manrope', 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 oklch(0.94 0.004 260);
    border-radius: 16px;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.03), 0 1px 1px oklch(0 0 0 / 0.02);
}
/* 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: 10px; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(135deg, var(--bc-primary-light), var(--bc-primary));
    border-color: var(--bc-primary);
    box-shadow: 0 2px 6px color-mix(in oklch, var(--bc-primary) 60%, transparent);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--bc-primary), var(--bc-primary-dark));
    border-color: var(--bc-primary-dark);
    box-shadow: 0 6px 16px color-mix(in oklch, var(--bc-primary) 65%, transparent);
}
.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: 9px; 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); transition: color .12s ease, border-color .12s ease; }
.nav-tabs .nav-link:hover { color: var(--bc-primary-darker); }
.nav-tabs .nav-link.active { color: var(--bc-primary); border-bottom-color: var(--bc-primary); background: transparent; }
.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: linear-gradient(160deg, var(--bc-sidebar-bg), var(--bc-sidebar-bg-2));
    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: 'Manrope', sans-serif;
    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: linear-gradient(180deg, var(--bc-sidebar-bg), var(--bc-sidebar-bg-2));
    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 oklch(1 0 0 / 0.06);
}
.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: 14px; display: flex; flex-direction: column; gap: 2px; }
.bc-nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none;
    background: transparent; color: oklch(0.8 0.005 260); padding: 10px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
    transition: background-color .12s ease, color .12s ease;
}
.bc-nav-item:hover { background: var(--bc-sidebar-bg-hover); }
.bc-nav-item.active {
    background: linear-gradient(90deg, var(--bc-sidebar-bg-hover), var(--bc-sidebar-bg-2));
    color: #fff; box-shadow: inset 3px 0 0 var(--bc-primary);
}
.bc-nav-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.bc-sidebar-account { flex-shrink: 0; padding: 12px; border-top: 1px solid oklch(1 0 0 / 0.06); }
.bc-sidebar-account-btn {
    border: none; border-radius: 9px; padding: 8px 10px; color: oklch(0.85 0.005 260);
    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 oklch(1 0 0 / 0.06); }
.bc-sidebar-bottom-row .bc-sidebar-account { padding: 0; border-top: none; }

.bc-notif-bell-btn {
    position: relative; border: none; background: transparent; color: oklch(0.85 0.005 260);
    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);
}
.bc-notif-panel { width: 340px; padding: 0; overflow: hidden; }
.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 oklch(0.94 0.004 260); border-radius: 14px;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.03); 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; }

/* 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 oklch(0.94 0.004 260); border-radius: 14px; box-shadow: 0 1px 2px oklch(0 0 0 / 0.03); 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 oklch(0.94 0.004 260); border-radius: 14px;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.03);
}
.bc-klant-meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-klant-meta-value { font-size: 19px; font-weight: 700; font-family: 'Manrope', sans-serif; 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; }

#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: oklch(0.975 0.003 260 / 0.6); border: 1px solid var(--bc-border);
    border-radius: 14px; padding: 4px 8px 10px; transition: background-color .15s ease, box-shadow .15s ease;
}
.bc-kanban-column-head {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 8px 4px 10px;
}
.bc-kanban-column-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 16%, transparent); }
.bc-kanban-column-title {
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
    text-transform: uppercase; color: oklch(0.4 0.01 260);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.bc-kanban-column-count {
    margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--bc-text-muted);
    background: oklch(1 0 0 / 0.7); border: 1px solid var(--bc-border); border-radius: 999px;
    min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
}
.bc-kanban-column-body, .bc-pipeline-column-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 2px; }
.bc-kanban-column.bc-drop-target, .bc-pipeline-column.bc-drop-target { background-color: var(--bc-primary-tint); box-shadow: inset 0 0 0 2px var(--bc-primary); }

/* 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: oklch(1 0 0 / 0.8); color: oklch(0.25 0.01 260); }
.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: oklch(0.25 0.01 260); background: oklch(1 0 0 / 0.8) !important; border-radius: 5px; }

.bc-pipeline-add-column {
    width: 100%; height: 100%; min-height: 64px; border: 1.5px dashed var(--bc-border); border-radius: 14px;
    background: transparent; color: var(--bc-text-muted); font-weight: 600; font-size: 13px;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bc-pipeline-add-column:hover { border-color: var(--bc-primary); color: var(--bc-primary); background: var(--bc-primary-tint); }

@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: 'Manrope', sans-serif; font-weight: 700; 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: 22px; overflow-x: auto; padding-bottom: 8px; }
.bc-tkx-column-wrap { width: 300px; flex-shrink: 0; }
.bc-tkx-column {
    background: oklch(0.975 0.003 260 / 0.6); border: 1px solid var(--bc-border);
    border-radius: 14px; padding: 6px 10px 12px; min-height: 200px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.bc-tkx-column-head { display: flex; align-items: center; gap: 10px; padding: 12px 6px 14px; }
.bc-tkx-column-title {
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .04em;
    text-transform: uppercase; color: oklch(0.3 0.01 260);
}
.bc-tkx-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-tkx-column-body { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; min-height: 30px; }
.bc-tkx-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-tkx-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: 12px 14px;
    transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.bc-tkx-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-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-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--bc-text-muted); margin-bottom: 3px; }
.bc-tkx-card-title { font-size: 13.5px; font-weight: 500; line-height: 1.4; margin-bottom: 10px; color: oklch(0.25 0.01 260); }
.bc-tkx-card-bottom { display: flex; align-items: center; gap: 7px; }
.bc-tkx-card-key { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; flex-shrink: 0; color: var(--bc-text-muted); }
.bc-tkx-card-avatar { width: 20px; height: 20px; font-size: 9px; margin-left: auto; }

.bc-ticket-add-column {
    width: 100%; min-height: 64px; border: 1.5px dashed var(--bc-border); border-radius: 14px;
    background: transparent; color: var(--bc-text-muted); font-weight: 600; font-size: 13px;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bc-ticket-add-column:hover { border-color: var(--bc-primary); color: var(--bc-primary); background: var(--bc-primary-tint); }

.bc-task-card, .bc-pipeline-card {
    cursor: grab; background: #fff; border: 1px solid oklch(0.93 0.004 260); border-radius: 12px !important;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.045);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, opacity .14s ease;
}
.bc-task-card:hover, .bc-pipeline-card:hover {
    transform: translateY(-2px); box-shadow: 0 10px 20px -8px oklch(0 0 0 / 0.16), 0 2px 6px oklch(0 0 0 / 0.06);
    border-color: color-mix(in oklch, var(--bc-primary) 30%, oklch(0.93 0.004 260));
}
.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: oklch(0.94 0.004 260); border-radius: 10px;
}
.bc-kb-segmented .btn {
    border: none !important; border-radius: 7px !important; font-weight: 600; font-size: 13px;
    color: var(--bc-text-muted); background: transparent !important; box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.bc-kb-segmented .btn.bc-kb-active {
    background: #fff !important; color: oklch(0.25 0.01 260) !important;
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.12) !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; }

/* 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-/Lead-kaart detail) --- */
.bc-stage-stepper { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-stage-btn {
    border: 1px solid var(--bc-border); border-radius: 999px; background: #fff;
    padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--bc-text-muted);
    display: inline-flex; align-items: center; gap: 6px; 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: var(--bc-primary-darker); }
.bc-stage-btn:active:not(:disabled) { transform: scale(0.96); }
.bc-stage-btn:disabled { cursor: default; opacity: .7; }
.bc-stage-btn.is-done { background: var(--bc-primary-tint); border-color: transparent; color: var(--bc-primary-darker); }
.bc-stage-btn.is-done::before { content: '✓'; font-size: 10px; }
.bc-stage-btn.is-current {
    background: var(--bc-primary); border-color: transparent; color: #fff;
    box-shadow: 0 4px 10px -3px color-mix(in oklch, var(--bc-primary) 55%, transparent);
}
.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; }

/* --- 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: 8px 10px; border-radius: 9px;
    text-decoration: none; color: inherit; transition: background-color .12s ease;
}
.bc-ticket-file-row:hover { background: oklch(0.97 0.003 260); 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; }

/* --- 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; }
}

/* --- 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: 'Manrope', sans-serif; }
.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 — four equal-weight widget cards (Taken/Bundels/Creditcard-
   controles/Workflows), all sharing one card system so the page reads as a
   single cohesive dashboard rather than "left column = old style, right
   column = new style". --bc-primary threads through every card (top edge +
   link color); each card's icon badge carries its own soft-tinted hue,
   set inline per-instance from mijn-taken/index.php's $accents map. */
.bc-home-widget {
    background: #fff; border: 1px solid var(--bc-border); border-radius: 14px;
    padding: 18px 20px; box-shadow: 0 1px 3px oklch(0 0 0 / 0.05);
    border-top: 3px solid var(--bc-primary);
}
.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: 700; font-family: 'Manrope', sans-serif; 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; }

/* --- 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: oklch(0.96 0.006 260); }
.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: 5px; background: oklch(0.94 0.01 260);
    color: var(--bc-primary); 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 oklch(0.94 0.004 260); 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: oklch(0.98 0.004 260); }
.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-weight: 600; min-width: 160px; flex-shrink: 0; }
.bc-cc-month-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: auto; font-size: 13px; color: var(--bc-text-muted); }
.bc-cc-month-stat-value { font-weight: 700; color: var(--bc-text, #1b1f27); }
.bc-cc-month-badge { display: inline-flex; align-items: center; gap: 4px; }
.bc-cc-month-inner { padding: 0 18px 18px; border-top: 1px solid oklch(0.94 0.004 260); padding-top: 16px; }
@media (max-width: 768px) {
    .bc-cc-month-toggle { flex-wrap: wrap; }
    .bc-cc-month-stats { margin-left: 0; }
}

.bc-cc-subnav .nav-link { cursor: pointer; color: var(--bc-text-muted); font-weight: 600; font-size: 14px; }
.bc-cc-subnav .nav-link.active { color: var(--bc-primary); border-color: var(--bc-border) var(--bc-border) #fff; }

.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-table { table-layout: fixed; }
.bc-cc-table td { vertical-align: middle; }
.bc-cc-cell-truncate { overflow: hidden; }
.bc-cc-table th, .bc-cc-table td { 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 oklch(0.94 0.004 260); 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: oklch(0.98 0.004 260); }
.bc-cc-inkoper-toggle[aria-expanded="true"] .bc-cc-month-chevron { transform: rotate(90deg); }
.bc-cc-inkoper-title { font-weight: 600; }
.bc-cc-inkoper-stats { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 13px; color: var(--bc-text-muted); font-weight: 600; }

.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-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; }
.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 { max-height: 220px; overflow-y: auto; border-radius: 8px; margin-top: 6px; }
#wlFormResults: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; }

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