/* ============================================================================
/* 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('https://fonts.bunny.net/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@1,6..72,500&display=swap');

.kw-app {
    --kw-paper: #F4F2EC;
    --kw-surface: #FFFFFF;
    --kw-surface-alt: #FBFAF6;
    --kw-ink: #191B1F;
    --kw-ink-soft: #62656D;
    --kw-ink-faint: #9A9CA3;
    --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;

    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); }
.kw-btn-danger   { background: var(--kw-crit-bg); color: var(--kw-crit-fg); border-color: var(--kw-crit-dot); }
.kw-btn-danger:hover   { background: var(--kw-crit-dot); color: #fff; }
.kw-btn-sm       { padding: 6px 11px; font-size: 12.5px; }

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

.kw-app .card {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: 12px;
    box-shadow: none;
}
.kw-app .card-header {
    background: var(--kw-surface-alt);
    border-bottom: 1px solid var(--kw-line);
    font-weight: 600;
    color: var(--kw-ink);
    padding: 11px 16px;
    font-size: 14px;
}
.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;
}