/* ============================================================================
/* v1.3.1/v0.4.40/v1.8.53 — AVG: fonts gehost via Bunny Fonts (GDPR-compliant CDN, geen tracking, geen IP-overdracht naar US-providers). */
   Ketenwacht — visual layer voor com_bpmnleveranciers v1.3.0
   "Security console" stijl: warm paper, ink-text, teal accent,
   semantische risico-kleuren, mono voor scores/ID's.
============================================================================ */

@import url('fonts.css');

/* v1.8.224 — CSS custom properties verplaatst naar :root.
   Voorheen scoped onder .kw-app, waardoor var() undefined was binnen
   .kw-page (vrijwel alle designer-pagina's gebruiken .kw-page als wrapper,
   niet .kw-app). Result: kw-btn-success/warn/danger pastel-backgrounds
   resolveerden naar "transparent" en de buttons leken wit.
   Door :root scope zijn ze nu globaal beschikbaar, ongeacht wrapper. */
:root {
    --kw-paper: #F4F2EC;
    --kw-surface: #FFFFFF;
    --kw-surface-alt: #FBFAF6;
    --kw-ink: #191B1F;
    --kw-ink-soft: #62656D;
    --kw-ink-faint: #6E7178;
    --kw-line: #E5E2D8;
    --kw-line-soft: #EFEDE5;

    --kw-accent: #0C7C75;
    --kw-accent-deep: #0A645E;
    --kw-accent-soft: #E2F1EF;

    --kw-crit-fg: #B42318;
    --kw-crit-bg: #FDE7E3;
    --kw-crit-dot: #D6402A;

    --kw-hoog-fg: #C2410C;
    --kw-hoog-bg: #FCEBDC;
    --kw-hoog-dot: #E0691F;

    --kw-mid-fg: #9A6700;
    --kw-mid-bg: #FBF1D2;
    --kw-mid-dot: #D6A211;

    --kw-laag-fg: #1F7A45;
    --kw-laag-bg: #DEF2E4;
    --kw-laag-dot: #2E9657;

    --kw-info-fg: #2B5CB8;
    --kw-info-bg: #E1EAF8;

    /* v1.8.228 — Table-header tokens (unified). Zie styleguide #007/#010/#011/#012/#029. */
    --kw-table-head-bg: #FBFAF6;
    --kw-table-head-height: 44px;
    --kw-radius-card: 14px;
}

.kw-app {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--kw-ink);
    background: var(--kw-paper);
    padding: 24px 26px;
    border-radius: 16px;
    border: 1px solid var(--kw-line);
}

.kw-app * { box-sizing: border-box; }

/* Mono font voor scores, ID's, datums */
.kw-mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-feature-settings: "tnum";
}

/* Headers + brand */
.kw-h1 { font-size: 22px; font-weight: 700; color: var(--kw-ink); margin: 0 0 6px; line-height: 1.2; }
.kw-h2 { font-size: 18px; font-weight: 700; color: var(--kw-ink); margin: 0 0 10px; }
.kw-h3 { font-size: 15px; font-weight: 600; color: var(--kw-ink); margin: 0 0 8px; }
.kw-sub { font-size: 13px; color: var(--kw-ink-soft); margin: 0; line-height: 1.55; }
.kw-brand-italic { font-family: 'Newsreader', serif; font-style: italic; }

/* Labels — kleine all-caps headers boven velden */
.kw-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--kw-ink-faint);
    margin-bottom: 5px;
}

.kw-meta { font-size: 12.5px; color: var(--kw-ink-soft); }
.kw-meta-small { font-size: 11.5px; color: var(--kw-ink-faint); }

/* Cards — warme surface met zachte border */
.kw-card {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: 14px;
    padding: 20px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.kw-card-tight { padding: 16px 18px; }
.kw-card-hover:hover { box-shadow: 0 6px 16px rgba(25,27,31,0.05); transform: translateY(-1px); }
.kw-card-inset {
    background: var(--kw-surface-alt);
    border: 1px solid var(--kw-line-soft);
    border-radius: 10px;
    padding: 14px;
}

/* Chips met optionele dot */
.kw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.kw-chip-dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.kw-chip.kw-crit  { color: var(--kw-crit-fg);  background: var(--kw-crit-bg); }
.kw-chip.kw-crit  .kw-chip-dot { background: var(--kw-crit-dot); }
.kw-chip.kw-hoog  { color: var(--kw-hoog-fg);  background: var(--kw-hoog-bg); }
.kw-chip.kw-hoog  .kw-chip-dot { background: var(--kw-hoog-dot); }
.kw-chip.kw-mid   { color: var(--kw-mid-fg);   background: var(--kw-mid-bg); }
.kw-chip.kw-mid   .kw-chip-dot { background: var(--kw-mid-dot); }
.kw-chip.kw-laag  { color: var(--kw-laag-fg);  background: var(--kw-laag-bg); }
.kw-chip.kw-laag  .kw-chip-dot { background: var(--kw-laag-dot); }
.kw-chip.kw-info  { color: var(--kw-info-fg);  background: var(--kw-info-bg); }
.kw-chip.kw-info  .kw-chip-dot { background: var(--kw-info-fg); }
.kw-chip.kw-muted { color: var(--kw-ink-soft); background: var(--kw-surface-alt); border-color: var(--kw-line); }
.kw-chip.kw-muted .kw-chip-dot { background: var(--kw-ink-faint); }

/* KPI cards */
.kw-kpi {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.kw-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.kw-kpi-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
}
.kw-kpi-val {
    font-family: 'IBM Plex Mono', monospace;
    font-feature-settings: "tnum";
    font-size: 30px;
    font-weight: 600;
    color: var(--kw-ink);
    line-height: 1;
}
.kw-kpi-sub { font-size: 12px; color: var(--kw-ink-soft); margin-top: 4px; }

/* KPI strip in header van detail */
.kw-kpi-strip {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}
.kw-kpi-stat { text-align: center; }
.kw-kpi-stat .kw-mono { font-size: 22px; font-weight: 600; }

/* Score-ring SVG */
.kw-ring { display: inline-block; position: relative; line-height: 0; }
.kw-ring-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 17px; font-weight: 600;
    color: var(--kw-ink);
    font-feature-settings: "tnum";
}

/* Tabs */
.kw-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--kw-line);
    margin-bottom: 20px;
}
.kw-tab {
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--kw-ink-soft);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease;
    text-decoration: none;
    margin-bottom: -1px;
    font-family: inherit;
}
.kw-tab:hover { color: var(--kw-accent-deep); }
.kw-tab.active { color: var(--kw-accent-deep); border-bottom-color: var(--kw-accent); }
.kw-tab .badge,
.kw-tab .kw-count {
    margin-left: 6px;
    background: var(--kw-line-soft);
    color: var(--kw-ink-soft);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

/* Buttons */
.kw-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform .12s ease, background .14s ease, box-shadow .14s ease;
    font-family: inherit;
}
.kw-btn:hover { transform: translateY(-1px); }
.kw-btn:active { transform: translateY(0); }
.kw-btn-primary  { background: var(--kw-accent); color: #fff; }
.kw-btn-primary:hover  { background: var(--kw-accent-deep); color: #fff; }
.kw-btn-dark     { background: var(--kw-ink); color: #fff; }
.kw-btn-ghost    { background: transparent; color: var(--kw-ink); border-color: var(--kw-line); }
.kw-btn-ghost:hover    { background: var(--kw-surface-alt); }
/* Pastel-gevulde varianten — identiek aan com_bpmnaudit (geen zichtbare rand, hover gaat naar diepe variant) */
/* v1.8.219 — !important op background + border ook bij hover om Astroid/Bootstrap-override
              te voorkomen (anders wint .btn:hover en wordt achtergrond wit, met witte tekst onleesbaar). */
.kw-btn-danger   { background: var(--kw-crit-bg) !important; color: var(--kw-crit-fg) !important; border-color: var(--kw-crit-bg) !important; }
.kw-btn-danger:hover   { background: var(--kw-crit-fg) !important; color: #fff !important; border-color: var(--kw-crit-fg) !important; }
.kw-btn-warn     { background: var(--kw-hoog-bg) !important; color: var(--kw-hoog-fg) !important; border-color: var(--kw-hoog-bg) !important; }
.kw-btn-warn:hover     { background: var(--kw-hoog-fg) !important; color: #fff !important; border-color: var(--kw-hoog-fg) !important; }
.kw-btn-success  { background: var(--kw-laag-bg) !important; color: var(--kw-laag-fg) !important; border-color: var(--kw-laag-bg) !important; }
/* v1.8.225 — hover-tekst zwart i.p.v. wit op verzoek */
.kw-btn-success:hover  { background: var(--kw-laag-fg) !important; color: #191B1F !important; border-color: var(--kw-laag-fg) !important; }
.kw-btn-sm       { padding: 6px 11px; font-size: 12.5px; }

/* v1.8.227 — Styleguide #010: list-view tabel (sortable).
   Voor processes-list, audits-list, suppliers-list in lijst-mode.
   Wrap in <div class="card" style="overflow:hidden"> voor card-look.
   Header-bg: #FBFAF6 (var --kw-table-head-bg). Border-radius 14px op
   table-niveau + per-hoekcell zodat de header netjes binnen de card past. */
.kw-list-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    margin-bottom: 0;
    border-radius: 14px;
    overflow: hidden;
}
.kw-list-table thead th {
    background: var(--kw-table-head-bg, #FBFAF6);
    border-bottom: 1px solid var(--kw-line, #E5E2D8);
    text-align: left;
    padding: 0 12px;
    height: var(--kw-table-head-height, 44px);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--kw-ink, #191B1F);
    user-select: none;
    vertical-align: middle;
}
.kw-list-table thead th:first-child { border-top-left-radius: 14px; }
.kw-list-table thead th:last-child  { border-top-right-radius: 14px; }
.kw-list-table thead th.sortable, .kw-list-table thead th.bpmn-sortable { cursor: pointer; }
.kw-list-table thead th.sortable::after, .kw-list-table thead th.bpmn-sortable::after {
    content: " ⇅";
    color: var(--kw-ink-faint, #6E7178);
    font-size: 10px;
    margin-left: 2px;
}
.kw-list-table thead th.bpmn-sortable .bpmn-sort-icon { display: none; }
.kw-list-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--kw-line-soft, #EFEDE5);
    vertical-align: middle;
}
.kw-list-table tbody tr:last-child td { border-bottom: 0; }
.kw-list-table tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
.kw-list-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 14px; }
.kw-list-table tbody tr:hover { background: var(--kw-surface-alt, #FBFAF6); }
.kw-list-table .thumb-tiny {
    width: 56px; height: 42px;
    background: var(--kw-line-soft, #EFEDE5);
    border-radius: 4px;
}

/* v1.8.230 — Styleguide overlay voor de detail-views (risks/racis/kpis/policies/files).
   Trekt Bootstrap card + card-header + table-thead consistent met styleguide
   #002/#010/#012 zonder dat elke tmpl-file herschreven hoeft.
   v1.8.232 — border-top en border-left zonder !important zodat inline accent-strips
              op activity/risk/kpi/policy cards in proces-viewer blijven werken
              (vb. style="border-left:4px solid #C2410C"). */
.kw-app .card {
    border-top: 1px solid var(--kw-line, #E5E2D8);
    border-right: 1px solid var(--kw-line, #E5E2D8) !important;
    border-bottom: 1px solid var(--kw-line, #E5E2D8) !important;
    border-left: 1px solid var(--kw-line, #E5E2D8);
    border-radius: 14px !important;
    overflow: hidden;
}
/* v1.8.237 — Exact pixel-perfect match met de TH (#010 / #007). Eerdere
   10px 14px padding + 13.5px font maakte de card-header zwaarder/groter
   dan de TH (12.5px, padding 0 12px, height 44px). Beide moeten visueel
   identiek zijn dus we trekken alle relevante eigenschappen gelijk:
     - font-size 12.5px (was 13.5)
     - padding 0 14px (was 10px 14px) → 44px exact bij single-line
     - font-weight 600 met !important + override op <strong>/<b> default 700
     - line-height 1.4
   Multi-line content (preview-pane) blijft werken: min-height i.p.v.
   fixed height, flex-column centreert content. */
/* v1.8.238 — flex-direction: column verwijderd. Default = row + align-center.
   Veel templates hebben "d-flex align-items-center justify-content-between"
   ON de card-header (bv. Procesdiagram header met titel + meta + knoppenrij).
   Onze v1.8.237 flex-column forceerde die rijen op 2 regels. Default row laat
   die templates intact. Voor genest 2-rij content (preview-pane) wikkelen
   we de child-divs in een eigen flex-column container in het template. */
.kw-app .card-header {
    background: var(--kw-table-head-bg, #FBFAF6) !important;
    border-bottom: 1px solid var(--kw-line, #E5E2D8) !important;
    min-height: var(--kw-table-head-height, 44px) !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--kw-ink, #191B1F) !important;
    display: flex !important;
    align-items: center;
    line-height: 1.4;
}
/* Normaliseer browser-default <strong>/<b> (700) naar de styleguide-
   weight 600. Voor "Afdelingen" / "Selecteer een proces" zat er een
   <strong> omheen die door de browser dikker werd gerenderd dan TH-tekst. */
.kw-app .card-header strong,
.kw-app .card-header b {
    font-weight: 600 !important;
    font-size: inherit;
}
/* Card-header met een d-flex direct kind blijft horizontale layout houden;
   bv. <div class="card-header"><div class="d-flex justify-content-between">…</div></div> */
.kw-app .card-header > .d-flex { width: 100%; }

/* v1.8.241 — Styleguide #007 sidebar nav classes (sync uit IntelDesk-styleguide.html v1.2).
   Gebruikt voor "Afdelingen"-paneel op de processes-lijstpagina en overal waar een sticky
   linker-navigatie met items + count-badges nodig is. */
.kw-app .kw-sidebar-card {
    background: var(--kw-surface, #FFFFFF);
    border: 1px solid var(--kw-line, #E5E2D8);
    border-radius: 14px;
    overflow: hidden;
}
.kw-app .kw-sidebar-header {
    background: var(--kw-table-head-bg, #FBFAF6);
    border-bottom: 1px solid var(--kw-line, #E5E2D8);
    padding: 0 14px;
    min-height: var(--kw-table-head-height, 44px);
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--kw-ink, #191B1F);
    line-height: 1.4;
}
.kw-app .kw-sidebar-body { padding: 10px; }
.kw-app .kw-sidebar-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--kw-ink, #191B1F);
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 2px;
}
.kw-app .kw-sidebar-item:hover {
    background: var(--kw-line-soft, #EFECE4);
    color: var(--kw-ink, #191B1F);
}
.kw-app .kw-sidebar-item.active {
    background: var(--kw-accent, #0C7C75) !important;
    color: #FFFFFF !important;
}
.kw-app .kw-sidebar-item.active .kw-sidebar-badge,
.kw-app .kw-sidebar-item.active .badge {
    background: rgba(255,255,255,0.25) !important;
    color: #FFFFFF !important;
}
.kw-app .kw-sidebar-badge,
.kw-app .kw-sidebar-item .badge {
    margin-left: auto;
    background: var(--kw-line-soft, #EFECE4);
    color: var(--kw-ink-soft, #62656D);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
}
/* Geneste subcategorie-lijst: zelfde stijl, kleiner inspringen + iets smaller font */
.kw-app .kw-sidebar-sub {
    list-style: none;
    margin: 4px 0 6px 18px;
    padding: 0;
}
.kw-app .kw-sidebar-sub .kw-sidebar-item {
    font-size: 12.5px;
    padding: 4px 10px;
}

/* v1.8.243 — Styleguide #021 heatmap (5×5 risico-matrix).
   CSS-grid i.p.v. Bootstrap table. 5 niveaus l1 (pastel-groen) → l5 (diep-rood). */
.kw-app .kw-heatmap {
    display: grid;
    grid-template-columns: 110px repeat(5, 1fr);
    gap: 4px;
    font-size: 12px;
    max-width: 640px;
}
.kw-app .kw-heat-corner { background: transparent; }
.kw-app .kw-heat-axis {
    padding: 6px;
    color: var(--kw-ink-soft, #62656D);
    font-weight: 600;
    text-align: center;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kw-app .kw-heat-cell {
    aspect-ratio: 1.5/1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: default;
}
.kw-app .kw-heat-cell.l1 { background: #DEF2E4; color: #1F7A45; }
.kw-app .kw-heat-cell.l2 { background: #B7DDC2; color: #195A33; }
.kw-app .kw-heat-cell.l3 { background: #F0DBA0; color: #6B4B00; }
.kw-app .kw-heat-cell.l4 { background: #F2A075; color: #6B2400; }
.kw-app .kw-heat-cell.l5 { background: #C2410C; color: #FFFFFF; }
.kw-app .kw-heat-cell.l0 { background: #F4F2EC; color: #6E7178; }
.kw-app .kw-heat-legend {
    text-align: center;
    color: var(--kw-ink-soft, #62656D);
    font-size: 12px;
    margin-top: 10px;
}
/* Tables inside .kw-app cards get the styleguide thead look. */
.kw-app .card .table thead th,
.kw-app .card table thead th {
    background: var(--kw-table-head-bg, #FBFAF6) !important;
    border-bottom: 1px solid var(--kw-line, #E5E2D8) !important;
    border-top: 0 !important;
    height: var(--kw-table-head-height, 44px);
    padding: 0 12px !important;
    vertical-align: middle !important;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--kw-ink, #191B1F);
}
.kw-app .card .table tbody td { vertical-align: middle; }
/* Compact display-6 KPI numbers to mono-style (styleguide #002). */
.kw-app .card .display-6 {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
}
.kw-app .card small.text-muted {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kw-ink-faint, #6E7178) !important;
}
/* Map Bootstrap alert-info "empty state" to styleguide #015 look. */
.kw-app > .alert.alert-info,
.kw-app .alert.alert-info:only-child {
    background: var(--kw-surface, #FFFFFF) !important;
    color: var(--kw-ink-soft, #62656D) !important;
    border: 1px solid var(--kw-line, #E5E2D8) !important;
    border-radius: 14px !important;
    padding: 40px 20px !important;
    text-align: center;
    font-size: 13.5px;
}
.kw-app .card-header .badge { font-weight: 600; }

/* Specifieke kleuren voor proces-archiveer-knop — request Patrick */
.kw-btn.bpmn-archive-process { background: #fbe9d9 !important; color: #af4a2f !important; border-color: #fbe9d9 !important; }
.kw-btn.bpmn-archive-process:hover { background: #af4a2f !important; color: #fff !important; border-color: #af4a2f !important; }

/* View-mode switcher */
.kw-mode-switcher {
    display: inline-flex;
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: 9px;
    padding: 3px;
}
.kw-mode-switcher a, .kw-mode-switcher button {
    background: transparent; border: 0; font-family: inherit; cursor: pointer;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kw-ink-soft);
    border-radius: 6px;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}
.kw-mode-switcher a.active, .kw-mode-switcher button.active, .kw-mode-switcher .bpmn-view-btn.active {
    background: var(--kw-accent);
    color: #fff;
}
.kw-mode-switcher a:hover:not(.active), .kw-mode-switcher button:hover:not(.active) {
    color: var(--kw-ink);
    background: var(--kw-surface-alt);
}

/* Table */
.kw-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--kw-surface);
}
.kw-table thead tr {
    background: var(--kw-surface-alt);
}
.kw-table th {
    padding: 12px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--kw-ink-faint);
    border-bottom: 1px solid var(--kw-line);
}
.kw-table td {
    padding: 13px 14px;
    font-size: 13.5px;
    color: var(--kw-ink);
    border-bottom: 1px solid var(--kw-line-soft);
    vertical-align: middle;
}
.kw-table tbody tr {
    transition: background .14s ease;
    cursor: pointer;
}
.kw-table tbody tr:hover { background: var(--kw-surface-alt); }
.kw-table tbody tr:last-child td { border-bottom: none; }
.kw-table-wrap {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: 14px;
    overflow: hidden;
}

/* Tile-grid */
.kw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kw-tile {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.kw-tile:hover {
    box-shadow: 0 8px 20px rgba(25,27,31,0.06);
    transform: translateY(-2px);
    border-color: var(--kw-accent-soft);
}
.kw-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.kw-tile-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--kw-ink);
    margin: 0 0 4px;
}
.kw-tile-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--kw-ink-faint);
}
.kw-tile-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--kw-line-soft);
}

/* Preview pane (list-left + detail-right) */
.kw-preview-list {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: 14px;
    overflow: hidden;
    max-height: 720px;
    overflow-y: auto;
}
.kw-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--kw-line-soft);
    text-decoration: none;
    color: var(--kw-ink);
    cursor: pointer;
    transition: background .14s ease;
}
.kw-preview-item:hover { background: var(--kw-surface-alt); color: var(--kw-ink); }
.kw-preview-item.active { background: var(--kw-accent); color: #fff; border-bottom-color: var(--kw-accent-deep); }
.kw-preview-item.active .kw-preview-sub { color: rgba(255,255,255,0.75); }
.kw-preview-item:last-child { border-bottom: none; }
.kw-preview-name { font-size: 13.5px; font-weight: 600; }
.kw-preview-sub { font-size: 11.5px; color: var(--kw-ink-soft); margin-top: 2px; }
.kw-preview-score {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 12.5px;
    padding: 3px 8px;
    border-radius: 6px;
}

/* Alert / banner */
.kw-alert {
    border-radius: 11px;
    padding: 12px 16px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.55;
}
.kw-alert-warning { background: var(--kw-hoog-bg); color: var(--kw-hoog-fg); border: 1px solid rgba(192,65,12,0.18); }
.kw-alert-danger  { background: var(--kw-crit-bg); color: var(--kw-crit-fg); border: 1px solid rgba(180,35,24,0.18); }
.kw-alert-info    { background: var(--kw-accent-soft); color: var(--kw-accent-deep); border: 1px solid rgba(12,124,117,0.18); }
.kw-alert-mute    { background: var(--kw-surface-alt); color: var(--kw-ink-soft); border: 1px solid var(--kw-line-soft); }

/* Field row in detail */
.kw-field { margin-bottom: 14px; }
.kw-field-val { font-size: 14px; color: var(--kw-ink); }
.kw-field-val.kw-mono { font-weight: 500; }

/* Quick-stat row */
.kw-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

/* Form-controls binnen .kw-app */
.kw-app input[type="text"],
.kw-app input[type="email"],
.kw-app input[type="number"],
.kw-app input[type="date"],
.kw-app input[type="datetime-local"],
.kw-app input[type="tel"],
.kw-app input[type="search"],
.kw-app select,
.kw-app textarea {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--kw-ink);
    width: 100%;
    font-family: inherit;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.kw-app input:focus,
.kw-app select:focus,
.kw-app textarea:focus {
    outline: none;
    border-color: var(--kw-accent);
    box-shadow: 0 0 0 3px var(--kw-accent-soft);
}
.kw-app label.form-label,
.kw-app .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--kw-ink-soft);
    margin-bottom: 5px;
    display: block;
}

/* Repeating row in form */
.kw-row-list .bpmn-row,
.kw-app .bpmn-row {
    background: var(--kw-surface-alt);
    border: 1px solid var(--kw-line-soft);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
}

/* Sub-section divider */
.kw-divider {
    height: 1px;
    background: var(--kw-line-soft);
    margin: 18px 0;
}

/* Empty state */
.kw-empty {
    padding: 32px;
    text-align: center;
    color: var(--kw-ink-faint);
    font-size: 13.5px;
}

/* Search bar */
.kw-search-wrap { position: relative; }
.kw-search-wrap input { padding-left: 36px; }
.kw-search-wrap .kw-search-icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--kw-ink-faint);
    pointer-events: none;
}

/* Header strip (terug-knop + acties) */
.kw-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.kw-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--kw-ink-soft);
    text-decoration: none;
    transition: color .14s ease;
}
.kw-back:hover { color: var(--kw-accent-deep); }

/* Fade-in entry */
.kw-fade { animation: kwFade .35s ease both; }
@keyframes kwFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Inline icon */
.kw-ico {
    display: inline-flex;
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: currentColor;
    vertical-align: -3px;
}
.kw-ico-lg { width: 20px; height: 20px; }
.kw-ico-bg {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--kw-accent-soft);
    color: var(--kw-accent-deep);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kw-ico-bg.kw-warn { background: var(--kw-hoog-bg); color: var(--kw-hoog-fg); }
.kw-ico-bg.kw-danger { background: var(--kw-crit-bg); color: var(--kw-crit-fg); }

/* Helper: text colors */
.kw-text-accent { color: var(--kw-accent-deep); }
.kw-text-crit { color: var(--kw-crit-fg); }
.kw-text-hoog { color: var(--kw-hoog-fg); }
.kw-text-mid  { color: var(--kw-mid-fg); }
.kw-text-laag { color: var(--kw-laag-fg); }
.kw-text-muted { color: var(--kw-ink-soft); }
.kw-text-faint { color: var(--kw-ink-faint); }

/* ============================================================================
   v1.8.52 — Bootstrap-override layer binnen .kw-app
   Zorgt dat bestaande Bootstrap-classes (btn, badge, card, nav-tabs)
   binnen com_bpmndesigner een Ketenwacht-uiterlijk krijgen zonder dat
   alle templates herschreven hoeven te worden.
============================================================================ */

.kw-app .btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    padding: 8px 14px;
    transition: transform .12s ease, background .14s ease, box-shadow .14s ease;
}
.kw-app .btn:hover { transform: translateY(-1px); }
.kw-app .btn-primary {
    background: var(--kw-accent);
    border-color: var(--kw-accent);
}
.kw-app .btn-primary:hover,
.kw-app .btn-primary:focus {
    background: var(--kw-accent-deep);
    border-color: var(--kw-accent-deep);
}
.kw-app .btn-success { background: var(--kw-laag-fg); border-color: var(--kw-laag-fg); }
.kw-app .btn-danger  { background: var(--kw-crit-fg); border-color: var(--kw-crit-fg); }
.kw-app .btn-warning { background: var(--kw-hoog-fg); border-color: var(--kw-hoog-fg); color: #fff; }
.kw-app .btn-info    { background: var(--kw-info-fg); border-color: var(--kw-info-fg); color: #fff; }
.kw-app .btn-outline-primary {
    color: var(--kw-accent);
    border-color: var(--kw-accent);
    background: transparent;
}
.kw-app .btn-outline-primary:hover {
    background: var(--kw-accent);
    color: #fff;
    border-color: var(--kw-accent);
}
.kw-app .btn-outline-secondary {
    color: var(--kw-ink);
    border-color: var(--kw-line);
    background: var(--kw-surface);
}
.kw-app .btn-outline-secondary:hover {
    background: var(--kw-surface-alt);
    color: var(--kw-ink);
    border-color: var(--kw-line);
}
.kw-app .btn-outline-danger {
    color: var(--kw-crit-fg);
    border-color: var(--kw-crit-fg);
    background: transparent;
}
.kw-app .btn-outline-danger:hover {
    background: var(--kw-crit-fg);
    color: #fff;
}
.kw-app .btn-outline-success {
    color: var(--kw-laag-fg);
    border-color: var(--kw-laag-fg);
    background: transparent;
}
.kw-app .btn-outline-success:hover {
    background: var(--kw-laag-fg);
    color: #fff;
}

.kw-app .badge {
    font-weight: 600;
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 999px;
}
.kw-app .badge.bg-primary,
.kw-app .badge.bg-info    { background-color: var(--kw-info-bg) !important; color: var(--kw-info-fg) !important; }
.kw-app .badge.bg-success { background-color: var(--kw-laag-bg) !important; color: var(--kw-laag-fg) !important; }
.kw-app .badge.bg-warning { background-color: var(--kw-mid-bg) !important;  color: var(--kw-mid-fg) !important; }
.kw-app .badge.bg-danger  { background-color: var(--kw-crit-bg) !important; color: var(--kw-crit-fg) !important; }
.kw-app .badge.bg-secondary,
.kw-app .badge.bg-dark    { background-color: var(--kw-line-soft) !important; color: var(--kw-ink-soft) !important; }
.kw-app .badge.bg-light   { background-color: var(--kw-surface-alt) !important; color: var(--kw-ink-soft) !important; }

/* v1.8.234 — DUPLICATE removed.
   De oudere .kw-app .card-header definitie hier (zonder !important,
   padding 11px 16px, font-size 14px) overschreef de styleguide-overlay
   bovenaan (regel 320) waardoor het #FBFAF6 bg + 44px min-height patroon
   niet meer werkte op de processes-page (sidebar "Afdelingen" + preview-
   pane-header). Card-header styling staat nu uitsluitend bij regel 320. */
.kw-app .card-body { padding: 16px; }

.kw-app .nav-tabs {
    border-bottom: 1px solid var(--kw-line);
    gap: 4px;
}
.kw-app .nav-tabs .nav-link {
    color: var(--kw-ink-soft);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 600;
    background: transparent;
    border-radius: 0;
}
.kw-app .nav-tabs .nav-link:hover {
    color: var(--kw-accent-deep);
    background: transparent;
    border-color: transparent transparent transparent;
}
.kw-app .nav-tabs .nav-link.active {
    color: var(--kw-accent-deep);
    border-bottom-color: var(--kw-accent);
    background: transparent;
}

.kw-app h1, .kw-app .h1 { font-size: 22px; font-weight: 700; color: var(--kw-ink); margin: 0 0 6px; }
.kw-app h2, .kw-app .h2 { font-size: 19px; font-weight: 700; color: var(--kw-ink); }
.kw-app h3, .kw-app .h3 { font-size: 16px; font-weight: 700; color: var(--kw-ink); }
.kw-app h4, .kw-app .h4 { font-size: 14.5px; font-weight: 700; color: var(--kw-ink); }
.kw-app .h6 { font-size: 13.5px; font-weight: 700; color: var(--kw-ink); text-transform: none; letter-spacing: 0; }

.kw-app .table {
    background: var(--kw-surface);
    color: var(--kw-ink);
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.kw-app .table thead th {
    background: var(--kw-surface-alt);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kw-ink-faint);
    border-bottom: 1px solid var(--kw-line);
    padding: 12px 14px;
}
.kw-app .table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--kw-line-soft);
    font-size: 13.5px;
}
.kw-app .table-hover tbody tr:hover { background: var(--kw-surface-alt); }

.kw-app .alert {
    border-radius: 10px;
    border: 1px solid;
    padding: 12px 16px;
    font-size: 13.5px;
}
.kw-app .alert-info    { background: var(--kw-accent-soft); color: var(--kw-accent-deep); border-color: rgba(12,124,117,0.18); }
.kw-app .alert-success { background: var(--kw-laag-bg); color: var(--kw-laag-fg); border-color: rgba(31,122,69,0.15); }
.kw-app .alert-warning { background: var(--kw-mid-bg); color: var(--kw-mid-fg); border-color: rgba(154,103,0,0.15); }
.kw-app .alert-danger  { background: var(--kw-crit-bg); color: var(--kw-crit-fg); border-color: rgba(180,35,24,0.15); }

.kw-app .form-control,
.kw-app .form-select {
    border-color: var(--kw-line);
    border-radius: 8px;
    background: var(--kw-surface);
    color: var(--kw-ink);
    font-size: 13.5px;
}
.kw-app .form-control:focus,
.kw-app .form-select:focus {
    border-color: var(--kw-accent);
    box-shadow: 0 0 0 3px var(--kw-accent-soft);
}
.kw-app .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--kw-ink-soft);
}

.kw-app .text-muted { color: var(--kw-ink-soft) !important; }
.kw-app a { color: var(--kw-accent-deep); }
.kw-app a:hover { color: var(--kw-accent); }

.kw-app .btn-group .btn { border-radius: 0; }
.kw-app .btn-group .btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.kw-app .btn-group .btn:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.kw-app .btn-group .btn.active {
    background: var(--kw-accent);
    color: #fff;
    border-color: var(--kw-accent);
}

/* ============================================================================
   v1.3.2 / v0.4.42 / v1.8.56 — Background + accent fallback layer.
   Zorgt dat de Ketenwacht-paper achtergrond, teal-accent en KW-typografie ALTIJD
   zichtbaar zijn, ook in templates die geen .kw-app wrapper hebben en op
   pages waar Bootstrap-overrides van .kw-app niet greppen.
============================================================================ */

.com-bpmndesigner-dashboard, .com-bpmndesigner-processes, .com-bpmndesigner-process,
.com-bpmndesigner-risks, .com-bpmndesigner-definitions, .com-bpmndesigner-racis,
.com-bpmndesigner-kpis, .com-bpmndesigner-policies, .com-bpmndesigner-files,
.com-bpmndesigner-archive, .com-bpmndesigner-templates, .com-bpmndesigner-tenantconfig,
.com-bpmndesigner-edit, .com-bpmndesigner-history, .com-bpmndesigner-search,
.com-bpmndesigner-users, .com-bpmndesigner-profile,
.com-bpmnaudit, .com-bpmnaudit-archive, .com-bpmnaudit-runner,
.com-bpmnaudit-report, .com-bpmnaudit-licenses,
.com-bpmnleveranciers-front, .com-bpmnleveranciers-detail {
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    background: #F4F2EC;
    padding: 24px 26px;
    border-radius: 16px;
    /* v1.8.57: border verwijderd — voorkomt dubbele rand bij kw-card sub-elementen */
    color: #191B1F;
}

/* Hoofdtekst */
.com-bpmndesigner-dashboard p, .com-bpmndesigner-processes p,
.com-bpmnaudit p, .com-bpmnleveranciers-front p {
    color: #4A5D72;
}

/* Mono cijfers/datums */
.com-bpmndesigner-dashboard .display-6, .com-bpmndesigner-processes .kw-mono,
.bpmn-mono, .bpmn-score {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-feature-settings: "tnum";
}

/* Cards lichter accent */
.com-bpmndesigner-dashboard .card-header,
.com-bpmnaudit .card-header,
.com-bpmnleveranciers-front .card-header {
    background: #FBFAF6;
    color: #191B1F;
    font-weight: 600;
}

/* Bootstrap-primary overal teal binnen onze componenten */
.com-bpmndesigner-processes .btn-primary, .com-bpmndesigner-process .btn-primary,
.com-bpmnaudit .btn-primary, .com-bpmnleveranciers-front .btn-primary,
.com-bpmnleveranciers-detail .btn-primary {
    background: #0C7C75 !important;
    border-color: #0C7C75 !important;
}
.com-bpmndesigner-processes a, .com-bpmndesigner-process a,
.com-bpmnaudit a, .com-bpmnleveranciers-front a {
    color: #0A645E;
}
.com-bpmndesigner-processes a:hover, .com-bpmnaudit a:hover {
    color: #0C7C75;
}


/* ============================================================
   #037 — Rich form pattern (teal-themed soft-fill inputs).
   v1.8.285 — Styleguide-conform invoervelden voor edit-vormen.
   Scope-class .kw-richform-scope laat ALLE form-controls binnen
   het element automatisch de rich-form-look krijgen, zodat ook
   dynamisch gerenderde tabs (RACI, KPI, Risks, ...) meegaan.
   ============================================================ */
.kw-richform-scope {
    --kw-rf-field-bg:          #F4F6F6;
    --kw-rf-field-bg-hover:    #EFF2F2;
    --kw-rf-field-border:      #C2CECB;
    --kw-rf-field-border-hover:#A9B8B4;
    --kw-rf-auto-bg:           rgba(12,124,117,0.10);
    --kw-rf-auto-border:       rgba(12,124,117,0.30);
    --kw-rf-ring:              rgba(12,124,117,0.18);
    --kw-rf-accent:            #0C7C75;
}

/* Generieke vorm voor ALLE input-velden binnen scope (form-control + form-select). */
.kw-richform-scope .form-control,
.kw-richform-scope .form-select,
.kw-richform-scope input[type="text"]:not(.bpmn-skip-rf),
.kw-richform-scope input[type="number"]:not(.bpmn-skip-rf),
.kw-richform-scope input[type="email"]:not(.bpmn-skip-rf),
.kw-richform-scope input[type="url"]:not(.bpmn-skip-rf),
.kw-richform-scope input[type="search"]:not(.bpmn-skip-rf),
.kw-richform-scope input[type="tel"]:not(.bpmn-skip-rf),
.kw-richform-scope input[type="date"]:not(.bpmn-skip-rf),
.kw-richform-scope input[type="datetime-local"]:not(.bpmn-skip-rf),
.kw-richform-scope select:not(.bpmn-skip-rf),
.kw-richform-scope textarea:not(.bpmn-skip-rf) {
    appearance: none;
    background: var(--kw-rf-field-bg);
    border: 1.5px solid var(--kw-rf-field-border);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14.5px;
    color: #16201E;
    box-shadow: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.kw-richform-scope textarea { min-height: 96px; line-height: 1.5; }
.kw-richform-scope .form-control:hover,
.kw-richform-scope .form-select:hover,
.kw-richform-scope input:hover:not(.bpmn-skip-rf),
.kw-richform-scope select:hover:not(.bpmn-skip-rf),
.kw-richform-scope textarea:hover:not(.bpmn-skip-rf) {
    background: var(--kw-rf-field-bg-hover);
    border-color: var(--kw-rf-field-border-hover);
}
.kw-richform-scope .form-control:focus,
.kw-richform-scope .form-select:focus,
.kw-richform-scope input:focus:not(.bpmn-skip-rf),
.kw-richform-scope select:focus:not(.bpmn-skip-rf),
.kw-richform-scope textarea:focus:not(.bpmn-skip-rf) {
    outline: none;
    background: #fff;
    border-color: var(--kw-rf-accent);
    box-shadow: 0 0 0 4px var(--kw-rf-ring);
}
.kw-richform-scope .form-control::placeholder,
.kw-richform-scope textarea::placeholder { color: #97A4A1; }

/* Compactere variant voor inline cards (RACI rij, etc.) */
.kw-richform-scope .form-control-sm,
.kw-richform-scope .form-select-sm {
    padding: 8px 12px;
    font-size: 13.5px;
    border-radius: 8px;
}

/* Pijltje voor selects */
.kw-richform-scope .form-select,
.kw-richform-scope select:not(.bpmn-skip-rf) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2362656D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Labels in scope iets prominenter */
.kw-richform-scope label,
.kw-richform-scope .form-label,
.kw-richform-scope .col-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #1B2624;
    letter-spacing: 0.005em;
    margin-bottom: 6px;
}

/* Auto / readonly velden — teal-tinted dashed */
.kw-richform-scope input[readonly]:not(.bpmn-skip-rf),
.kw-richform-scope textarea[readonly]:not(.bpmn-skip-rf),
.kw-richform-scope .kw-rf-auto {
    background: var(--kw-rf-auto-bg) !important;
    border: 1.5px dashed var(--kw-rf-auto-border) !important;
    color: var(--kw-rf-accent) !important;
    font-weight: 600;
    cursor: not-allowed;
}
.kw-richform-scope input[readonly]:hover { background: var(--kw-rf-auto-bg) !important; }

/* Form-switch behoudt zijn eigen styling — niet overschrijven */
.kw-richform-scope .form-check-input { background-color: #fff; border-color: var(--kw-rf-field-border); }
.kw-richform-scope .form-check-input:checked { background-color: var(--kw-rf-accent); border-color: var(--kw-rf-accent); }

/* Form-row spacing iets ruimer */
.kw-richform-scope .mb-3 { margin-bottom: 18px !important; }
.kw-richform-scope .row { row-gap: 6px; }

/* ============================================================
   v1.8.291 — Fix voor Joomla-calendar popup die door parent
   overflow:hidden werd afgekapt op de proces-edit-pagina.
   De popup krijgt een hoge z-index en de containers krijgen
   overflow:visible. Position:fixed op de popup zorgt dat hij
   nooit door een parent kan worden geclippt.
   ============================================================ */
.kw-richform-scope .card,
.kw-richform-scope .card-body,
.kw-richform-scope .tab-content,
.kw-richform-scope .tab-pane,
.kw-richform-scope .col,
.kw-richform-scope [class*="col-"],
.kw-richform-scope .row,
.kw-richform-scope .form-group,
.kw-richform-scope .field-calendar {
    overflow: visible !important;
}

/* v1.8.318 — Joomla's kalender-popup wordt UITGESCHAKELD. We tekenen onze
   eigen custom date-picker (.kw-datepicker) via JS in edit.php. Joomla's
   webcomponent-popup is niet meer te controleren op eerste render, dus
   verbergen we hem volledig zodat er nooit een flash of race kan zijn. */
.field-calendar-modal,
.js-calendar,
.field-calendar-dropdown,
joomla-field-calendar .field-calendar-dropdown,
#dp_calendar,
.mini-calendar,
[id$="_container"] .js-calendar,
[id$="_container"].field-calendar-modal,
[id^="jform_"][id$="_container"] {
    display: none !important;
    visibility: hidden !important;
}

/* --- Custom date picker (.kw-datepicker) --------------------------------- */
.kw-datepicker {
    position: fixed;
    z-index: 100000;
    background: #ffffff;
    border: 1px solid var(--kw-border, #d9d9d9);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    padding: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    user-select: none;
    min-width: 260px;
    max-width: 300px;
}
.kw-datepicker__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 6px;
}
.kw-datepicker__title {
    font-weight: 600;
    color: var(--kw-text, #1e2a34);
    flex: 1;
    text-align: center;
}
.kw-datepicker__nav {
    background: transparent;
    border: 1px solid var(--kw-border, #d9d9d9);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    line-height: 1;
    cursor: pointer;
    color: var(--kw-text, #1e2a34);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.kw-datepicker__nav:hover {
    background: var(--kw-hover, #f2efe8);
}
.kw-datepicker__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: 0.72rem;
    color: #7a8794;
    text-align: center;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 600;
}
.kw-datepicker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.kw-datepicker__day {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 0;
    cursor: pointer;
    color: var(--kw-text, #1e2a34);
    font-size: 0.85rem;
    text-align: center;
    font-family: inherit;
    line-height: 1;
}
.kw-datepicker__day:hover {
    background: var(--kw-hover, #f2efe8);
}
.kw-datepicker__day--other {
    color: #b7c0c9;
}
.kw-datepicker__day--today {
    border-color: var(--kw-primary, #10a897);
    font-weight: 700;
}
.kw-datepicker__day--selected {
    background: var(--kw-primary, #10a897);
    color: #ffffff;
    font-weight: 700;
}
.kw-datepicker__day--selected:hover {
    background: var(--kw-primary, #10a897);
}
.kw-datepicker__ftr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--kw-border, #efece5);
    gap: 6px;
}
.kw-datepicker__btn {
    background: transparent;
    border: 1px solid var(--kw-border, #d9d9d9);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--kw-text, #1e2a34);
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.2;
}
.kw-datepicker__btn:hover {
    background: var(--kw-hover, #f2efe8);
}
.kw-datepicker__btn--primary {
    background: var(--kw-primary, #10a897);
    border-color: var(--kw-primary, #10a897);
    color: #ffffff;
}
.kw-datepicker__btn--primary:hover {
    background: #0e968a;
}

/* Als de popup expliciet als inline-block/relatief ge-styled wordt,
   forceer minstens een hoge z-index bovenop drawer/tabs. */
.kw-richform-scope .field-calendar,
.kw-richform-scope .field-calendar * {
    z-index: 100 !important;
}

/* v1.8.318 — Verberg bpmn-js drilldown-arrow op collapsed subprocess/callActivity
   shapes. Deze blauwe pijl-knop verschijnt automatisch van bpmn-js en biedt
   navigatie naar de sub-diagram — die functionaliteit gebruiken wij niet
   (sub-processen worden via de "Sub-proces" tab gekoppeld). */
.bjs-drilldown,
.djs-overlay-drilldown {
    display: none !important;
}

/* ===== v1.8.319 — Proces-labels (chips) =====
   De kleuren staan bewust inline (uit LabelHelper::colorFor), want ze worden
   per label berekend. Hier alleen het gedrag dat voor alle chips geldt. */
.kw-label-chip { transition: filter .12s ease, box-shadow .12s ease; }
a.kw-label-chip:hover { filter: brightness(0.96); box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
a.kw-label-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
/* v1.8.322 — Chips altijd links uitlijnen. De inline-style dekt de meeste
   gevallen af; deze regel wint alsnog wanneer een template of het Joomla-
   sjabloon text-align/justify-content op de omliggende cel of card zet. */
.kw-label-chips {
    max-width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100%;
    margin-inline: 0 auto;
}
/* Ook de directe wrapper-div die de chips-rij draagt, links houden. */
.kw-app td .kw-label-chips,
.kw-app .card-body .kw-label-chips { margin-left: 0; }

/* Chip-input in de proces-editor */
#kw-label-box:focus-within { border-color: #0C7C75; box-shadow: 0 0 0 3px rgba(12,124,117,0.12); }
#kw-label-typeahead::placeholder { color: #9A9789; }

/* ===== v1.8.332 — Archiveer-knop in de actiekolom =====
   Zelfde vorm als .btn-outline-primary bij Bewerken: transparant vlak,
   gekleurde rand, gekleurd icoon; bij hover vult hij zich.
   Alleen de kleur verschilt: oranjerood #C2410C i.p.v. teal.

   Twee dingen die eerdere pogingen lieten mislukken:
   1. Bootstrap 5 leest kleuren uit --bs-btn-*; die zetten we hier expliciet,
      anders wint de knop-basis alsnog van losse background/color-regels.
   2. Vaste hexwaarden i.p.v. var(--kw-hoog-fg): als die variabele in deze
      scope niet resolvet, verwerpt de browser de hele declaratie en zie je
      noch rand noch kleur. */
.btn.kw-btn-archive,
.kw-app .btn.kw-btn-archive,
.com-bpmndesigner-processes .btn.kw-btn-archive {
    --bs-btn-color: #C2410C;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #C2410C;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #C2410C;
    --bs-btn-hover-border-color: #C2410C;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #C2410C;
    --bs-btn-active-border-color: #C2410C;
    --bs-btn-focus-shadow-rgb: 194, 65, 12;

    color: #C2410C !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #C2410C !important;
    border-color: #C2410C !important;
    box-shadow: none !important;
}

.btn.kw-btn-archive:hover,
.kw-app .btn.kw-btn-archive:hover,
.com-bpmndesigner-processes .btn.kw-btn-archive:hover,
.btn.kw-btn-archive:focus,
.kw-app .btn.kw-btn-archive:focus,
.com-bpmndesigner-processes .btn.kw-btn-archive:focus {
    color: #FFFFFF !important;
    background: #C2410C !important;
    background-color: #C2410C !important;
    border-color: #C2410C !important;
}

/* Het icoon is een font-icon met een ::before; kleur erft, maar sommige
   Joomla-templates zetten er een eigen kleur op. */
.btn.kw-btn-archive .icon-archive,
.btn.kw-btn-archive [class^="icon-"],
.btn.kw-btn-archive [class*=" icon-"] { color: inherit !important; }

.btn.kw-btn-archive:focus-visible,
.kw-app .btn.kw-btn-archive:focus-visible {
    outline: 2px solid #C2410C;
    outline-offset: 1px;
}

/* v1.8.333 — Icoongrootte vastzetten. Font-iconen schalen mee met de
   font-size van hun omgeving; de preview-tabel erft een andere maat dan
   de lijst-tabel, waardoor hetzelfde icoon daar kleiner oogde. */
.btn.kw-btn-archive,
.kw-app .btn.kw-btn-archive { font-size: 0.875rem; line-height: 1.5; }
.btn.kw-btn-archive .icon-archive,
.btn.kw-btn-archive [class^="icon-"],
.btn.kw-btn-archive [class*=" icon-"] {
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
}

/* ============================================================================
   v1.8.339 — Geen hover-"sprong" op knoppen binnen tabellen en het
   preview-paneel.

   .kw-app .btn:hover zet transform: translateY(-1px). Op een tegel voelt dat
   goed (de hele kaart licht mee op), maar in een tabelrij en in de header van
   het procesdiagram springt zo'n icoonknop los van zijn rij — storend bij het
   scannen van een lijst. Hier dus uitgezet; de kleur-/achtergrondwissel blijft
   de hover-feedback verzorgen.

   Scope bewust smal: card-footer (tegelweergave) blijft ongemoeid.
   ============================================================================ */
.kw-app table .btn:hover,
.kw-app table .btn:focus,
.kw-app .bpmn-preview-list .btn:hover,
.kw-app .bpmn-preview-list .btn:focus,
.kw-app .card-header .btn:hover,
.kw-app .card-header .btn:focus {
    transform: none !important;
}
/* Rijen zelf mogen ook niet verschuiven (defensief tegen latere regels). */
.kw-app table tbody tr:hover,
.kw-app table tbody tr:hover td {
    transform: none !important;
}

/* ============================================================================
   v1.8.340 — Preview-modus: geen hover-effect op de twee grote kaarten.

   v1.8.339 haalde de sprong van de KNOPPEN weg, maar de beweging die overbleef
   zit op de kaarten zelf: ThemeHelper zet ".com-bpmndesigner-processes .card:
   hover { box-shadow: 0 8px 22px }" op elke .card, met een transition op
   box-shadow EN transform. Bedoeld voor de tegelweergave, maar de lijst-kaart
   en het diagrampaneel zijn ook .card — dus die lichtten mee op zodra de muis
   er ergens overheen ging. Bij een paneel van halve schermbreedte leest dat
   als "de pagina verspringt".

   Hier hard uitgezet voor beide preview-kaarten (en hun wrappers), inclusief
   de transition zodat er niets meer te animeren valt. De tegels behouden hun
   hover-lift: die vallen buiten deze selectors.
   ============================================================================ */
.kw-app .bpmn-preview-list,
.kw-app .bpmn-preview-list:hover,
.kw-app .bpmn-preview-pane .card,
.kw-app .bpmn-preview-pane .card:hover,
.kw-app #bpmn-preview-view > .d-flex > .card,
.kw-app #bpmn-preview-view > .d-flex > .card:hover,
.com-bpmndesigner-processes .bpmn-preview-pane .card,
.com-bpmndesigner-processes .bpmn-preview-pane .card:hover,
.com-bpmndesigner-processes #bpmn-preview-view .card,
.com-bpmndesigner-processes #bpmn-preview-view .card:hover {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
/* Ook geen sprong op knoppen binnen het diagrampaneel (buiten de card-header). */
.kw-app .bpmn-preview-pane .btn:hover,
.kw-app .bpmn-preview-pane .btn:focus,
.kw-app #bpmn-preview-view .btn:hover,
.kw-app #bpmn-preview-view .btn:focus {
    transform: none !important;
}

/* ============================================================================
   v1.8.342 — Ook de lijstweergave stil houden bij hover.

   Zelfde oorzaak als v1.8.340: ThemeHelper legt een hover-box-shadow op ELKE
   .card binnen .com-bpmndesigner-processes, met een transition op box-shadow
   en transform. Bedoeld voor de tegels. De lijstweergave zit eveneens in een
   .card, dus die lichtte mee op bij elke muisbeweging over de tabel.

   Alleen #bpmn-grid-view (de tegels) houdt het effect.
   ============================================================================ */
.kw-app #bpmn-list-view .card,
.kw-app #bpmn-list-view .card:hover,
.kw-app #bpmn-list-view .table,
.kw-app #bpmn-list-view .table:hover,
.com-bpmndesigner-processes #bpmn-list-view .card,
.com-bpmndesigner-processes #bpmn-list-view .card:hover {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
.kw-app #bpmn-list-view .btn:hover,
.kw-app #bpmn-list-view .btn:focus,
.kw-app #bpmn-list-view tbody tr:hover,
.kw-app #bpmn-list-view tbody tr:hover td {
    transform: none !important;
}